Şelale

CSS Podcast - 004: Cascade

CSS, Geçişli Stil Sayfaları anlamına gelir. Basamak, bir HTML öğesine birden çok CSS kuralının uygulandığı çakışmaları çözmek için kullanılan algoritmadır. Aşağıdaki CSS ile stil verilen düğme metninin mavi olmasının nedeni budur.

button {
  color: red;
}

button {
  color: blue;
}

Basamaklama algoritmasını anlamak, tarayıcının bu tür çakışmaları nasıl çözdüğünü anlamanıza yardımcı olur. Basamak algoritması 4 farklı aşamaya bölünmüştür.

  1. Konum ve görünüm sırası: CSS kurallarınızın görünme sırası
  2. Spesifiklik: Hangi CSS seçicinin en güçlü eşleşmeye sahip olduğunu belirleyen bir algoritma
  3. Kaynak: CSS'nin ne zaman göründüğü ve nereden geldiği (tarayıcı stili, tarayıcı uzantısından CSS veya sizin oluşturduğunuz CSS) olarak sıralanmıştır
  4. Önem: Bazı CSS kuralları, özellikle !important kural türüyle diğerlerinden daha fazla ağırlığa sahiptir

Görünüm konumu ve sırası

CSS kurallarınızın görünme sırası ve nasıl göründükleri, çakışma çözümü hesaplanırken basamaklar tarafından dikkate alınır.

Bu dersin başındaki demo, pozisyonun en basit örneğidir. Benzer spesifiklikte seçicilere sahip iki kural vardır. Bu nedenle, bildirilecek son kural kazanılır.

Stiller bir HTML sayfasındaki <link> etiketi, yerleştirilmiş <style> etiketi ve bir öğenin style özelliğinde tanımlanan satır içi CSS gibi çeşitli kaynaklardan gelebilir.

HTML sayfanızın üst kısmında CSS içeren bir <link> varsa sayfanızın alt kısmında CSS'yi içeren başka bir <link> daha kesin olur. Alttaki <link> ise en belirgin olanıdır. Aynı şey yerleştirilmiş <style> öğelerinde de gerçekleşir. Sayfalarda ne kadar ayrıntılı olursa o kadar spesifik hale gelirler ki.

Düğmenin arka planı, bir <link /> öğesi tarafından dahil edilen ve CSS tarafından tanımlandığı gibi mavi bir arka plana sahiptir. Bunu koyu olarak ayarlayan bir CSS kuralı, bağlı ikinci bir stil sayfasındadır ve sonraki konumu nedeniyle uygulanır.

Bu sıralama, yerleştirilmiş <style> öğeleri için de geçerlidir. Bunlar <link> öğesinden önce tanımlanırsa bağlı stil sayfasının CSS'si en kesinliğe sahip olur.

<style> öğesi <head> içinde tanımlanır, <link /> öğesi ise <body> içinde tanımlanır. Yani <style> öğesine göre daha spesifiktir.

İçinde CSS belirtilmiş bir satır içi style özelliği, bir bildirim !important tanımlı olmadığı sürece, konumundan bağımsız olarak diğer tüm CSS'leri geçersiz kılar.

Konum, CSS kuralınızın sırasına göre de uygulanır. Bu örnekte, background: purple son olarak tanımlandığı için öğenin mor bir arka planı vardır. Yeşil arka plan, mor arka plandan önce tanımlandığı için artık tarayıcı tarafından yoksayılmaktadır.

.my-element {
  background: green;
  background: purple;
}

Aynı özellik için iki değer belirtebilmek, belirli bir değeri desteklemeyen tarayıcılar için yedek oluşturmanın basit bir yolu olabilir. Bir sonraki örnekte, font-size iki kez tanımlanmıştır. Tarayıcıda clamp() destekleniyorsa önceki font-size beyanı silinir. Tarayıcı clamp()'ı desteklemiyorsa ilk bildirim dikkate alınır ve yazı tipi boyutu 1,5 rem olur

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

Öğrendiklerinizi sınayın

Şelale bilginizi test edin

Sayfanızda aşağıdaki HTML kodu varsa:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

