CSS3 henüz tam olarak olmasa da birçok özelliğiyle uygulamalarda aktif olarak kullanılmaya henüz başlamışken CSS4’ün fısıltıları da gelmeye başlıyor. Gelin biz de CSS4’e erken bir bakış yapalım. Konumuz :Seçiciler
Peki CSS3 tamamlandı mı?
Konuya buradan başlamak istedim çünkü bu konuda ciddi bir yanlış anlaşılma var. Versiyonlama, CSS’in geneli değil sadece ilgili özelliklere ait dokümanların durumu için yapılır. Yani CSS sadece CSS’dir. Biz yalnızca söylemi kolaylaştırmak adına, 3. versiyona ulaşmış özelliklere ve bunların yeni doğan kardeşlerine topluca CSS3, CSS4 gibi isimlendirmeler yapıyoruz.
Örneğin; Filtre Efektleri modülü yeni bir modül ve henüz 1. versiyonunda. Şimdi bu özelliği nereye koymamız gerekiyor? CSS1 mi diyeceğiz? Bu şekilde versiyonlamanın en büyük getirisi, bitmiş olan implementasyonların diğerlerini beklemeden tek başına “W3 Recommendation” (W3 Tavsiyesi) durumuna getirilebilmesi oluyor.
Bu yazıda da; ön yazıda CSS4 dememize rağmen, özel olarak inceleyeceğimiz modül seçiciler modülü olacak.
Dokümanın durumu nedir?
Seçiciler Level 4 dokümanı, 4. seviyeye ulaşan ilk doküman oldu. Şu an hala “editor’s draft” (geliştirici taslağı) durumunda. İlk versiyonu 29 Eylül 2011 tarihinde yayınlandı. Şu anki versiyonu ise 16 Ocak 2013 tarihli. Tabii ki henüz emekleme aşamasında ama zamanla şu anki halinden çok farklı bir hal alabilir. Bu şekilde genele açılan editor’s draft dokümanları, topluluğun konu üzerinde tartışması amacıyla yayınlanıyor.
Yeni seçiciler neler ve nunları nasıl kullanacağız?
Doküman durumu gibi sıkıcı bir konuyu bitirdiğimize göre artık işin asıl eğlenceli tarafına geçebiliriz. Yani; yeni seçiciler neler ve bunları nasıl kullanacağız?
4. Level Seçiciler büyük oranda pseudo-class (sözde sınıf) ’lardan oluşuyor. Zaten şu anda asıl ihtiyacımız olan şeyler de pseudo-class’lar. Diğer seçiciler büyük oranda ihtiyaçları karşılar durumdalar.
Mantıksal seçiciler :matches, :not
İlk seçicimiz, :matches . Bu özellik daha önce Firefox 4’te -moz-any() olarak sunulmuştu. Bu seçici ile, elementin değişik durumlarını belirleyen tanımları tek bir satırda toplayabiliyoruz. Mesela her özelliği virgülle ayırıp yazmak yerine :matches seçicisini kullanabiliriz.
ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:focus,
ul.menu li a:visited{
color:red;
}
:matches kullanarak yukarıdaki tanımla aynı işi yapan kodu çok daha kolay bir şekilde yazabiliriz:
ul.menu li a:matches(:link,:hover,:focus,:visited){
color:red;
}
Basit değil mi? Yukarıdaki örnek çok gerekli görünmeyebilir ama bir de aşağıdaki kullanıma göz atın:
ul.menu li a:matches(.active,.visible,#important){
color:red;
}
Bir sonraki inceleyeceğimiz seçici :not. Bu seçici aslında 3. Level’de tanımlanmıştı ama bu versiyonda çok daha güçlü bir halde tekrar karşımıza çıkıyor. Artık içerisinde birden çok seçiciyi tanımlayabiliyoruz.
ul.menu li a:not(.active,.visible){
color:red;
}
Üstteki örnekte “active” ve “visible” classına sahip olmayan ul.menu li a ‘lara kırmızı renk veriyoruz.
Konum sözde-seçiciler :any-link, :local-link
Konumsal seçiciler ile, linkler üzerinde kolay bir şekilde daha çok hakimiyet kurabiliyoruz.
:any-link (geçici bir isim ve daha sonra değişebilir) ile a:link ve a:visited tanımlarını tek bir seçicide topluyoruz, böylece ikisini birden yazma ihtiyacı ortadan kalkıyor.
a:link,
a:visited {
color:red;
}
yerine:
a:any-link{
color:red;
}
Tanımlamasını kullanabiliyoruz.
Diğer konumsal seçicimiz :local-link ise benim şimdiye kadar gördüğüm en ilginç seçicilerden. Bu seçici ile bir linkin kaçıncı seviye bir link olduğunu sorgulayıp ona göre stillendirme yapabiliyoruz. Bu seçiciyi yazıyla anlatmak çok zor ama örnekle anlaşılacağını düşünüyorum:
Kullanıcının şu an bulunduğu sayfanın http://webmagazin.co/yazi/ olduğunu varsayıyoruz:
<a href="http://webmagazin.co">Birinci link</a> <a href="http://webmagazin.co/yazi/">İkinci link</a> <a href="http://webmagazin.co/yazi/2013/">Üçüncü link</a> <a href="http://webmagazin.co/yazi/2013/5/">Dördüncü link</a>
// Link 1 bu stili alır
a:local-link{ text-decoration:none; }
// Link 2 bu stili alır
a:local-link(0){ color:red; }
// Link 3 bu stili alır
a:local-link(1){ color:blue; }
// Link 4 bu stili alır
a:local-link(2){ color:orange; }
Dediğim gibi anlatması zor bir olay ama temelinde linkin doküman yapısında işaret ettiği seviyeye göre stillendirme var.
Zamansal sözde-seçiciler :past, :current, :future
Bu da gerçekten ilginç bir seçici. Bizde (Türkiye’de) ne kadar kullanılır bilemiyorum çünkü erişilebilir siteler henüz bir elin parmaklarını geçmeyecek kadar. Bu seçici; özellikle ekran okuyucular için, şu anki okunan kelimeyi renklendirmek gibi işlemlerde kullanılabilir.
p:current {
color:yellow;
}
Bu tanımlama ekran okuyucu tarafından şu anda okunan paragrafın rengini sarı yapacaktır. Bunun dışında WebVTT (HTML5 Video Altyazıları) için de kullanışlı olabilir.
UI durumu sözde-seçicisi :indeterminate
Form elementlerinde kullanılan ui elemanları için zaten birçok gerekli tanım standartlaşmış durumda. :inteterminate de bu tanımlar arasında aslında eksik kalmış bir boşluğu tamamlıyor.
Örneğin; checkbox ‘lar ve radio button ‘lar şu anda iki halde olabiliyor, seçili ya da seçilmemiş. Peki ya bu eleman kullanıcı tarafından hiç kullanılmadıysa? İşte bu boşluğu :indeterminate dolduruyor.
checkbox:indeterminate {
background:yellow;
}
Ağaç-Yapısal sözde-seçiciler :nth-match , :nth-last-match
Bu seçiciler ile şimdiye kadar ihtiyaç duyduğumuz ve Javascript temelli çözümler ürettiğimiz birçok şeyi artık yalnızca CSS aracılığıyla çözebileceğiz.
Sıralanmış halde birçok linkimiz olduğunu ve bazılarının active class’ına sahip olduğunu varsayalım. Biz bu linklerden yalnızca active class’ına sahip ve sıra sayısı çift (even) olanlara mavi renk vermek istiyoruz. İşte artık bunu :nth-match ile yapabileceğiz. :nth-match aslında :matches ve :nth-child ’in birleştirilmiş hali diyebiliriz.
li a:nth-match(even of .active) {
color:blue;
}
Grid-Yapısal Sözde-Seçiciler :column , :nth-column , :nth-last-column
Tabloların, sayfanın geneline şablon oluşturmak amacıyla kullanılmasının doğru olmadığını hepimiz biliyoruz. Fakat veri listeleri için halen en iyi çözüm tablolar. Şu anki yapıda tablolar satır temelli, sütunlara çok fazla hükmedemiyoruz. Ya da bunun için ekstra classlar tanımlamamız gerekiyor. Bu seçiciler bu gerekliliği ortadan kaldırmayı amaçlıyor. Örneğin “toplam” classına sahip sütunlara :column kullanarak sarı arka plan rengi verelim:
:column(.toplam){
background:yellow;
}
:nth-column kullanarak daha gelişmiş tanımlamalar yapabiliriz. Örneğin sıra numarası tek olan sütunlara mavi renk verelim:
:nth-column(odd){
color:blue;
}
Tabii ki bu seçiciler yalnızca tablolar için kullanılmayacak. Arayüzlerde ne gibi değişik kullanımlar olacağını ilerleyen zamanlarda daha ayrıntılı görebileceğiz.
Ve Parent (ebeveyn) Seçici!
Hepimiz çok uzun zamandır bunun hayalini kuruyorduk. Uzun süredir üzerine tartışılan ve hatta uzun bir süre olmayacağı söylenen parent seçiciler, bu versiyonda önceki tanımına göre yeni bir implementasyona kavuşmuş. Belki Level 4’te tam olarak tamamlanmaz ama en azından üzerinde çalışıldığını görmek bile mutluluk verici.
Bir önceki tanım $(dolar işareti) ile yapılıyordu. Şimdiki dokümanda ise bu !(ünlem) ile değiştirilmiş. Bunun da değişebileceğini güçlü bir biçimde düşünüyorum çünkü ünlem işareti yazılım dillerinin çoğunda olumsuzluk durumları için kullanılıyor. Bu da karışıklığa sebep olabilir. Umuyoruz ki bu versiyonda artık parent seçiciler ile ilgili beklentimiz karşılanır.
Sonuç
Gördüğünüz gibi CSS’e çok ilginç tanımlamalar geliyor. Tabii ki şu anda bunların tarayıcı destekleri hiç yok denecek durumda çünkü üstte de bahsettiğimiz gibi, doküman henüz taslak durumunda. Doküman geliştikçe tarayıcılar da yavaş yavaş yeni özellikleri implemente etmeye başlayacaktır ancak aktif olarak kullanmaya başlamamız aylar hatta yıllar sürebilir.
