Jump to content

CSS’in ‘C’si “Cascade”

Doğuhan ELMA

Entry posted by Doğuhan ELMA in Cascade

96 views

 Share

"Cascade" (Çağlayan veya Basamaklanma), CSS'in "C" harfini oluşturan temel ve en önemli kavramdır. Bir HTML elemanına birden fazla stil kuralı uygulanmaya çalıştığında, hangi kuralın "kazanacağını" ve son sözü söyleyeceğini belirleyen algoritmadır.

 

layers-tall-outlines3.thumb.png.90117f510bc98404c562a7bb0aecd211.png

Resim Kaynağı: https://css-tricks.com/css-cascade-layers/

 

Çağlayanın Temel Amacı: Hangi Stil Kazanacak?

Bir p etiketimiz olduğunu düşünün. Bu etikete stil veren kurallar şunlar olabilir:

  • Tarayıcının kendi varsayılan stili (örn: margin-bottom: 16px)

  • style.css dosyanızdaki bir kural (örn: p { color: blue; })

  • Aynı dosyadaki başka bir kural (örn: .content p { color: red; })

  • HTML içindeki bir style özelliği (örn: <p style="color: green;">)

Hepsi aynı color özelliğini değiştirmeye çalışıyor. Tarayıcı yeşili mi, kırmızıyı mı yoksa maviyi mi seçecek? İşte bu kararı CSS Cascade algoritması verir.

 

1. Adım: Kaynak (Origin) ve Önem (!important)

Tarayıcı ilk olarak stilin nereden geldiğine ve ne kadar önemli olarak işaretlendiğine bakar.

Kaynaklar (Origins): Stillerin 3 temel kaynağı vardır, öncelik sırasına göre (düşükten yükseğe):

 

A - Tarayıcı Stilleri (User-Agent): Tarayıcınızın kendi varsayılan stilleridir. (Örn: <h1> etiketinin büyük olması, linklerin mavi ve altı çizgili olması). En düşük önceliğe sahiptir. 

/* Chrome'un varsayılan stilleri (basitleştirilmiş) */

/* Blok elementler */
div, p, h1, h2, section, article {
  display: block;
}

/* Paragraflar */
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

/* Başlıklar */
h1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  font-weight: bold;
}

/* Listeler */
ul, ol {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

/* Linkler */
a {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

/* Formlar */
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}
```

### User-Agent Stilleri Nerede?

Tarayıcı kaynak kodlarında:
```
Chromium:
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

Firefox:
https://searchfox.org/mozilla-central/source/layout/style/res/html.css

Safari (WebKit):
https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

 

B - Kullanıcı Stilleri (User): Kullanıcının (genellikle erişilebilirlik nedenleriyle) kendi tarayıcısına eklediği özel stiller. (Örn: "Tüm web sitelerindeki yazı tipini 18px yap"). 

 "Kullanıcı Stili Eklentisi", sizin (kullanıcının) ziyaret ettiğiniz web sitelerinin CSS kodlarını geçersiz kılmak (override etmek) ve kendi özel CSS kurallarınızı uygulamanızı sağlayan bir tarayıcı aracıdır.

Bu eklentilerin en bilineni ve günümüzde en çok tavsiye edileni Stylus'tır.

  

/* Kullanıcının tarayıcıya eklediği stil */
body {
  background: black !important;
  color: yellow !important;
  font-size: 24px !important;
}

a {
  color: cyan !important;
  text-decoration: underline !important;
}

Bu stil örneğinde tüm stil kuralları geçerli olması için !important kullanıldığına dikkat edin.

 

C - Yazar Stilleri (Author): Sizin (web geliştiricisinin) yazdığı CSS kodlarıdır. style.css dosyanız, <style> etiketleriniz vb. Normalde en yüksek önceliğe sahiptir.

Normal Akış: Yazar Stilleri > Kullanıcı Stilleri > Tarayıcı Stilleri

            İstisna: !important !important bayrağı, bu sıralamayı alt üst eder. Bir kurala !important eklendiğinde, o kural "süper güç" kazanır ve sıralama tersine döner:

          Tarayıcı Stilleri > Kullanıcı Stilleri > Yazar Stilleri 

Tarayıcı stilleri genellikle !important kullanmazlar. 

<!DOCTYPE html>
<html>
<head>
  <!-- 1. External Stylesheet -->
  <link rel="stylesheet" href="style.css">
  
  <!-- 2. Internal Stylesheet -->
  <style>
    p { color: blue; }
  </style>
  
  <!-- 3. Imported Stylesheet -->
  <style>
    @import url('theme.css');
  </style>
</head>
<body>
  <!-- 4. Inline Styles -->
  <p style="color: red;">Merhaba</p>
  
  <!-- 5. JavaScript ile eklenen -->
  <script>
    document.querySelector('p').style.color = 'green';
  </script>
</body>
</html>

 

 

 

2. CSS Inline Styles

Inline styles, HTML elementlerine doğrudan style attribute'u ile eklenen CSS stilleridir. 

<p style="color: red; font-size: 18px; margin: 10px;">
  Inline stil örneği
</p>

Inline Styles Özellikleri

1. Specificity (Özgüllük) Değeri

  • Inline styles, CSS specificity hesaplamasında en yüksek değere sahiptir
  • Specificity değeri: 1,0,0,0 (1000 puan)
  • Selectorlerle yazılan hemen hemen tüm stillerden önceliklidir 
<style>
  /* Specificity: 0,1,0,1 = 101 puan */
  #header p {
    color: blue;
  }
  
  /* Specificity: 0,0,1,1 = 11 puan */
  .text p {
    color: green;
  }
