: skaityti-rašyti /: tik skaityti - CSS-gudrybės

Turinys

:read-writeIr :read-onlyselektoriai yra du Wzruszalność pseudo-klasės siekiant padaryti formą stiliaus lengviau remiantis disabled, readonlyir contenteditableHTML atributai. Nors naršyklės palaikymas nėra toks blogas, įvairūs diegimai yra gana nerealūs.

Pagal oficialias CSS specifikacijas, :read-writeparinkiklis atitiks elementą, kai:

  • tai yra arba inputkuris turi, readonlynei disabledatributų.
  • tai yra textareakuris neturi readonlyneidisabled
  • tai yra bet kuris kitas redaguojamas elementas (dėka contenteditableatributo)

Sintaksė ir pavyzdys

/* 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; )

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
36 3 * Ne 13 9

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 9.0–9.2

Yra didelis skirtumas tarp rekomenduojamų specifikacijose ir to, ką iš tikrųjų veikia naršyklės. Pvz., Jei mes laikysimės specifikacijų, kiekvienas elementas, kurį galima redaguoti vartotojui, bet išjungtas ( disabledarba readonly) arba paprasčiausiai jo negalima redaguoti, turėtų būti pasirinktas be kvalifikacijos :read-only.

„Chrome“ „Firefox“ „Safari“ Opera
input :skaityk rašyk :skaityk rašyk :skaityk rašyk :skaityk rašyk
input(disabled) :skaityk rašyk :skaityk rašyk :skaityk rašyk :skaityk rašyk
input(readonly) :Tik skaitymui :Tik skaitymui :Tik skaitymui :Tik skaitymui
(contenteditable) - :skaityk rašyk - :Tik skaitymui
* - :Tik skaitymui - :Tik skaitymui

Tuo tarpu atrodo, kad tai daro tik „Firefox“ ir, matyt, ne taip gerai, nes mano, kad tai yra disabledindėlis :read-write. Kalbant apie contenteditabletai :read-write, kad „ Opera“ nepažymi elemento kaip , tai tiesiog dėl to, kad jis nepalaiko contenteditable.

Įdomios straipsniai...