Développement web

L'excellent Kusor a déniché un tutoriel de maquetage CSS, encore un me direz-vous ? Oui, mais celui là a une approche tout à fait différente, il ne s'agit pas d'un tutoriel technique sur telle ou telle méthode de mise en page par CSS, mais d'une méthodologie permettant de choisir ces techniques par rapport à l'objectif poursuivi :Colored boxes.

Un nouveau site ne traitant que des feuilles de styles et qui rassemble galeries et ressources sur le sujet : CSS Vault.

Une super extension pour Firebird par Pascal Guimier : EditCSS, elle est l'équivalent du bookmarklet Edit styles de Jesse Ruderman. C'est un outil de développement extrèmement pratique permettant de modifier et de voir en temps réel la feuille de styles de n'importe quelle page.

Un super exemple de stylage de tableaux par CSS2, à comparer entre IE et Gecko/Opera. La page 2 est particulièrement impressionnante.

Le brevet sur le format GIF vient juste d'expirer et l'on peut voir sur le web des articles prédisant un retour en force de ce format au détriment du PNG. Quelle erreur !

Le format GIF est un vieux format, c'est donc un format très limité contrairement au PNG, de conception beaucoup plus moderne. Pourquoi utiliser GIF quand le PNG offre les avantages suivants :

1. Une taille de fichier quasi systématiquement inférieure (en général 20 à 30%)
2. Un mode de niveau de gris qui divise par deux le poids des images (GIF simule ce mode avec une palette grise)
3. Un mode d'affichage progressif bi-directionnel

Je ne parle pas là des formats 16/24/32 bits de PNG mais du simple format PNG 8 bits. Le seul cas où le GIF est plus économique est lorsque l'image est extrèmement petite (moins de 200 octets) car l'entête des images PNG est un peu plus gros. Dans tous les autres cas, images transparentes ou non, monochromes, niveaux de gris ou 256 couleurs, le PNG donne toujours des images plus légères. Bien entendu, il est parfaitement supporté par tous les navigateurs.

