:read-writeȘi :read-onlyselectoare sunt două mutabilității pseudo-clase cu scopul de a face mai ușoară formă stilizarea bazat pe disabled, readonlyși contenteditableatribute HTML. Deși suportul pentru browser nu este atât de rău, diferitele implementări sunt destul de ciudate.
Conform specificațiilor CSS oficiale, un :read-writeselector se va potrivi cu un element atunci când:
- este fie un
inputcarereadonlynu are nicidisabledatribute. - este un
textareacare nu are nicireadonlynicidisabled - este orice alt element editabil (datorită
contenteditableatributului)
Sintaxă și exemplu
/* 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; )Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 36 | 3 * | Nu | 13 | 9 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Există o diferență majoră între ceea ce este recomandat în specificații și ceea ce fac de fapt browserele. De exemplu, dacă ne ținem de specificații, fiecare element care poate fi modificat de utilizator, dar dezactivat ( disabledsau readonly) sau pur și simplu nu poate fi modificat de utilizator ar trebui să fie vizat de un :read-onlyselector necalificat .
| Crom | Firefox | Safari | Operă | |
|---|---|---|---|---|
input | :Citeste, scrie | :Citeste, scrie | :Citeste, scrie | :Citeste, scrie |
input(disabled) | :Citeste, scrie | :Citeste, scrie | :Citeste, scrie | :Citeste, scrie |
input(readonly) | : numai în citire | : numai în citire | : numai în citire | : numai în citire |
(contenteditable) | - | :Citeste, scrie | - | : numai în citire |
* | - | : numai în citire | - | : numai în citire |
Între timp, numai Firefox pare să facă acest lucru și, aparent, nu prea bine, deoarece consideră că este o disabledintrare :read-write. În ceea ce privește Opera care nu etichetează un contenteditableelement ca :read-write, este pur și simplu pentru că nu acceptă contenteditable.