IE vs Mozilla sur CSS style

[Jimi]

Je viens de trouver une page sympa a consulter en meme temps sur IE ( Maxthon aussi bien sur ) et Firefox :

http://www.makikoitoh.com/archives/2004/04...e_important.php

IE ignore "!important" !!! La preuve est faite

[babyssou]

Bonjour Jimi (et les autres),

 

J'appelle cela du foutage de gueule ! Le gars écrit :

 

#box1 {

height: 100px; width: 100px;

background-color: red !important;

background-color: green;

color: yellow !important;

color: white;

}

 

Donc, en bon français :

1) fais moi un box de 100x100

2) mets le en fond en rouge, c'est important !

3) mets le fond en vert

4) mets le texte en jaune, c'est important !

5) mets le texte en blanc

 

Il est normal que la boîte ainsi créée soit verte avec son texte blanc puisque c'est la dernière instruction donnée. Sur ce coup, c'est IE qui est bon (pour moi)... Je n'ai pas le temps de regarder les spefs du W3C pour savoir s'il est prévu que "!important" mis n'importe où est prioritaire quand même, ni de poser la question aux spécialistes (Daniel Glazman surtout), mais bon, faut pas pousser.

 

C'est encore un détournement de "dipteropenetrateuranal"

 

(fais gaffe, Jimi, lorqu'on a goûté à FF, on ne peut plus s'en passer ! Et pourtant nous t'avions prévenu )

[hpsam]

Les régles de CSS2

6.4.2 Les règles avec la valeur !important

CSS essaye de préserver un équilibre entre les prérogatives de l'auteur et celles de l'utilisateur. Par défaut, les règles d'une feuille de style de l'auteur surclassent celles de l'utilisateur (voir la règle de cascade numéro 3).

 

Par souci d'équilibre, les déclarations avec "!important" (les mots-clés "!" et "important" suivent la déclaration) établissent ainsi leur préséance sur les déclarations normales. Aussi bien les feuilles de style de l'auteur que celles de l'utilisateur peuvent contenir des déclarations avec "!important", celles de l'utilisateurs ayant priorité. Cette fonction de CSS améliore l'accessibilité des documents, offrant à ceux des utilisateurs qui ont des besoins particuliers (une grande taille de police, d'autres combinaisons de couleur, etc.), une certaine maîtrise de la présentation.

 

Remarque : Voici un changement sémantique par rapport à CSS1. Dans cette spécification-là, les règles avec "!important" d'un auteur avaient préséance sur celles de l'utilisateur.

 

Le fait de déclarer une propriété raccourcie (ex. 'background') avec la valeur "!important" confère ce poids à toutes ses sous-propriétés.

 

Dans l'exemple ci-dessous, la première règle de la feuille de style de l'utilisateur comporte une déclaration "!important", celle-ci surclasse la déclaration correspondante dans la feuille de l'auteur. La deuxième va également l'emporter, étant marquée "!important". Cependant, en l'absence de cette marque, la troisième de l'utilisateur ne sera pas retenue, au profit de la deuxième de l'auteur (par ailleurs, un style appliqué avec une propriété raccourcie). Autrement, sur la deuxième et la troisième règle de l'auteur, c'est la deuxième qui sera retenue, la troisième n'étant pas marquée "!important". Ceci montre que ce genre de déclaration a bien une fonction, même au sein des feuilles de style de l'auteur.

 

/* Extrait de la feuille de style de l'utilisateur */

P { text-indent: 1em ! important }

P { font-style: italic ! important }

P { font-size: 18pt }

 

/* Extrait de la feuille de style de l'auteur */

P { text-indent: 1.5em !important }

P { font: 12pt sans-serif !important }

P { font-size: 24pt }

Donc si on a:

#box1 {

  height: 100px; width: 100px;

  background-color: red !important;

  color: yellow !important;      }

puis

#box1 {

  background-color: green;

  color: white;      }

la boite doit être rouge avec le texte en jaune mais sur le site du gars, tous les attributs se suivent dans la m^me déclaration.

#box1 {

  height: 100px; width: 100px;

  background-color: red !important;

  background-color: green;

  color: yellow !important;

  color: white;      }

Dans ce cas, je n'ai pas trouvé ce qu'est sensé faire un navigateur.