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>öğesindekiheight="48"özelliği50olarak ayarlanmıştır. Bu işlem, Stiller bölmesindesvg[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%yerinefont-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.