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?
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.
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.
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.
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.
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:
::selection pseudo-element you can change the appearance of content that the user has selected. Currently the only elements that you can change are
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.
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.