Hack for CSS3 Supporting Browsers

Implementing CSS3 features in your CSS file can be complex. You have to make sure that the CSS you’re feeding to FF3.5+, Chrome, Opera and Safari are not being read by FF2, IE6, IE7 and IE8. There’s a simple hack to make sure that your CSS3 is fed only to browsers that support it… it’s forward compliant and it’s valid markup.


To target all browsers that support CSS3, and hide from the IEs, simply add :nth-of-type(1n) to your selector.

  h3:nth-of-type(1n)  {
      color: #FFFFFF;
      background-color: #FFFFFF;
           3px 3px 3px rgba(0, 0, 0, 0.4);

In the above example, we’ll end up with white text on a white background, with the letters being defined by the drop shadow. You definitely don’t want to feed that to browsers that don’t support text-shadow: white text on white backgroud *IS* illegible.

:nth-of-type(1n) basically means “every”. So, it’s the same as not including it in terms of what selectors will be matched. Do note that you are adding a pseudo-class, so you are adding specificity. This pseudo-class is not understood by browsers that don’t support CSS3 selectors which is the same as those that don’t understand CSS3 properties and CSS3 property values.

For example, I have a row of images with captions going across a page. To make it more interesting, I made the pictures look like Polaroids. It looks fine plain, but why not add some fun CSS3.

/* understood by all browser */
.slides li {
	width: 188px;
.slides img {
/* for CSS3 supportive browsers only */
.slides li:nth-of-type(1n) {
	-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	background:none repeat scroll 0 0 #FFFFFF;
	margin:0 0 27px 0;
	padding:10px 10px 15px;
.slides li:nth-of-type(even){
.slides li:nth-of-type(3n){

The images look fine in IE, but look cool in FF3.6

Do make sure that the new CSS3 property is generally supported before using this hack. This is a general filter for generally supported CSS3. It works for multiple background images, text-shadow, border radius, and other well supported CSS3 properties and values. Don’t use this for CSS3 transitions, columns and animations until those are better supported in modern browsers. I have grids of browser support for all sorts of CSS3 properties, so take a look at those before relying on this filter.

IE8: What you need to know

IE8 CSS Support and Rendering Mode, IE8 debugging, etc.

IE8 and CSS

IE8 came out today. I appended the CSS selector browser support blog post to include IE8 CSS Selector support and IE7 compliance mode CSS Selector support. Most notable is that IE8 Supports all of CSS2.1 and passes the Acid 2 test.

IE8 compliance mode / preventing IE7 rendering in the IE8 browser

Important to know is that IE8 has a button that allows users to render your page in IE7. If that button is clicked enough, your page will always render in IE7 for everyone (not just those who clicked the button). So, do you have to test your pages in IE8 in IE7 mode? No, you don’t. To ensure that your page is not rendered in IE7 mode inside the IE8 browser add the following meta tag to your pages:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Alternatively, if you want your pages to render in IE7 mode you can write: <meta http-equiv="X-UA-Compatible" content="IE=7" />. The issue with this is that IE7 rendering in IE8 is not identical to plain IE7. So, I recommend against using this meta tag.

So, to ensure that you DON’T have to test in IE7, IE8 and IE8 in IE7 mode, add the code above.

To learn more about what IE8 supports, check out IE8 CSS Selector support.

IE8 bugs

IE8 JavaScript Bug: Apparently IE8 doesn’t much care for prototype and prototip. I think it’s an issue with className that causes IE8 to choke. In the meantime, if you are using Ruby on Rails, then you’re probably using prototype.js. And, if you’re using prototype.js, then IE8 chokes, so you have to use the meta tag. And, if you use the
<meta http-equiv="X-UA-Compatible" content="IE=7" /> tag, make sure it’s the FIRST thing on your page, because IE8 suck ass, just like IE7 and IE6.

If you’re more of an ASP.net fan (which I am NOT!), there is another issue with menus not showing. Mark Hidreth explains it in his blog., but in short, the solution is to add a z-index of greater than zero to <asp:Menu>. Thanks to Attiq Jafar for alerting me to this bug and solution.

IE8 Disappearing Page Bug: If you put two adjacent nodes, both positioned absolutely, and set only one of x- or y- positioning, you may get a blank page.

Differences between IE7 compatibility mode and IE8

These are just a few differences that I have found so far. Please do NOT consider this an exhaustive list

  1. default padding on <p> is not equal
  2. table { border-collapse: collapse;} is NOT rendered the same. If dashed, IE8 is properly dotted or dashed, whereas IE7 overlays the lines and it looks ugly, and otherwise does not collapse
  3. border bottoms on an inline element will not display in IE7 if the border is the lowest part of the page. The page will not grow to include the border, unless the bordered element is block. IE8 will grow.
  4. border: hidden; IE7 does NOT understand the value of hidden for the border property.
  5. border-style: outset The coloring is different for IE7 than IE8. IE7 is darker on the bottom/right. IE8 has the darker color on the top/left. Groove and
  6. RGB – IE7 displays RGB mixed number types: The spec states that values for RGB should be three integers or three percentages, but not a combo of the two. (IE7 and IE6 display mixed types. IE8 and standards compliant browsers dow not render colors with mixed value types.
  7. IE8 has support for content:, counter-increment: and counter-reset: IE7 doesn’t!
  8. Empty declarations overide in IE7, but not 8: IE7 will not show a property if there is a malformed declaration after the element. p { color:green; color: } – IE8 will show green. IE7 wont.
  9. Identifiers starting with a digit or non-letter character followed by a digit: Identifiers starting with dash-number choke IE7: If there is a series of classes or ids listed, including ones that start with a dash followed my an integer, IE7 will choke, and ignore all the selectors in the series. For example,
    .-3myClass, .blue {color: blue;}
    #-3myClass, .blue {color: blue;}
    .3myClass, .blue {color: blue;}
    #3myClass, .blue {color: blue;}

    The element with a class of blue will NOT inherit the blue from either of these declarations

  10. @import is not correctly supported in IE7: @import “support/import-coloroveride.css”; (see the one before it for comparison)
  11. border-width: thin appears to be 1px wide in IE8 and 2px wide in IE7
  12. clearing: if you clear an element in IE7 after a floated element, and the element has a margin top, that will be the space between it and the floated element. In IE8, the margin top will be the space between it and the last non-floated element.
  13. box model: Some people believe that IE got the box model right, and the w3c got the box model wrong. IE8 gets the box model right according to the w3c.

IE8 CSS Hack

This IE8 CSS hack uses the star hack to target IE7 and lower, but you can use any other of the many IE hacks to target older IE browseres.

 p.myclass {    
     color: green;    
     *color: red; 
body:last-child p.myclass {
     color: blue; 

IE8 Developer Toolbar (or Firebug for IE8)

IE8 comes with a developer toolbar. The developer toolbar is definitely more robust than what came with IE7. Similar to Firebug, you highlight an element, and can edit CSS on the fly, but the mechanism is less robust. The CSS module informs you of inherited CSS and current values (in reverse order from Firebug). The CSS panel has check boxes next to each css property so you can turn on and off that property, and you can indeed edit the value or property by clicking on the value or property. You can’t use the up/down arrows like in Firebug, and unlike Firebug, the change isn’t instant: you have to click out of the property to see the change. However, it is definitely an improvement on the previous dev toolbar.

I should probably write a tutorial on this developer toolbar, but I really don’t care enough about this browser to put the effort in to it…. but maybe.