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.

Do you need help with CSS? Gain advice from Builder AU forums

Related links

Comments

1

MichaelR - 01/04/08

Surprised you didn't try IE7 that works in every case. Relying on a beta in a comparison test is dangerous.

» Report offensive content

2

eddiep - 01/04/08

Well, everithing diplayed correct in Opera 9.5 beta on my laptop ... Why didn't you used Opera 9.5 beta??? IE and FF were beta ...

» Report offensive content

3

Facilinfor - 01/04/08

"Surprised you didn't try IE7 that works in every case."

I use IE7... and it does not work...

» Report offensive content

4

Code - 02/04/08

For a site thats "by developers for developers", it's surprising that the author of this article links huge, bandwidth wasting BMPs instead of PNG which would have been much smaller in size.

http://en.wikipedia.org/wiki/Portable_Network_Graphics

» Report offensive content

5

Sambi - 02/04/08

Hi,

its unfair you used all the latest beta's or versions of IE, FF and Safari but you are using old version of Opera.

Each and every test that you gave here is working in Opera 9.5 beta.

If you make a comparsion give equal chance to everyone. Either stable versions or beta's.

Anyway good test.

» Report offensive content

6

Lana Kovacevic - 03/04/08

Thank you all for your comments. I have tested the code in Opera 9.50 Beta 1 also. You can find the results here: http://www.builderau.com.au/blogs/syslog/viewblogpost.htm?p=339270947

» Report offensive content

7

Mohan - 02/05/08

I have used almost every browser such as safari, firefox, avantgo,IE but it seems that opera is the best.

» Report offensive content

8

Abraham - 12/09/08

This all worked in Google Chrome, in case anyone is using it. All the CSS is working fine, they fixed some serious AJAX issues it had at first, but now it's fine.
Java still isn't compatible, but that's not part of this article.

CSS works perfectly.

» Report offensive content

Leave a comment

You must read and type the 6 chars within 0..9 and A..F

* indicates mandatory fields.

8

Abraham - 09/12/08

This all worked in Google Chrome, in case anyone is using it. All the CSS is working fine, they fixed some ... more

7

Mohan - 05/02/08

I have used almost every browser such as safari, firefox, avantgo,IE but it seems that opera is the best. ... more

6

Lana Kovacevic - 04/03/08

Thank you all for your comments. I have tested the code in Opera 9.50 Beta 1 also. You can find the ... more

Log in


Sign up | Forgot your password?

What's on?