Geçersiz, geçersiz kılınmış, etkin olmayan ve diğer CSS'leri bulma

Bu kılavuzda, Chrome Geliştirici Araçları'nda CSS denetleme konusunda bilginiz olduğu varsayılmıştır. Temel bilgileri öğrenmek için CSS'yi görüntüleme ve değiştirme başlıklı makaleye bakın.

Yazdığınız CSS'yi inceleyin

Bir öğeye CSS eklediğinizi ve yeni stillerin doğru bir şekilde uygulandığından emin olmak istediğinizi varsayalım. Sayfayı yenilediğinizde öğe öncekiyle aynı görünür. Bir şeyler ters gitti.

Yapılacak ilk şey öğeyi incelemek ve yeni CSS'nizin gerçekten öğeye uygulandığından emin olmaktır.

Bazen yeni CSS'nizi Öğeler > Stiller bölmesinde görürsünüz, ancak yeni CSS'niz soluk metin biçimindedir, düzenlenemez, üstü çizilidir veya yanında bir uyarı ya da ipucu simgesi bulunur.

Stiller bölmesinde CSS'yi anlama

Stiller bölmesi birçok CSS sorununu tanır ve farklı şekillerde vurgular.

Eşleşen ve eşleşmeyen seçiciler

Stiller bölmesi, eşleşen seçicileri normal metin, eşleşmeyenleri ise soluk metin olarak gösterir.

Geçersiz değerler ve bildirimler

Stiller bölmesinin üzerinde çarpı işareti bulunur ve aşağıdakilerin yanında uyarı simgeleri görüntülenir:

• CSS özelliği geçersiz veya bilinmiyorsa tüm CSS bildirimi (özellik ve değer).
• Yalnızca CSS özelliği geçerli olduğunda değer geçersiz olur.

Geçersiz kılınan

Stiller bölmesi, Geçişli sıraya göre diğer mülkler tarafından geçersiz kılınan özelliklerin üstünü çizer.

Bu örnekte, öğedeki width: 300px; stil özelliği, .youtube sınıfındaki width: 100% öğesini geçersiz kılar.

Etkin değil

Stiller bölmesi soluk metin biçiminde görüntülenir ve geçerli olan ancak diğer özellikler nedeniyle etkisi olmayan özelliklerin yanına bilgi simgelerini yerleştirir.

Bu soluk özellikler Basamaklı sıra değil, CSS mantığı nedeniyle etkin değildir.

Bu örnekte display: block; özelliği, esnek veya ızgara düzenlerini kontrol eden justify-content ve align-items öğelerini devre dışı bırakır.

Devralınan ve devralınmayan

Stiller bölmesinde, Inherited from <element-name> bölümlerindeki özellikler varsayılan devralmalarına bağlı olarak listelenir:

• Devralınanlar varsayılan olarak normal metin biçimindedir.
• Devralınmayanlar varsayılan olarak soluk metin biçimindedir.

Steno

Steno (kısa) özellikler, aynı anda birden fazla CSS özelliğini ayarlamanıza olanak tanır ve stil sayfanızın daha okunabilir olmasını sağlar. Ancak bu tür özelliklerin kısa yapısı nedeniyle, kestirme adla ima edilen bir özelliği geçersiz kılan bir uzun (kesin) özelliği gözden kaçırabilirsiniz.

Stiller bölmesinde, kısaltılmış özellikler, kısaltılmış tüm özellikleri içeren açılır listeleri olarak görüntülenir.

Bu örnekte, kısaltılmış dört özellikten ikisi gerçekte geçersiz kılınmıştır.

Düzenlenemez

Stiller bölmesinde, italik metinde düzenlenemeyen özellikler görüntülenir. Örneğin, aşağıdaki kaynaklara ait CSS düzenlenemez:

• user agent stylesheet: Chrome'un varsayılan stil sayfası.

  

• Öğedeki stille ilgili HTML özellikleri (ör. yükseklik, genişlik, renk vb.). Bunları DOM ağacında düzenleyebilirsiniz ve bu şekilde CSS'yi Stiller bölmesinde güncellersiniz, ancak bunun tersi olmaz.

  Bu örnekte, bir <svg> öğesindeki height="48" özelliği 50 olarak ayarlanmıştır. Bu işlem, Stiller bölmesinde svg[Attributes Style] altındaki ilgili özelliği günceller.

Stili hala düşündüğünüz gibi olmayan bir öğeyi inceleme

Neyin yanlış gittiğini anlamak için şunları kontrol edebilirsiniz:

• Stiller bölmesindeki ipuçlarında CSS dokümanları ve seçici belirginliği.
• Bir öğeye uygulanan son CSS'yi görmek ve beyan ettiğinizle karşılaştırmak için Hesaplanan bölmesini kullanın.

Öğeler > Stiller bölmesi, çeşitli stil sayfalarında yazılan CSS kuralları grubunun tamamını görüntüler. Diğer yandan, Öğeler > Hesaplanan bölmesinde Chrome'un bir öğeyi oluşturmak için kullandığı çözümlenmiş CSS değerleri listelenir:

• Devralmadan türetilen CSS
• Cascade kazananları
• Kesişen değil (kısa) elle yazılmış özellikler (kesin)
• Hesaplanmış değerler (ör. font-size: 70% yerine font-size: 14px)

Hesaplanan bölmede CSS'yi anlama

Hesaplanan bölmesi de çeşitli özellikleri farklı şekilde gösterir.

Bildirilen ve devralınan

Hesaplanan bölmesi, herhangi bir stil sayfasında tanımlanan (hem öğenin kendisine ait hem de devralınan) özellikleri normal yazı tipinde listeler. Kaynağı görmek için yanlarındaki genişlet simgesini tıklayın.

Stiller bölmesinde bildirimi görmek için fareyle genişletilmiş özelliğin üzerine gelin ve ok düğmesini tıklayın.

Bildirimi Kaynaklar bölmesinde görmek için kaynak dosyanın bağlantısını tıklayın.

Birden fazla kaynağı olan mülklerde, Hesaplanan bölmesinde önce Cascade kazananı gösterilir.

Çalışma zamanı

Hesaplanan bölmesinde, çalışma zamanında hesaplanan özellik değerleri soluk metin biçiminde listelenir.

Bu örnekte Chrome, <ul> öğesi için aşağıdakini hesapladı:

• width, üst öğesi olan <div> ile göreli
• Alt öğelerine göre height; iki <li> öğesi

Devralınmayan ve özel

Hesaplanan bölmesinde tüm özellikleri ve değerlerini göstermek için Tümünü göster'i işaretleyin. Tüm tesisler şunları içerir:

• Soluk metinde devralınmayan özellikler için başlangıç değerleri.
• Özel özellikler - Normal metinde -- öneki bulunur. Bu tür özellikler varsayılan olarak devralınır.

Bu büyük listeyi kategorilere ayırmak için Grup'u işaretleyin.

Bu örnekte, Animasyon altında devralınmamış mülklerin ilk değerleri ve CSS Değişkenleri altındaki özel özellikler gösterilmektedir.

Yinelenenleri ara

Belirli bir özelliği ve olası yinelemelerini incelemek için Filtre metin kutusuna o özellik adını yazın. Bunu hem Styles (Stiller) hem de Computed (Hesaplanan) bölmelerinde yapabilirsiniz.

Bir öğenin CSS'sini arama ve filtreleme konusuna bakın.

Kullanılmayan CSS'leri bulma

Kapsam: Kullanılmayan JavaScript ve CSS'yi bulma bölümüne bakın.