Belirginlik

CSS Podcast - 003: Belirginlik

Aşağıdaki HTML ve CSS ile çalıştığınızı varsayalım:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

Burada iki kural var. Biri düğme kırmızı, diğeri ise mavi renklendirilir. Öğeye hangi kural uygulanır? CSS spesifikasyonunun algoritmasını spesifiklikle ilgili olarak anlamak, CSS'nin rekabet eden kurallar arasında nasıl karar verdiğini anlamanın anahtarıdır.

Belirginlik, son modülde döngüde ele alınmış olan, şelalenin dört farklı aşamasından biridir.

Özgüllük puanı

Her seçici kuralı bir puan alır. Belirginliği toplam bir puan olarak düşünebilirsiniz. Her seçici türü bu puana puan verir. En yüksek puana sahip seçici kazanır.

Gerçek bir projenin belirli olması durumunda dengeleme eylemi, karmaşıklığı önlemek için genellikle puanları düşük tutarken, uygulanmasını beklediğiniz CSS kurallarının gerçekten uygulanmasını sağlamaktır. Puan, mümkün olan en yüksek puanı hedeflemek yerine yalnızca gerektiği kadar yüksek olmalıdır. Gelecekte, gerçekten daha önemli bazı CSS'lerin uygulanması gerekebilir. En yüksek puanı kazanırsanız işiniz zorlaşır.

Her seçici türünü puanlama

Her seçici türü puan kazandırır. Bir seçicinin genel belirginliğini hesaplamak için tüm bu noktaları toplarsınız.

Evrensel seçici

Evrensel seçici (*) spesifikliği yoktur ve 0 puan alır. Bu durumda, 1 veya daha fazla puana sahip tüm kurallar değeri geçersiz kılar

* {
  color: red;
}

Öğe veya sözde öğe seçici

Bir öğe (tür) veya sözde öğe seçicisi, 1 belirginlik noktası alı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

Bir sınıf, sözde sınıf veya özellik seçicisi, 10 kesinlik puanı alır.

Sınıf seçici

.my-class {
  color: red;
}

Sözde sınıf seçici

:hover {
  color: red;
}

Özellik seçici

[href='#'] {
  color: red;
}

:not() sözde sınıfının kendisi, spesifiklik hesaplamasına hiçbir şey eklemez. Bununla birlikte, bağımsız değişken olarak iletilen seçiciler, spesifiklik hesaplamasına eklenir.

div:not(.my-class) {
  color: red;
}

Bu örnek, :not() içinde bir tür seçici (div) ve bir sınıf içinde olduğundan 11 puana sahip olur.

Kimlik seçici

Kimlik seçici, özellik seçici ([id="myID"]) yerine bir kimlik seçici (#myID) kullandığınız sürece 100 spesifiklik puanı alır.

#myID {
  color: red;
}

Satır içi stil özelliği

CSS, doğrudan HTML öğesinin style özelliğine uygulandığında 1.000 puanlık bir spesifiklik puanı alır. Yani CSS'de bunu geçersiz kılmak için son derece spesifik bir seçici yazmanız gerekir.

<div style="color: red"></div>

!important kural

Son olarak, bir CSS değerinin sonundaki !important,10.000 puan belirlilik puanı alır. Bu, tek bir öğenin alabileceği en yüksek belirginliktir.

!important kuralı bir CSS mülküne uygulandığından genel kuraldaki her şey (seçici ve özellikler) aynı belirlilik puanını almaz.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

Öğrendiklerinizi sınayın

Özgünlük puanıyla ilgili bilginizi test edin

Bağlam içindeki belirginlik

Bir öğeyle eşleşen her bir seçicinin ayrıntı düzeyi toplanır. Şu örnek HTML'yi inceleyin:

<a class="my-class another-class" href="#">A link</a>

Bu bağlantıda iki sınıf var. Aşağıdaki CSS'yi eklediğinizde 1 belirginlik noktası alır:

a {
  color: red;
}

Bu kuraldaki sınıflardan birine referans verin. Artık 11 kesinlik noktasına sahiptir:

a.my-class {
  color: green;
}

Diğer sınıfı seçiciye ekleyin. Seçiciye artık 21 belirginlik noktası sunulmaktadır:

a.my-class.another-class {
  color: rebeccapurple;
}

Seçiciye href özelliğini ekleyin. Seçiciye artık 31 belirginlik noktası sunulmaktadır:

a.my-class.another-class[href] {
  color: goldenrod;
}

Son olarak,bunların tümüne bir :hover sözde sınıf ekleyin. Seçici, 41 spesifikliğe sahip olacaktır:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Öğrendiklerinizi sınayın

Özgünlük puanıyla ilgili bilginizi test edin

Belirliliği görselleştirme

Diyagramlarda ve özgüllük hesaplayıcılarda, kesinlik genellikle şu şekilde görselleştirilir:

Soldaki grup, id seçicidir. İkinci grup; sınıf, özellik ve sözde sınıf seçicilerdir. Son grup, öğe ve sözde öğe seçicilerdir.

Referans olarak, aşağıdaki seçici 0-4-1 kullanılmıştır:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Öğrendiklerinizi sınayın

Belirginlik görselleştirme konusundaki bilginizi test edin

Pragmatik olarak belirginliği artırma

Aşağıdaki gibi görünen bazı CSS'lerimiz olduğunu varsayalım:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Şunun gibi görünen HTML ile:

<button class="my-button" onclick="alert('hello')">Click me</button>

İkinci seçici 11 puan kazandığı için düğmenin arka planı gri olur (0-1-1). Bunun nedeni, 1 puan olan bir tür seçiciye (button) ve 10 puan olan bir özellik seçiciye ([onclick]) sahip olmasıdır.

Önceki kural (.my-button), bir sınıf seçiciye sahip olduğu için 10 puan (0-1-0) alıyor.

Bu kuralı güçlendirmek istiyorsanız sınıf seçiciyi şu şekilde tekrarlayın:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Şimdi yeni seçici 20 puan (0-2-0) belirli bir doğruluk puanı aldığından, düğmenin arka planı mavi olur.

Eşleşen bir belirlilik puanı, en yeni örneği kazanır

Şimdilik düğme örneği üzerinden kalalım ve CSS'yi şu şekilde değiştirelim:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Her iki seçicinin de belirginlik puanı aynı olduğundan (0-1-0) düğmenin arka planı gri olur.

Kuralları kaynak sırasında değiştirirseniz düğme mavi olur.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

Yeni CSS'nin kazandığı tek örnek budur. Bunu yapmak için, aynı öğeyi hedefleyen başka bir seçicinin belirginliğiyle eşleşmesi gerekir.

Kaynaklar

• CSS Özellikleri
• Spesifikasyon Hesaplayıcı
• MDN Belirginliği
• CSS belirginliğiyle ilgili ayrıntılar
• Başka Bir Belirginlik Hesaplayıcı