CSS’nin temellerini, ne işe yaradığını ve basit stil sayfalarının nasıl yazılacağını öğrendik. Bu yazıda, bir tarayıcının CSS ve HTML’yi nasıl alıp bir web sayfasına dönüştürdüğüne bakacağız.
CSS aslında nasıl çalışır?
Bir tarayıcının bir belge görüntülediğinde belgenin içeriğini stil bilgisiyle birleştirmesi gerekir. Belgeyi aşağıda listelediğimiz birkaç aşamada işler. Bunun, bir tarayıcı bir web sayfası yüklediğinde olanın çok basitleştirilmiş bir versiyonu olduğunu ve farklı tarayıcıların süreci farklı şekillerde ele alacağını unutmayın. Ama kabaca gerçekleşenler aşağıdaki gibi özetlenebilir:
- Tarayıcı HTML’yi yükler (örneğin, onu ağdan alır).
- HTML‘i bir DOM‘a dönüştürür ( Document Object Model ). DOM, bilgisayarın belleğindeki belgeyi temsil eder. DOM, bir sonraki bölümde biraz daha ayrıntılı olarak açıklanmaktadır.
- Tarayıcı daha sonra HTML belgesiyle bağlantılı olan, gömülü resimler ve videolar gibi kaynakların çoğunu ve bağlantılı CSS’yi getirir! JavaScript bu süreçte biraz daha sonra işlenir. İşleri daha basit tutmak için burada bundan bahsetmeyeceğiz.
- Tarayıcı, getirilen CSS’yi ayrıştırır ve farklı kuralları seçici türlerine göre farklı “sepetlerde”, örneğin öğe, sınıf, kimlik vb. olarak sıralar. Bulduğu seçicilere dayanarak, DOM’daki hangi düğümlere hangi kuralların uygulanması gerektiğini belirler ve gerektiği gibi bunlara stil ekler (bu ara adıma işleme ağacı denir).
- İşleme ağacı, kurallar uygulandıktan sonra içinde görünmesi gereken yapıda düzenlenir.
- Sayfanın görsel gösterimi ekranda gösterilir (bu aşamaya boyama denir).
Aşağıdaki şema ayrıca sürecin basit bir görünümünü sunmaktadır.
DOM hakkında
DOM, ağaç benzeri bir yapıya sahiptir. İşaretleme dilindeki her öğe, nitelik ve metin parçası, ağaç yapısında bir DOM düğümü oluşturur. Düğümler, diğer DOM düğümleriyle olan ilişkileriyle tanımlanır. Bazı öğeler alt düğümlerin ebeveynleridir ve düğümlerin kardeşleri vardır.
DOM’u anlamak, CSS’nizi tasarlamanıza, hatalarını ayıklamanıza ve bakımını yapmanıza yardımcı olur çünkü DOM, CSS’nizin ve belgenin içeriğinin buluştuğu yerdir. Tarayıcı DevTools ile çalışmaya başladığınızda, hangi kuralların geçerli olduğunu görmek için öğeleri seçerken DOM’da gezineceksiniz.
Gerçek bir DOM temsili
Uzun, sıkıcı bir açıklama yerine, gerçek bir HTML kodunun nasıl DOM’a dönüştürüldüğünü görmek için bir örneğe bakalım.
Aşağıdaki HTML kodunu alın:
<p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p>
DOM’da,
<p> öğemize karşılık gelen düğüm bir ebeveyndir. Çocukları bir metin düğümüdür ve
<span> öğelerimize karşılık gelen üç düğüm bulunur.
SPAN Düğümleri de metin düğümleri olan ebeveynlerdir:
P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"
Bir tarayıcı önceki HTML kodunu bu şekilde yorumlar; yukarıdaki DOM ağacını oluşturur ve ardından tarayıcıda şu şekilde gösterir:
DOM’a CSS Uygulamak
Diyelim ki belgemize stil vermek için biraz CSS ekledik. Yine, HTML aşağıdaki gibi olsun:
<p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p>
Buna aşağıdaki CSS’yi uyguladığımızı varsayalım:
span { border: 1px solid black; background-color: lime; }
Tarayıcı HTML’i ayrıştırır ve ondan bir DOM oluşturur, ardından CSS’yi ayrıştırır. CSS’de mevcut olan tek kural bir
span seçicisi olduğundan, tarayıcı CSS’yi çok hızlı bir şekilde sıralayabilecektir! Bu kuralı üç
<span>‘ın her birine uygulayacak, ardından son görsel temsili ekrana boyayacaktır.
Güncellenen çıktı aşağıdaki gibidir:
Bir sonraki kılavuzda yer alan CSS Hata Ayıklama makalemizde, CSS sorunlarının hatalarını ayıklamak için tarayıcı DevTools‘u kullanacağız ve tarayıcının CSS’yi nasıl yorumladığı hakkında daha fazla bilgi edineceğiz.
Bir tarayıcı, anlamadığı bir CSS ile karşılaşırsa ne olur?
Daha önceki bir derste, tarayıcıların hepsinin aynı anda yeni CSS uygulamadığından bahsetmiştik. Ayrıca, birçok kişi bir tarayıcının en son sürümünü de kullanmaz. CSS’nin her zaman geliştirildiğini ve bu nedenle tarayıcıların tanıyabileceklerinin önünde olduğunu düşünürsek, bir tarayıcının tanımadığı bir CSS seçicisi veya bildirimi ile karşılaşması durumunda ne olacağını merak edebilirsiniz.
Cevap, hiçbir şey yapmaması ve bir sonraki CSS parçasına geçmesidir!
Bir tarayıcı kurallarınızı ayrıştırıyorsa ve anlamadığı bir özellik veya değerle karşılaşırsa, onu yok sayar ve bir sonraki bildirime geçer. Bir hata yaptıysanız ve bir özelliği veya değeri yanlış yazdıysanız veya özellik veya değer çok yeniyse ve tarayıcı henüz desteklemiyorsa gerçekleşen budur.
Benzer şekilde, bir tarayıcı anlamadığı bir seçiciyle karşılaşırsa, tüm kuralı yok sayar ve bir sonrakine geçer.
Aşağıdaki örnekte renk için İngiliz İngilizcesi yazımını (colour) kullandım, bu özelliği tanınmadığından geçersiz kılıyor. Bu yüzden paragrafım mavi ile renklendirilmedi. Ancak diğer CSS’lerin tümü uygulandı; yalnızca geçersiz satır yoksayıldı.
<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%; }
Bu davranış çok faydalıdır. Anlaşılmadığı takdirde hiçbir hata oluşturmaması yeni CSS kurallarını istediğimiz zaman kullanabileceğiniz anlamına gelir – tarayıcı yeni özelliği bilir veya bilmez. Bu, en basit geri dönüş stilini etkinleştirir.
Bu, özellikle oldukça yeni olan ve her yerde desteklenmeyen bir değer kullanmak istediğinizde işe yarar. Örneğin, bazı eski tarayıcılar
calc() fonksiyonunu değer olarak desteklemez. CSS’de önce piksel cinsinden bir genişlik verip sonrasında
calc()değerini
100% - 50px olarak verebiliriz. Eski tarayıcılar, piksel sürümünü kullanacak ve
calc() anlamadıkları için bu satırı görmezden geleceklerdir. Yeni tarayıcılar pikselleri kullanarak satırı yorumlayacak, ancak daha sonra
calc()ile bu satır kademeli olarak değiştirilecektir.
.box { width: 500px; width: calc(100% - 50px); }
Daha sonraki derslerde farklı tarayıcıları desteklemenin daha birçok yolunu inceleyeceğiz.
Sonuç
Bu kılavuzu neredeyse bitirdiniz; yapacak bir şeyimiz daha var. Bir sonraki makalede, bir örneği yeniden biçimlendirmek için yeni bilginizi kullanacaksınız ve bu süreçte bazı CSS’leri test edeceksiniz.