Belirginlik

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ük
  • B: sınıf benzeri özgüllük
  • C: öğ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.

Spesifikliğin üç bileşenini (A,B,C) gösteren bir diyagram. Diyagramda her bileşenin neyi temsil ettiği ve onu etkileyen bazı örnek seçiciler gösterilir.
Çeşitli seçicilerin özgüllüğün hangi bileşenini etkilediğini gösteren bir diyagram.

Ö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)
a, (0,0,1) değerine sahiptir ancak [href="#"], (0,1,0) değerine sahiptir.
(0,1,0)
Tekrar deneyin. a, (0,0,1) değerine sahiptir ancak [href="#"], (0,1,0) değerine sahiptir.
(0,1,1)
a, (0,0,1) değerine, [href="#"] ise (0,1,1) değerine sahiptir. Bu da toplam özgünlüğün (0,1,1) olmasını sağlar.

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 > section
Öğeler, öğeye benzer özgünlük ekler ("C" bileşeni). Seçicide 2 öğe bulunduğundan bu öğenin özgünlüğü (0,0,2)'dir.
article.card.dark
Öğeler öğe benzeri özgünlük ekler ("C" bileşeni) ve sınıflar sınıf benzeri özgünlük ekler ("B" bileşeni). 2 sınıf ve 1 öğe olduğu için bu seçicinin özgünlüğü (0,2,1) olur.
article:hover a[href]
Öğeler öğeye benzer özgünlük ekler ("C" bileşeni), sözde sınıflar ve özellikler sınıfa benzer özgünlük ekler ("B" bileşeni). 2 öğe seçici (2 × (0,0,1)), bir özellik seçici ((0,0,1) değerinde) ve bir sınıf seçici ((0,0,1) değerinde) vardır. Bu, bu seçicinin toplam özgüllüğünü (0,2,2) değerine çıkarır.

Ö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.

Kaynaklar