CSS et HTML

Le W3C, dans sa spécification CSS propose d'attribuer des styles CSS par défaut aux différents éléments HTML. Ça veut dire que si vous ne spécifiez pas de styles pour certains éléments, ils seront quand même affichés avec un certain style.

Par exemple, le W3C propose d'afficher un paragraphe avec ce style par défaut :

Code : CSS

Ca explique le fait qu'il y ait un espace entre deux paragraphes et que ces derniers soient de type bloc. Le W3C a ainsi édité une liste des éléments HTML et de leurs propriétés CSS qui devraient être interprétés par défaut pas tous les navigateurs.

Si globalement tous ces navigateurs suivent cette règle, il y a parfois quelques écarts .

Le plus connu d'entre-eux est la liste à puces. D'après la recommandation du W3C, les listes à puces (éléments UL et OL) devraient être affichées avec un margin-left de 40 pixels. Internet Explorer suite cet affichage : il affiche bel et bien un margin-left de 40 pixels, alors que Firefox et Opera affichent un padding-left de 40 pixels, ce qui n'est pas du tout pareil !

D'autres différences existent pour certains autres éléments, mais c'est moins flagrant que cette histoire de liste à puces. Globalement, les différences résident dans les valeurs des margins et des paddings .



La solution radicale est de mettre tout le monde d'accord en... annulant ces CSS par défaut. Pour cela on va utiliser le sélecteur * pour appliquer un style à tous les éléments d'un coup :

Code : CSS

Ainsi, les margins et les paddins de tous les élemnts seront nuls. Bien évidemment, c'est une méthode assez brutale, d'autant plus que les styles par défaut sont souvent utiles surtout pour les éléments textuels (P, PRE, et même UL si celle-ci est dans un texte (et non un menu)...). Donc, ce que je recommande, c'est d'annuler les margins/paddings sur certains éléments stratégiques, comme ceci :

Code : CSS

Vous pouvez bien sûr utiliser ce système pour définir d'autres styles comme la police d'écriture, la couleur...

Voici quelques liens utiles pour terminer :

• Styles CSS par défaut recommandés par la spé HTML 4
• Rendu par défaut en fonction de votre navigateur
• Article d'Alascarétion sur les styles par défaut

Le FOUC, ainsi appelé par Bluerobot signifie Flash of Unstyled Content. En français, ça donne « instant de contenu non stylé ».



En fait, si l'on lie une feuille de style via @import, Internet Explorer affichera, durant le chargement, la page HTML, sans les styles CSS. Il y a en fait un léger décalage de temps. L'application de la feuille CSS se fait dans un laps de temps très court après le chargement de la page HTML, ce qui a pour résultat de laisser entrevoir une page non stylée.

Apparemment, ce n'est pas un comportement voulu. Nous pouvons donc parler de bug

Ce FOUC est un phénomène assez paradoxal, car pour IE, il est vu comme un bug, alors que pour Opera, c'est une fonctionnalité ; fonctionnalité qui permet un affichage plus rapide des pages.

Évidemment, il existe un moyen pour empêcher le FOUC sous IE. Mais, pourquoi s'évertuer à éviter ce qui peut être une fonctionnalité ?
Bon, je vous donne quand même la solution, si vous voulez vous amuser

Vous devez, soit appeler votre feuille de style via la balise link, comme cela se fait généralement, soit insérer, dans votre Head, une balise de script Javascript vide, comme ceci :

Code : HTML

Bon, ce n'est pas ce genre de truc qui va empêcher votre site d'être affiché, mais dans mon optique de faire un tutorial sur les différences entre IE et les autres navigateurs, je me devais de vous en parler