Henrick Kac me donne sa stratégie de mise à jour dans le billet Expérience : postdatage/nécromancie pour les pages mises à jour. Comme souvent, ce qui devait être un commentaire devient un billet.

Henrik dit signaler les mises à jour par des commentaires, notamment parce que ceux-ci sont datés.

Les commentaires, c’est ce que j’ai fait un temps, mais c’est finalement une mauvaise solution :

• le billet se trouve répartie sur plusieurs zones (billet + commentaires) ;
• seuls les lecteurs récents et Web (ou RSS de commentaires) savent qu’il y a eu une addition. Avec le greffon commentaires récents, ça permet d’être un peu plus visible, indépendamment de la date du billet.

Mais on reste sur quelque chose de sémantiquement pas propre et on voit les résultats après. On n’accorde pas la même importance à un billet et à un commentaire. D’une manière générale, toujours commencer par se poser cette question : Qu’est-ce que je veux dire ?

Les mots pour le dire : ins et del

Trop peu de gens la savent, mais le HTML a tout ce qu’il faut (à quelques limitations près) :

• les balises ins et del
• l’attribut datetime

Usage

ins permet de signaler qu’un texte est un ajout. del, comme vous l’aurez compris, de signaler que c’est une suppression. Quant à datetime, elle signale la date de la modification. Ainsi, l’argument de la date dans les commentaires saute. On utilise le format ISO¹ : yyyy-mm-dd et, si vous voulez poussez, hh-mm-ss. ins datetime="2005-02-11" signale le début d’une insertion le 11 février 2005

C’est laid

Quant à la police strike :

• Ce n’est pas du HTML (s), mais du CSS (text-decoration:strike:trough).
• Comme n’importe quel élément, ins et del peuvent se modifier.

On ne devrait jamais choisir (ou refuser) un élément parce qu’il n’est pas beau. Agir ainsi démontre que l’on n’a pas complètement intégré le concept de séparation du sens et de l’apparence, pourtant au cœur de XHTML et CSS.

Pour del, je n’ai rien trouvé de mieux de plus parlant que le strike-through. J’avais un temps utilisé display:none, mais tant du fait des limitations de del que parce que barrer le texte est encore le plus parlant, je reste sur la valeur par « défaut ».

Pour ins, j’ai deux demi-solutions :

• border-bottom:silver thin dashed. Malheureusement, ça pose des problèmes avec les éléments en bloc.
• text-underline-style:dot-dot-dash, mais c’est du CSS3, personne ne le gère et ce n’est pas encore finalisé.

Conclusion

Comme on le voit, avec un peu d’inventivité et surtout une connaissance des éléments (X)HTML, on peut gérer assez comvenablement les ajouts et suppressions.

