IE9 is released meaning a new wave of CSS3 support
IE9 has finally been released much to the delight of designers and developers everywhere. Early figures show that the market share of IE9 is growing rapidly and is far surpassing earlier versions including the dreaded IE6, for which numbers have shrunk dramatically. IE9 is the most compatible version of Internet Explorer for years and includes a ton of new CSS3 features, although it still has some major omissions meaning that the full integration of CSS3 is still a way off yet.
So what can now be used in design and development of websites?
1. pseudo-classes
With the integration of a large number of pseudo-classes such as :nth-child(n), :root, :first-of-type, :only-child, :first-child, :last-child, :target, :enabled, :nth-last-of-type(n), :nth-of-type(n), :first-of-type, :last-of-type, :only-of-type, :empty, :disabled, :checked and :indeterminate; you now have a lot more control styling specific selections. Most of the pseudo-classes iv listed are also supported by Firefox, Opera, Chrome and Safari meaning that there is much better level of cross browser compatibility.
2. border-radius
Before CSS3 you would have to create the corners using imagery, but you can now use the border-radius: style command to add smooth rounded edges. This has become increasingly popular of the last year or so, but until now no version of IE has understood this function resulting is square border edges for all IE users.
3. box-shadow
As with the border-radius, prior to CSS3 you would have had to create the effect using a transparent .png using Photoshop and then setting it as a background. But now you can add the box-shadow: style to your style sheet and create the same effect.
4. multiple backgrounds
This is a well used feature of CSS3, the ability to set multiple backgrounds on the same element. Multiple backgrounds give the designer/developer a lot of flexibility without draining the visitors bandwidth for example: You could set a repeating border image down one side of the element with a watermark background in the bottom corner, without using a large image that fills the entire space.
5. color support
In prior versions IE would only support RGB (Red, Green, Blue), with IE9 it now supports RGBA (Red, Green, Blue, Alpha). This means that it now supports transparency (Alpha) with color for example: color: rgba(0,0,221,0.5)
6. ::selection pseudo-element
Using the ::selection pseudo-element you can change the appearance of content that the user has selected. Currently the only elements that you can change are color and background-color, but this gives you more control over what the user sees. For example you select the background colour of any text and imagery that is selected to appear green. Although IE9 supports this pseudo-element, firefox doesnt, but you can use the -moz- command to implement it.
So what about older version of IE and other browsers that dont support these items?
Obviously not everyone is running IE9, the latest versions of Firefox, Safari or Opera; and as with any new technology, it takes a while for every browser to implement it. For now there are the -moz- and -webkit- functions to allow CSS3 commands on some versions of browsers that don’t support the features. For those browsers where this doesn’t work, their users will see the un-styled version with square corners, the last image listed on multiple backgrounds, and items where the last-child, first-child etc are styled the same as the others.
It will be a long time before all browsers support the wide range of CSS3 functions and features, but until then we can make the most of what is available to the majority of browsers.
More posts from our team
Five Star
Reviewed Marketing
"Would definitely recommend to a friend"
"I cannot recommend Dental Design highly enough"
"Really great company to deal with"
"Very professional, efficient & adaptive to new situations"
"I cannot recommend them highly enough"
"Has been invaluable and gone out of her way to help us"
"We love the look of our practice website. Very professional!"
"Dental Design stood out both in their knowledge of the industry and their professionalism"
"The team and package offered at dental design was unrivalled"
"absolutely fantastic and are always on hand to help"
"Dental Design are fantastic to work with"
"always met with a swift and professional response"
