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.
- Konum ve görünüm sırası: CSS kurallarınızın görünme sırası
- Spesifiklik: Hangi CSS seçicinin en güçlü eşleşmeye sahip olduğunu belirleyen bir algoritma
- 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
- Ö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.
<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?
<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.
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:
- Kullanıcı aracısı temel stilleri. Bunlar, tarayıcınızın HTML öğelerine varsayılan olarak uyguladığı stillerdir.
- 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.
- Oluşturulan CSS. Yazdığınız CSS.
- Yazma tarihi:
!important
. Yazar beyanlarınıza eklediğiniz tüm!important
. - Yerel kullanıcı stilleri
!important
. İşletim sistemi düzeyinden gelen herhangi bir!important
veya tarayıcı uzantısı düzeyinde CSS. - Kullanıcı aracısı
!important
. Tarayıcı tarafından sağlanan, varsayılan CSS'de tanımlanan tüm!important
.
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?
!important
kullanıcı özel stili, en belirgin kaynağa sahip.Ö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:
font-size
,background
veyacolor
gibi normal kural türüanimation
kural türü!important
kural türü (kaynak ile aynı sıralama)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'nin üzerinin çizildiği tarayıcı Geliştirici Araçları resmi](https://web.dev/static/learn/css/the-cascade/image/an-image-browser-devtool-8306b56aa8a21.png?authuser=5&hl=tr)
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: