HTML5 and CSS3 features and browser compatibility
HTML5 is the latest major milestone in HTML, XHTML, and the HTML DOM. It represents an enormous advance for modern web applications and promises to increase the capabilities of browsers and Web applications for years to come. The previous version of HTML – 4.01 – was released in 1999 and a lot has changed since then on the web. Therefor HTML5 has been brought to live in order to meet the demand of the users. When HTML5 is supported by a browser it will go hand in hand with CSS3. One fact is that it will improve the interaction with the user. This article will go into the features of HTML5 as well as CSS3 and the level of compatibility of the current browsers.
So, what is so hot about HTML 5?
HTML5 contains a lot of new features, but the main (important) features are:
- New graphics libraries: HTML5 introduces the Canvas and WebGL libraries which allow for more feature-rich websites. Canvas can be used to generate vector-based shapes and lines and the WebGL library will big addition as it will open up a whole new generation games based solely on HTML5.
- Easier multimedia content: Including audio or video content on a site has been a pain till now. Usually a bunch of and tags are needed along with some flash to get things to work. HTML5 introduces the and tags, making it simpler than ever to include multimedia content on your site. It is actually possible to run a video which will pause as you switch browser tabs. When you return it will resume playing where you left off.
- Geolocation: People are accessing the internet less and less from a fixed location (like a desktop pc at home). Today, people surf the web from any location using handheld mobile devices such as smart-phones and tablets being connected to wireless internet. Using the Geolocation feature in HTML5 it is possible to personalize content the depending of the location of the user.
- Drag & Drop: This allows you to drag content from your browser directly onto your computer and from your computer to the browser. This makes the interface between the browser and desktop very easy. For example you can drag and drop pictures into the browser and to store or share these.
- Offline storage: HTML5 can detect whether you’re offline or online. This is a big advantage for example when you are traveling, and are temporarily disconnected (for example traveling by train through a tunnel). In this case data can be stored locally until you’re online again and the data can be synchronized to the web.
- Web Notifications: These are small pop-ups that appear outside of the browser windows itself, allowing users to interact with a site even if they are not currently looking at it. These notifications are perfect for by example mail alerts and social networks updates. Combined with Along with Drag & Drop this feature really blurs the line between offline and online applications.
What about CSS3?
CSS3 provides highly dynamic and decorative features compared to the previous versions. These are the following:
- background (multiple, clipping, size)
- border(rounded corners, imaging, shadow)
- text (overflow, shadow, stroke, direct web fonts)
- transparency, opacity, gradients, RGBA/HSL/HSLA colour
- top-right-bottom-left navigation, attribute selector, and overflows-x and y
As CSS takes care of the representation and the HTML the content (when representation/content separation is implemented the right way). The mentioned features can be used to load the content faster and more accurate. For example: box-shadow, with the previous version of CSS there is no option to give a shadow to a div or span any other attribute. The workaround was to put the shadow image at the bottom of the div to give the shadow effect, extending the page load time. This time will increase if a web site loading lots of products in a single page having such an image. The same goes for the rounded corners (instead of a using a background to make a div rounded cornered). Applying shadow text was not possible in the previous versions but it is now.
Seeing is believing
I hear you thinking ‘nice those mentioned features, now show me some examples!’. At html5rocks.com you will find the new features of HTML5 as well as CSS3. On this site you can open a presentation showing you the new features, which I recommend you to look at first as it gives you an overview of the features each with a small code snippet. The site provides you also a playground for coding. Per feature it contains code examples which you can alter and run. It also has running applications called HTML Studio which has programs like ‘Drag n Drop Photos’ which will allow you to drop photos from your desktop into the browser. Finally if the studio is not clear enough there even a tutorial section will go in-depth on each HTML feature.
More interesting resources on CSS3 are:
Introduction to CSS3
11 Classic CSS techniques made simple with CSS3
CSS3 Cheat Sheet (PDF, contains all listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C).
This looks promising… are there any downsides ?
As HTML5 is a big step ahead bringing along a big set of new features improving the interaction with the user and increases application feature possibilities. Unfortunately the majority of current browsers do not fully support HTML5 yet. Most of the features are supported, however Internet Explorer 6 & 7 support almost none, and 8 & 9 only half of these.
As HTML5 and CSS3 do exist for a while and the bigger part of its features are supported by the current mainstream browsers, Internet Explorer supports at most half of these. My advice regarding to the web application you’re developing using HTML5/CSS3 would be: only use its specific features when you are sure that the browsers that have to be supported support these. HTML5 comes with very cool new features which extend possibilities. It will make the life of a developer easier (less cluttering) & challenging (using the new features). Discover & enjoy