Tarayıcının CSS stillerinin uygulanacağı öğeleri nasıl belirlediğini açıklayın.

Tarayıcı, CSS stillerini uygulayacak öğeleri, CSS seçicilerine dayalı arama ve eşleştirme mekanizmalarını kullanarak belirler.

İşlem şu şekilde gerçekleşir:

1. CSS Ayrıştırması: Tarayıcı, CSS dosyalarını ve HTML içindeki <style> bloklarını analiz eder ve içsel bir stil temsili oluşturur.
2. HTML Ayrıştırması: Tarayıcı, HTML'i analiz eder ve DOM Ağacını (Document Object Model) oluşturur.
3. Eşleştirme (Matching): Her DOM düğümü için, tarayıcı onu CSS kurallarıyla eşleştirmeye çalışır. Bu, CSS kurallarındaki seçicilerin kontrol edilmesiyle yapılır. Genellikle, tarayıcı seçicinin daha özgül kısımlarından daha az özgül kısımlarına doğru çalışır (sağdan sola). Örneğin, div article p seçicisi için önce p bulunur, sonra onun article'in bir torunu olup olmadığı kontrol edilir, o da div'in torunu olur.
4. Uygulama (Applying): Eğer bir DOM düğümü, bir veya birkaç CSS kuralıyla eşleşiyorsa, tarayıcı bu düğüme uygun stilleri uygular. Birden fazla kural geçerliyse, tarayıcı özgüllük, bildirim sırası ve kalıtım kurallarını kullanarak nihai stil kümesini belirler.

Özgüllük (Specificity):

Özgüllük, tarayıcının CSS seçicisinin ağırlığını hesaplamak için kullandığı bir algoritmadır. Daha özgül seçici, stil uygulamasında daha yüksek önceliğe sahiptir. Özgüllük, seçicideki ID, sınıf/pseudoklas/atribüt ve öğe/pseudöğeleri sayısına göre hesaplanır.

// a = ID sayısı
// b = sınıf, pseudoklas, atribut sayısı
// c = öğe, pseudöğeleri sayısı
// Satır içi stiller en yüksek önceliğe sahiptir (1, 0, 0, 0)
// `*` seçicisinin özgüllüğü (0, 0, 0)

Örnek özgüllük hesaplaması:

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Bildirim sırası:

İki kural aynı özgüllüğe sahipse, CSS kodunda en son bildirilen kural uygulanır.

Kalıtım (Inheritance):

Bazı CSS özellikleri, ebeveyn öğelerden çocuklara doğru kalıtılır (örneğin, color, font-family). Bir özellik için açıkça değer atanmadıysa, tarayıcı DOM Ağacı boyunca yukarı doğru kalıtılmış değeri arar.

Bu şekilde, tarayıcı, seçicileri eşleştirerek, özgüllük ve bildirim sırasını çözerek ve kalıtımı dikkate alarak bir öğenin stillerini belirler.