Mais ce n'est pas le seul avantage du PNG, car comme je l'ai déjà dit, je n'ai parlé que de la version 8 bits (moins de 256 couleurs) du PNG. Le format PNG n'est pas limité à si peu de couleurs, il sait parfaitement stocker des millions de couleurs (comme le Jpeg mais sans compression destructrice de l'information). Il est même particulièrement efficace pour les petites images avec des dégradés qu'on utilise si souvent comme décoration de fond d'écran ou de bloc de texte. En fait il éclate allègrement tant le GIF que le JPEG en divisant sur certains types d'images le poids par 10 ou 20. Un exemple sur Newtedge où l'image passe de 21Ko en GIF à... 500 octets en PNG 24 bits.

Pourquoi est-il donc si peu utilisé sur le web ? Plusieurs raisons à cela.

1. La plupart des développeurs pensent qu'IE pour Windows ne le gère pas et s'abstiennent donc de l'utiliser. C'est une grossière erreur car ce que ne supporte pas IE, ce sont les fonctions avancées de PNG (niveaux de transparence et correction gamma), le reste est très bien géré.
2. Les graphistes pensent que le PNG est plus lourd que le GIF car ils utilisent tous Photoshop qui gère lamentablement le format PNG et produit des fichiers d'une lourdeur incroyable (à mon avis, vu les liens d'Adobe avec Unisys qui détenait le brevet Gif, c'est du sabotage pour favoriser le format du copain ;-). A cela une solution : SuperPNG, le plugin gratuit pour Photoshop Mac/Win qui remplace le plugin pourri fourni par Adobe.
3. Les graphistes ne se rendent pas compte que le PNG existe en 8/16/24 bits et sauvent leurs images qui contient 12 couleurs en 24 bits !! Effectivement, là c'est plus lourd mais c'est inutile. La faute en revient aussi partiellement à Photoshop qui n'affiche pas clairement s'il enregistre en 8 ou 24 bits.

Comme dirait Tristan, le PNG, c'est bon, mangez-en !

Internet Explorer est un logiciel absurde ! je vérifie mon site sous IE5.5 et je m'apperçois que les polices sont énormes (pas de problème sous IE5 et 6), je cherche et je découvre que c'est parce que j'avais mis récemment une règle font-size:80% sur BODY. Pourquoi une telle règle ? tout simplement parce que le font-size:1em faisait déconner le zoom d'IE et que les polices devenaient illisibles pour ceux qui surfent avec un zoom texte réglé sur autre chose que moyen. J'ai donc maintenant dans ma feuille CSS deux définitions successives, l'une pour IE5.5, l'autre pour IE 5 + 6 et de plus en plus de commentaires du type c'est pour le bug d'IE x dans tel contexte. Mais ce n'est pas tout, je regarde mon site sur IE5 et je constate que l'image de fond que j'avais soigneusement cachée par un sélecteur d'enfant (html > body) s'affiche avec IE5.0 !! Le support CSS d'Internet Explorer 5.0 serait-il meilleur que celui d'Internet Explorer 6 ? En fin de compte, le site ne s'affiche jamais de la même manière entre IE5/5.5/6 et c'est la version 5.5 qui me pose le plus de problèmes. Inutile de dire que le site s'affiche parfaitement bien dans Gecko et Opera 7, pratiquement au pixel près.

J'ai lu avec amusement que Mat, Laurent et Tristan en avaient après Allhtml (pour ceux qui ne connaîtraient pas, c'est un site qui, je cite se veut être un véritable portail pour webmasters et qui est en fait nul à chier et incapable de pondre une ligne en HTML sans faire dix erreurs de syntaxe. Ce qui est amusant c'est que je les avais contactés en mars 2002 pour leur dire que lister les extensions CSS propriétaires de Microsoft (filter) en les estampillant "recommandations W3C" c'est intellectuellement malhonnête. Le webmaster m'avait répondu de haut en me disant que oui il allait corriger (ce qui n'a pas été fait) mais que en gros le web c'est Microsoft et que les standards il en avait rien à foutre et autres billevesées du genre Je me dédouanne de rien... quand on paye on à un service Après Vente pas quand c'est gratuit... mais ce que j'aime le mieux c'est critiquer... et de passer à coté de "mon travail" chaque jour pour la communauté de webmasters et développeurs d'ALL HTML. On appréciera le laïus sur son sacerdoce pour nous autres pauvres webmestres en herbe, savoureux quand on sait que le site n'évolue pratiquement que par les contributions de ses visiteurs dans les forums. Mais le plus drôle c'est l'alibi du gratuit pour faire de la merde, surtout quand le site est plein de bannières de pub, qu'il y a des bons gros liens "boutique" et "offres spéciales" et que pour s'inscrire il faut remplir une fiche détaillant son âge, sa profession, sa localisation géographique, les logiciels utilisés pour la création de pages etc. Hors peu de gens savent qu'AllHTML n'a rien de bénévole mais appartient à une agence Web. Résumons donc. Un site râcoleur attirant les gens qui ont des problèmes de création de site web, ce site appartient à une agence web, pour participer aux forums il faut donner son profil à cette agence.... Visiteur, tu penses t'inscrire chez allhtml ? Lis bien en détail la section "données personnelles" :

• Lorsque des événements sont organisés en parrainage, le ou les sponsors ont généralement accès à vos données personnelles. Nous ne pouvons alors garantir leur souci de protection de la vie privée.
• ALL HTML peut conduire, en interne, des études sur la typologie, les centres d'intérêt et les comportements des utilisateurs grâce aux renseignements communiqués lors de l'inscription à la newsletter ou lors d'une participation à un jeu/concours ou par l'intermédiaire de notre serveur. Cela nous permet plus particulièrement : (...)De vous faire bénéficier d'offres promotionnelles intéressantes sans pour autant communiquer vos données personnelles aux publicitaires concernés

Le site est aussi truffé de cookies nous pistant page à page, détail amusant, lorsqu'on clique sur "données personnelles", on a droit à quatre cookies (un du site et trois de pub) alors que dans cette page décrivant la politique de l'entreprise en matière de respect de la vie privée il est écrit "ALL HTML n'utilise ni "cookies", procédé qui permet à un site d'enregistrer des informations dans l'ordinateur d'un utilisateur, ni applets Java, programme exécuté à la demande d'un site par le navigateur d'un utilisateur".

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 !