CSS değişkenlerini metinden çıkarma ve başvuruları inceleme

CSS metnini girişe yapıştırıp incelemeyi başlatın; araç tanınan özel özellikleri, var() başvuru sayılarını ve eşleşen başvurusu olmayan bildirimleri raporlar. Seçilen giriş boşsa başarılı işlem oluşmaz.

CSS metnindeki değişkenleri tanıma

CSS Variables, verdiğiniz CSS metnindeki tanınabilir özel özellik bildirimlerini ve var() kullanımlarını adlarla karşılaştırarak incelemenize yardımcı olur. Böylece hangi değişken bildirimlerinin algılandığını, her tanınan değişkene kaç kez başvurulduğunu ve bildirimi bulunmasına rağmen eşleşen başvurusu olmayan adları görebilirsiniz. Bu inceleme, özellikle bir stil dosyasını düzenlemeden önce değişken adlarını gözden geçirmek, bileşenlerdeki kullanımı kontrol etmek veya artık gerekmeyebilecek bildirimleri aday olarak ayırmak için elverişlidir.

İnceleme, gönderdiğiniz CSS metnindeki belirli yazım biçimlerini temel alır. Tanınabilir bildirim; iki tireyle başlayan özel özellik adı, iki nokta, bir değer ve noktalı virgülden oluşur. Bildirim değerinin başındaki ve sonundaki boşluklar ayıklanır. Tanınabilir başvuru var(--ad) biçimindedir ve parantez içinde isteğe bağlı içerik bulunsa da başvuru adla ilişkilendirilebilir. Bu nedenle sonuç, bir CSS dosyasının sözdizimsel veya anlamsal açıdan bütünüyle doğrulandığı anlamına gelmez.

Metni hazırlarken, değerlendirmek istediğiniz bildirimleri ve bu bildirimleri kullanan bölümleri aynı girişte bulundurun. Bir değişkenin tanımını başka bir dosyada veya farklı bir metinde bırakmanız, adların birlikte karşılaştırılmasını engelleyebilir. İnceleme amacınız kullanılmayan adayları bulmaksa, ilgili bileşen stillerini de metne eklemek daha anlamlı bir karşılaştırma sağlar.

Metni gönderme ve raporu okuma

1. İncelemek istediğiniz CSS parçalarını hazırlayın. Özel özellik bildirimlerinin --renk: blue; gibi iki tireyle başlayan bir ad, iki nokta, değer ve noktalı virgül içeren biçimde yazıldığını kontrol edin. Başvuruları da var(--renk) biçiminde metne dahil edin. Ayıklanmasını beklediğiniz değerlerin bildirim ile noktalı virgül arasında yer alması gerekir.

2. CSS metnini aracın metin girişine yapıştırın. Birden fazla desteklenen giriş sağlanıyorsa, boş olmayan metin girişi diğer CSS değerine göre öncelik kazanır. Bu yüzden aynı işlemde başka bir değer de verdiyseniz, sonuçta incelenmesini istediğiniz metnin seçildiğini doğrulayın. Yalnızca karşılaştırmak istediğiniz bölümleri göndererek sonucu daha kolay okuyabilirsiniz.

3. İncelemeyi başlatın ve işlemin sonuçlanmasını bekleyin. Seçilen CSS girdisi boşsa araç başarılı bir analiz üretmez. İşleme sırasında beklenmeyen bir durum oluştuğunda da bu durum dışarı taşınmak yerine başarısız sonuç bildirilir. Böyle bir sonuçta metni yeniden kontrol edip işlemi tekrar deneyin.

4. Başarılı sonuçta tanınan bildirimleri inceleyin. Özel özellik adlarının yanında, metinden ayıklanmış ve kenar boşlukları temizlenmiş değerleri karşılaştırın. Bir bildirim görünmüyorsa adın iki tireyle başlamasını ve bildirimin iki nokta, değer ve noktalı virgül sırasını korumasını kontrol edin.

5. Bildirim toplamını ve başvurulmayan bildirim toplamını birlikte okuyun. Ardından ad bazındaki var() başvuru sayılarını ilgili bildirimlerle eşleştirin. Aynı ad için birden fazla tanınan başvuru varsa sayı buna göre yükselir; parantez içindeki yedek değer gibi içerik, başvurunun adının sayılmasına tek başına engel değildir.