styles.css içinde şu CSS kuralı vardır:

button {
  background: yellow;
}

Düğmenin arka planı ne renk?

pembe
Yerleştirilmiş <style> kaynağı, sayfada <link> etiketinden daha aşağıdadır. Bu nedenle, button özelliğinin belirginliği aynı olsa da stil kuralının konumu kazanmasını sağlar.
yellow
HTML belgesinde, sarı düğme arka planı ilk olarak okunmuş olabilir. Ancak daha sonra, aynı kesinliğe sahip daha yeni bir kural keşfedilmiştir. Bu da bu kuralın düğme için geçerli olmamasına yol açmıştır.

Belirginlik

Belirginlik, bir ağırlıklandırma veya puanlama sistemi kullanarak hangi CSS seçicinin en spesifik olduğunu belirleyen bir algoritmadır. Bir kuralı daha spesifik hale getirerek, seçiciyle eşleşen başka bir CSS daha CSS'de görünse bile kuralın uygulanmasını sağlayabilirsiniz.

Sonraki derste, spesifikliğin nasıl hesaplandığına dair ayrıntıları öğrenebilirsiniz. Ancak birkaç noktayı aklınızda tutmanız çok fazla ayrıntı sorunundan kaçınmanıza yardımcı olur.

Bir öğe üzerindeki bir sınıfı hedefleyen CSS, bu kuralı daha spesifik hale getirir ve bu nedenle, CSS'nin öğenin tek başına hedeflenmesinden daha önemli bir şekilde uygulanması daha önemlidir. Bu, aşağıdaki CSS'de her iki kural eşleşmesi ve h1 seçicisinin kuralı stil sayfasında ileri bir noktada gelse bile h1 öğesinin kırmızı renkli olacağı anlamına gelir.

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

id, CSS'yi daha da spesifik hale getirir. Bu nedenle, bir kimliğe uygulanan stiller, diğer birçok şekilde uygulanan stilleri geçersiz kılar. id öğelerine stil eklemenin genellikle iyi bir fikir olmamasının nedeni budur. Başka bir stilin üzerine yazmak zor olabilir.

Belirginlik kümülatiftir

Bir sonraki derste de öğrenebileceğiniz gibi, her bir seçici türü ne kadar spesifik olduğunu gösteren puan kazanır, bir öğeyi hedeflemek için kullandığınız tüm seçicilerin puanları toplanır. Bu nedenle, a.my-class.another-class[href]:hover gibi bir seçici listesine sahip bir öğeyi hedeflerseniz diğer CSS ile üzerine yazılması oldukça zor bir işlem elde edersiniz. Bu nedenle ve CSS'nizin daha fazla yeniden kullanılabilir olmasını sağlamak için seçicilerinizi mümkün olduğunca basit tutmanız önerilir. Gerektiğinde öğelere ulaşmak için belirginlik aracını kullanın. Ancak mümkünse uzun, spesifik seçici listelerini yeniden düzenlemeyi düşünün.

Köken

