Quizz CSS : La priorité des régles de style

Voici une page HTML dans laquelle de nombreuses règles CSS contradictoires se battent pour changer la couleur de l'élément BODY.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Test style</title>
        <style type="text/css"><!--
            html, body {
                overflow: hidden;
                border-style: none;
                border-width: 0px;
                border-color: transparent;
            }
       
            html > body {
                background: blue;
            }
           
            .body {
                background: yellow;
            }
           
            #body {
                background: red;
            }
        --></style>
        <script type="text/javascript"><!--
        window.onload = function onLoad() {
            try {
                document.body.style.background="white";
            } catch (ex) {}
            try {
                document.body.currentStyle.background="green";
            } catch (ex) {}
            try {
                document.body.runtimeStyle.background="orange";
            } catch (ex) {}
        }
        --></script>
    </head>
    <body id="body" class="body">
       
    </body>
</html>

Mes questions sont assez simples :

  • Quelle sera la couleur affichée de la page ? Sera-t-elle différente sous IE et sous FF ? Si oui, pourquoi ?
  • Quelle est l'ordre de priorité des régles CSS et JavaScript ci-dessus ?
  • Quelle aurait été l'éffet du terme " !important " placé dans une des régles ci-dessus ?
Publié mardi 4 septembre 2007 13:00 par FREMYCOMPANY
Classé sous , , ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

# re: Quizz CSS : La priorité des régles de style mardi 4 septembre 2007 14:48

Aïe... ma tête ! je ne connaissais même pas les propriétés currentStyle et runtimeStyle. Mais, si c'est pas un piège, je me dis que ça doit être propre à IE, donc, pas compatible probablement avec FF. Donc, je dis blanc pour FF, et Orange pour IE.

L'ordre des priorités, la class c'est en dernier, l'id juste avant ?

javascript tout à la fin à le dernier mot ?

le !important accroit la priorité pour l'élément qui l'aura?

Voilou :D ! ça fait longtemps pour les CSS !

Danuz


Les 10 derniers blogs postés

- Le nouveau Gojira, c’est pour lundi… par CoqBlog le il y a 1 heure et 2 minutes

- SharePoint : nouvel article sur la mise en place des Scopes dans MOSS Searchs par Blog Technique de Romelard Fabrice le il y a 8 heures et 29 minutes

- Hello CS par Le Blog de julz le il y a 13 heures et 55 minutes

- MSDN/TechNet/Microsoft Days Tour 2008 à Lille les 13 et 14 Octobre ! par RedoBlog - The .NET Gentleman !!! le il y a 16 heures et 45 minutes

- MVC Pratique #07 - Un projet concret et le transfert des objets avec les ModelBinders par #Rui le 10-09-2008, 23:39

- SQL Server 2008 : Certifié - TS Admin (70-432) par SQL Server vu par Christian Robert le 10-09-2008, 10:58

- [WPF] Comment changer la couleur utilisée pour sélectionner les éléments d’un ItemsControl ? par Thomas Lebrun le 10-09-2008, 10:49

- Hello World! par Hamid's Place le 10-08-2008, 23:38

- SQL Profiler - Configuration pour un développeur - tracer les requêtes SQL de votre application par Atteint de JavaScriptite Aiguë [Cyril Durand] le 10-08-2008, 15:52

- Monitoring et Patron de méthode par Le blog de Marc Ranchin le 10-08-2008, 10:22