53 techniques CSS

53 techniques 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é

Numéro Titre Description Avis
1 CSS Based Navigation Un menu horizontal à partir d’une liste. Bof
2 CSS Based Navigation Un menu horizontal à partir d’une liste. Bof
3 CSS Tabs Onglets à partir d’une liste Bien
4 CSS Bar Graphs Graphique à partir d’un tableau Bof
5 Collapsing Tables Ouvrir/Fermer le contenu d’un tableau avec un lien dans le tfoot Bien mais …
6 Radio & Checkbox Customisation Method Personnaliser les boutons radio et checkbox Bien
7 CSS Image Replacement Remplacer un texte par une image Bien mais …
8 CSS Shadows Appliquer une ombre portée Bof
9 CSS Rounded Corners Roundup Arrondir les coins Ça dépend
10 Capital Letters with CSS Créer une lettrine Bien
11 Define Image Opacity with CSS Rendre une image de fond transparente
12 Block Hover Effect for a List of Links Avoir un effet de block de différents éléments avec une liste Bien
13 Pullquotes with CSS Styliser un blockquote Bien
14 CSS Diagrams Créer un diagramme avec des boîtes et des flèches Bien mais …
15 CSS Curves Un texte suit une courbe Bof
16 Footer Stick Un bas de page toujours en bas Bien
17 CSS Image Map Description d’une image Bien
18 CSS Image Pop-Up Afficher la grande image au survol d’un aperçu. Non
19 CSS Image Preloader Précharger des images Non
20 CSS Image Replacement for Buttons Changer un bouton en image Bien
21 Link Thumbnail Aperçu du site sur un lien Bien
22 CSS Map Pop Description d’une image Bof
23 PHP-based CSS Style Switcher Changer la CSS … et alors ?
24 CSS Unordered List Calender Un calendrier à partir d’une liste NON !
25 CSS-Based Forms Joli formulaire Bien, mais …
26 CSS-Based Tables Joli tableau Bien
27 Printing Web-Documents and CSS Utiliser un style pour imprimer Bien
28 Print-Layouts with CSS Utiliser du javascript pour recenser les liens et les mettre en footnote Bien
29 CSS-Submit Buttons Utiliser une image pour les états du bouton submit Bien, mais …
30 CSS Teaser Box Une jolie boîte arrondie Bien, mais …
31 CSS Tricks for Custom Bullets Les puces Bien
32 Ticked Off Links Reloaded Indiquer les liens visités avec une case cochée Bien
33 CSS Zooming Changer la taille de la police par javascript Bof
34 Creating a Star Rater using CSS Des étoiles alignées pour voter Bien
35 The ways to style visited Links Styliser les liens visités Bien
36 PDF, ZIP, DOC Links Labeling Liens avec les icônes des formats Bof
37 Displaying Percentages with CSS Afficher une barre de progression Bien
38 Image Floats without the Text Wrap Un contenu qui ne va pas en dessous d’une image flottante Bien
39 Let visitors decide, whether or not will they open link in a new window Une icone à coté des liens pour ouvrir une nouvelle fenêtre Bien
40 Simple accessible external links Indiquer les liens externes avec ou sans CSS Bien
41 Zebra Table with JavaScript and CSS Joli tableau en CSS et Javascript Bien
42 Vertical Centering with CSS Centrer verticalement Bien
43 Unobtrusive Sidenotes Afficher/cacher des notes Dans le principe oui
44 Image Caption with CSS Afficher le title d’une image Bien mais …
45 Dynamic Piechart with CSS Camembert Non
46 Format Footnotes with CSS Créer des footnotes en javascript Non
47 Hierarchical Sitemap with CSS Un joli arbre à partir d’une libre Bien
48 Resizable Underlines Faire des traits entre chaque ligne en javascript Bof, mais …
49 An Adaptive Layout Technique Changer la mise en page suivant la taille du navigateur par javascript Bien
50 CSS+HTML Visual Sitemap Un arbre avec des définitions imbriquées Bien, mais …
51 Custom Reading Width Modifier la largeur d’un texte en fluide ou fixe Non
52 CSS Alert Message Une icone à gauche d’un paragraphe Bien
53 CSS Production Notes Des notes par dessus le site. Bof

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 ?

Commentaires