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▲
-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▲
-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.