CSS, JavaScript and XHTML Explained

Quirks, random thoughts and funky finds discovered in day-to-day coding.

 

IE8 CSS Support: Internet Explorer 8 and CSS 3 March 9, 2008

Filed under: Web Development — Estelle @ 3:46 pm

IE8 Beta has been released. And, no, it still doesn’t support CSS3 selecteors.

Below are the various CSS selectors, including CSS3 selectors, and current browser support. Green / √ means current support. Orange / Δ means that the browsers have some support for the selector. Red / Χ means that the browser is non-compliant. Non-compliant selectors can be used and a valid way to target individual browsers.

First, "YAY", IE8 supports the :hover pseudo-class on all elements. Now we can make drop down menus without javascript… or, at least, soon we will be able to!

    Browsers
Pattern Meaning IE6 IE7 IE8 FF Op
9		 Sf Op FF NS
E:active
E:hover
E:focus 		Dynamic pseudo-classes
Matches E during certain user actions. 		Δ Δ √ √ √ √ √ √ √
Δ Δ √ √ √ √ √ √ √
Χ Χ √ √ √ √ √ √ √
E:before
E:after		 Static pseudo-classes
See generated content		 Χ Χ Δ 3 √ √ √ √ √ √
Χ Χ Δ 3 √ √ √ √ √ √

There hasn’t been much improvement in the other selectors:

  iPhn Windows XP Mac OSX
Selector Saf 3.0 FF 2.0 FF 1.5 Op
9.0		 Saf
3.0		 IE8 IE7 IE6 Saf 1.3 Op FF 2 NS 7.1
* √ √ √ √ √ √ √ √ √ √ √ √
E √ √ √ √ √ √ √ √ √ √ √ √
.class √ √ √ √ √ √ √ Δ √ √ √ √
#id √ √ √ √ √ √ √ √ √ √ √ √
E F √ √ √ √ √ 1. √ √ √ √ √ √
E > F √ √ √ √ √ √ √ Χ √ √ √ √
E + F √ √ √ √ √ √ √ Χ √ √ √ √
E[attr] √ √ √ √ √ Δ Δ Χ √ √ √ Δ
E[attr=val] Δ Δ Δ Δ Δ √ √ Χ Δ Δ Δ Δ
E[attr~=val] Δ Δ Δ √ Δ Δ Δ Χ Δ √ Δ Δ
E[attr|=val] Δ Δ Δ √ Δ Δ Δ Χ Δ √ Δ Δ
:first-child Δ Δ Δ Δ Δ Δ Δ Χ Δ Δ Δ √
:link √ √ √ Χ √ √ √ √ √ √ √ √
:visited √ √ √ Χ √ √ √ √ √ √ √ √
:lang() √ √ √ Δ √ Δ Χ Χ Χ Δ √ √
:before √ √ √ √ √ √ Χ Χ √ √ √ Χ
::before √ √ √ √ √ Χ Χ Χ √ √ √ Χ
:after √ √ √ √ √ √ Χ Χ √ √ √ Χ
::after √ √ √ √ √ Χ Χ Χ √ √ √ Χ
:first-letter √ √ √ √ √ Χ √ √ √ √ √ Χ
::first-letter √ √ √ √ √ Χ Χ √ √ √ √ Χ
:first-line √ √ √ √ √ Χ √ √ √ √ √ Χ
::first-line √ √ √ √ √ Χ Χ √ √ √ √ Χ
The following selectors are new to CSS3 (above were in previous versions)
E[attr^=val] Δ Δ Δ Χ Δ Χ 2 Χ Χ Δ Χ Δ Δ
E[attr$=val] Δ Δ Δ Χ Δ Χ 2 Χ Χ Δ Χ Δ Δ
E[attr*=val] Δ Δ Δ √ Δ Χ 2 Χ Χ Δ √ Δ Δ
E ~ F √ √ √ √ √ √ √ Χ Χ √ √ Χ
:root √ √ √ Χ √ Χ Χ Χ √ Χ √ √
:last-child Χ Δ Δ Χ Χ Χ Χ Χ Χ Χ Δ Δ
:only-child Χ Δ Δ Χ Χ Χ Χ Χ Χ Χ Δ Χ
:nth-child() Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:nth-last-child() Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:first-of-type Δ Χ Χ Χ Δ Χ Χ Χ Χ Χ Χ Χ
:last-of-type Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:only-of-type Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:nth-of-type() Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:nth-last-of-type() Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
:empty Χ Δ Δ Χ Χ Χ Χ Χ Χ Χ Δ Δ
:not() √ √ √ Χ √ Χ Χ Χ √ Χ √ √
:target √ √ √ Χ √ Χ Χ Χ √ Χ √ √
:enabled √ √ √ √ √ Χ Χ Χ Χ √ √ Χ
:disabled √ √ √ √ √ Χ Χ Χ Χ √ √ Χ
:checked √ √ √ √ √ Χ Χ Χ Χ √ √ √

Notes:

  1. IE8 gets confused on deprecated attributes and/or empty values
  2. IE8 does understand this selector to some degree, but gets the regex part wrong. Basically, IE8 interprets the selector as E[attr=value], ignoring the regex part. IE8 functions correctly when it comes to case insensitivity.
  3. IE8 does add quoted text before or after the element, but does not implement key term content
  4. IE8 does not heed the star hack. If you used the ster hack for IE7, you won’t need to update your CSS if IE8 has corrected that issue.
 

1 Comment for this post

Leave a Reply

You must be logged in to post a comment.