Web sitelerini kodlarken ve kodlama sonrasında en çok önem verilen alanlardan biridir optimizasyon. Web sitelerinin optimizasyonunda çok fazla ince eleyip sık dokuyoruz. 1 Kbyte’ın bile hesabını yapar olduk. İnternete bağlanma hızları ne kadar artsa da internete bağlanan insan sayısı daha hızlı arttığı için her zaman daha optimize web siteleri önem kazanacaktır. Biz bununla alakalı olarak burada CSS Seçicilerinin optimum kullanılmasını irdeleyeceğiz. 

CSS seçici tipleri ve kullanımı hakkında (X)HTML Sayfa Yapısı ve CSS Kullanımı, Özellik Seçicileri(Attribute Selectors) ve Sözde-sınıflar(Pseudo-class) ve Sözde-elementler(Pseudo-elements) makalelerini bir göz atın.

Performanslı CSS Seçicileri Seçiminde Anahtar Seçicinin Önemi

CSS Seçicilerinin performans kazandırma çalışmalarına başlamadan önce ilk bilmemiz gereken tarayıcıların CSS seçicilerini nasıl yorumladığını bilmekten geçiyor. Ben daha önceleri ki bu makaleyi yazmadan önce diyebilirim buna, css kodu yazarken seçicilerin soldan sağa doğru okunduğunu düşünerek kodumu yazardım ama gerçek böyle değilmiş. Tarayıcılar CSS seçicilerini sağdan solda doğru okurlar. Tabi bu bilgiden sonra yazdığımız kodları buna göre düşünerek yazmalıyız.

ul li a#smUrunler{color:#000; background:url(../images/menu.png) 0 0 no-repeat; }

Yukarıdaki tanımlamada ilk olarak tarayıcı doküman içinde geçen a#smUrunler seçicisini bulacaktır, bu seçiciye anahtar seçici deniyor. Bir bakıma elemanı yakalamak için anahtar oluyor tarayıcıya.

Bu bize gösteriyorki css kodlarımızı yazarken buna dikkat etmemiz ve buna göre kod yazmamız gerekiyor.

ul#solMenu li a{color:#000; background:url(../images/menu.png) 0 0 no-repeat; }

şeklindeki bir tanım önerilmiyor. Bu tanımda sağdan sola doğru yorumlandığını düşünürsek dokümandaki tüm bağlantıları(<a>) arayacaktır tarayıcı. Bunun yerine

ul li a#smUrunler{color:#000; background:url(../images/menu.png) 0 0 no-repeat; }

Tanılaması daha efektif bir sonuç verecektir. Tarayıcı direk olarak a#smUrunler seçicisi ile elemanı bulacaktır.

stevesouders.com’un test sayfasını incelersek sonucu daha iyi anlayacağız.

Aynı öneriyi bize Google’un Page Speed eklentisi test sonucuda verecektir. Google’un hıza önem verdiğini biliyoruz bu konuda google’un önerileride Mozilla’dan farklı değil.

Mozilla makalesindeki önerileri sıralarsak

Evrensel kuralları önleyiniz
CSS seçicilerini yazarken son tanımda evrensel bir seçici kullanmayın.

Tekil Seçicileri(id) etiketlerle nitelemeyin
Tekil seçiciler zaten en hızlı erişilen seçicilerdir. Bunları tekrar etiket ile nitelemeye gerek yoktur.

a#slUrunler{...}

yerine

#smUrunler{...}

şeklinde kullanın.

Etiketler ile nitelemenin o seçiciyi kod okunurken daha anlamlı hale getirdiğini düşünüyorum. ancak Firebug ile kod takibi yaptığımız bu günlerde artık buda kabul gören bir tanım değildir. Ben kod yazarken son zamanlarda çok kullanıyordum bu tanımlamayı, artık veda edeceğiz.

Sınıf Seçicileri etiketlerle nitelemeyin
Yukarıda anlattığımız gibi burası içinde geçerlidir.