Ensuite, HTML est un langage de description de document, non de description de site. Il n’a pas pour objectif de signaler un article mis à jour. Pour le moment, on bidouille par exemple en postdatant manuellement les billets. Mais on pourrait rêver à un CMS (ou un blog ; au hasard, DotClear) qui, pour chaque billet, vérifierai la date du plus récent changement important (ceux-ci étant signalés par l’attribut datetime) et signalerai en conséquence (en mettant le billet « en haut », en renseignant une boîte « dernières mises à jour » ou quoi que ce soit d’autre. Encore une fois, ce ne serait qu’une histoire de présentation.

La présentation attire les visiteurs. Si elle bien faite, elle n’est ni trop agressive, ni trop peu visible. Les nouveaux visiteurs voient directement l’article dans son dernier état et les anciens savent qu’il y a eu une modification.

Et les moteurs de recherche, voyant, une mise à jour, réindexent la page (mais ça, ils le feront quelle que soit la manière dont vous mettrez à jour). Accessoirement, comment ceux-font-ils pour savoir que la page a été mise à jour ? Ils regardent le champ HTTP signalant qu’il y a une mise à jour. Exactement comme pour ins et del… Si on vous le dit !

1. Incidemment, c’est aussi le format japonais.

Il n’est pas possible de spécifier l’insertion ou l’actualisation de certains blocs, comme les puces. On ne peut que spécifier l’actualisation du contenu de ces blocs.

Il y a une grosse limitation dans le (X)HTML actuel : les balises d’actualisation (ins et del) devraient avoir la priorité sur toutes les autres (sauf html, head et body) mais ce n’est pas le cas.

En effet, quand j’actualise un document, il m’arrive d’actualiser des blocs. À l’heure actuelle, je peux actualiser le contenu d’un bloc, mais pas le bloc lui-même.

Un exemple sera plus parlant :

Techniquement correct mais sémantiquement incorrect

<ul> <li></li> <li></li> <li><ins datetime="yyyy-mm-dd"></ins></li> </ul>

Sémantiquement correct mais techniquement incorrect

<ul> <li></li> <li></li> <ins datetime="yyyy-mm-dd"><li></li></ins> </ul>

Vous pourriez me dire que je coupe les cheveux en quatre. Outre que ce n’est pas le cas si on parle de sémantique (j’ai ajouté un point, et non mis à jour le contenu d’un point préexistant), voici un exemple tiré de la vie réelle, de ce blog : del {display:none}

Dans ce cas, voici à quoi devrait ressembler le code final et à quoi il ressemble en réalité parce que les spécifications comportent une lacune :

Apparence souhaitée

• blah
• blah

Apparence possible

• blah
• blah

Introduction

L’élément ins permet de signaler des ajouts par rapport au document original. Son contraire est l’élément del et les deux ont comme principal attribut datetime, celui-ci devant être renseigné sour la forme yyyy-mm-dd. Pour plus d’information, vous pouvez consulter la traduction française de la référence sur ins.

Au fait !

Passons au vif du sujet : la mise en style. Je ne vais pas faire compliqué, l’exemple parlera de lui-même.

ins[datetime]:before { 	content:"[MAJ - "attr(datetime)"] "; 	display:marker }

Voilà comment le lire :

« Ceci est le style pour l’attribut datetime de l’élément ins. Avant l’élément lui-même, insérer automatiquement le texte suivant : [MAJ - date de modification]. »

Suggestions

Je vous conseille d’ajouter un marqueur de fin de mise à jour, sinon, on ne verra pas la différence entre le texte mis à jour et le texte normal. Diverses suggestions incluent :

• pseudo-classe :after
• soulignement intermittent (point ou tirets) :
  • border-bottom:.1em dashed;text-decoration:none
  • border-bottom:.1em dotted;text-decoration:none

  Certains navigateurs soulignent ins par défaut. Il faut donc le désactiver sous peine d’un vilain effet : le soulignement continu convient pour des petits textes, pas pour des paragraphes entiers comme c’est souvent le cas (au moins pour moi).

J’aimerai cependant, en lieu et place d’une date informatique, avoir une date lisible par les humains. Connaissez-vous une manière de transformer :

yyyy-mm-ddThh:mm:ss-GMTmodifié

en

jour mois année à valeur heure(s) valeur minute(s) valeur seconde(s)

Voilà, la question est posée.

Remerciements à Karl Dubost pour avoir réveillé l’attribut hreflang dans la communauté des carnettistes francophones, ce qui m’a donné motivation et base de code pour cet article.

L’excellent selfhtml.org montre comment faire avec un bloc de texte ce que l’on fait avec un tableau : ajouter une méta-information qui semble aller de soit, en l’occurrence la source.

C’est tout simple, mais comme cite est généralement utilisé comme élément, je ne pensais pas qu’il pouvait aussi être utilisé comme attribut…

<blockquote>cite="URL">Texte>/blockquote<

Malheureusement, ni Safari (1.1) ni Mozilla (1.5) n’affiche l’URL de reférence.

De même, j’ai trouvé un attribut pour les éléments ins et del :

<ins datetime="yyyy-MM-ddThh:mm:ss+hh:mm">texte inséré</ins>

<del datetime="yyyy-MM-ddThh:mm:ss+hh:mm">texte effacé</del>

Là encore, ce n’est pas affiché par Daktari ou le Mozillosaure