Seneler ne kadar hızlı geçiyor. 6 sene az değil. Geçen seneye şöyle bir bakalım; HTML5 ve CSS3 kendini iyice hissettirmiş. CSS3 konuları hakkında birçok makale yazmışım. Önümüzdeki sene inşallah CSS3 konularını tamamlamak amaçlarımdan biri. Bir diğeride HTML5 konularını tamamlamak. Geçen sene bir başka önemli gelişme ise ie6’dan kurtulmuş olmak ve yeni nesil tarayıcıların(Chrome, Firefox ve Opera) kullanım oranlarının artmış olması. Son olarak farklı mecralardan internete erişim arttı. Ben bu konuda pek bir şeyler yazmasam da gelişmeyi görmek lazım. Ne diyelim. Allah sağlık ve sıhhat verdikçe devam edeceğiz.

sahibinden.com çalışanlarının birikimlerini paylaştığı blog sitesi labs.sahibinden.com/ için yazdığım yazı bu gün yayına girdi. Internet Explorer 6 Sonrası Hayat yazısı ie6 özelinde aslında tarayıcı desteği konusunu ele almaktadır. Daha önce benzer bir yazı yazmıştım ama bu sefer kod yazdıktan sonraki durumuda anlattım.

Okul yıllarına döndüm bir an. Türkçe derslerinde bir atasözü veya deyim verip bunu cümle içerisinde kullanın diye sorular çıkardı. Normalde kullanmadığımız veya az kullandığımız atasözü veya deyimleri biz genç dimağlara öğretmek adına sorulurdu bu sorular.

CSS’de de benzer şekilde nadiren kullandığımız özellikler var. İşin özüne gelelim. Ben şimdiye kadar hiç kullanmadığım Genel Kardeş Seçicilerini kullanma imkanı buldum. Kullandığım yerde bana çok büyük kolaylık sağladığı için sizlerle paylaşmak istedim.

Genel Kardeş Seçicileri; aynı seviyedeki elemanları yakalamak için CSS2.1’in bize sunduğu güzel özelliklerde güzel bir özellik. ie6’nın desteklememesi en büyük sorun idi. İnternet Explorer 6 sürümü desteğini kaldırdıktan sonra bu seçiciyi rahat rahat kullanabiliyoruz artık.

Karşıma çıkan iş ve Genel Kardeş Seçicisinin bana sağladığı kolaylık.

Şeklinde bir liste veya menümüz var. Burada her üç öğenin olduğu durumlarda var, sadece bir tanenin olduğu durumlarda. Tek bir eleman olduğunda aradaki çizgi yok. İki veya daha fazla eleman olduğunda iki eleman arasında bir çizgi konuyor.

Tam bu noktada Genel Kardeş Seçicileri devreye giriyor.

li ~ li {
	border-top:1px solid red;
	padding-top:5px;
	margin-top:5px;
}

Tanımı tüm dertlerimize son veriyor. Eğer tek eleman varsa bu seçici es geçiliyor. Ama iki veya daha fazla eleman var ise bu seçici devreye giri”“yor ve ilk eleman hariç tüm elemanların üstünü çiziyor ve mesafeleri ayarlıyor.

Daha önceleri javascript veya dinamik bir dil ile çözüm ürettiğimiz bu durum için CSS ile çözüm bulmak süper bir duygu.

Aynı sorunu first-child ile çözebileceğim aklıma geldi akşam bir an. Tabi iki satır kod bloğu oluyor. Minimum kod ile çözmek istersek Genel Kardeş Seçicilerini tercih edeceğiz.  :D

Kalın sağlıcakla.