Den :read-writeog :read-onlyvælgere er to foranderlighed pseudo-klasser, der sigter mod at gøre formular styling nemmere baseret på disabled, readonlyog contenteditableHTML-attributter. Mens browserstøtten ikke er så dårlig, er de forskellige implementeringer ret skumle.
I henhold til de officielle CSS-specifikationer :read-writematcher en vælger et element, når:
- det er enten en
inputsom harreadonlyellerdisabledattributter. - det er en
textareader hverken harreadonlyellerdisabled - det er ethvert andet redigerbart element (takket være
contenteditableattributten)
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; )Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 3 * | Ingen | 13 | 9 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Der er en stor forskel mellem, hvad der anbefales i specifikationerne, og hvad browsere rent faktisk gør. For eksempel, hvis vi holder os til specifikationerne, skal hvert element, der kan redigeres af brugeren, men deaktiveres ( disabledeller readonly) eller simpelthen ikke brugerredigerbar, målrettes af en ukvalificeret :read-onlyvælger.
| Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :læse skrive | :læse skrive | :læse skrive | :læse skrive |
input(disabled) | :læse skrive | :læse skrive | :læse skrive | :læse skrive |
input(readonly) | :Læs kun | :Læs kun | :Læs kun | :Læs kun |
(contenteditable) | - | :læse skrive | - | :Læs kun |
* | - | :Læs kun | - | :Læs kun |
I mellemtiden ser det kun ud til, at Firefox gør det, og tilsyneladende heller ikke for godt, da det betragter et disabledinput som :read-write. Med hensyn til Opera, der ikke mærker et contenteditableelement som :read-write, er det simpelthen fordi det ikke understøtter contenteditable.