css powa

Dans la série, moi aussi je me mets au ravalement CSS des sites des autres, voici un exemple de passage d'une page en HTML vieille école à coup de tableaux (très !) imbriqués et de spacer.gif:

ancienne version

nouvelle version

Le HTML est passé de 24Ko à... 4ko. Ca passe dans IE5+/Gecko/Opera 7, c'est valide html 4.01 strict/CSS2.

C'était une conversion très intéressante à faire (à mon niveau) car c'est le genre de présentation d'ensemble super facile à faire avec des tableaux mais loin d'être évidente avec des styles. J'ai pas mal galéré pour trouvé une solution CSS où la colonne de droite serait de la même longueur que celle de gauche, finalement j'ai triché ;-).

J'ai remplacé l'effet javascript onmouseover sur les blocs par des CSS2, donc cet effet n'est pas visible par IE. A cette occasion, je pense d'ailleurs avoir rencontré un bug d'Opera 7 dans les sélecteurs CSS2. Mon sélecteur .bloc tr:hover > * {background-color:#FAFAFA;} ne sélectionne pas les TH dans Opera, Gecko par contre n'a pas de problème. Je ne parle pas des bugs rencontrés dans IE6, j'ai dû abandonner plusieurs pistes de positionnement qui me semblaient intéressantes dès les premiers essais avec IE ;-)

Le positionnement de l'image de Tintin m'a posé pas mal de problèmes, finalement j'ai résolu le problème en utilisant des styles en ligne (les puristes vont hurler ;-). Le défaut des éléments flottants c'est que justement, ils flottent trop ! et qu'il est difficile de les faire flotter tout en conservant une mise en page prenant en compte leur hauteur. En fait ce qui serait bien se seraient des élements semi-flottants du genre "float:horizontal-only". Enfin si ça se trouve il y avait une solution évidente à laquelle je n'ai pas pensé mais je suis heureux que les styles en ligne soient toujours là, j'aurais trouvé ridicule de créer tout un ensemble de classes que je ne réutiliserais jamais juste pour trois styles à mettre autour d'une image.

J'ai découvert border-spacing, IE ne gère pas bien sûr, mais je l'ai utilisé quand même. C'est probablement la différence la plus vsible sous IE avec la version d'origine mais je verai si je ne peux pas trouvé une astuce pour le navigateur dominant (ça fait un peu "mâle dominant" dans un reportage animalier ça :-). Les icônes de crédits en bas de page sont une liste, plus ça va plus j'utilise des listes car c'est l'un des rares trucs qui soit géré convenablement par CSS dans IE (tous les menus de cette page sont des listes d'ailleurs).

Voilà, il est probablement possible de faire mieux et plus "web sémantique", mais ce n'était pas mon objectif, je voulais surtout apprendre des trucs sur une mise en page très différente des miennes et montrer que ce type de présentation, typiquement de tableaux, était possible en CSS ; avec difficultés c'est vrai, mais pour un énorme gain en poids du HTML et en lisibilité du code source (si vous êtes sous Gecko, tapez sur CTRL+U).

PS : pour ceux qui me diront qu'il y a encore un tableau dans la page, je leur rappellerai qu'un agenda ce sont des données tabulaires !

Haut de page