:read-writeA :read-onlyselektory jsou dva mutability pseudo-třídy zaměřené na to, aby forma styling jednodušší na základě disabled, readonlya contenteditableHTML atributy. I když podpora prohlížeče není tak špatná, různé implementace jsou docela hloupé.
Podle oficiálních specifikací CSS :read-writebude selektor odpovídat prvku, když:
- je to buď
inputkterý nemáreadonlyanidisabledatributy. - je to,
textareakteré nemá ani,readonlyanidisabled - je to jakýkoli jiný upravitelný prvek (díky
contenteditableatributu)
Syntaxe a pří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 prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 36 | 3 * | Ne | 13 | 9 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Existuje zásadní rozdíl mezi tím, co je doporučeno ve specifikacích, a tím, co vlastně dělají prohlížeče. Například pokud se budeme držet specifikací, každý prvek, který je uživatelsky upravitelný, ale deaktivovaný ( disablednebo readonly) nebo prostě není uživatelsky upravitelný, by měl být zaměřen nekvalifikovaným :read-onlyselektorem.
| Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :číst psát | :číst psát | :číst psát | :číst psát |
input(disabled) | :číst psát | :číst psát | :číst psát | :číst psát |
input(readonly) | :pouze ke čtení | :pouze ke čtení | :pouze ke čtení | :pouze ke čtení |
(contenteditable) | - | :číst psát | - | :pouze ke čtení |
* | - | :pouze ke čtení | - | :pouze ke čtení |
Mezitím se zdá, že to dělá pouze Firefox, a zjevně ne příliš dobře, protože považuje disabledvstup za :read-write. Pokud jde o to, že Opera neoznačuje contenteditableprvek jako :read-write, je to jednoduše proto, že nepodporuje contenteditable.