CSS nasıl çalışır


CSS'in temellerini, ne için kullanıldığını ve basit stil sayfalarının nasıl yazılacağını öğrendin. Bu derste, bir tarayıcının CSS ve HTML'yi nasıl ele alıp bir web sayfasına dönüştürdüğüne bir göz atacağız.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.)
Amaç: CSS ve HTML'nin tarayıcı tarafında naısl ayrıştırıldığının ve bir tarayıcı CSS ile karşılaştığında ne olduğunun temellerini anlamak.

CSS gerçekten nasıl çalışır?

Tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ile stil bilgisini birleştirmektedir. Bunuda aşağıda listelediğimiz birkaç aşamada işler. Bunun, tarayıcının bir web sayfasını yüklediğinde sergilediği davranışın çok basite indirgenmiş bir sürümü olduğunu ve farklı tarayıcıların işlemi farklı şekillerde ele alabileceğini unutma . Ancak kabaca olan budur.

  1. Tarayici HTML'yi yükler(Örn. onu ağdan alır).
  2. HTML'yi bir  DOM'a (Belge Nesnesi Modeli) dönüştürür. DOM, bilgisayarın belleğindeki belleği temsil eder. DOM, sonraki bölümde biraz daha ayrıntılı olarak açıklanacak.
  3. Tarayıcı daha sonra gömülü resimler ve videolar gibi HTML belgesi ile bağlantılı kaynaların çoğunu ve bağlantılı CSS'leri yükler! JavaScript süreç içinde biraz daha sonra ele alınacaktır. Ancak burada kafanda karışıklık olmaması için hakkında konuşmayacağız.
  4. Tarayıcı, yüklenen CSS'de bulduğu seçicilere bağlı olarak kural seçici türlerine göre(örn, öğe, sınıf, kimlik vb.) kümeler. DOM'daki hangi düğümlere hangi kuralların uygualanması gerektiğini belirler ve bunlara gerektiği şekilde stil ekler(Bu ara adıma işleme ağacı denir).
  5. Ağacı oluşturma, kurallar uygulandıktan sonra görünmesi gereken şekil yapıya yerleştirilir.
  6. Sayfanın görsel görüntüsü ekrana getirilir(bu aşamaya boyama denir).

Aşağıdaki şema, işlemin basit bir görünümünü sunar.

DOM hakkında

DOM'un ağaca benzer bir yapısı vardır. Biçimlendirme dilindeki her öğe, nitelik ve metin parçası ağaç yapsında bir DOM düğümü haline gelir. Düğümler, diğer DOM düğümleriyle olan ilişkileriyle tanımlanır. Bazı öğeler, alt düğümlerin ebeveynleridir ve alt düğümlerin de kardeşleri vardır.

DOM'u anlamak, CSS'ni tasarlamana, hataları ayıklamana ve bakımını yapmana yardımcı olur. Çünkü DOM, CSS'in ve belgenin buluştuğu yerdir. Tarayıcıda DevTools ile çalışmaya başladığında, hangi kuralların geçerli olduğunu görmek için öğeleri seçerken DOM'da geziyor olacaksın.

Gerçek bir DOM örneği

Uzun ve sıkıcı bir açıklamadan ziyade, gerçek bir HTML kesitinin DOM'a nasıl dönüştürüldüğünü görmek için bir örneğe bakalım.

Aşağıdaki HTML kodunu ele alalım:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

DOM'da, <p> nesnemize karşılık gelen düğüm(P) bir ebeveyndir. Düğümümüzün çocukları bir adet metin düğümü ve üç adet <span> öğemize karşılık gelen (SPAN) düğümüdür. SPAN Düğümlerimizde kendi metin düğümlerinin ebeveynleridir.

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

Bir tarayıcının önceki HTML kesitini nasıl yorumladığını gösterdik. Tarayıcı yukarıdaki DOM ağacını işler ve ardından bunu tarayıcıda şu şekilde görüntüler :

DOM'a CSS uygulama

Diyelim ki belgemize stil vermek için biraz CSS ekledik. HTML kesitimiz aşağıdaki gibidir:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Diyelimki ona aşağıdaki CSS'i uyguladık:

