Den :read-writeog :read-onlyvelgere er to mutability pseudo-klasser som tar sikte på å gjøre skjemaet styling enklere basert på disabled, readonlyog contenteditableHTML-attributter. Selv om nettleserstøtten ikke er så ille, er de forskjellige implementeringene ganske vanskelige.
I henhold til de offisielle CSS-spesifikasjonene vil en :read-writevelger samsvare med et element når:
- det er enten et
inputsom harreadonlyellerdisabledattributter. - det er en
textareasom verken harreadonlyellerdisabled - det er et hvilket som helst annet redigerbart element (takket være
contenteditableattributtet)
Syntaks og eksempel
/* 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; )Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 36 | 3 * | Nei | 1. 3 | 9 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Det er en stor forskjell mellom det som anbefales i spesifikasjonene og hva nettleserne faktisk gjør. For eksempel, hvis vi holder oss til spesifikasjonene, bør hvert element som kan redigeres av brukeren, men deaktiveres ( disabledeller readonly) eller rett og slett ikke kan redigeres av brukeren, målrettes av en ukvalifisert :read-onlyvelger.
| Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :Les Skriv | :Les Skriv | :Les Skriv | :Les Skriv |
input(disabled) | :Les Skriv | :Les Skriv | :Les Skriv | :Les Skriv |
input(readonly) | : skrivebeskyttet | : skrivebeskyttet | : skrivebeskyttet | : skrivebeskyttet |
(contenteditable) | - | :Les Skriv | - | : skrivebeskyttet |
* | - | : skrivebeskyttet | - | : skrivebeskyttet |
I mellomtiden ser det bare ut til at Firefox gjør det, og tilsynelatende heller ikke så bra, siden det anser et disabledinndata som :read-write. Når det gjelder Opera som ikke merker et contenteditableelement som :read-write, er det ganske enkelt fordi det ikke støtter contenteditable.