Ce matin, un lapin a tué ptitpim m’envoie un article recensant 53 techniques CSS. Chouette, ça a l’air intéressant, mais voyons ça de plus près.

Résumé

Il y a quelques doublons. Et quand je vois la création d’une alerte (Technique 52), il pourrait y en avoir beaucoup plus.

Précisions

Rajouter des balises pour réussir

Ça c’est obligé des fois, mais il y en a qui abusent. C’est le cas pour l’ombre portée (technique 8) où il faut des <div> pour faire les recoins.

Même chose pour certains panneaux arrondis. J’aime bien celui de 456bereastreet, c’est la même idée que les onglets. Ou encore la technique 30, avec une seule image mais il faut obligatoirement un titre et une largeur fixe.

La technique 15 est l’exemple typique d’une utilisation abusive.

Utiliser les CSS à la sauce tableau

Dans le diagramme avec des boîtes et des flèches (technique 14), il y a des déclarations de style pas top, comme class="row3 col1 size1".

C’est comme faire : <div class="en_bas_a_droite"></div>.

Je ne vois pas l’intérêt. Un style doit avoir un sens. S’il désigne une position, c’est comme de mise en page en tableau.

Problème de sémantique

Ca serait bien d’avoir un graphique en baton à partir d’un tableau de données (technique 4), mais s’il faut rajouter une image dans la cellule, j’aime pas trop.

La technique 50 est chouette, mais je me demande quelle est la signification de plusieurs définitions imbriquées (des <dl> dans des <dd>). D’ailleurs, sur le site du W3C, ils donnent un exemple où on peut utiliser ces balises pour une conversation …

Je veux bien vos avis sur la signification des définitions.

Accessibilité

Les menus à partir d’une liste, c’est bien. Mais quand on vire le texte pour une image (techniques 1 et 2), c’est moins bien. En plus, c’est vraiment figé, on ne peut pas agrandir le texte.

Il y a aussi le problème de remplacer un texte par une image, pour un titre par exemple (technique 7). Pas vraiment de solution, mais je retiens l’utilisation du ` vide avant le texte.

La technique 33 est curieuse : changer la taille de la police avec des liens. J’ai vu des sites le faire, mais je ne vois pas à quoi ça sert. Pour moi, l’utilisateur devrait passer par le navigateur.

Pas mal

La personnalisation des formulaires est sympa (technique 6) dans l’ensemble, avec quelques dérives. Pour modifier un bouton radio, j’en ai vu un qui déplace le <input> pour le cacher et utilise son <label> pour appliquer une CSS, tout ça en javascript. Il faut aussi un onclick afin de changer d’état.

Certains formulaires de la technique 25 ne sont pas super, j’ai vu des tooltip javascript avec des morceaux en dur dans le HTML, ça fait tâche.

La technique 16 qui montre comment mettre un footer toujours en bas est sympa, mais ça a des conditions. Pas de technique suprême donc.

La description d’une image à partir d’une liste est bien aussi (techniques 17 et 21). Et avec le :focus, on peut même utiliser les tabulations pour afficher le détail. Attention, dans leurs exemples, ils mettent des # dans le href des liens de la liste. Il faudrait que ça pointe quelque part.

En tout cas, depuis le temps qu’on en parle, les tableaux tout le monde connaît et c’est l’une des techniques les plus réussie (technique 26). Il y en a même qui utilise du javascript pour alterner la couleur des lignes au lieu du classique style odd.

D’ailleurs, pour centrer verticalement quelque chose (technique 42), il suffit d’appliquer le style de cellule de tableau à un <div>.

Et le coup de la barre de progression (technique 37), c’est pas con. C’est un <img> avec une image transparente où on applique un background.

Pas terrible

La technique 36 montre comment ajouter des icônes de format pour les liens vers les fichiers. C’est fait en javascript, alors qu’on peut le faire en CSS avec le sélecteur a[href$=".pdf"]. Ca marche pas sur IE, mais j’m’en fout :) .

La technique 48 est apparement un challenge, mais la solution qu’ils donnent est nulle. Le but est de faire des traits entre chaque ligne d’un texte. Pour ça, ils font une duplication du texte en javascript et ils le mettent en blanc parce que le fond est blanc.

Conclusion

Globalement, il y a des trucs sympas.

Séparation du fond et de la forme grâce au CSS, oui mais on ne peut pas tout faire. Quand est-ce qu’on pourra vraiment se passer des <span> et autres balises additionnelles ?

Je pense que le design doit se faire en connaissant les techniques CSS satisfaisantes, et pas tenter une mise en forme trop graphique. Et vous ?