L' :read-writee :read-onlyselettori sono due mutabilità pseudo-classi che mirano a rendere più semplice lo styling forma sulla base di disabled, readonlye contenteditableattributi HTML. Sebbene il supporto del browser non sia così male, le varie implementazioni sono piuttosto instabili.
Secondo le specifiche CSS ufficiali, un :read-writeselettore abbinerà un elemento quando:
- o è un
inputche hareadonlynédisabledattributi. - è un
textareache non ha néreadonlynédisabled - è qualsiasi altro elemento modificabile (grazie
contenteditableall'attributo)
Sintassi ed esempio
/* 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; )Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 36 | 3 * | No | 13 | 9 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
C'è una grande differenza tra ciò che è consigliato nelle specifiche e ciò che fanno effettivamente i browser. Ad esempio, se ci atteniamo alle specifiche, ogni elemento che è modificabile dall'utente ma disabilitato ( disabledo readonly) o semplicemente non modificabile dall'utente dovrebbe essere scelto come target da un :read-onlyselettore non qualificato .
| Cromo | Firefox | Safari | musica lirica | |
|---|---|---|---|---|
input | :leggere scrivere | :leggere scrivere | :leggere scrivere | :leggere scrivere |
input(disabled) | :leggere scrivere | :leggere scrivere | :leggere scrivere | :leggere scrivere |
input(readonly) | :sola lettura | :sola lettura | :sola lettura | :sola lettura |
(contenteditable) | - | :leggere scrivere | - | :sola lettura |
* | - | :sola lettura | - | :sola lettura |
Nel frattempo, solo Firefox sembra farlo, e apparentemente non troppo bene poiché considera un disabledinput come :read-write. Per quanto riguarda Opera che non tagga un contenteditableelemento come :read-write, è semplicemente perché non supporta contenteditable.