td.taraftarSayi{}

yerine

.taraftarSayi{}

şeklinde kullanın.

Torun Seçiciler veya çocuk Seçicler Yerine Özel sınıflar Atayın
Uzun seçici listesi kullanmak yerine daha özel bir sınıf tanımı yapın.

ul li a{...}

yerine a’ya smUrunler sınıfını atayıp

.smUrunler{...}

şeklinde kullanın.

Torun Seçicileri yerine Çocuk Seçicileri Kullanın
Seçici tiplerinden torun seçicileri en yavaş yöntemlerden biridir. Çocuk seçicileri nispeten daha avantajlıdır. Daha iyisi için bir sonraki öneriye bakın.

Etiket Kategorilerinde Çocuk Seçicileri Kullanmayın
Etiket tabanlı çocuk seçicileriniz yerine özel seçici kullanınız.

treehead > treerow > treecell {...}

yerine

.treecell-header {...}

kullanın.

CSS 3 ile gelen avantajlar

CSS seçicilerine CSS3 ile birlikte daha özel seçiciler geliyor. Bu seçiciler sayesinde daha optimize kodlar elde edeceğiz. Şimdilik İnternet Explorer’un mevcut sürümleri bu kullanıma izin vermese de gelecekte işimiz daha kolay olacak.

Sonuç

Yukarıdaki önerileri dikkate alarak kodlarımızı yazmalıyız. Ancak bunlar kesin kurallar değildir ve uygulamada bazen bu kurallar uymakta zorlanabiliriz. Benim önerim bu kuralları dikkate alarak yazmaya çalışalım, olmadı isede kendimizi paralamayalım.

CSS seçicilerinin etkin kullanılması küçük çaplı projelerde çok büyük etkisi olmasa da büyük projelerde performans açısından çok önemli olduğunu düşünüyorum. Tabi şöyle bir durumda var css kod yazma alışkanlığı kazanan bir arayüz geliştirici için bu küçük buna böyle yazayım bu büyük buna böyle yazayım diye bir ayrım yapmasıda pek mantıklı ve mümkün değildir. Bu nedenle kendi standardımızı en iyiye göre yapalım proje küçük olmuş, büyük olmuş bizi ilgilendirmesin.

• https://developer.mozilla.org/en/Writing_Efficient_CSS
• http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/
• O’Reilly – Even Faster Websites.pdf 14. konu
• http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
• http://ajaxian.com/archives/css-child-selector-performance
• http://jackslocum.com/blog/2007/07/10/css-selectors-speed-myths/
• http://hacks.mozilla.org/2009/06/dom-selectors-api/
• http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors
• http://blog.archive.jpsykes.com/153/more-css-performance-testing-pt-3/
• http://www.infoq.com/news/2009/01/jquery-1.3
• http://code.google.com/speed/page-speed/docs/rendering.html (google’dan notlar)
• http://fatagnus.com/guidelines-for-writing-efficient-css-selectors/
• http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors
• http://css-tricks.com/efficiently-rendering-css/
• http://www.nuvographics.com/articles/efficientcss/
• http://www.css-101.org/descendant-selector/go_fetch_yourself.php (yeni)

