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ı öğrendik. Bu derste, bir tarayıcının CSS ve HTML'i 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 ilemi farklı şekillerde ele alabileceğini unutmayın. 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 kafanızda karışıklık olmaması için hakkında konuşmayacağız.
  4. Tarayıcı, yüklenen CSS'deki bulduğu seçicilere bağlı olarak kural seçici türlerine göre(örn, nesne, 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. Oluşturma ağacı, kurallar uygulandıktan sonra görünmesi gereken 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 nesne, 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ı nesneler, alt düğümlerin ebeveynleridir ve alt düğümlerin kardeşleri vardır.

DOM'u anlamak, CSS'nizi tasarlamanıza, hataları ayıklamanıza ve bakımını yapmanıza yardımcı olur çünkü DOM, CSS'inizin ve belgenin buluştuğu yerdir. Tarayıcıda DevTools ile çalışmaya başladığınızda, hangi kuralların geçerli olduğunu görmek için öğeleri seçerken DOM'da geziyor olacaksınız.

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> nesnemize 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 çıkarır :

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> nesnelerinin üçünede uygulayacak ve son görseli renklendirecektir.

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

Bir sonraki kısımdaki CSS Hata Ayıklama makalemizde, 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'nin 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 edebilirsiniz.

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

Bir tarayıcı kurallarınızı çö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ız yada bir özellik veya değer çok yeniyse ve tarayıcınız bunu henüz desteklemiyorsa bunu yapar.

<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ğiniz anlamına gelir — tarayıcı yeni özelliği alıp almaması bizim için sorun teşkil etmez. Cascade (basamaklamanın)'ı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çinde alternatifler de sunabilirsiniz.

Bu, yeni ve her tarayıcı tarafından desteklenmeyen bir özellik/değer kullanmak istediğinizde işinize yarar. Örneğin, bazı eski tarayıcılar calc() 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 bitirdiniz; yapacak sadece bir işimiz kaldı. Bir sonraki makalede  öğrendiklerinizi uygulacak ve bu süreçte bazı CSS'leri test edeceksiniz

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. Öğrendiklerinizi uygulayın