span {
  border: 1px solid black;
  background-color: lime;
}

Tarayıcı HTML'yi çözümleyecek ve bundan bir DOM oluşturacak, ardından CSS'i çözümleyecektir. CSS'de bulunan tek kuralın bir span seçicisi olması nedeniyle, tarayıcı CSS'i çok hızlı bir şekilde sıralayabilecektir. Bu kuralı <span> öğelerinin üçünede uygulayacak ve son görseli renklendirecektir.

Güncellenen çıktı aşağıdaki gibidir:

Bir sonraki kısımdaki CSS Hata Ayıklama dersimizde, CSS sorunlarını ayıklamak için tarayıcıda DevTools'u kullanacağız ve tarayıcının CSS'i nasıl yorumladığı hakkında daha fazla bilgi edineceğiz.

Tarayıcı anlamadığı bir CSS ile karşılaşırsa ne olur?

Daha önceki bir derste tarayıcıların aynı anda yeni çıkan CSS kodlarını uygulamadığından bahsetmiştim. Ayrıca, birçok kişi bir tarayıcının en son sürümünü kullanmamaktadır. CSS'in her zaman geliştirildiği ve bu nedenle tarayıcıların tanıyabileceklerinin ötesinde olduğu göz önüne alındığında, bir tarayıcı tanımadığı bir CSS seçici veya bildirimiyle karşılaştığında ne olacağını merak edebilirsin.

Cevap; hiç bir şey yapmaması ve sadece bir sonraki CSS parçasına geçmesidir!

Bir tarayıcı kurallarını çözümlediğinde anlamadığı bir özellik veya değerle karşılaşırsa, onu yok sayar ve bir sonraki bildirime geçer. Bir hata yaptıysan yada bir nitelik veya değer çok yeniyse ve tarayıcın bunu henüz desteklemiyorsa bildirimi veya kuralı yok sayar.

<p> I want this text to be large, bold and blue.</p>
p {
  font-weight: bold;
  colour: blue; /* incorrect spelling of the color property */
  font-size: 200%;
}

Tarayıcıların bu yaklaşımı çok faydalıdır. Bu, bildirimin anlaşılmadığında herhangi bir hata almayacağını bilerek, yeni CSS bildirimlerini bir geliştirme olarak kullanabileceğin anlamına gelir — tarayıcı yeni özelliği alıp almaması bizim için sorun teşkil etmez. Cascade (art arda denetimin)'ın çalışma şekli ve tarayıcıların aynı nitelikte iki kuralın olduğu bir stil sayfasıyla karşılaştıklarında son CSS'i kullanmaları gerçeğiyle birleştiğinde, yeni CSS'i desteklemeyen tarayılar için alternatifler sunabilirsin.

Bu, yeni ve her tarayıcı tarafından desteklenmeyen bir nitelik/değer kullanmak istediğinde işine yarar. Örneğin, bazı eski tarayıcılar calc() fonksiyonunu bir değer olarak desteklemez. Peki bunun için ne yapabilirim? Bir kutu için piksel cinsinden genişlik verebilirim (width: 500px), sonrada calc(100% - 50px) fonksiyonuyla bir değer vermeye devam edebilirim. Eski tarayıcılar, calc() fonksiyonunu anlamadıkları için ilgili satırı yok sayarak piksel sürümünü kullanırlar. Yeni tarayıcılarda çizgiyi piksel kullanarak yorumlacak ancak daha sonraki basamakta calc() fonksiyonunu görüp bu kuraldaki değeri uygulayacaklardır. Önceki satırdaki değer geçersiz sayacaklardır.

.box {
  width: 500px;
  width: calc(100% - 50px);
}

Sonraki derste çeşitli tarayıcıları desteklemenin daha birçok yolunu inceleyeceğiz.

Ve sonunda

Bu kısmı neredeyse bitirdin; yapacak sadece bir işimiz kaldı. Bir sonraki makalede  öğrendiklerini uygulacak ve bu süreçte bazı CSS'leri test edeceksin.

Bu kısımda

  1. CSS Nedir?
  2. CSS'e başlarken
  3. CSS nasıl yapılandırılır
  4. CSS nasıl çalışır
  5. Öğrendiklerini uygula