• CSS ile form kontrolleri hakkında geliştirilmiş bir makale Link
• 2006′da en çok yapılan web kodlama hataları. Güzel bir makale Link
• AltıÜstü Tasarımda geleceğin yükselen değerlerinden cep üzerinden veri alış verişi hakkında bilgi sunulmuş Link
• Macromedia Dreamweaver kullanarak CSS ile menü oluşturmayı anlatan bir makale Link
• Web2.0 Dizayn Rehberi Link
• Digital Web Magazine’den web sitesi kodlama önerileri Link
• Farklı bir arama motoru Link
• Blog sitenizi en iyiler arasına sokmak için öneriler Link
• Google bazı servislerine(Base, Blogger ve Calendar) erişmek için Gdata kütüphanesini bizlerin hizmetine açmış durumda. Bu makalede bu hizmeti kullanarak sitemize Google Calendar verilerimiz eklemeyi gösteren bir javascript kodu Link
• Kullanıcılar ve Arama motorlarına uygun blog yazma önerileri Link
• Web üzeriden işletim sistemi fikri herkesi sarmış görünüyor. Biz Google dedik ancak bu işi sadece Google düşünmemiş. Link
• Linux ve MacOs’da bulunan tab geçiş efekti firefox ile Windows’ta. Biraz yavaşlamay neden olduğunu söyleyeyim tabi bu benim bilgisayarımın özelikleri ile alakalıda olabilir Link
• Daha önce bu makalenin birinci kısmının linkini vermiştik. Web sitelerinde performansı arttırmanın yolarını üzerine Link
• Ajax ile birlikte bir çok javascirpt kütüphanesi sunulmaya başlandı. Bu işi derli toplu şekilde yapmaya çalışan bir javascript kütühane sitesi dahaLink
• Sayfalarımızın daha hızlı açılması için javascirpt ve css dosyalarımız ne kadar optimize edebiliriz. İşte makale Link
• Explorer Firefox’un büyük mesafeler kat ettiği web developer aracında adım attı işte IE Developer Toolbar Beta 3 Link
• Javascript ile form denetimi yapmanın kolay yolu Link
• H-Yaman RSS hakkında güzel bir yazı yazmış. Çok güzel okumanızı tavsiye ederim. Link

CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır.

Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında ” ; ” noktalı virgül kullanılır. özellik ve değerler birbirinden
” : ” iki nokta üstüste ile ayrılır.

h1 {font: medium Arial;}

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font’un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel ” / ” kullanımı vardır örnek aşağıda:

h1 {font: medium/120% Arial;}

Burada ” / ” Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)

Gruplama

Yukarıda hep bir Seçici’yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

p, h3 {font-family: Arial;}

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için ” , ” virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar.

Bildirim’lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

p, h3
{
font-family: Arial;
font-size:2;
font-weight: bold;
}

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.

Sınıf Seçicisi(Class Selector)

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

p.sagadaya {text-align: right}
p.ortala {text-align: center}

Bu Seçicileri sayfamızda uygulamak için;

<p class="sagadaya">Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>
<p class="ortala">Yukarıdaki bilgiyi dikkatlice okumalısınız</p>

Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;

.ortala {
text-align: center
}

Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.

<span class="ortala"> Burada birşeyler yazar </span>
<p class="ortala">Burada da başka bişeyler yazar</p>

Çoklu sınıflar, birden fazla sınıfı bir HTML elementine uygulamak için kullanılır.

<p class="onemli uyari">Ülkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı insanların hataları sonucu eydana gelmektedir.</p>

Yukarıdaki örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut. Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. Bunun için kullanıcığımız kod;

.onemli {
font-weight: bold;
}
.uyari {
font-style: italic;
}
.onemli.uyari {
background: silver;
}

Önemli metinler için kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS Seçicisinde .onemli.uyari şeklinde yazıyoruz.

Id Seçecileri

Id Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.

...
#mavi
{
background:blue;
}
#kirmizi
{
background:red;
}

<p id="mavi">Bu yazının arkafon rengi mavi</p>
<p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>

Sınıf mı? Id mi?

Yukarıda Id Seçicisi için her nekadar da bir sayfada sadece bir defa kullanılır desekte tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız elementler için Sınıf Seçicisini kullanmalıyız.

Bu kodumuzu daha kullanışlı ve temiz yapacaktır.

Sınıf ve Id Seçicileri küçük-büyük harfe karşı duyarlıdır;

p.onemliBilgi {
font-weight: bold;
}

ve kullanımıda;

<p class="onemlibilgi">Uygulama olmaz .</p>

Yukarıdaki kod uygulanmayacaktır çünkü ” B ” bir yerde büyük birde küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında kalabilir.