Hesaplanan Stiller ve Kutu Modeli Denetleyicisi

Chrome DevTools → Öğeler → Hesaplanan sekmesi, basamaklandırma, kalıtım ve özgüllük çözümlemesinden sonra seçili öğedeki her CSS özelliğinin nihai, hesaplanmış değerini gösterir. "Ne yazılmıştı?" sorusu yerine "Gerçekte ne uygulanıyor?" sorusunu yanıtlar.

Hesaplanan paneli, seçili öğenin içerik, iç kenar boşluğu, kenarlık ve dış kenar boşluğu boyutlarını gösteren etkileşimli bir kutu modeli şeması sunar. Herhangi bir boyuta tıklayarak onu belirleyen CSS kuralını vurgulayın ve Stiller paneline geçin.

Belirli hesaplanan özellikleri hızlıca bulmak için filtre kutusuna yazın. Kalıtsal ve tarayıcı varsayılanı özelliklerini dahil etmek için "Tümünü göster" seçeneğini işaretleyin. Yalnızca varsayılan olmayan özellikleri göstermek için seçimini kaldırın; bu, ilgili uygulanmış stillere giden en kısa yoldur.

Hesaplanan panelinde gri renkte gösterilen özellikler bir üst öğeden miras alınır. Kalıtsal özelliğe tıklayarak onu belirleyen öğeye ve kurala geçin; böylece işaretlemede üst öğeleri manuel olarak incelemeden basamaklandırmayı izleyebilirsiniz.

margin: 16px 8px yazmak dört hesaplanan değere genişler: margin-top, margin-right, margin-bottom, margin-left. Hesaplanan paneli her zaman tek tek uzun yazım özelliklerini gösterir; bu, simetrik olmayan boşluk sorunlarını ayıklamak için kullanışlıdır.

Hesaplanan renk değerleri, nasıl yazılmış olursa olsun her zaman rgb() veya rgba() biçimindedir. Görüntüleme biçimleri arasında geçiş yapmak için Stiller panelindeki renk örneğine tıklayın (hex, hsl, rgb). Hesaplanan paneli her zaman çözümlenmiş rengi gösterir.

Tipografi belirteçlerinin doğru uygulanıp uygulanmadığını doğrulamak için hesaplanan font-size, font-family, line-height ve letter-spacing değerlerini inceleyin. İstenen yazı tipi yüklenemezse tarayıcının yedek yazı tipleri hesaplanan font-family içinde görünür.

box-sizing: border-box, genişliğe iç kenar boşluğunu ve kenarlığı dahil eder; varsayılan olan box-sizing: content-box ise bunları hariç tutar. DevTools'taki kutu modeli şeması, geçerli olan modeli yansıtır — box-sizing davranışını doğrulamak için içerik genişliğini toplam genişlikle karşılaştırın.

Blok öğeleri arasındaki dikey dış kenar boşlukları, iki değerden büyük olanında birleşir. Kutu modeli şeması etkin dış kenar boşluğunu gösterir; yazılan değerlerden farklı olan birleşmiş dış kenar boşluklarını belirlemek için bunu Düzen Denetleyicisi ile birlikte kullanın.

Stiller paneli, öğeyi hedefleyen tüm kuralları özgüllük sırasına göre gösterir. Üzeri çizili kurallar geçersiz kılınmıştır. Bir özellik anlaşmazlığında hangi kuralın kazandığını bulmak için Stiller panelindeki üzeri çizili olmayan en üst bildirime bakın.

Tarayıcının kullanıcı aracısı stil sayfası kuralları, Stiller panelinin altında "user agent stylesheet" etiketiyle görünür. Hesaplanan paneli bunların çözümlenmiş değerlerini gösterir. Tarayıcılar arasında tutarlı bir temel oluşturmak için bunları bir CSS sıfırlaması veya Normalize.css ile sıfırlayın.

Hesaplanan Stiller paneli, Stiller panelinde bulunmayan neyi gösterir?

Hesaplanan Stiller paneli ve kutu modeli şeması, basamaklandırma çözümlemesinden sonra tüm CSS özelliklerinin nihai çözümlenmiş değerlerini ortaya çıkarır. Bunları kalıtımı izlemek, kısa yazımın genişletilmesini ayıklamak, kutu boyutlandırmayı incelemek ve herhangi bir öğede özgüllük çakışmalarını hangi kuralın kazandığını belirlemek için kullanın.