CSS Podcast - 003: Belirlilik
Aşağıdaki HTML ve CSS ile çalıştığınızı varsayalım:
<button class="branding">Hello, Specificity!</button>
.branding {
color: blue;
}
button {
color: red;
}
Burada aynı öğeyi hedefleyen iki kural vardır. Her kural, düğmenin rengini ayarlamak isteyen bir beyan içerir: biri düğmeyi kırmızı, diğeri mavi renklendirmeye çalışır. Öğeye hangi beyan uygulanır?
CSS'nin, birbiriyle yarışan beyanlar arasında nasıl karar verdiğini anlamak için CSS özgüllüğü algoritmasını anlamanız gerekir.
Belirlilik, son modülde dönüşüm hunisi bölümünde ele alınan dönüşüm hunisinin farklı aşamalarından biridir.
Belirginlik puanlaması
Bir köken içindeki her seçici kuralı puan alır. Belirginliği toplam puan olarak düşünebilirsiniz. Her seçici türü bu puana yönelik puan kazanır. En yüksek ayrıntıya sahip kurallardan gelen beyanlar kazanır.
Gerçek bir projede, uygulamayı beklediğiniz CSS kurallarının gerçekten uygulandığından emin olmak ve karmaşıklığı önlemek için puanları genellikle düşük tutmak arasında denge kurmak gerekir. Spesifikasyon, mümkün olan en yüksek düzeyi hedeflemek yerine yalnızca ihtiyaç duyduğumuz kadar yüksek olmalıdır. Gelecekte gerçekten daha önemli CSS'lerin uygulanması gerekebilir. En yüksek özgünlüğü seçerseniz bu işi zorlaştırırsınız.
Belirginlik, ondalık bir sayı değil, A
, B
ve C
olmak üzere üç bileşenden oluşan bir üçlü gruptur.
A
: kimliğe benzer özgüllükB
: sınıf benzeri özgüllükC
: öğeye benzer özgüllük
Genellikle (A,B,C)
gösterimi kullanılır. Örneğin: (1,0,2)
.
Alternatif A-B-C
notasyonu da yaygın olarak kullanılır.
Özellikleri karşılaştırma
Belirlilikler, üç bileşen sırayla karşılaştırılarak karşılaştırılır: Daha büyük A değerine sahip belirlilik daha spesifiktir; İki A değeri eşitse daha büyük B değerine sahip belirlilik daha spesifiktir; İki B değeri de eşitse daha büyük C değerine sahip belirlilik daha spesifiktir; Tüm değerler eşitse iki belirlilik eşittir.
Örneğin, (1,0,0)
'teki A
değeri (1
) (0,4,3)
'teki A
değerinden (0
) daha yüksek olduğundan (1,0,0)
, (0,4,3)
'ten daha yüksek bir özgünlük olarak kabul edilir.
Seçiciler, özgünlüğü etkiler
Belirlilik üçlüsünün her bir parçası 0
değeriyle başlar. Bu nedenle varsayılan belirlilik (0,0,0)
'tür.
Bir seçicinin her bölümü, seçici türüne bağlı olarak A
, B
veya C
değerini artıran özgünlüğü artırır.
Evrensel seçici
Evrensel seçici (*
), özellik eklemez ve değerini (0,0,0)
olan ilk özgünlükte bırakır.
* {
color: red;
}
Öğe veya sözde öğe seçici
Öğe (tür) veya sözde öğe seçici, C
bileşenini 1
artıran öğeye benzer özgünlük ekler.
Aşağıdaki örneklerin genel özgünlüğü (0,0,1)
'tür.
Tür seçici
div {
color: red;
}
Sözde öğe seçici
::selection {
color: red;
}
Sınıf, sözde sınıf veya özellik seçici
Sınıf, sözde sınıf veya özellik seçici, B
bileşenini 1
artıran sınıf benzeri özgünlük ekler.
Aşağıdaki örneklerin özgünlüğü (0,1,0)
'tür.
Sınıf seçici
.my-class {
color: red;
}
Sanal sınıf seçici
:hover {
color: red;
}
Özellik seçici
[href='#'] {
color: red;
}
Kimlik seçici
No seçici, özellik seçici ([id="myID"]
) yerine kimlik seçici (#myID
) kullandığınızda C
bileşenini 1 artıran kimlik benzeri özgünlük ekler.
Aşağıdaki örnekte özgünlük (1,0,0)
'tür.
#myID {
color: red;
}
Diğer seçiciler
CSS'de birçok seçici vardır. Bunların hepsi belirlilik sağlamaz.
Örneğin, :not()
sözde sınıfı, özgünlük hesaplamasına hiçbir şey eklemez.
Ancak bağımsız değişken olarak iletilen seçiciler, özgünlük hesaplamasına eklenir.
div:not(.my-class) {
color: red;
}
Bu örnekte, :not()
içinde bir tür seçici(div
) ve bir sınıf bulunduğundan özgünlük (0,1,1)'dir.
Öğrendiklerinizi test etme
Belirlilik puanlaması hakkındaki bilgilerinizi test edin
a[href="#"]
'ün özgünlüğü nedir?
(0,0,1)
(0,1,1)
(0,1,0)
Belirginliği etkilemeyen faktörler
Belirginliği etkileyen aşağıdaki faktörler hakkında yaygın olarak karşılaşılan bazı yanlış fikirler vardır.
Satır içi stil öznitelikleri
Bir öğenin style
özelliğine doğrudan uygulanan CSS, özgünlükten önce değerlendirilen dönüşümde farklı bir adım olduğundan özgünlüğü etkilemez.
<div style="color: red"></div>
Bu beyanı bir stil sayfasından geçersiz kılmak için dönüşüm dizisinin önceki bir adımında beyan kazanmayı tercih etmeniz gerekir.
Örneğin, Yazar tarafından oluşturulan !important
kaynağının bir parçası olması için !important
ekleyebilirsiniz.
!important
beyanlar
CSS beyanının sonundaki !important
, özgüllüğü etkilemez ancak beyanı farklı bir kökene, yani Yazar tarafından oluşturulan !important
içine yerleştirir.
Aşağıdaki örnekte, .my-class
özelliğinin özgünlüğü, !important
beyanının kazanması için alakalı değildir.
.my-class {
color: red !important;
color: white;
}
İki beyan !important
olduğunda, ardışık düzendeki kaynak adım henüz kazananı belirleyemediğinden özgünlük tekrar devreye girer.
.branding {
color: blue !important;
}
button {
color: red !important;
}
Bağlamda özgünlük
Karmaşık veya bileşik bir seçici kullanıldığında, bu seçicinin her bir parçası özgünlüğe eklenir. Aşağıdaki örnek HTML'yi inceleyin:
<a class="my-class another-class" href="#">A link</a>
Bu bağlantıda iki sınıf vardır.
Aşağıdaki CSS'deki kuralın özelliği (0,0,1)
'dır:
a {
color: red;
}
Seçicideki sınıflardan birine referans verirseniz artık (0,1,1)
özgünlüğüne sahip olur:
a.my-class {
color: green;
}
Seçiciye diğer sınıfı ekleyin. Artık (0,2,1)
özgünlüğüne sahip:
a.my-class.another-class {
color: rebeccapurple;
}
Seçiciye href
özelliğini ekleyin. Artık (0,3,1)
özgünlüğüne sahip:
a.my-class.another-class[href] {
color: goldenrod;
}
Son olarak,tüm bunlara bir :hover
sözde sınıfı ekleyin. Seçici, (0,4,1)
özgünlüğüne sahip olur:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Öğrendiklerinizi test etme
Belirlilik puanlaması hakkındaki bilgilerinizi test edin
Aşağıdaki seçicilerden hangisinin özgünlüğü (0,2,1)
'tür?
article.card.dark
article:hover a[href]
article > section
Özgüllüğü pragmatik olarak artırma
Aşağıdaki gibi bir CSS'niz olduğunu varsayalım:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
HTML ile bu şöyle görünür:
<button class="my-button" onclick="alert('hello')">Click me</button>
İkinci seçicinin (0,1,1)
özgüllüğü olduğundan düğmenin arka planı gridir.
Bunun nedeni, (0,0,1)
olan bir tür seçici (button
) ve (0,1,0)
olan bir özellik seçici ([onclick]
) içermesidir.
Önceki kural (.my-button
), (0,1,1)
'ten daha düşük bir özgürlüğe sahip olan bir sınıf seçici içerdiğinden (0,1,0)
ile eşittir.
Bu kurala öncelik vermek istiyorsanız sınıf seçiciyi şu şekilde tekrarlayabilirsiniz:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Yeni seçici bir özgünlük (0,2,0)
aldığından düğmenin arka planı artık mavidir.
Belirlilik eşleşmesi olduğunda, ardışık düzendeki bir sonraki adıma geçilir.
Şimdilik düğme örneğinde kalalım ve CSS'yi şu şekilde değiştirelim:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Her iki seçici de (0,1,0)
değerine sahip olduğundan düğmenin arka planı gridir.
Kuralların sırasını kaynak düzenine göre değiştirirseniz düğme mavi olur.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Bunun nedeni, her iki seçicinin de aynı özgürlüğe sahip olmasıdır. Bu durumda, kademeli sıralama görüntüleme sırası adımına geri döner.