CSS Özgüllük Hesaplayıcıyı Kullanma Rehberi

Özgüllük değerlendirmesinin amacını anlayın

CSS özgüllüğü, aynı öğeyi hedefleyen kuralların seçici gücünü karşılaştırırken kullanılan bir değerlendirme biçimidir. CSS Özgüllük Hesaplayıcı, isteğe bağlı bir seçici metnini inceleyerek dört bileşen ve bu bileşenlerden üretilen sayısal bir puan sunar. Böylece bir kuralın hangi seçici parçaları nedeniyle daha yüksek bir değerlendirme aldığını daha düzenli biçimde inceleyebilirsiniz.

Aracı kullanmak için değerlendirmek istediğiniz seçiciyi hazır bulundurun. Bir ID, sınıf, öznitelik, sözde sınıf, sözde öğe veya öğe türü içeren ifadelerle çalışabilirsiniz. Sonuç, aracın tanıdığı parçaların sayımına göre oluşur; bu nedenle burada amaç, yazdığınız ifadenin değerlendirmedeki bileşenlerini ve ağırlıklı puanını okumaktır. Bir seçici metni girmeden önce de aracın boş durumdaki davranışını görebilirsiniz.

Bu yaklaşım, özellikle iki ya da daha fazla kuralın neden farklı değerlendirildiğini kontrol ederken işe yarar. Önce seçiciyi gönderin, sonra bileşen dağılımını puanla birlikte okuyun. Yalnızca yüksek bir sayı aramak yerine, sayının hangi tür seçici parçalarından geldiğini izlemek daha açıklayıcı olur. Böylece seçicide yapacağınız bir değişikliğin değerlendirmeyi hangi yönde etkileyebileceğini daha kolay takip edebilirsiniz.

Seçiciyi gönderip bileşenleri inceleyin

Değerlendirmek istediğiniz CSS seçici metnini aracın giriş alanına yazın. Örneğin yalnızca bir ID seçicisi, yalnızca bir sınıf seçicisi ya da birden fazla parça içeren bileşik bir ifade kullanabilirsiniz. Metni gönderirken incelemek istediğiniz seçicinin tamamını alana aktarın; boşluk ve diğer karakterler, gönderilen metnin parçası olarak değerlendirilebilir.
Girişinizi göndermeden önce alanın gerçekten beklediğiniz metni içerdiğini kontrol edin. Alan boşsa veya yalnızca boşluk karakterlerinden oluşuyorsa araç dört özgüllük bileşenini sıfır, puanı sıfır ve seçici gösterimini boş olarak üretir. Bu davranış, aracı bir ifade değerlendirmeden önce başlangıç durumuyla tanımak için de kullanılabilir.
Metin doluyken arayüzdeki gönderme veya hesaplama işlevini kullanın. İncelenen boş ve dolu işlem yolları başarılı sonuç döndürür; sonuç geldiğinde dört bileşenin değerlerine, sayısal puana ve seçici gösterimine bakın. Boş olmayan bir giriş için seçici gösterimi, gönderdiğiniz seçici metnini korur. Bu nedenle sonuçtaki metni, değerlendirdiğiniz ifadeyi ayırt etmek için kullanabilirsiniz.
İlk bileşende aracın tanıdığı ID benzeri parçaların sayısını inceleyin. Bir ID seçicisi bu bileşene katkı verir ve yalnızca ID içeren bir örnekte bileşen biçimi [1, 0, 0, 0] olur. İkinci bileşende sınıf benzeri parçaları, öznitelik seçicilerini ve algılanan sözde sınıfları kontrol edin. Sınıf seçicisi ikinci bileşene en az bir katkı sağlar.
Üçüncü bileşeni okurken sözde öğeler ile algılanan öğe veya tür seçicilerini dikkate alın. Evrensel seçici bu sayımda katkı yapmaz. Bir ifadede farklı türde parçalar birlikte bulunduğunda ilgili bileşenleri ayrı ayrı not edin; bu yöntem, tek bir toplam sayının arkasındaki dağılımı görmenize yardımcı olur.
Aynı öğeyi hedefleyen başka bir kuralı karşılaştıracaksanız diğer seçiciyi de ayrı bir gönderimde değerlendirin. İki sonucun dört bileşenini yan yana okuyup puanlarını karşılaştırın. Değişiklik yapmadan önceki ve sonraki seçici metnini ayrıca kaydetmek yerine, sonuçta korunan gösterimi doğrudan kontrol ederek hangi ifadenin incelendiğini doğrulayabilirsiniz.
Son olarak, puanı bileşenlerle birlikte yorumlayın. Araç bileşenleri sırasıyla 1000, 100, 10 ve 1 ağırlıklarıyla sayısal değere dönüştürür. Bu işlem, farklı sonuçları tek bir karşılaştırma değeriyle okumayı sağlar; ancak puanın kaynağını anlamak için bileşen dağılımını da incelemeyi sürdürün.

