> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > HTML / CSS > Faire un site compatible IE et FF > Faire un site compatible IE et FF > CSS et HTML > Lecture du tutoriel

CSS et HTML

Par

Sébastien de la Marck (Thunderseb)

Mise à jour : 12/05/2009

1 594 visites depuis 7 jours , dont 86 sur ce chapitre , classé 81/777

Retour en haut

Sommaire du chapitre :

Styles par défaut
FOUC, bug ou pas bug ?

Retour en haut

Styles par défaut

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

p {
  display: block;
  margin: 1.12em 0;
}

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

Mais comment corriger ces différences ?

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

1	* { margin: 0; padding: 0; }

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

1	body, div, form, fieldset, ul, ol, table { margin: 0; padding: 0; }

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

Retour en haut

FOUC, bug ou pas bug ?

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

C'est très bien tout ça, et ça fait quoi ?

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript"> </script>
<title>FOUC</title>
<style type="text/css">
@import "feuille.css";
</style>
</head>
<body>
</body>
</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

Retour en haut

Retour en haut

2 commentaires pour "CSS et HTML"

Note moyenne : 3.56 / 4 (25 votes)

Pseudo	Commentaire
yannn	# Posté le 11/03/2008 à 23:09:02
Ah; bon!! il est où	Re J'ai fait mon site avant de lire ton tuto...conséquence ouah surprise je me suis pris la tête pour adapter et que ça marche. J'ai réussi mais chaud la tête Moralité j'aurais du lire ton tuto et faire mon site Bon je continue cette lecture intéressante merci à toi Et je regardai, et je vis apparaitre un cheval couleur pale, et son cavalier se nommait la Mort, et l'enfer le suivait...
cFreed	# Posté le 28/01/2009 à 02:48:11
	Bonjour, Première visite, par hasard, et je viens déjà de passer "beaucoup trop de temps" à lire des articles... C'est pas charitable de faire des sites aussi intéressants : on n'a plus le temps de travailler ! Concernant le problème des différences de CSS par défaut entre navigateurs, ma solution : j'ai "empaqueté" la recommandation W3C dans un fichier .CSS qui est toujours mon premier <link rel="stylesheet"...> de n'importe quelle page HTML. De cette façon, j'ai bien une base par défaut unique et connue d'avance, sans avoir à "reconstruire" quoi que ce soit (genre les <ul> et <li>). Merci pour ce site, et continuez, surtout... Si votre sujet est résolu, pensez à nous le faire savoir grâce au bouton en bas de la page, merci.