The code in this article has also been tested in Opera 9.50 Beta 1

Ever since CSS was first introduced there have been issues with cross-browser compatibility. To see where things stand now with the latest versions of Internet Explorer, Firefox, Safari and Opera, I conducted some tests using a selection of CSS pseudo-classes.

Pseudo-classes can add certain behaviour to elements. There are many of them, but not all are supported by popular browsers. Certain pseudo-classes can be classified into dynamic, structural and negation categories. Dynamic pseudo-classes can enable interactivity on a Web site by applying different styles to elements depending on their state. Structural pseudo-classes make selections according to the document tree and the negation pseudo-class specifies elements to be excluded by certain styles.

The classes we shall be testing are :hover, :focus, :enabled and :disabled, :root and :not. The browser versions we shall be using are Internet Explorer 8 Beta 1, Firefox 3 Beta 4, Safari 3.1 and Opera 9.26.

:hover

Hover adds a particular style to an element when the user moves their mouse over it. In the example below, we are setting the background colour of the <div> element to blue. When the mouse moves over the paragraph, its background colour changes to red.

The page behaved as expected in Firefox, Safari and Opera, but failed in IE. The image below shows what happens when the mouse moves over the paragraph in different browsers.

Note: IE supports hover on links only.

:focus

Styles associated with this pseudo-class apply to elements that are in focus. In the code below we’ll make the background of a text field yellow when the user clicks inside it, that is when it’s given focus.

The CSS code rendered correctly in Firefox, Safari and Opera, but failed in IE (see the screenshot below).

:enabled and :disabled

This refers to styles targeting enabled and disabled form elements. The example code below shows how this can be done on text fields. When a text field is disabled, that is when it doesn’t accept user input, its border will be 1px solid red and its background black. An enabled text field will have a border of 1px solid black and #FF9966 as the background.

Again, the code didn’t work in IE, but worked correctly in the other three browsers. The screenshots below show the page displayed in different browsers.

:root

This pseudo-class is directed at the document’s root element. In HTML this is <html>. For example: :root { background-color:blue; } will set the background of the whole document blue.

When tested, it worked in Firefox and Safari, but failed in IE and Opera (see the screenshots below).

:not

Excludes the specified element when a particular style is being applied. In the example below we are telling the selector to apply the style to all elements within <div>, apart from the <p> elements. So, we are applying the Sans-Serif font to the list items and making them italic, but not the paragraphs.

Again, this code only worked in Firefox and Safari (see the image below).

Pseudo-classes are an important aspect of CSS as they add behaviour to elements and can make the Web site more interactive. None of the examples above worked in IE which comes as no suprise, but Opera suprisingly failed the :root and :not tests. This just shows how important it is to test you CSS code in different browsers, as most still don’t implement all the features of CSS.

What problems with your CSS code have you encountered in different browsers? Share your findings in the comments below.