:read-writeJa :read-onlyvalijad on kaks muutlikkuse pseudo-klassi, mille eesmärk on muuta vormi kujundamisega lihtsam põhineb disabled, readonlyja contenteditableHTML atribuudid. Kuigi brauseritugi pole nii hull, on erinevad rakendused üsna viletsad.
Ametlike CSS-spetsifikatsioonide :read-writekohaselt sobib valija elemendiga, kui:
- see on kas an,
inputmillel polereadonlyegadisabledatribuute. - see on a,
textareamillel pole eireadonlyeidisabled - see on mis tahes muu redigeeritav element (tänu
contenteditableatribuudile)
Süntaks ja näide
/* 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; )Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 3 * | Ei | 13 | 9 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0–9,2 |
Spetsifikatsioonides soovitatava ja brauserite tegeliku vahel on suur erinevus. Näiteks kui me järgime spetsifikatsioone, peaks iga kvalifitseerimata valik olema suunatud kõigile elementidele, mis on kasutaja poolt muudetavad, kuid keelatud ( disabledvõi readonly) või lihtsalt mitte kasutaja poolt muudetavad :read-only.
| Chrome | Firefox | Safari | Ooper | |
|---|---|---|---|---|
input | :lugema kirjutama | :lugema kirjutama | :lugema kirjutama | :lugema kirjutama |
input(disabled) | :lugema kirjutama | :lugema kirjutama | :lugema kirjutama | :lugema kirjutama |
input(readonly) | :Loe ainult | :Loe ainult | :Loe ainult | :Loe ainult |
(contenteditable) | - | :lugema kirjutama | - | :Loe ainult |
* | - | :Loe ainult | - | :Loe ainult |
Vahepeal näib seda tegevat ainult Firefox ja ilmselt ka mitte liiga hästi, kuna ta peab disabledsisendiks :read-write. Mis puudutab Opera contenteditableelementi sildistamata jätmist :read-write, siis lihtsalt sellepärast, et see ei toeta contenteditable.