Plan de site — Navigation
Blog & Blues Techniques et Standards de la Qualité Web

Accueil > weblog

- Lire le billet précédent - Lire le billet suivant -

Faites des statistiques de votre HTML à l'aide des compteurs CSS

Par Laurent Denis, le 24 décembre 2004.

Voici un petit détournement amusant des compteurs générés CSS permettant de dresser quelques statistiques d'emploi des divers éléments HTML dans une page Web, ou de révéler l'utilisation de tel ou tel type de balisage.

Rappel : le fonctionnement des compteurs

CSS2 comprend un mécanisme de compteurs automatiques destiné principalement à générer des marqueurs numérotés. Il repose sur :

  • La propriété counter-increment: foo appliqué à l'élément pour lequel on souhaite incrémenter la numérotation ;
  • La valeur counter(foo) appliquée à la propriété content d'un pseudo-sélecteur :before appliqué à l'élément concerné.

Pour numéroter par exemple, les titres h3 de cette page, on écrira :

h3:before {
counter-increment: titre;
content: counter(titre) ".\00A0";
}

Détournement des compteurs pour analyser le code HTML

Puisque counter-increment: foo permet d'incrémenter un compteur à chaque occurence d'un élément HTML, il peut être utilisé pour compter aussi bien :

  • Le nombre total d'éléments HTML contenu dans le body : body * {counter-increment: body;}
  • Le nombre d'occurence d'un ou plusieurs éléments librement choisis : div, span { counter-increment: generic body;} (Nous incrémentons également le compteur body précédent afin que les div et les span soient pris en compte dans le total des éléments présents).
  • Des imbrications d'éléments, par exemple : table table {counter-increment: table body;} (technique utilisée par l'un des styles utilisateurs par défaut d'Opera)
  • Des éléments réputés propriétaires : 
    audioscope, bgsound, blackface, blink, bq, comment, embed, fn, ilayer, keygen, layer, limittext, listing, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, plaintext, server, shadow, sidebar, spacer, wbr, xmp  {
counter-increment: prop body;
}
    (A ce propos, n'hésitez pas à me signaler les éventuels éléments propriétaires oubliés dans cette liste. Merci smiley clin d'oeil )
  • etc.

L'affichage des résultats doit obligatoirement intervenir après traitement de la totalité du contenu HTML, autrement-dit dans un sélecteur body:after ou html:after :

html:after {
display: block;
content: "Le <body> de cette page contient "
  counter(body) " élément(s) dont\A- "
  counter(generic) " élément(s) générique(s) <div> et <span>\A- "
  counter(table) " imbrication(s) de tableaux";
}

Il faut noter que :

  • Les éléments dotés d'une propriété display: none n'incrémentent pas les compteurs générés. Il est donc nécessaire de rétablir la valeur usuelle du display des éléments visés ;
  • Les compteurs générés CSS ne sont supportés que par de rares navigateurs, dont Opera (Ils ne sont pas implémentés par IE, Firefox, Mozilla).

A titre d'exemple, vous pouvez tester dans Opera la feuille de style alternative Test compteurs CSS associée à cette page. Elle pourrait également être utilisée comme feuille de style user applicable à n'importe quelle page visitée, afin de vérifier rapidement la présence de tel ou tel particularité de balisage (par exemple, des éléments propriétaires, des éléments obsolètes, des éléments de présentation, etc.)

Trackbacks

Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.

Commentaires

Thomas, le 24 décembre 2004

C'est pas mal comme fonctionnalité smiley sourire

Je remarque que sous Opéra 8, je peux sélectionner ce contenu or la logique ne voudrait-elle aps qu'on ne puisse sélectionner le contenu généré par CSS ?

Laurent Denis, le 24 décembre 2004

J'avoue que la logique qui voudrait qu'on ne puisse pas sélectionner un contenu généré CSS m'échappe totalement, aussi bien:
- d'un point de vue pratique : quel serait l'intérêt pour l'utilisateur de ne pas pouvoir sélectionner un contenu généré ?
- que théorique: qu'est-ce qui le justifierait dans les spécifications (X)HTML ou CSS ?

David Latapie, le 17 janvier 2005

Très sympa comme fonctionnalité. Je vais l'ajouter à un billet de débug, tiens.

Testé sur Opera 8, les caractères accentués apparaissent en hiéroglypes. J'ai essayé en changeant le charset en utf-8 est en resauvegardant/refraichissant, rien à faire.

Laurent Denis, le 17 janvier 2005

David : as-tu utilisé :
@charset "ISO-8859-1";
(ou autre encodage approprié) en tête de ta CSS ?

David Latapie, le 17 janvier 2005

J'ai copié collé ta CSS, sans rien toucher.

Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.