Des règles CSS pour un résultat identique selon le navigateur

Publié le par PêUR

Cet article est destiné aux personnes ayant de bonnes connaissances de base en CSS. Si cet article et celui-ci, vous semblent être en chinois (sauf si vous parlez chinois), relisez les avant de vous attaquer à ce qui suit.

Les nombreux navigateurs du marché (Epiphany, Firefox, Mozilla, Konqueror, Internet Explorer, Safari...) n'utilisent pas le même moteur d'affichage. Cette spécificité entraîne une interprétation de CSS plus ou moins différente d'un navigateur à l'autre.

Pour y remédier, vous pouvez avoir recours à de petites "combines" appelées "hacks CSS".

Sommaire:

Utilisation de la valeur !Important
Selecteur "* html" uniquement reconnu par IE
Selecteur d'enfant ">" non reconnu par IE
IE reconnaît une propriété précédé d'un underscore
Indentation des listes (numérotées ou à puce)
Ressources

Imprimer l'article

 

Utilisation de la valeur !important

En CSS, quelques-soient les déclarations spécifiées, la dernière prévaut sur les autres. C'est le phénomène de cascade.

Toutefois, dans le cadre des spécifications CSS2 , le W3C définit que les déclarations précédées de !important prévalent sur les autres déclarations.

Tous les navigateurs de nouvelles génération prennent en charge cette spécificité... sauf Internet Explorer.

#container {
   width: 200px !important;
   width: 350px;
}

Les navigateurs conformes aux recommandations du W3C afficheront l'identifiant #container avec une largeur (width) de 200px, alors qu'Internet Explorer l'affichera avec une largeur de 350px.

 

Selecteur "* html" uniquement reconnu par Internet Explorer

En CSS, l'étoile (*) est un selecteur universel. Il fait office de joker.

Le W3C définit l'élément html comme l'élément d'origine d'un document HTML. Il ne peut y avoir d'éléments en amont.

C'est donc une abération de sélectionner des éléments parents de html.

Toutefois, Internet Explorer interprète cette syntaxe, alors que les autres navigateurs ignorent la règle.

#container {
   background: blue
}

* html #container {
   background: green
}

Les navigateurs conformes aux recommandations afficheront un fond bleu à l'identifiant #container, alors qu'Internet Explorer l'affichera avec un fond vert.

ATTENTION: ce hack est déconseillé, car avec l'apparition de la version 7 d'Internet Explorer, il semblerait que la faille de ce navigateur soit réparée. Plus d'info 

 

Selecteur d'enfant ">" non reconnu par Internet Explorer

Internet Explorer ne reconnaît pas le selecteur d'enfant ">"

      .article {width: 200px;}
* > .article {width: 350px;}

La classe .article aura une largeur (width) de 350px, sauf pour Internet Explorer qui l'affichera en 200px.

 

Internet Explorer reconnaît une propriété précédé d'un underscore "_"

Internet Explorer ignore l'underscore "_" placé devant une propriété et interprète cette propriété. Les autres navigateurs considèrent cela comme une erreur de syntaxe et ignorent la propriétés.

#container {color: red; _color: blue;}

La police de l'identifiant #container sera rouge pour tous les navigateurs, sauf pour Internet Exlorer pour lequel elle sera bleue.

Cette technique est malheureusement mise en défaut par le validateur W3C  qui utilise les spécification CSS 2.0 alors que dans l'implémentation 2.1, l'underscore "_" est autorisé

 

Indentation des listes (numérotées ou à puce)

L'indentation par défaut d'une liste n'est pas identique selon les navigateurs. Firefox et Mozilla appliquent un padding-left de 40px alors que les navigateurs Internet Explorer et Opéra utilisent un margin-left de 40px.

Si on modifie les marges intérieures ou extérieures des listes, on se retrouve dans un cas flagrant de différence d'affichage entres différents navigateurs.

Pour y remédier, il suffit de spécifier à la fois padding-left et margin-left

ul, ol {margin-left: 40px; padding-left: 0;}
ul, ol {margin-left: 0; padding-left: 40px;}

 

Ressources

 

Publié dans CSS

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

sihem 09/05/2007 12:08

Bonjour,
j'ai un décalage dans le menu avec l'IE7 mais ça marche avec l'IE6 " le margin-left:127px; mais pour l'IE7 il le décale plus".
Merci d'avance

PêUR 09/05/2007 12:37

Ce selecteur:
*:first-child+html {}
est reconnu uniquement par IE7, à toi de jouer ;)

Helioss 14/01/2007 15:03

Bonjour.
J'utilise FF, mais sous IE, dans ma colonne de modules à gauche, la toute première puce est toute décalée, en haut à droite...
J'ai essayé de faire ce qui est dit en haut, mais j'ai un peu de mal à comprendre, et ça ne marche pas... Comment faire? Merci.

PêUR 14/01/2007 15:40

Sous IE6 aussi?Très étrange! Moi je vois ton décalage sous IE7. A priori cela ne vient pas du CSS (il est valide à part une petie erreur mais qui n'impacte cela) et généralement le décalage n'apparaît pas sur un élément unique comme cela, surtout que le code html de ta liste est correcte.Si tu me confirme que sur IE6 aussi, j'essaierais d'investiguer un peu plus.

B, JM & YO 13/11/2006 11:52

Merci PêUR pour ces recommadations...

PêUR 13/11/2006 21:02

;-)

Crife 31/10/2006 12:53

En faite c'est pas ce que je voulais dire, c'etait par exemple sur des articles c'est la colonne centrales qui part ves la droite.
Sur l'article que tu ma donné je ne vois pas de decalage.
Mais en faite je pense avoir trouvé la solution: eliminer la colonne de gauche....

PêUR 03/11/2006 00:37

Pour ma résolution d'écran, j'ai un ascenceur horizontal! Il est donc déformé pour l'article donné.Bon je comprend mieux ce que tu dis, en fait ce pb dont tu parles est lié encore une fois au modèle "élastique" que tu as choisi, si le contenu de l'article est trop étroit, sous IE, il y a décalage du contenu. La seule manière d'y remédier et de rajouter du contenu, par exemple une bardée d'espace.

Crife 30/10/2006 13:46

Bonjour c'est encor moi. Eh ui, j'ai encor un problème, mais cette fois ci, c'est de l'ordre de la mise en page.
Effectivement, sous FF tous marche bien dans le meilleur des mondes. Par contre, sous IE, dans certains articles, la colonne de droite se ballade a droite et à gauche elle ne restent pas collée à la fenetre du navigateur. Le pire c'est que lla colonne contenant les articles se déplacent dangereusement vers la droite.
J'espere que mon problème a une solution.
En esperant que tu aura la bonté de me repondre....

PêUR 31/10/2006 00:06

Parfois tu as des éléments trop large dans ta colonne centrale  qui poussent ta colonne de droite. C'est le cas, par exemple, de l'article logo du 11 août où l'image est trop large. Il faut donc la réduire.