Browsers Face-to-Face: CSS3


Cascading Style Sheets is a standard language of Web Programming that add effect and styles to a plain website or blog. This is used by almost any blog and it can create from a dropdown menu to an animation… and more.

To this post, I’ll use CSS3 Selectors Test and an old test by Mozilla.

The browsers are Chrome 11.0.696.14 dev, IE9, Firefox 4 (not RC), Safari 5.0.4 and Opera 11.01.

The first test I made was one from CSS3 Selectors Test:

  • IE9, Firefox 4, Safari 5.0.4 and Opera 11.01.

All this browsers got the same score:

score

  • Chrome 11.0.696.14

The exception was Chrome:

chromescore

Failing the following tests:

failed

So, the final scores for this test is:

chart1

  1. IE, Firefox, Safari, Opera: 41/41
  2. Chrome: 37/41

 

Now, the second test. This is one by Mozilla, a really old one. It’s a rectangle with a text, the text has shadows and different colors.

  • Chrome 11.0.696.14

chromecss3

  • IE9

iecss3

  • Firefox 4

firefoxcss3

  • Safari 5.0.4, Opera 11.01

safariopera

Compare to the model:

model

NOTE: To me,  the “In case you aren’t using Firefox 3.1 beta” means “In case you are using the 3.1 stable version”, translation “The correct answer is:”

Base on that, the scores are:

  1. Firefox
  2. Safari, Opera (identical)
  3. Chrome (it has an issue with the “w”)
  4. IE

 

The global score will put Firefox in the top, followed by Safari and Opera, but I don’t know who deserve the 3rd place; Chrome lost the first test, but IE didn’t render the colors nor shadows in the square… so, is up to you to choose the best one.

Author Info:

A 20 year old computer engineer... Here's a clear explanation => http://bit.ly/6Pk550
March 22, 2011 | Autor: TatoSgr | Internet, Software
Etiquetas: , , , ,

2 Comments

  1. piotr says:

    Hello
    Did you read the info about Mozzila test ??
    Most of the stuff made to the BOX was done with -moz- heading. This means that this will not work in other browsers !
    Reagards
    piotr

    • TatoSgr says:

      Exactly! You’re absolutelly right. But I’m testing compatibility. Even if it only work in one browsers, I want to test it in all, the same happens with websites that only work with IE6 (yes, they’re still out there). The point is that no matter the browser, or the site, your browser should be able to make the animation.

      The same case goes to the Google Benchmark test, I’ll do it, and I know that Chrome will win because is Google’s. But we have to see how other browsers are adapting to the other’s technology.

      I know that this idea sounds very, very crazy or even illogical, but it makes sense to me because if a web full of standards, no browser should be standard, but it has to support them all.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>