Puanı dağılımıyla birlikte yorumlayın

Sonuçtaki dört değer, seçici metninde aracın tanıdığı farklı parça gruplarının katkısını ayırır. İlk değer ID benzeri parçalarla, ikinci değer sınıf benzeri parçalarla, öznitelik seçicileriyle ve algılanan sözde sınıflarla ilişkilidir. Üçüncü değer sözde öğeler ile algılanan öğe veya tür seçicilerini yansıtır. Dördüncü değer için verilen davranışta ayrıca bir katkı tanımlanmamıştır; bu nedenle onu, sonuçta görülen dağılımın parçası olarak okuyun.

Puanın ağırlıkları, ilk bileşendeki artışın ikinci veya üçüncü bileşendeki aynı miktardaki artıştan daha fazla etkide bulunmasına yol açar. Bu yüzden iki sonuçtan biri daha yüksek çıktığında, önce ilk bileşenleri, ardından sonraki bileşenleri karşılaştırın. Puan tek başına seçicinin hangi parçalarından oluştuğunu anlatmaz; bileşenler, sayısal değerin nedenini incelemek için gereklidir.

Örneğin yalnızca #menu metni gönderildiğinde sonuç biçimi dört bileşen için [1, 0, 0, 0], sayısal puan için 1000 ve seçici gösterimi için #menu olur. Bileşik bir ifade gönderildiğinde puanın sıfırdan büyük olması beklenebilir, fakat bileşenlerin sayısı yalnızca aracın tanıdığı parçalara göre oluşur. Evrensel seçicinin sayılmaması da bu yoruma dahildir.

Sonucu CSS seçicilerini incelemek için pratik bir karşılaştırma değeri olarak kullanın, fakat tanınmayan veya bu sayım davranışının dışında kalan sözdizimleri için ek anlamlar çıkarmayın. Bir girişte beklediğiniz katkıyı göremiyorsanız önce metnin gönderildiğini, sonra da ilgili parçanın aracın algılama kurallarına uyup uymadığını kontrol edin. Böylece puanı, seçicinin genel geçerliliği ya da bütün CSS kuralları arasındaki nihai öncelik hakkında tek başına kanıt saymamış olursunuz.

Uygulamalı örnek

Bir geliştirici, menü öğesini hedefleyen ID seçicisinin değerlendirmedeki katkısını görmek için #menu ifadesini gönderir.

Seçici alanına #menu yazın, gönderme işlevini kullanın ve bileşen dağılımını, puanı ve korunan metni birlikte kontrol edin.

Sonuçta dört bileşen [1, 0, 0, 0], puan 1000 ve seçici gösterimi #menu görünür.

Sınırlamalar

Sonuçları aracın tanıdığı seçici parçaları ve sayım davranışı çerçevesinde değerlendirin; çıktıyı CSS seçici sözdiziminin kapsamlı bir ayrıştırması olarak yorumlamayın.

Sık yapılan hatalar

Giriş alanına yalnızca boşluk bırakmak, metin girilmiş gibi görünse bile boş giriş davranışını tetikler; beklediğiniz değerlendirme için incelenecek seçiciyi yeniden yazarak gönderin.

Sık sorulan sorular

Seçici alanını boş bırakırsam hangi sonucu görürüm?

Alan boş ya da yalnızca boşluk içeriyorsa araç dört bileşeni sıfır, puanı sıfır ve seçici gösterimini boş üretir.

Hangi seçici parçaları bileşenlere katkı yapar?

ID benzeri parçalar ilk bileşene katkı verir; sınıf benzeri parçalar, öznitelik seçicileri ve algılanan sözde sınıflar ikinci bileşende, sözde öğeler ile algılanan öğe veya tür seçicileri üçüncü bileşende değerlendirilir.

Özgüllük puanı hangi ağırlıklarla hesaplanır?

Puan, dört bileşene sırasıyla 1000, 100, 10 ve 1 ağırlıkları uygulanarak hesaplanır; evrensel seçici bu sayımda katkı sağlamaz.