</style>

<!-- Inline style kazanır (1000 puan) -->
<div id="header" class="text">
  <p style="color: red;">Bu metin kırmızı olacak</p>
</div>

 

2. Cascade Konumu Inline styles, CSS cascade sırasında çok üst seviyede yer alır:

  1. Transition (geçiş sırasında)
  2. !important user agent styles
  3. !important user styles
  4. !important author styles
  5. Animation (animasyon sırasında)
  6. Normal author styles
  7. Normal user styles
  8. Normal user agent styles

Inline styles "normal author styles" kategorisine girer, ancak çok yüksek specificity'si sayesinde diğer normal stillerin hepsini ezer.

!important vs Inline Styles

Evet, !important inline style'ı geçer! 

<style>
  p {
    color: blue !important;
  }
</style>

<!-- Paragraf MAVI olacak, kırmızı değil -->
<p style="color: red;">Bu metin mavi olacak</p>

 

Öncelik Sırası 

<style>
  /* 1. En güçlü: !important + yüksek specificity */
  #text {
    color: purple !important;
  }
  
  /* 2. Orta güçlü: !important + düşük specificity */
  p {
    color: blue !important;
  }
  
  /* 3. Zayıf: inline style (1000 puan ama !important yok) */
  /* style="color: red;" */
  
  /* 4. En zayıf: normal selector */
  p {
    color: green;
  }
</style>

<p id="text" style="color: red;">
  Bu metin PURPLE olacak
</p>

 

Detaylı Cascade Sıralaması: 

/* Kazanan stiller (yukarıdan aşağıya öncelik) */

/* 1. !important inline style - EN GÜÇLÜ */
<div style="color: red !important;">

/* 2. !important ile yazılmış stiller (specificity'e göre) */
#id { color: blue !important; }
.class { color: green !important; }
div { color: yellow !important; }

/* 3. Normal inline style */
<div style="color: red;">

/* 4. Normal CSS kuralları (specificity'e göre) */
#id { color: blue; }
.class { color: green; }
div { color: yellow; }

 

Inline Style'da !important Kullanımı 

<!-- İki !important varsa, inline olan kazanır -->
<style>
  p {
    color: blue !important;
  }
</style>

<!-- Bu metin KIRMIZI olacak -->
<p style="color: red !important;">
  Inline !important kazandı
</p>

 

 

 

3. CSS Cascade Layers (@layer)

CSS Cascade Layers, CSS'in cascade (basamaklandırma) mekanizmasını kontrol etmek için modern bir özelliktir. Stillerin öncelik sırasını organize etmeye yarar.

Temel Kullanım: 

/* Layer tanımlama ve stil ekleme */
@layer base {
  h1 {
    color: blue;
    font-size: 2em;
  }
}

@layer components {
  h1 {
    color: red;
  }
}

@layer utilities {
  h1 {
    color: green;
  }
}

 

Layer Öncelik Sırası

Önemli Kural: Daha önce tanımlanan layer, daha sonra tanımlanan layer'dan daha düşük önceliğe sahiptir. 

/* Layer sırasını önceden belirle */
@layer base, components, utilities;

/* base < components < utilities önceliğinde */

@layer base {
  button { background: blue; }
}

@layer utilities {
  button { background: green; } /* Bu kazanır */
}