6. Uyuşmayan adları kaynak metinde araştırın. Büyük-küçük harf, tire, yazım veya biçim farkları ad eşleşmesini etkileyebilir. Başvuru gibi görünen bölüm sayılmıyorsa, gerçekten var(--ad) biçimini kullanıp kullanmadığını ve adın tanınabilir bir özel özellik bildirimiyle aynı olup olmadığını karşılaştırın. Değişkeni silmeden ya da yeniden adlandırmadan önce bu kontrolü tamamlayın.

Raporun kapsamını değerlendirme

Başarılı bir raporda önce tanınan bildirimler listesini, sonra toplam bildirim sayısını ve başvurulmayan bildirim sayısını ele alın. Ad bazındaki sayaçlar, tanınan var() kullanımlarının hangi değişken adlarına bağlandığını gösterir. Bir bildirim adına karşılık gelen sayaç bulunuyorsa araç, o ad için tanınan bir başvuru saptamıştır. Sayaç yoksa bildirim, eşleşen tanınmış başvuru bulunmayan adaylar arasında gösterilebilir.

Bu ayrım, bir adın CSS metninde herhangi bir yerde geçtiğini kanıtlamaz. Sayım yalnızca tanınabilir var(--ad) biçimlerini dikkate alır; başka yazım biçimleri veya özel kullanım şekilleri rapora dahil olmayabilir. Benzer şekilde, tanınan bir bildirim bulunması onun tarayıcı tarafından geçerli kabul edildiğini ya da değerinin kullanıldığını göstermez.

Rapor CSS değişkenlerinin nihai değerini hesaplamaz. Birden fazla bildirim, basamaklı kurallar, kalıtım veya yedek değerler arasından hangi değerin uygulanacağını çözümlemez. Bu nedenle başvurulmayan listesi, temizleme çalışması için incelenmesi gereken adayları sunar; tek başına koddan çıkarma kararı vermek için yeterli değildir. Değişiklik yapmadan önce kapsam, medya sorguları ve başka stil dosyalarındaki ilişkili kullanımları ayrıca değerlendirin.

Bir sonuç beklediğinizden küçükse, önce metnin gerçekten seçilen giriş olduğunu ve bildirimin noktalı virgülle bittiğini kontrol edin. Beklenen başvuru sayısı oluşmuyorsa var() içindeki adın bildirim adıyla uyuştuğunu inceleyin. Böylece rapordaki farkın tanınma biçiminden mi yoksa CSS’in başka bir bölümünün gönderilmemesinden mi kaynaklandığını ayırabilirsiniz.

Uygulamalı örnek

Bir geliştirici, kart bileşenindeki renk değişkeninin kullanıldığını ve boşluk değişkeninin başvurulmayan bildirim olarak raporlanıp raporlanmadığını kontrol etmek ister.

Aşağıdaki CSS metnini giriş alanına yapıştırın ve incelemeyi başlatın: :root { --renk: blue; --bosluk: 1rem; } .kart { color: var(--renk); }

Başarılı sonuçta tanınan iki bildirim, toplam bildirim sayısı, başvurulmayan bildirim sayısı ve ad bazında başvuru sayıları raporlanır. --renk için bir başvuru, --bosluk için eşleşen başvuru bulunmaması beklenir.

Sınırlamalar

• İnceleme tanınan bildirim ve var() biçimleriyle sınırlıdır; değişken değerlerinin çözümünü veya CSS içindeki tanınmayan kullanım biçimlerini sonuç olarak sunmaz.

Sık yapılan hatalar

• Metin boş bırakıldığında veya bildirim beklenen biçime uymadığında başarısız sonuç ya da düşük bildirim sayısı görülebilir. CSS’i yeniden seçip gönderin; özel özellik adının iki tireyle başladığını, iki nokta ve değerden sonra noktalı virgül bulunduğunu doğrulayın.

Sık sorulan sorular

Araç, var() içindeki değişken başvurularını sayar mı?

Koşul, başvurunun tanınan var(--ad) biçiminde bulunmasıdır. Parantez içindeki isteğe bağlı içerik sayımı engellemez; farklı CSS kullanım biçimleri bu sayımın dışında kalabilir.

Bir CSS değişkeni ne zaman başvurulmayan olarak belirlenir?

Bir bildirim adı tanınır ve aynı ada karşılık gelen tanınmış bir başvuru bulunmazsa araç bu bildirimi başvurulmayan olarak belirler.

CSS metni girmeden analiz yapılabilir mi?

Koşul, seçilen CSS girdisinin boş olmasıdır; bu durumda işlem başarılı analiz üretmez. Metni girişe ekleyerek yeniden deneyin.