IE8 Beta CSS Support: Internet Explorer 8 and CSS 3

NOTE: THIS POST WAS ABOUT THE IE8 BETA!!! For general release IE8 Support check out these two blog posts:

This post was written a year ago. Please check out the links above.

IE8 Beta CSS Support: Internet Explorer 8 and CSS 3

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

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 star hack for IE7, you won’t need to update your CSS if IE8 has corrected that issue.
This entry was posted in Web Development. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *