Le projet est abandonné ou profit d'une définition plus générique : taskList.

Titre

css checklist

Auteurs

Nibau Rui

Date

27 août 2011

Statut

abandonné

Code HTML de la checklist

Le code HTML pour représenter cette checklist est simple :

• Puisqu'il s'agit d'une liste, on utilisera un élément liste, ordonnée, non ordonnée ou même une liste de description.
• Pour le code d'une entrée de liste cochée, j'ai opté pour la balise del. Evidemment, un « texte supprimé » n'a pas le même sens qu'une « tâche effectuée » mais on peut aussi considéré que ce qui est fait est à supprimer de la liste des tâches(1).
• Les entrées de liste non cochées ou non effectuées seront représentées par une balise ins ; le choix paraît moins évident, mais il s'agit d'avoir une homogénéité de structure et de pouvoir utiliser l'attribut datetime (voir ci-dessous).

Lorsque Olivier Patry a relayé cette astuce sur le forum AlsaCréations, mi-septembre 2006, Laurent Denis en a profité pour apporter quelques petites précisions. Pour garder la trace de l'évolution de la liste de tâches, il est possible d'utiliser l'attribut datetime afin de noter la date de suppression (balise del) ou d'insertion (balise ins) d'une entrée.

Par ailleurs, la gestion de case à cocher dans le logiciel zim m'a amené à implémenter le même type de syntaxe wiki dans ma propre syntaxe, et donc à faire évoluer la checklist pour pouvoir distinguer deux états cochés :

• L'un où la tâche a été effectué (comportement par défaut).
• L'autre où l'exécution de la tâche a échoué ; ce dernier se traduira par la présence d'une classe « ko ».

Au final, la checklist sera codée de la manière suivante :

<ul class="checklist">
    <li><del datetime="2006-09-16">Première tâche : réussite</del></li>
    <li><del class="ko" datetime="2006-09-16">Deuxième tâche : échec</del></li>
    <li><ins datetime="2006-09-15">Troisième tâche : à faire</ins></li>
</ul>

<dl class="checklist">
    <dt>Tâches à effectuer</dt>
    <dd><del datetime="2006-09-16">Première tâche : réussite</del></dd>
    <dd><del class="ko" datetime="2006-09-16">Deuxième tâche : échec</del></dd>
    <dd><ins datetime="2006-09-15">Troisième tâche : à faire</ins></dd>
</dl>

Le code HTML est signifiant en lui-même, sans avoir besoin d'y appliquer les styles de la classe checklist ; ces styles permettent uniquement d'assurer une certaine mise en forme.

Code CSS de la checklist

Les premières versions de la checklist se basait sur l'utilisation d'image pour illustrer l'état coché / non coché d'un item mais dés le début une solution à base des pseudo-éléments et de caractères spéciaux était proposée. Avec la maturation des navigateurs web, c'est cette dernière version qui est dorénavant privilégiée et améliorée.

Contenu indisponible.

Nous obtiendrons quelque chose du genre :

Combinaison avec un arbre hiérarchique

Il est par ailleurs possible de combiner la checklist avec un arbre hiérarchique. Le code HTML sera alors le suivant :

<ul class="rnb tree checklist">
    <li><strong>Première série de tâches</strong>
        <ul>
            <li><del datetime="2006-09-16">Première tâche</del></li>
            <li><del class="ko" datetime="2006-09-16">Deuxième tâche</del></li>
            <li><ins datetime="2006-09-15">Troisième tâche</ins></li>
        </ul>
    </li>
    <li><strong>Deuxième série de tâches</strong>
        <ul>
            <li><del datetime="2006-09-16">Première tâche</del></li>
            <li><del class="ko" datetime="2006-09-16">Deuxième tâche</del></li>
            <li><ins datetime="2006-09-15">Troisième tâche</ins></li>
        </ul>
    </li>
</ul>

Ce qui donnera :

C'est un code qui peut sembler fastidieux à taper, mais avec une syntaxe wiki courante, cela reste très abordable. Voici à titre d'exemple ce que donne le code ci-dessus avec une syntaxe wiki dérivée de celle de DotClear :

°°rnb tree checklist°°
- Première série de tâches
    - --2006-09-16|première tâche--
    - --2006-09-16|deuxième tâche--
    - ++2006-09-15|troisième tâche++
- Deuxième série de tâches
    - --2006-09-16|première tâche--
    - --2006-09-16|deuxième tâche--
    - ++2006-09-15|troisième tâche++

Avec la nouvelle syntaxe wiki inspirée par celle de Zim, c'est encore plus simple :

°°rnb tree checklist°°
- Première série de tâches
    [*] 2006-09-16|première tâche
    [x] 2006-09-16|deuxième tâche
    [ ] 2006-09-15|troisième tâche
- Deuxième série de tâches
    [*] 2006-09-16|première tâche
    [x] 2006-09-16|deuxième tâche
    [ ] 2006-09-15|troisième tâche

Checklist en javascript

A venir...

Historique

2006-09-16

première version

2006-12-23

• Mise en place du système portant sur le datetime.
• Combinaison de la checklist avec un arbre hiérarchique.

2011-07-15

• Abandon de la version avec image.
• Utilisation des CSS 3 et des caractères spéciaux.

2011-08-27

• Implémentation de la syntaxe wiki pour les items cochés validés et non validés.
• Gestion de l'état coché non validé à travers la classe « ko ».

Ressources et références

RAGGETT, Dave ; LE HORS, Arnaud ; JACOBS, Ian. Spécification HTML 4.01. W3C, 24 décembre 1999. 9.4 Les marques de révision : les éléments INS et DEL

HICKSON, Ian. HTML 5. W3C, 04 mars 2010. 4.7 Edits

RAGGETT, Dave ; LE HORS, Arnaud ; JACOBS, Ian. Spécification HTML 4.01. W3C, 24 décembre 1999. 10 Les listes