Yazdığınız CSS, sayfaya uygulanan tek CSS değildir. Basamak, CSS'nin kaynağını dikkate alır. Bu kaynak, tarayıcının dahili stil sayfasını, tarayıcı uzantıları veya işletim sistemi tarafından eklenen stilleri ve oluşturduğunuz CSS'yi içerir. Bu kaynakların belirginlik sırası en az spesifikten en belirgine doğru aşağıdaki gibidir:

  1. Kullanıcı aracısı temel stilleri. Bunlar, tarayıcınızın HTML öğelerine varsayılan olarak uyguladığı stillerdir.
  2. Yerel kullanıcı stilleri. Bunlar, temel yazı tipi boyutu veya daha az hareket tercihi gibi işletim sistemi düzeyinden gelebilir. Ayrıca, tarayıcı uzantılarından da (örneğin, kullanıcının bir web sayfası için kendi özel CSS'sini yazmasına olanak tanıyan bir tarayıcı uzantısı) gelebilirler.
  3. Oluşturulan CSS. Yazdığınız CSS.
  4. Yazma tarihi: !important. Yazar beyanlarınıza eklediğiniz tüm !important.
  5. Yerel kullanıcı stilleri !important. İşletim sistemi düzeyinden gelen herhangi bir !important veya tarayıcı uzantısı düzeyinde CSS.
  6. Kullanıcı aracısı !important. Tarayıcı tarafından sağlanan, varsayılan CSS'de tanımlanan tüm !important.
Listede de açıklandığı gibi köken sırasının görsel bir gösterimi.

Yazdığınız CSS'de !important kural türünüz varsa ve kullanıcının özel CSS'sinde !important kural türü varsa hangi CSS kazanır?

Öğrendiklerinizi sınayın

Şelale kaynaklarıyla ilgili bilginizi test edin

Basamaklı kaynaklarla ilgili bilginizi test edin, farklı kökenlere ait aşağıdaki stil kurallarını göz önünde bulundurun:

Kullanıcı aracısı stili

h1 { margin-block-start: 0.83em; }

Bot

h1 { margin-block-start: 20px; }

Sayfa Yazarı stilleri

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

Kullanıcı özel stili

h1 { margin-block-start: 2rem !important; }

Ardından, aşağıdaki HTML değerine göre:

<h1>Lorem ipsum</h1>

h1 maçının son margin-block-start hangisi?

20px
Önyükleme, önemli yerel kullanıcı stiline kaybeden yazılan kaynağın bir parçasıdır.
0,83em
Kullanıcı aracısı stili kaynağı, önemli yerel kullanıcı stiline karşı kaybediyor.
2rem
Bu !important kullanıcı özel stili, en belirgin kaynağa sahip.
2 kanal
Bu yazar stili, önemli yerel kullanıcı stiline kaybeden yazılan kaynağın bir parçasıdır.
1 kanal
Bu yazar stili, önemli yerel kullanıcı stiline kaybeden yazılan kaynağın bir parçasıdır.

Önem

Tüm CSS kuralları birbiriyle aynı şekilde hesaplanmaz veya kurallar için birbirine aynı kesinlikte sahip olmaz.

Önem sırası en az önemliden en önemliye doğru şöyledir:

  1. font-size, background veya color gibi normal kural türü
  2. animation kural türü
  3. !important kural türü (kaynak ile aynı sıralama)
  4. transition kural türü

Etkin animasyon ve geçiş kuralı türlerinin önemi, normal kurallardan daha yüksektir. Geçiş söz konusu olduğunda !important kural türlerinden daha önemlidir. Bunun nedeni, bir animasyon veya geçiş etkin hale geldiğinde beklenen davranışın görsel durumu değiştirmek olmasıdır.

Bazı CSS'lerin neden uygulanmadığını öğrenmek için Geliştirici Araçları'nı kullanma

Tarayıcı Geliştirici Araçları, genellikle bir öğeyle eşleşebilecek tüm CSS'leri, kullanılmayanların üstü çizilmiş olarak gösterir.

Üzerine yazılan CSS&#39;nin üzerinin çizildiği tarayıcı Geliştirici Araçları resmi

Uygulamayı beklediğiniz CSS hiç görünmüyorsa öğeyle eşleşmemiştir. Bu durumda, başka bir yere, örneğin bir sınıf veya öğe adında yazım hatası ya da geçersiz CSS'ler olup olmadığına bakmanız gerekir.

Öğrendiklerinizi sınayın

Şelale bilginizi test edin

Cascade şunlar için kullanılabilir:

Bir öğeye birden çok stil uygulandığında çakışmaları çözme.
Bu, kuruluşun birincil hedeflerinden biri ve çatışma çözümüdür.
Çizim zamanında her özellik için yalnızca bir stil değerinin olduğundan emin olun.
Metin yalnızca bir renkte olabilir ve Cascade hangi renkte olması gerektiğini belirlemenin bir yoludur.
Puanlama ve ağırlıklandırma stili kuralları.
Puanlama ve ağırlıklandırma, Cascade'in sıralama aşamasının bir parçasıdır.
Stil özelliklerini sıralama ve filtreleme.
Sıralama ve filtreleme, The Cascade'in çatışma çözümünün yönlerini anlamaya yardımcı olan aşamalarıdır.

Kaynaklar