Belirginlik

CSS Podcast'i - 003: Belirlilik

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 birbiriyle rekabet eden iki kural var. Biri düğmeyi kırmızı, diğeri ise mavi renklendirir. Öğeye hangi kural uygulanır? CSS spesifikasyonunun belirginlikle ilgili algoritmasını anlama CSS'nin rakip kurallar arasında nasıl karar verdiğini anlamanın anahtarıdır.

Belirginlik, bu şelalenin dört farklı aşamasından biridir. Bu konu son modülde basamakla ele alınmıştı.

Özgüllük puanı

Her seçici kuralın bir puanlaması vardır. Kesinliği toplam bir puan olarak düşünebilirsiniz ve her seçici türü bu puana katkı sağlayacak bir puan kazandırır. En yüksek puanı alan seçici kazanır.

Gerçek bir projeyi somut ve belirli dengelemek, uygulamayı beklediğiniz CSS kurallarının, fiilen uygulanmasını, çoğu zaman karmaşıklığı önlemek için puanları düşük tutar. Skor, ihtiyacımız olan kadar yüksek olmalı. bir hedef belirleyebilirsiniz. Gelecekte gerçekten daha önemli bazı CSS'lerin uygulanması gerekebilir. En yüksek puanı almak için çalışırsanız işinizi zorlaştırırsınız.

Her seçici türünün puanlanması

Her seçici türü puan kazanır. Bir seçicinin genel spesifikliğini hesaplamak için bu noktaların tümünü eklersiniz.

Evrensel seçici

Evrensel seçici (*) spesifik olmayan ve 0 puan alıyor. Bu durumda, 1 veya daha fazla puanı olan kurallar geçersiz kılınır

* {
  color: red;
}

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

Öğe (tür) veya sözde öğe seçicinin 1 kesinlik noktası vardı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 sahte-sınıf veya özellik seçicisi 10 spesifik nokta 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 kendisi, belirginlik hesaplamasına hiçbir şey eklemez. Bununla birlikte, bağımsız değişken olarak iletilen seçiciler, belirlilik hesaplamasına eklenir.

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

Bu örnek 11 puan belirginliğine sahip olur çünkü :not() öğesinin içinde bir tür seçici (div) ve bir sınıf vardır.

Kimlik seçici

Kimlik seçici 100 nokta, özellik seçici ([id="myID"]) değil, kimlik seçici (#myID) kullandığınız sürece.

#myID {
  color: red;
}

Satır içi stil özelliği

CSS, doğrudan HTML öğesinin style özelliğine uygulanır. 1.000 puan alır. Bu, 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 olan bir spesifiklik puanı alır. Bu, tek bir öğenin alabileceği en yüksek kesinlik düzeyidir.

!important kuralı bir CSS mülküne uygulanır. Bu nedenle, genel kuraldaki her şey (seçici ve özellikler) aynı kesinlik puanını almaz.

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

Öğrendiklerinizi sınayın

Belirlilik puanlamasıyla ilgili bilginizi test edin

Bağlam içinde belirlilik

Bir öğeyle eşleşen her seçicinin kesinliği toplanır. Şu örnek HTML'yi ele alalım:

<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 spesifik noktası elde edilir:

a {
  color: red;
}

Bu kuraldaki sınıflardan birine referansta bulunun, artık 11 belirli nokta var:

a.my-class {
  color: green;
}

Diğer sınıfı seçiciye ekleyin, artık 21 belirli nokta var:

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

Seçiciye href özelliğini ekleyin. artık 31 belirli nokta var:

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

Son olarak, tüm bunlara bir :hover sözde sınıfı ekleyin. seçicinin sonunda 41 kesinlik noktası vardır:

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

Öğrendiklerinizi sınayın

Belirlilik puanlamasıyla ilgili bilginizi test edin

Belirginliği görselleştirme

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

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

Referans olması amacıyla şu seçici şu şekildedir: 0-4-1:

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

Öğrendiklerinizi sınayın

Belirlilik görselleştirme hakkındaki bilginizi test edin

Pragmatik olarak artan belirginlik

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

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Aşağıdaki gibi görünen HTML ile:

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

Düğmenin arka planı gri renktedir. ikinci seçici 11 kesinlik puanı (0-1-1) kazandığı için. Bunun nedeni, bir tür seçicinin (button), Bu, 1 puan ve bir özellik seçici ([onclick]) yani 10 puan şeklindedir.

Önceki kural (.my-button) 10 puan (0-1-0), çünkü bir sınıf seçici var.

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

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

button[onclick] {
  background: grey;
}

Şimdi düğmenin arka planı mavi olur. çünkü yeni seçicinin belirlilik puanı 20 puan (0-2-0).

Eşleşen bir spesifiklik puanı en yeni örnek kazanmayı görür

Şimdilik düğme örneğiyle devam edelim ve CSS'yi şu şekilde değiştirelim:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Düğmenin arka planı gri renktedir. çünkü her iki seçicinin de belirlilik puanı aynıdır (0-1-0).

Kuralları kaynak sırayla değiştirirseniz düğme mavi renge döner.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

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

Kaynaklar

• CSS Özellikleri
• Spesifiklik Hesaplayıcı
• MDN Özgüllüğü
• CSS'ye özgü ayrıntılar
• Başka Bir Özgüllük Hesaplayıcı