Günün Özellikleri: CSS3 Seçiciler API Seviye 4

[turuncukafalikiz]

1. 
   
   Günün Özellikleri: CSS3 Seçiciler API Seviye 4
   

CSS3 Seçiciler Düzey 3, bir süredir W3C’nin tavsiyesi olsa da, W3C hala Seçiciler API’sinin 4. düzeyi üzerinde çalışmaktadır. Mevcut Editörün Taslağı, web geliştiricilerinin CSS ile çalışmasını kolaylaştıracak bazı ilginç yeni özellikleri listeler. Bu yazı bunlardan bazılarını içeriyor.


Her şeyden önce, altta açıklanan özelliklerden bazılarının hala kökten değişebileceği veya tamamen atılabileceği belirtilmelidir, çünkü altta yatan belge, bahsedildiği gibi, bir yayıncının taslağı, yani “devam eden çalışma”dır.

Daha karmaşık seçiciler


Muhtemelen en ilginç yeni özellik sözde sınıftır. :sahip olmak Bunu bir örnekle açıklamak ve anlamak daha kolaydır: Hatalı girişler yapıldığında bir HTML formunda karşılık gelen giriş alanlarını renkli olarak vurgulamak istemediğinizi, aynı zamanda bir şekilde tüm formu tanınabilir hale getirmek istediğinizi varsayalım.

Bu, yukarıdaki seçicilerle mümkün değildir, çünkü seçilecek elemanlar için DOM’un alt ağacının elemanın altında nasıl görüneceğini tanımlamak mümkün değildir. Başka bir deyişle ve örnekle bağlantılı olarak: “yanlış giriş alanlarına sahip tüm form öğelerini” seçen bir seçiciyi formüle etmek mümkün değildir. Yalnızca ikincisi seçilebilir:

form input:invalid {
border-color: red;
}

Yeni sözde sınıfı kullanma :sahip olmak ancak, bu sorun düzeltilebilir. Parametre olarak bekleniyor :sahip olmak seçilecek öğenin altında olması gereken DOM’un alt ağacını tanımlayan bir veya daha fazla seçici. Aşağıdakiler, yanlış girişler içeren bir giriş alanı içeren tüm form öğelerini seçmek için yeterlidir:

form:has(input:invalid) {
border-color: red;
}


Şu anda hala küçük bir burukluk var: performans açısından, :sahip olmak– Sözde sınıf veya “neredeyse” kategorisine girmeyen tek sınıf. Editörün taslağından ilgili yorum: “Şu anda hızlı profilde olmayan bazı şeyler makul bir şekilde CSS seçicilerde yapılabiliyorsa, onları taşımalıyız.” Bu nedenle, çeşitli tarayıcıların, günlük geliştiriciler için son derece ilginç olan bu özelliği yeterli performansla uygulayıp uygulayamayacakları ve sözde sınıfın nihai belirtime dahil edilip edilmeyeceği henüz belli değil. Bu arzu edilir.

Daha net seçiciler


Web geliştiricilerinin aşina olduğu bir başka sorun da sözde sınıfı içerir. : maçlar. Çoğu zaman, bir bildirim bloğunun, parçalarda farklılık gösteren ancak temelde yapı olarak benzer olan birkaç seçiciye uygulanması gerekir. Karşılık gelen CSS, bu gibi durumlarda genellikle gereksiz yere şişirilir:

#home h1,
#services h1,
#portfolio h1,
#contact h1, {
background-color: #CFCFCF;
}

işte geliyor : maçlar devreye girer, çünkü onunla yapabilirsiniz, tarayıcıya özgü sözde sınıflara benzer :moz-any VE :webkit-herhangi biri birkaç (kısmi) seçiciyi birleştirerek yalnızca geliştiricileri yazmaktan kurtarmaz, aynı zamanda okunabilirliği de artırır:

:matches(#home, #services, #portfolio, #contact) h1 {
background-color: #CFCFCF;
}
Diğer yeni özellikler

• Seçici API’de zaten 3. seviyede tanıtılan sözde sınıf :Olumsuz bir seçicinin olumsuzlanması için, yalnızca bir olumsuzlama seçicisini değil, birkaçını geçme olasılığı genişletildi:

gövde : değil(h1,h2,h3,h4,h5,h6) { renk: mavi; }

• Sözde sınıflarda : kapsama alanı içinde VE :sınır dışı mevcut değeri tanımlanmış bir değer aralığının içinde veya dışında olan elemanlar ele alınabilir:

<input type="number" min="5" max="200">
inputut-of-range {
border: 5px solid red;
}
input:in-range {
border: 5px solid green;
}

• İle :Sadece oku VE :Okuma yazma yalnızca okunabilir veya düzenlenebilir olan öğeleri hedefleyebilirsiniz (yani, özniteliği düzenlenebilir doğru olarak ayarlanmıştır):

girdi:salt okunur { arka plan: #EEEEEE; }

girdiku-yaz {arka plan: #FFFFFF; }

• Öznitelik seçicilerde “]” bitişinin önünde “i” tanımlayıcısının kullanılması, karşılık gelen seçilen özniteliğin değerinin karşılaştırmasının “büyük/küçük harfe duyarlı” yapılmaması gerektiğini tanımlamak için de mümkündür.

Çözüm


CSS3 Selectors API’nin bir sonraki sürümü, mevcut sürüme göre bir dizi faydalı iyileştirme sunar. Bu web sitesi, mevcut tarayıcının işlevsellik açısından test edilebileceği mevcut tarayıcı desteği hakkında bilgi sağlar. Ancak, Editör Taslağı’nda artık yer almayan özelliklerin de burada kontrol edildiğini dikkate almalısınız.


()



Haberin Sonu