:read-writeVe :read-onlyseçiciler dayanan kolay stil formu hale getirmeyi amaçlayan iki mutability sözde sınıfları vardır disabled, readonlyve contenteditableHTML Özellikleri. Tarayıcı desteği o kadar da kötü olmasa da, çeşitli uygulamalar oldukça riskli.
Resmi CSS Spesifikasyonlarına göre, bir :read-writeseçici aşağıdaki durumlarda bir öğeyle eşleşecektir:
- ya bir
inputolan yareadonlydadisablednitelikleri vardır. - Bir olduğu
textareaolan nereadonlydedisabled - başka herhangi bir düzenlenebilir unsurdur (
contenteditableöznitelik sayesinde )
Sözdizimi ve Örnek
/* 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; )Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 36 | 3 * | Hayır | 13 | 9 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Spesifikasyonlarda tavsiye edilenlerle tarayıcıların gerçekte yaptıkları arasında büyük bir fark vardır. Örneğin, spesifikasyonlara bağlı kalırsak, kullanıcı tarafından düzenlenebilir ancak devre dışı bırakılmış ( disabledveya readonly) veya kullanıcı tarafından düzenlenebilir olmayan her öğe, niteliksiz bir :read-onlyseçici tarafından hedeflenmelidir .
| Krom | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :okuma yazma | :okuma yazma | :okuma yazma | :okuma yazma |
input(disabled) | :okuma yazma | :okuma yazma | :okuma yazma | :okuma yazma |
input(readonly) | :Sadece oku | :Sadece oku | :Sadece oku | :Sadece oku |
(contenteditable) | - | :okuma yazma | - | :Sadece oku |
* | - | :Sadece oku | - | :Sadece oku |
Bu arada, yalnızca Firefox bunu yapıyor gibi görünüyor ve görünüşe göre bir disabledgirdiyi kabul ettiği için pek de iyi değil :read-write. Opera'nın bir contenteditableöğeyi olarak etiketlememesine gelince :read-write, bunun nedeni desteklememesidir contenteditable.