CSS : on reprend tout à zéro ! (14ème épisode)

Par Joe Gillespie

Cet article est le quatorzième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.

Ah, les navigateurs. Que ferions-nous sans eux ? Et combien de fois ai-je entendu les gens regretter qu'il n'y en ait pas un et un seul ? Oui, mais lequel ?

Chaque navigateur possède sa propre feuille de style par défaut. C'est celle que vous utiliserez, à moins de fournir la vôtre. Et bien entendu, les feuilles de style intégrées sont toutes différentes. Elles sont issues de différentes sociétés, et fonctionnent différemment sur les diverses plate-formes informatiques.

Leurs ressemblances sont nombreuses, bien sûr, mais les différences ne sont pas négligeables pour autant. Si vous partez du principe que tous les autres navigateurs vont offrir un rendu « similaire » de votre page Web si amoureusement conçue, vous allez vite vous apercevoir que « similaire » ne signifie pas « identique », et que cela peut même signifier « franchement différent » dans certains cas - même si votre feuille de style CSS est valide.

Je ne peux pas me lancer ici dans une comparaison exhaustive de tous les navigateurs, d'autant qu'il en existe énormément qui sont déjà publiées ailleurs. Je soulignerai simplement les quelques points qui me posent le plus de problèmes. Généralement, cela revient à une opposition du style Internet Explorer - Reste Du Monde, mais pas toujours. Une liste de liens vers des navigateurs récents est toujours disponible sur la page d'infos de mon site WPDFD. Ils sont gratuits pour la plupart, ou peuvent être essayés gratuitement.

Internet Explorer de Microsoft est le navigateur le plus répandu de tous. Sous ses différentes versions, il représente quelque chose comme 85% de tous les navigateurs utilisés. Malheureusement, il n'obéit qu'à ses propres règles et ne se conforme pas aux mêmes normes que d'autres navigateurs. Il en respecte la plupart, mais dans le cas contraire, les problèmes sont inévitables.

Le modèle de boîtes CSS

Dans toutes les versions d'IE (NdT : à l'exception du mode strict d'IE6, dont le fonctionnement dépasse largement le périmètre de cet article), l'interprétation du remplissage ou « padding » est différente de celle des autres navigateurs. En conséquence, si vous indiquez une largeur de boîte CSS en pixels, et que celle-ci est dotée d'un padding droit ou gauche, la boîte aura une largeur différente entre IE et les autres navigateurs, ce qui peut détruire une mise en page quand elle est très précise.

Le modèle de boîtes CSS

IE part du principe que le padding est situé à l'intérieur de la boîte, réduisant d'autant la largeur du texte (ce qui d'ailleurs me semble tout à fait logique). Les standards du W3C disent, eux, que le padding doit être ajouté en dehors de la boîte, pour maintenir identique la largeur du texte. On peut débattre ad nauseam sur ce qui est le plus logique des deux, mais quoi qu'il en soit, vous allez être confrontés à cette différence fondamentale qui risque de vous jouer des tours si vous ne vérifiez pas vos pages.

Tout est relatif

Le positionnement « relatif » des boîtes CSS semble être un concept assez simple. Chaque boîte occupe une place que l'on définit relativement à celle qui la précède immédiatement. Mais attention ! Si vous sortez une boîte de son « flux naturel » en lui donnant une valeur par rapport au haut ou au bas de page (valeur top ou bottom), cette boîte est supposée se déplacer tout en laissant libre sa place initiale, comme le ferait une voiture quittant sa place de parking. Mais IE (version Mac) referme cet espace dès qu'il est libéré, remontant donc d'autant tout ce qui est situé au-dessous.

Déplacement de boîtes

On voit à gauche ce qui doit se produire quand on déplace une boîte CSS relative : l'espace libéré devient de fait une boîte invisible. À droite, on voit ce qu'IE (Mac) en fait : cela peut mettre à mal une présentation si on n'y prend garde.

Attention au format du balisage

Ça, c'est quelque chose qui m'agace vraiment, parce qu'il s'agit bel et bien d'un bogue, et non d'une mauvaise interprétation des standards. En principe, les navigateurs doivent ignorer complètement le format du balisage HTML. Peu importe si vous tapez tout votre code sur une seule longue ligne horizontale, ou bien si vous préférez avoir un interligne supplémentaire entre chaque ligne. Le bogue dans IE (Mac) est ainsi fait que si vous placez des boîtes en float sur une seule ligne, flottant toutes vers la gauche, mais qu'en même temps vous tapez le balisage correspondant sur plusieurs lignes de code distinctes, votre navigateur perd complètement les pédales. Il faut obligatoirement placer tout le balisage sur une seule ligne pour obtenir le résultat escompté. Franchement, ce ne serait pas un travail de Titan pour réparer ce bogue, mais le développement d'IE (Mac) est mort et enterré, et il existe aujourd'hui un tel choix de meilleurs navigateurs... mais les vieux Macs, c'est comme les vieilles habitudes, on ne s'en débarrasse pas comme ça !

Dernier épisode

Fiche technique

À propos de l'auteur

Joe Gillespie est un web designer qui partage ses passions pour le design, les CSS et la typographie depuis 8 ans sur son site Web Page Design for Designers. Il a pris sa retraite du Web cette année, au terme de 80 publications mensuelles. Dommage pour nous !

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site