Contenu éditable grâce au CSS3

Permettre l'édition en ligne aux utilisateurs sans utiliser JavaScript

Paul Underwood

Traducteur

Sébastien Germez

Ce tutoriel va vous montrer comment utiliser le CSS3 pour rendre du contenu éditable en ligne.

Commentez

- Titre : Contenu éditable grâce au CSS3

- Auteur : Paul Underwood

- Traducteur : Sébastien Germez

- Parution : 11 septembre 2012

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ®  Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

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

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

- V. Conclusion

- VI. Liens

- VII. Remerciements

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.