Supposedly, 2010 is going to be the year that web developers (and hopefully designers) are going to embrace the power of HTML 5 & CSS 3 and obviously, in order for any of these cool new technologies to actually be visible to the user, our browsers are going to need to implement the rendering of them. As we all know, Firefox is ahead of the game when it comes to implementing new features – whether they’ve been approved by the W3C or not, those wonderful guys over at Mozilla tend to write the code if they like a feature. Safari/Chrome aren’t far behind either (WebKit being my favourite of the rendering engines) it’s only one browser that… do I even need to finish this sentence??
So last night Firefox 3.6 was released and as a diligent web developer, I headed over to firefox.com, downloaded it and added it to my ever-growing list of “browsers I need to keep to test my sites on.” This time, however, I read the FULL feature list rather than just skim reading the exciting stuff and this has prompted me to analyse the latest few versions, the upcoming “cool stuff” in HTML 5 and CSS 3 and draw comparisons, once again, between the different web browsers.
HTML 5 Support
Firefox 3.5 has added support for:
- The <audio> and <video> tags
- Drag and Drop API – dragging and dropping elements within and between sites
- Offline resources
Some minor updates were added in 3.6, most notably:
- <input type=”file” /> now supports multiple file selections
- <video> tags now support the poster attribute, allowing the web master to display a loading graphic
New CSS Properties / Features
Firefox 3.5 added:
- Support for downloadable fonts, by using the @font-face @rule, a webmaster can provide a downloadable font file, which installs itself to the client machine
- A new unit of measurement (the ch) has been added. 1ch is equal to the width of the zero (“0”) character of the currently used font face
- -moz-opacity has been dropped in favour of opacity
- text-shadow is now added – watch out for drop shadows all over the text soon!
- -moz-box-shadow has also been added – drop shadows without graphics?!
- :nth-child pseudo selectors
Possibly the largest and most important updates to the CSS rendering engine since FFX 3.6 are the addition of various new background properties:
- -moz-linear-gradient and -moz-radial-gradient properties have been added for background.
- Multiple background images means that we can now layer different background images to create a background
- -moz-background-size allows us to scale background images
…not to rely on any of these properties; as I said at the start of this post, these new properties and features are supported by Firefox 3.5 and 3.6 respectively, not by all browsers. Over the coming days I’ll be showing examples of how to use (and NOT ABUSE) the above new properties, with backwards compatibility in mind.
If you don’t have Firefox 3.6 installed, go get it now!