3

I'm writing some Modernizr extensions to detect browser support for things such as :first-child, :last-child in CSS. In order to do so I'm applying a style and then checking to see if teh element has that style.

What's the most-reliable CSS property to use as my test style?

e.g. color is a bad choice as if you enter in #123abc the browser may convert it to rgb(#,#,#)

So I'm looking for a property that

  • Is supported across browsers
  • Won't be mutated to a different format by the browser

At the moment I'm using width, which is probably OK, but thought I'd check here anyway.

wheresrhys
  • 22,558
  • 19
  • 94
  • 162
  • I'm totally in favour of feature detection over browser detection. But as much as it pains me to say it, `:first-child` and `:last-child` support has only ever been an issue for IE <=v8, and that's not going to change. So your goal could be achieved with an IE-detection script, for which there are several well-defined solutions. I do agree it would be nicer to do it with feature detection though, but I thought I should point that out. :) – Spudley Apr 18 '11 at 08:57
  • Maybe on the desktop this is true, but I'm not sure about mobile (I actually have no idea whether any mobile browsers don't support first/last-child, but this in itself is a good reason to test for it). I'll also be writing test for nth-child and a few other selectors which are more of an unknown generally. – wheresrhys Apr 18 '11 at 09:29

1 Answers1

1

I just wrote this http://jsfiddle.net/laustdeleuran/3rEVe/ yesterday, which does exactly what you're talking about - it feature detects support for the :last-child pseudo selector. I'm also using width as my style to check on, and it seems to be working just fine.

I've so far tested it with succes in IE6-8 on Windows XP; IE9, Chrome 12, Safari 5, FireFox 4 and Opera 11 on Windows 7 and Opera 11, FireFox 4, Safari 5 and Chrome 12 on Mac.

Feel free to use it as it if you want to.

Laust Deleuran
  • 492
  • 1
  • 5
  • 19