:read-writeA :read-onlyselektory sú dva mutability pseudo-triedy zamerané na to, aby forma styling jednoduchšie na základe disabled, readonlya contenteditableHTML atribúty. Aj keď podpora prehľadávača nie je až taká zlá, rôzne implementácie sú dosť nepríjemné.
Podľa oficiálnych špecifikácií CSS :read-writebude selektor zodpovedať prvku, keď:
- je to buď
inputktorý nemá,readonlyanidisabledatribúty. - je to
textareaktorá nemáreadonlyanidisabled - je to akýkoľvek iný upraviteľný prvok (vďaka
contenteditableatribútu)
Syntax a príklad
/* 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; )Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 36 | 3 * | Nie | 13 | 9 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Existuje zásadný rozdiel medzi tým, čo sa odporúča v špecifikáciách, a tým, čo skutočne robia prehliadače. Napríklad, ak sa budeme držať špecifikácií, každý prvok, ktorý je editovateľný používateľom, ale zakázaný ( disabledalebo readonly) alebo jednoducho nie je editovateľný používateľom, by mal byť zameraný nekvalifikovaným :read-onlyselektorom.
| Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :čítaj píš | :čítaj píš | :čítaj píš | :čítaj píš |
input(disabled) | :čítaj píš | :čítaj píš | :čítaj píš | :čítaj píš |
input(readonly) | :iba na čítanie | :iba na čítanie | :iba na čítanie | :iba na čítanie |
(contenteditable) | - | :čítaj píš | - | :iba na čítanie |
* | - | :iba na čítanie | - | :iba na čítanie |
Zatiaľ sa zdá, že tak robí iba Firefox, a zjavne nie príliš dobre, pretože považuje disabledvstup za :read-write. Pokiaľ ide o to, že Opera neoznačuje contenteditableprvok ako :read-write, je to jednoducho preto, lebo nepodporuje contenteditable.