@layer components {
  button { background: red; }
}

/* Sonuç: button yeşil olacak (utilities en son sırada) */

 

Layer'sız Stiller

Layer'a atanmamış stiller, tüm layer'lardan daha yüksek önceliğe sahiptir: 

@layer base {
  p { color: blue; }
}

@layer components {
  p { color: red; }
}

/* Layer dışı stil - EN YÜKSEK ÖNCELİK */
p {
  color: green; /* Bu kazanır */
}

 

Önemli: !important kullanıldığında layer öncelik sırası tersine döner! 

@layer A, B, C;

/* Normal stiller: A < B < C */
/* !important stiller: C < B < A */

@layer A {
  div { color: red; }
  span { color: blue !important; } /* !important: en güçlü */
}

@layer B {
  div { color: green; }
  span { color: green !important; }
}

@layer C {
  div { color: blue; } /* Normal: kazanır */
  span { color: red !important; } /* !important: en zayıf */
}

 

4. CSS Selector Specificity (Özgüllük)

Specificity, CSS'de aynı elemente birden fazla stil kuralı uygulandığında hangisinin geçerli olacağını belirleyen ağırlık hesaplama sistemidir.

Specificity Değer Sistemi

Specificity, 4 basamaklı bir değer sistemiyle hesaplanır: (a, b, c, d) 

a - Inline styles (1,0,0,0)
b - ID selectors (#id)
c - Class, attribute, pseudo-class selectors
d - Element, pseudo-element selectors
/* (0,0,0,1) = 1 puan */
p {
  color: blue;
}

/* (0,0,1,0) = 10 puan */
.text {
  color: red;
}

/* (0,1,0,0) = 100 puan */
#header {
  color: green;
}

/* (1,0,0,0) = 1000 puan */
<p style="color: yellow;">

 

5. CSS Scope Proximity (Kapsam Yakınlığı)

Scope proximity, CSS'in @scope kuralı ile gelen ve DOM ağacında hangi scope'un elemente daha yakın olduğunu belirleyen bir cascade kriteri olarak 2023-2024'te CSS spesifikasyonuna eklenen modern bir özelliktir.

@scope Nedir?

@scope kuralı, stillerin belirli bir DOM alt ağacına (subtree) uygulanmasını sağlar: 

@scope (.card) {
  /* Bu stiller sadece .card içinde geçerli */
  h2 {
    color: blue;
  }
  
  p {
    margin: 0;
  }
}

 

Scope Proximity Prensibi

Birden fazla scope aynı elemente stil uyguladığında, DOM'da elemente en yakın olan scope kazanır - specificity'den bağımsız olarak! 

<div class="outer">
  <div class="inner">
    <p>Bu paragraf</p>
  </div>
</div>
/* Outer scope - uzak */
@scope (.outer) {
  p {
    color: blue;
    font-size: 16px;
  }
}

/* Inner scope - YAKIN */
@scope (.inner) {
  p {
    color: red;  /* KAZANIR - daha yakın scope */
    font-size: 20px;
  }
}

Sonuç: Paragraf kırmızı ve 20px olacak çünkü .inner scope'u DOM'da paragrafa daha yakın.

Scope Proximity vs Specificity

Önemli: Scope proximity, specificity'den daha önceliklidir! 

/* Yüksek specificity ama uzak scope */
@scope (.outer) {
  #content p.highlight {
    color: blue;
    /* Specificity: (0,1,1,1) = 111 */
  }
}

/* Düşük specificity ama yakın scope */
@scope (.inner) {
  p {
    color: red;  /* KAZANIR - yakın scope */
    /* Specificity: (0,0,0,1) = 1 */
  }
}

 

6. CSS Source Order (Kaynak Sırası)

Source Order, CSS cascade sisteminde aynı origin, context, layer, scope proximity, ve specificity'ye sahip iki veya daha fazla stil kuralı olduğunda, hangisinin geçerli olacağını belirleyen son kriterdir.

Basitçe: En son yazılan kural kazanır. 

CSS Cascade Sıralaması (yukarıdan aşağıya):
1. Origin & Importance (!important)
2. Context (Shadow DOM)
3. Element-attached styles (inline)
4. Layers (@layer)
5. Scope proximity (@scope)
6. Specificity (selector ağırlığı)
7. SOURCE ORDER ← En son kriter

 

 Share

0 Comments

Recommended Comments

There are no comments to display.

×
×
  • Create New...

Important Information

  I accept