I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Allow User Editable Content With CSS.

II. Introduction

L'édition de contenu en ligne n'est pas nouveau et est même déjà proposé par plusieurs CMS. Cela permet notamment à l'utilisateur de se rendre compte en direct des modifications qu'il apporte à sa page. Cette édition de contenu en direct est possible grâce à du JavaScript.

Il existe aujourd'hui un meilleur moyen de faire cela, avec une propriété CSS3. Il s'agit de la propriété -user-modify. Cette propriété modifie l'élément HTML pour autoriser l'utilisateur à en modifier le contenu.

Cette propriété est supportée uniquement sur les navigateurs Webkit et sur Firefox.

III. La propriété « -user-modify » et les utilisateurs Webkit

 
Sélectionnez
-webkit-user-modify: read-only | read-write | read-write-plaintext-only;

La propriété accepte trois valeurs différentes :

  • read-only : valeur par défaut, ne permet pas l'édition par l'utilisateur ;
  • read-write : autorise l'utilisateur à lire et modifier le contenu ;
  • read-write-plaintext-only : autorise l'utilisateur à lire et modifier le contenu mais uniquement avec du texte simple. Tout formatage sera perdu.

IV. La propriété « -user-modify » et les utilisateurs de Firefox

 
Sélectionnez
-moz-user-modify: read-only | read-write | write-only;

La propriété accepte également trois valeurs différentes mais qui ne sont pas tout à fait les mêmes que pour la propriété -webkit-user-modify :

  • read-only : valeur par défaut, l'utilisateur ne peut pas éditer le contenu ;
  • read-write: autorise l'utilisateur à lire et modifier le contenu de l'élément ;
  • write-only : l'utilisateur peut uniquement éditer le contenu, il ne peut pas le lire.

On note que la troisième valeur possible diffère en fonction des navigateurs.

V. Conclusion

Nous venons de voir dans ce tutoriel comment rendre un contenu éditable uniquement en CSS3, sans avoir recours à du JavaScript.

VI. Liens

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

VII. Remerciements

Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également Torgar pour sa relecture orthographique.