IE8 - The Good - CSS2.1 Selector Support

By: Estelle Weyl

Page 1 of 1

Set for printing

Internet Explorer 8, IE8, was released on March 19, 2009. Depending on your statistics source, as of July 2009, IE8 already has 17.8% of the browser market share. In the last section we provided an overview of what is new, good, bad and different in IE8. In this article, we take a deeper look at CSS 2.1 support in the IE8 browser, and compare IE8's CSS support to IE6 and IE7.

CSS 2.1 Support

As mentioned in the overview, IE8 has complete support for CSS2.1. IE8 is the first browser to support all of the W3C CSS2.1 specifications, and currently has the best support of any browser (including Firefox, Safari and Opera) of the CSS 2.1 specifications. One may think (though no one outside of Microsoft does) that this makes IE8 the best browser, but it doesn't. IE8 may be the first IE to support CSS 2.1, but Firefox, Safari, and Opera have already moved on to supporting features proposed in CSS3.

Internet Explorer 8 Supports all CSS 2.1 Selectors

By having complete support for CSS 2.1, IE8 has a lot of improvements over IE7 and IE6 in terms of CSS support. Below are listed all the individual CSS2.1 selectors, with a brief explanation of how IE6, IE7 and IE8 compare. You'll note that IE8 supports ALL of the selectors listed. While not shown in this grid, Firefox, Opera and Safari all support all the CSS 2.1 selectors, and have been doing so since previous releases.

By having complete support for CSS 2.1, IE8 has a lot of improvements over IE7 and IE6 in terms of CSS support. Let's look at the differences:

Browser
Pattern Meaning IE6 IE7 IE8
E:active
E:hover
E:focus

Dynamic pseudo-classes are generally thought to be applicable to links and form elements since IE6 and IE7 don't support them on other elements. IE8 supports pseudo classes correctly on ALL the elements.

Δ Δ
Δ Δ
Χ Χ
E:before
E:after

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content. Completely ignored by IE6 and IE7, it is supported by IE8. See generated content

Χ Χ
Χ Χ
*

Universal Selector: any element *{}. While all browsers support this selector, it's best to use it sparingly if at all.

E

Type or Element selector: a specific element, such a p, td, ol {}

.class

Class selector: a class or several classes, such as: .myClass {}

IE6 does not support dual class names. For example, .one.two {} will target <p class="one two"> in all modern browsers, except IE6, which ignores it. Except for this exception, class selectors are supported by all browsers.

Δ
#id

ID Selector: Matches an element based on it's ID: #myId {} Supported by all browsers

E F

Descendant selector: Matches any element F that is a child of element E

E > F

Child Combinator: Matches element F that is the first element child of element E

Χ
E + F

Adjacent sibling selector: Matches element F that is a the next sibling of element E. label input {} will match any input that follows a label such as <label>a label</label><input type="text">.

Note that there is a sibling selector - E~F - in CSS3 that is supported by IE7 and IE8, but not IE6

Χ
E[attr]

Attribute Selector: Matches if the element matched has the attribute: input[type] {}.

The exception to the support is that the browsers won't match the element that has the attribute if the attribute value is empty

Χ
E[attr=val]

Attribute Selector: Matches if the element matched has the attribute: input[type=checkbox] {}.

Χ
E[attr~=val]

Attribute Selector: Matches if the element matched has the value of the attribute value: a[rel~=nofollow] {} should match <a href="..." rel="noindex nofollow">.

Χ Δ
E[attr|=val]

Attribute Selector: Matches if the element matched has the attribute with the value has atleast the val as part of the value: div[lang|=en] should match <div lang="en-us">

Χ Δ
E :first-child

The CSS selector should match the inner div element, because it is the first child of the outer div element Comments are not elements, so they should not be considered when determining the first child.

Χ Δ
E:link

Non visited link (non included above with pseudo classes since only links can be links)

E:visited

Visited link (not included above with pseudo classes since only links can be visited)

E:lang()

Matches element of type E if it is in (human) language c (the document language specifies how language is determined).

Χ Χ
E:first-letter

First letter pseudo-element: Matches the first letter of the element E.

E:first-line

First-line pseudo-element: Applicable to block-level elements, inline-block, table-caption or a table-cell, targets the contents of the first formatted line of a element.

Note that Opera 9.6, Firefox and Safari all support all of the above CSS selectors.

Legend
Full Support
Χ No Support
Δ Some support, but not full support

IE support of :hover pseudoclass

The :hover pseudo-class enables you to alter the presentation of an element when the user mouses over the element. For example, similar to Excel, you can change the color of a table row when the user mouses over a table rows using only CSS. IE6 and IE7, only support the :hover pseudoclass on links (the <a> tag) and some form elements. One very popular use of the hovering is drop down menus. In the past, because of IE6 and IE7, javascript had to be added to make sub-navigation appear on hover in those browsers. IE8, like all other standards compliant browsers, now supports the :hover pseudoclass on all displayed elements.

IE support of :before and :after pseudo-elements

The :before and :after pseudo elements enable you to add content before and/or after specified elements. For example, you can add special characters in front of list items, thereby not limiting yourself to the limited number of default list-style-types. IE6 and IE7 have no support for these pseudo-elements. IE8, however, has fully compliant support for these pseudo-elements. In fact, IE8 has better support for the content property of these pseudo elements than any other browser: better support even than Firefox.

Using Differences in CSS Selector Support to Target Browsers

Users of Community MX are encouraged to use conditional comments to target different versions of Internet Explorer. You can also use CSS selectors to target specific browsers. IE6 and IE7 have limited support for CSS 2.1 selectors. IE8 supports all of CSS 2.1 selectors, but very limited support for CSS 3 selectors. On the other hand, all other non-IE grade-A browsers have support of several CSS 3 selectors. You can use these difference to your advantage to target specific browsers. In the last section, we provided one hack:

p.myclass {
color: green; /* all browsers */
}
body:first-child p.myclass { /* IE8 and all CSS 2.1 compliant browsers */
color: blue;
} body:last-child p.myclass { /* CSS 3 supportive browsers */
color: red;
}

This IE8 CSS filter targets all browsers with a regular element.className selector to target all paragraphs with the myClass class. It then targets all CSS2 compliant browsers with the CSS2.1 pseudo-class. It then filters out IE8 but using CSS3 to target all modern, non-IE browsers. It's best not to use it, but it is important to understand how CSS can be used to filter browsers so you can follow other people's code.

Up Next

In this section of IE8: The Good, The Bad, The Ugly (and Pretty), we've covered IE's support of CSS 2.1 selectors, with comparisons and improvements over IE6 and IE7. In the next part, we'll take a look at more feature improvements you'll find in IE8.


Page 1 of 1 1


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
ie8, css, selectors