Standardista

CSS3, JavaScript and HTML5 explained

Hack for CSS3 Supporting Browsers

Posted By on April 6, 2010

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.

selector:nth-of-type(1n)

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;
      text-shadow:  
           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 {
	line-height:1.4;
	float:left; 
	width: 188px;
}
.slides img {
        display:block;
}
/* for CSS3 supportive browsers only */
.slides li:nth-of-type(1n) {
	-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-moz-transform:rotate(-5deg);
	-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-webkit-transform:rotate(-5deg);
	box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	transform:rotate(-5deg);
	background:none repeat scroll 0 0 #FFFFFF;
	color:#333333;
	display:inline;
	float:left;
	margin:0 0 27px 0;
	padding:10px 10px 15px;
	text-align:center;
	text-decoration:none;
	width:auto;
}
.slides li:nth-of-type(even){
    -moz-transform:rotate(7deg);
	-webkit-transform:rotate(7deg);
	transform:rotate(7deg);
}
.slides li:nth-of-type(3n){
    -moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}

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.


About The Author

My name is Estelle Weyl. I am a consulting web developer, am writing some books with O'Reilly, run frontend workshop,s and speak about web development, performance, and other fun stuff all over the world. If you have any recommendations on topics for me to hit, please let me know via comments. If you want

Comments

15 Responses to “Hack for CSS3 Supporting Browsers”

  1. Paul Irish says:

    Hey Estelle,
    Love this new site.

    One note on this hack though, it’s only in FF3.5+ and doesn’t fly in FF3.0.
    I have it (without the n) in my post on browser css hacks. I just doublechecked the test page and looks like we don’t pick up FF3.0. Not a huge deal but wanted to keep you aware.

  2. Estelle Weyl says:

    Thanks Paul.

    Thanks for the link to your CSS filters page.

    The :nth-of-type(1) is great for the body:nth-of-type hack, but not for any other element selector (though ID selector is fine) since it only hits the first element of that type. The (1n) or simply (n) hits every one of those elements, so should be used if there is ever going to be more of 1 of that type (like <li>’s in a list). Using simply (1) only hits the first <li> in a list. You’re totally right about F3.0… I edited to read 3.5+. Thanks.

    When Chrome first came out I blogged about it too (http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/). Now i prefer using the nth-of-type(n) directly on the element since the specificity is lower. Adding the pseudo-class to the body adds an element to the specificity weight.

    Just realized… i need to add CSS for the comments section on this blog.

    Cheers ;)

  3. jason says:

    Is there a demo page with the Polaroids?

    • Estelle Weyl says:

      I’ll try to get an example up tomorrow. The image you see above is from a prototype design i did yesterday, and is only on an intranet. I need to get permission.

  4. I’d add some more info to this post:

    1) How does the :nth-of-type(N) selector works. Why does it work, and how it could fail.
    2) Big note saying that hacks are a LAST resource only.
    3) Make a better example. In the current one, there’s a million attributes that can easily be added to CSS3 crippled browsers without affecting usability.
    4) More information on the pseudo-selector used.

    There’s just a lot of blanks that could be filled to aid people. Specially when they’re new to CSS3.

    Neat idea, nonetheless, for those rare ocassions where you need older browsers to ignore properties that would otherwise damage the end result.

    • Estelle Weyl says:

      Absolutely fabulous points, Enrique.

      To explain the nth-of-type, or any ‘nth’ pseudoclass, requires some explaining.

      The :nth () pseudo classes enables matching of elements based on their position within their parent. These selectors take an argument which enables the pinpointing of elements you want to target for styling. The argument can be a keyword, number or a number expression.

      The two keywords include odd and even, which cause the selector to target every other element of that type, starting with the first element for odd or the second element for even.

      For example, a common use of the ‘nth’ pseudoclasses with the odd and even keyterms is to stripe a table. Data tables, especially wide and/or tall ones can be hard to read. Simply telling every even row to have a different background color can make it easier to read:

      tr { background-color: #ffffff;}
      tr:nth-of-type(even) {background-color: #dedede;}

      With this pseudo class, the striping of the table is dynamically set by the CSS. There is no need to add classes to the <tr> directly like we used to do.

      If you only one one element targeted, based on it’s position, include an integer as the parameter for the ‘nth()’. Contining with the above example, we can write:

      tr:nth-of-type(9) {background-color: #ff0000;}

      which will make the 9th row red. This call would have to come AFTER the tr:nth-of-type(even), as both selectors have the same specificity (0-1-1), so the one that is last in the cascade takes precedence.

      Lastly, more confusingly, and definitely more powerfully, is the face that these selectors support number expressions. Number expressions are written as (xn+y), where x is the frequency and y is the offset. Fore example, instead of using the key term even, we could have used (2n), and for odd, (2n-1). Explained, (2n) means every other element, starting with 2*1, or 2, the 2nd element, so 2, 4, 6, 8, 10, etc. (2n-1) means every other element, starting with one less than the 2nd element, or odd, so 1, 3, 5, 7 ,9 etc.. Other examples include (4n+2), which would target every 4th elements, starting with the 2nd, so 2, 6, 10, 14, etc. The + or – y only needs to be included if there is an offset. If you want to target every 5th element starting with the 5th elements, you could simply write (5n).

      —–

      In terms of the example shown, the idea is that basically, i only want the browsers that supported the rotation and shadow to get all of the effects that make the polaroid look. I didn’t want to add useless padding if the other elements weren’t going to be there. That’s the purpose of actually showing that detailed example.

      Hope that helps.

  5. Billy Doyle says:

    Thanks so much for passing this along, it’ll be extremely helpful when designing websites for the foreseeable future. Also, it excludes IE, which I hate with a passion! :)

    Love the new blog!
    Billy

  6. [...] navigateurs modernes et de modifier les styles des éléments en conséquence. Dans l’article “Hack for CSS3 supporting browsers”, l’auteur utilise un sélecteur E:nth-of-type(1n) bien intéressant mais un peu complexe en [...]

  7. [...] les navigateurs modernes et de modifier les styles des éléments en conséquence. Dans l'article "Hack for CSS3 supporting browsers", l'auteur utilise un sélecteur E:nth-of-type(1n) bien intéressant mais un peu complexe en [...]

  8. Rafal says:

    You can create drop shadows in IE using effect filters.

  9. Estelle Weyl says:

    Rafal-

    I know we can do drop shadows with IE, but I still don’t know how to make them not look awful. Any good links?

  10. Theo says:

    Thank you for this article ! I made a site 3 monts ago where i use white text on a white background and text shadow, for IE i just use conditional comments to change the text color, i still have a problem with ff3 as it does not support text shadow. http://alturl.com/bi8j
    And yes effect filters for shadows ie IE do look awful.

  11. Shwartz says:

    To Jason: I made while ago polaroids on my test website:

    http://bit.ly/9BkCyx

    I like css3, can do amazing stuff with small effort. Saddly IE users won’t be able to see all this but .. who cares :)

  12. [...] Hack for CSS3 Supporting Browsers (Standardista | Apr 6, 2010) [...]

  13. [...] hack. Thx @miketaylr for the tip.Update 2010.04.07 – Clarification on :nth-of-type(n) from Estelle WeylUpdate 2011.04.11 – the new / hack from here and here. It’s invalid and must go at the [...]