Les :read-writeet :read-onlysélecteurs sont deux pseudo-classes de mutabilité visant à rendre plus facile sous forme coiffage basé sur disabled, readonlyet les contenteditableattributs HTML. Bien que la prise en charge du navigateur ne soit pas si mauvaise, les différentes implémentations sont assez bancales.
Selon les spécifications CSS officielles, un :read-writesélecteur correspondra à un élément lorsque:
- c'est soit un
inputqui n'areadonlyni desdisabledattributs. - c'est un
textareaqui n'areadonlynidisabled - c'est tout autre élément éditable (grâce à l'
contenteditableattribut)
Syntaxe et exemple
/* Any element that is not writable */ :read-only ( ) /*… so you might want to scope it */ input:read-only, textarea:read-only, (contenteditable):read-only ( cursor: not-allowed; ) /* Any enabled text input or enabled textarea or element with the contenteditable attribute */ :read-write ( background: white; cursor: text; )Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 36 | 3 * | Non | 13 | 9 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Il existe une différence majeure entre ce qui est recommandé dans les spécifications et ce que font réellement les navigateurs. Par exemple, si nous nous en tenons aux spécifications, chaque élément qui est modifiable par l'utilisateur mais désactivé ( disabledou readonly) ou tout simplement non modifiable par l'utilisateur doit être ciblé par un :read-onlysélecteur non qualifié .
| Chrome | Firefox | Safari | Opéra | |
|---|---|---|---|---|
input | :lire écrire | :lire écrire | :lire écrire | :lire écrire |
input(disabled) | :lire écrire | :lire écrire | :lire écrire | :lire écrire |
input(readonly) | :lecture seulement | :lecture seulement | :lecture seulement | :lecture seulement |
(contenteditable) | - | :lire écrire | - | :lecture seulement |
* | - | :lecture seulement | - | :lecture seulement |
Pendant ce temps, seul Firefox semble le faire, et apparemment pas trop bien non plus puisqu'il considère une disabledentrée comme :read-write. En ce qui concerne Opera ne pas étiqueter un contenteditableélément comme :read-write, c'est simplement parce qu'il ne prend pas en charge contenteditable.