Le Hollandais Volant

C'est quoi « contenteditable » ? C'est un attribut HTML, comme le « href » (dans les liens) ou le « src », « alt » dans les images.

Cet attribut permet de rendre le contenu éditable par l'utilisateur. Ce n'est pas un formulaire, donc les données ne sont pas transmissibles au serveur, mais un <div> avec cet attribut pourra par exemple être édité dans le navigateur.

À quoi ça peut bien servir ?
Je sais pas trop à quoi ça sert « officiellement ». Pour le moment, j'y ai trouvé deux usages :

L’orthographe

On ne le dirait pas, mais je vérifie quand même mes pages au correcteur orthographique intégré dans mon éditeur de texte. Malheureusement, trouver les fautes dans du code HTML brut c'est bien moins facile que dans la page web finale (à cause des éléments de code qui sont eux-mêmes soulignés par le correcteur).
Ce que je fais maintenant : je place l'attribut « contenteditable » sur le body de la page (temporairement). Vu que le contenu est éditable, les mots inconnus sont soulignés par le correcteur de mon navigateur (comme dans les formulaires).

Magnifique non ? Ensuite, il faut corriger dans le fichier source (pas la page) et ça ne fait toujours que l'orthographe (pas la grammaire), mais c'est plus pratique…

Intégrer un éditeur CSS dans la page

En HTML5, on peut placer un <style> en plein milieu du code (plus uniquement dans l'entête). On peut aussi afficher ce <style> comme une boîte, et on peut aussi le rendre éditable.
Or, comme il s'agit toujours d'un élément <style>, le texte (du CSS) qui s'y trouve est pris en compte par le navigateur. En modifiant son contenu, on peut donc coder du CSS directement dans la page, et le voir s'appliquer en direct.
Plus besoin de taper du code, de changer de fenêtre, de recharger la page, de revenir à l'éditeur CSS et ainsi de suite !

C'est tout simplement fabuleux (attention toutefois : le code que vous tapez n'est pas enregistré : il ne faut pas oublier de le copier-coller dans le vrai fichier CSS ensuite).

En prime je vous donne un exemple :
Le bloc noir ci-dessous est éditable : allez-y ! Ajoutez tout le CSS que vous voulez, même pour tout le reste de la page : #entete (mon entête) ou #post (pour un article par exemple). Si vous faites une connerie, rien n'est conservé et il suffit de rafraîchir la page.
Si vous ne connaissez pas le CSS, vous pouvez essayer de changer le « white » en « red » ou « yellow » pour changer la couleur du texte en rouge puis en jaune :

Pourquoi ça va m'aider ce truc ?
Parce qu'avec un attribut HTML5 et quelques lignes de CSS, je transforme mon navigateur en éditeur WYSIWYG qui applique les changements en temps réel, sans requêtes serveur pour rafraîchir la page, c'est bien plus rapide !

Plus besoin de 3 tonnes de AJAX gourmand en ressources serveur et client ainsi qu'en bande passante : une seule ligne de JS suffirait si l'on veut sauver le code (copier le code tapé dans un formulaire, et envoyer le formulaire).

image (qui va très bien avec l'article pour une fois) de Noah Sussman