IE9 is released meaning a new wave of CSS3 support

IE9 is released meaning a new wave of CSS3 support
4 May 2011 | | Creative Design, Internet, Search Engine Optimisation

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


Previous Post:
Next Post:

Back to all news

Reviews2024
Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents