Mise en forme « façon étiquette »

J’aime beaucoup la mise en forme « façon étiquette » utilisée dans les recommendations W3C.

Mise en forme « façon étiquette » au W3C

Notez, si vous allez sur le site du W3C (exemple), que sur tous les navigateurs à l’exception d’Opera, vous ne verrez pas les chiffres en caractères romain, pour la simple et bonne raison que les autres navigateurs n’ont pas jugé utile de gérer counter-increment.

L’« étiquette » est en fait un contenu autogénéré avec des retraits négatifs.

Voici le code :

.epigraph:before { 	content:"Example " counter(exampleno,upper-roman); 	counter-increment:exampleno; 	left:-2.5em; 	position:absolute; 	top:-0.6em }

Et dans un fichier séparé (parce que je n’arrive toujours à embarquer des CSS, j’ignore pourquoi), voici deux implémentations, d’abord minimale et ensuite tel que chez le W3C (modulo quelques modifications mineures). Attention, vous pourriez bien ne rien voir. Ma version allégée fonctionne sur Opera 9.0.1, mais pas sur Safari 2.0.4. Firefox me donne encore des résultats différents et je ne sais pas lequel à raison, pour le coup. J’ai séparé le code que je considère minimal des enrichissements W3C, ceci grâce à la méthode des classes multiples.

Page de visualisation

flattr this!