De :read-writeen :read-onlyselectors zijn twee veranderlijkheid pseudo-klassen die zijn gericht op het gemakkelijker maken van vormgeving op basis van disabled, readonlyen contenteditableHTML-attributen. Hoewel de browserondersteuning niet zo slecht is, zijn de verschillende implementaties nogal wankel.
Volgens de officiële CSS-specificaties komt een :read-writeselector overeen met een element wanneer:
- het is óf een
inputheeftreadonlynochdisabledattributen. - het is een
textareadie nochreadonlynoch heeftdisabled - het is elk ander bewerkbaar element (dankzij het
contenteditableattribuut)
Syntaxis en voorbeeld
/* 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; )Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 36 | 3 * | Nee | 13 | 9 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Er is een groot verschil tussen wat wordt aanbevolen in de specificaties en wat de browsers werkelijk doen. Als we ons bijvoorbeeld aan de specificaties houden, moet elk element dat door de gebruiker kan worden bewerkt, maar uitgeschakeld ( disabledof readonly) of simpelweg niet door de gebruiker kan worden bewerkt, worden getarget door een niet-gekwalificeerde :read-onlyselector.
| Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :lezen schrijven | :lezen schrijven | :lezen schrijven | :lezen schrijven |
input(disabled) | :lezen schrijven | :lezen schrijven | :lezen schrijven | :lezen schrijven |
input(readonly) | :alleen lezen | :alleen lezen | :alleen lezen | :alleen lezen |
(contenteditable) | | :lezen schrijven | | :alleen lezen |
* | | :alleen lezen | | :alleen lezen |
Ondertussen lijkt alleen Firefox dat te doen, en blijkbaar ook niet al te best, aangezien het een disabledinvoer beschouwt als :read-write. Wat betreft het feit dat Opera een contenteditableelement niet tagt als :read-write, het is simpelweg omdat het geen ondersteuning biedt contenteditable.