IE9 Is Here! 7 Cross-Browser CSS Tricks You Can Now Use

Last month, the newest version of Microsoft’s Internet Explorer browser, IE9, hit the streets. Market share for IE9 is already growing rapidly at the expense of older versions of IE, including the much-maligned IE6.

While its CSS3 support still has some major omissions, IE9 has much better CSS3 support than previous versions of IE. This means that you, as a web designer or developer, can use some of the exciting and useful features of CSS3, safe in the knowledge that even IE users can now see the results! (Well, if they’re running IE9, of course.)

In this article we’ll explore some of these new CSS features that are, at last, supported by Internet Explorer, and show what these features can do for you as a web designer or coder.

Of course, most Internet Explorer users are still running earlier versions of IE. There’s still hope though, even for these older browsers! We’ll look at solutions and workarounds for older IE versions at the end of the article.

New pseudo-classes

IE9 now supports a ton of new CSS3 pseudo-classes that make it much easier to select elements in the page for styling:

Pseudo-class	What it selects
:root	The root element in the document (e.g. the html element in an HTML page).
:nth-child(n)	The element that is the nth child of its parent.
:nth-last-child(n)	Like :nth-child(n), but counts from the end of the list instead of the start.
:nth-of-type(n)	The element that is the nth sibling of its type. For example, img:nth-of-type(2) selects the second img element in the list of child elements.
:nth-last-of-type(n)	Like :nth-of-type(n), but counts from the end of the list instead of the start.
:last-child	The element that is the last child of its parent.
:first-of-type	The element that is the first child of its type in the list of child elements.
:last-of-type	The element that is the last child of its type in the list of child elements.
:only-child	An element with no siblings.
:only-of-type	An element with no siblings of the same element type.
:empty	An element that has no child elements or text nodes.
:target	The element in the page that was targeted by a hash (#) identifier in the URL (if any).
:not(selector)	An element or elements that do not match selector.
:enabled	An enabled form control.
:disabled	A disabled form control.
:checked	A checked checkbox or radio button.
:indeterminate	A checkbox or radio button that is neither checked nor unchecked.

Most of these pseudo-classes are also supported by Firefox, Chrome, Safari and Opera, giving you excellent cross-browser support when it comes to selecting elements precisely.

Here are some ways to use these new pseudo-classes:

/* Make the second paragraph in the page red */
p:nth-of-type(2) { color: red }

/* Only put a border around divs that contain something */
div:not(:empty) { border: 1px solid #666; }

/* Highlight the targeted element in the page with a green background */
:target { background: #6f6; }

Rounded corners with border-radius

border-radius has become a very popular property in recent years, as it allows you to create boxes with smooth rounded corners without having to resort to images. Up to now, IE hasn’t understood border-radius, resulting in razor-sharp straight corners for all IE users.

All that’s set to change, though. IE9 has full support for border-radius, so you can happily add rounded corners to your page elements and have them look the same across all modern browsers.

Here’s an example of a box with rounded corners using border-radius:

<div style="
  border-radius: 20px;
  height: 80px;
  text-align: center;
  font-size: 200%;
  padding: 30px 20px 20px 20px;
  background-color: #ccf;">
  Rounded corners with border-radius
</div>

Here’s the result:

Drop shadows with box-shadow

Another popular CSS3 feature is box-shadow, which lets you create drop shadows around elements. IE9 now supports box-shadow too. Here’s an example:

<div style="
  box-shadow: 5px 5px 5px rgba(0,0,0,.75);
  height: 40px;
  text-align: center;
  font-size: 200%;
  padding: 30px 20px 20px 20px;
  background-color: #ccf;">
  Drop shadow with box-shadow
</div>

Here’s the drop shadow in action:

Sadly, IE9 still doesn’t support text-shadow. Maybe we’ll see it in IE10…!

2D transforms

With version 9, IE brings support for CSS3 2D transforms, which let you scale, rotate and skew elements in the page. You need to use a vendor-specific prefix with these properties, much like you do with other browsers, since they’re still draft standards:

CSS3 standard property	IE9 equivalent
transform	-ms-transform
transform-origin	-ms-transform-origin

Here’s an example of some rotated text that works in most modern browsers, including IE9:

<div style="
  font-size: 100px;
  width: 120px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);">Hi</div>

Here it is in action:

Multiple background images

One commonly-used CSS3 feature is multiple background images on an element. IE9 now has full support for multiple backgrounds.

Multiple background images give you a lot of flexibility without using a lot of bandwidth. For example, you can have a repeating background image that fills your whole div or page, with another non-repeating background at a single point in the page:

<div style="
  height: 50px;
  text-align: center;
  font-size: 200%;
  padding: 100px;
  background: url(shrapnel.jpg) no-repeat bottom right,
              url(metal-bar.jpg) repeat-y">
  Multiple backgrounds
</div>

Here’s how it looks:

When specifying multiple background images, the first image you specify appears on the top “layer”, the second image appears underneath the first, and so on.

Multiple background images also let you do cool things like organically random backgrounds that don’t look like they’re repeating. Lovely stuff!

Improved colour value support

As I mentioned earlier, IE9 now supports RGBA colours. RGBA stands for red, green, blue, and alpha (opacity). This means that you can specify semitransparent foreground and background colours, letting the underlying page content show through. The syntax is:


rgba(r,g,b,a)


…where r, g, and b are the red, green and blue components of the colour (each value is in the range 0 to 255). The alpha value, a, can be in the range 0 (completely transparent) to 1 (completely opaque).

Here’s an example using a semitransparent text colour:

<div style="
  background: url(shrapnel.jpg) no-repeat 50% 50%;
  color: rgba(0, 0, 255, .2);
  height: 60px;
  text-align: center;
  font-size: 200%;
  padding: 60px; ">
  Semitransparent blue text colour
</div>

And here’s how it looks:

You can use a similar trick to create semitransparent backgrounds:

<div style="
  height: 100px;
  padding: 50px;
  margin: 30px 0 150px 0;
  background: url(shrapnel.jpg) no-repeat bottom right;">
  <div style="
    height: 100px;
    text-align: center;
    font-size: 200%;
    padding: 80px 50px 10px 50px;
    background-color: rgba(255,128,128,.75)">
    Semitransparent background
  </div>
</div>

Here’s how this looks:

As well as RGBA colour support, IE9 now also supports HSL (hue, saturation, lightness) and HSLA (hue, saturation, lightness, alpha) colour formats.

The ::selection pseudo-element

IE9 also adds support for the ::selection pseudo-element. This selects all text that the user has selected in the page, whether static text or text within an editable field. For example, the following rule turns all selected text red with a yellow background:

::selection { color: red; background-color: yellow; }

Firefox doesn’t currently support ::selection, but you can use ::-moz-selection instead:

::selection { color: red; background-color: yellow; }
::-moz-selection { color: red; background-color: yellow; }

At the time of writing, the only properties you can manipulate with ::selection are color and background-color.

What about older versions of IE?

Of course, not all IE users are running IE9 at this point — far from it. The good news is that you can still use some of these techniques with IE6, 7 and 8, although you have to resort to proprietary Microsoft CSS to do so. Smashing Magazine has a good article on how to make border-radius, box-shadow, multiple backgrounds and RGBA colours work in older versions of IE, as well as quite a few other IE-specific CSS tricks.

Another useful tool is CSS3 PIE, an IE-specific file that you attach to your CSS to enable IE6/7/8 support for border-radius, box-shadow, border-image, multiple background images, and background gradients.

Further reading

Here’s Microsoft’s official list of supported CSS features across different versions of Internet Explorer, including IE9.

While IE may lag behind in some areas of CSS support, it’s great to see that it’s starting to catch up as of version 9. What’s more, IE10 is not far away, so things should improve even further on the IE front!

I hope you enjoyed reading this article and found it helpful. Happy CSS coding. 🙂