Her Css selector (seçici) konusu anlattığımda başlık olarak anlattığım değerlerin yanına kardeş kelimesi ekliyorum. Bunların kardeş olduğu manasında değildir bu. Her bir başlığa selector veya seçici eklersem eğer konuların tamamının filtreye girmesine neden olabilir ve arama sonuçlarında görünmeyebilirler. Bu yüzden her değerin yanına kardeş kelimesi ekliyorum. Daha çok benzer görevleri veya benzer çalışmalarda kullanılan değerleri grup olarak göstermek amacıyla bu kelimeyi kullanırım.
:read-only ve :read-write değerleri Html input ve Html textarea etiketleri için kullanılabilir bir izin verme veya engelleme değeri olarak tanımlanabilirler. :read-owrite değeri hem okuma ve hemde yazmaya izin verirken :read-only sadece okumaya izin verir. Normal input ve textarea etiketleri içine readonly veya readwrite şeklinde girerek kullanabilirisniz.
Normal Html input tag (etiketi) aşağıdaki gibi olur ve hem yazma hem de okuma izni vardır.
Css :read-only ve :read-write seçicilerinin kullanımı:
Sadece okunmasına izin verdiğiniz input veya textarea etiketleri içine de readonly veya readwrite yazmanız gerekir aşağıdaki gibi. Birincisi input etiketidir ve içeriğini değiştirmeniz readonly değeri ile engellenmiştir. İkincisi textarea etiketidir ve bunda da readonly değeri ile içeriğini değiştirmeniz engellenmiştir. Üçüncüsünde ise readwrite kullanıldığı için he okumanıza hem de değiştirmenize izin verilmiş. Ama readwrite değerini kullansanız da kullanmasanız da herhangi bir şey değişmez. Css ile bazı bölümleri seçmek istiyorsanız eğer kullanmanızda fayda var.
Css ile :read-only ve :read-write kullanarak bu iki html değer üzerinde değişiklikler yapabilmeniz mümkündür. Değiştirmeye izin verilmeyen bölümleri renkli yaparak ziyaretçilerin bu bölümlerde düzenleme yapamayacaklarını belirtmek amacıyla kullanabilirsiniz.
Aşağıdaki örnekte input için okuma-yazma, ilk textarea için okuma-yazma, ikinci textarea için de sadece okuma izni verilerek Css ile bunların rengi değiştirilmiş. Örnekte göründüğü şekilde kullanabilirsiniz.
Google Chrome, Safari ve Opera tarayıcılarında bu şekilde kullanabilirsiniz. Internet explorer ve Mozilla firefox bu değerleri desteklemez ancak Mozilla firefox için alternatif olarak -moz-read-write ve -moz-read-only şeklinde kullanabilirsiniz. Anlayacağınız mozilla yine yapmış yapacağını. Internet Explorer gibi kökten desteklememesi bence daha iyi olurdu. Hiç olmazsa desteklemiyor işte kardeşim olmazsa da olur diyebilirdik 😀