Style obliczone i inspektor modelu pudełkowego

Karta Computed w Chrome DevTools → Elements pokazuje końcową, obliczoną wartość każdej właściwości CSS wybranego elementu po rozstrzygnięciu kaskady, dziedziczenia i specyficzności. Odpowiada na pytanie „co jest faktycznie zastosowane?”, a nie „co zostało zapisane?”

Panel Computed wyświetla interaktywny diagram modelu pudełkowego pokazujący wymiary obszaru treści, paddingu, obramowania i marginesu wybranego elementu. Kliknij dowolny wymiar, aby wyróżnić regułę CSS, która go ustawiła, i przejść do panelu Styles.

Wpisz tekst w polu filtra, aby szybko znaleźć konkretne obliczone właściwości. Zaznacz „Show all”, aby uwzględnić właściwości dziedziczone i domyślne właściwości przeglądarki. Odznacz tę opcję, aby wyświetlać tylko właściwości inne niż domyślne — to najszybszy sposób na znalezienie istotnych zastosowanych stylów.

Właściwości wyświetlane w panelu Computed na szaro są dziedziczone od elementu nadrzędnego. Kliknij dziedziczoną właściwość, aby przejść do elementu i reguły, które ją ustawiły, i prześledzić kaskadę bez ręcznego sprawdzania elementów nadrzędnych w znacznikach.

Zapis margin: 16px 8px rozwija się do czterech obliczonych wartości: margin-top, margin-right, margin-bottom, margin-left. Panel Computed zawsze pokazuje poszczególne właściwości rozwinięte — jest to przydatne podczas debugowania problemów z niesymetrycznymi odstępami.

Obliczone wartości kolorów są zawsze zapisywane w formacie rgb() lub rgba(), niezależnie od sposobu ich zapisania. Kliknij próbkę koloru w panelu Styles, aby przełączać format wyświetlania (hex, hsl, rgb). Panel Computed zawsze pokazuje rozstrzygnięty kolor.

Sprawdź obliczone wartości font-size, font-family, line-height i letter-spacing, aby upewnić się, że tokeny typograficzne są stosowane poprawnie. Gdy żądana czcionka nie może zostać załadowana, w obliczonej wartości font-family pojawiają się zastępcze czcionki przeglądarki.

box-sizing: border-box sprawia, że width obejmuje padding i border; box-sizing: content-box (wartość domyślna) ich nie obejmuje. Diagram modelu pudełkowego w DevTools odzwierciedla zastosowany model — porównaj szerokość obszaru treści z całkowitą szerokością, aby potwierdzić działanie box-sizing.

Pionowe marginesy między elementami blokowymi zwijają się do większej z dwóch wartości. Diagram modelu pudełkowego pokazuje efektywny margines — użyj go razem z Layout Inspector, aby zidentyfikować zwinięte marginesy różniące się od zapisanych wartości.

Panel Styles pokazuje wszystkie reguły dotyczące elementu w kolejności specyficzności. Przekreślone reguły zostały nadpisane. Aby ustalić, która reguła wygrywa konflikt właściwości, znajdź najwyżej położoną nieprzekreśloną deklarację w panelu Styles.

Reguły arkusza stylów przeglądarki user-agent pojawiają się na dole panelu Styles z etykietą „user agent stylesheet”. Panel Computed pokazuje ich rozstrzygnięte wartości. Zresetuj je za pomocą resetu CSS lub Normalize.css, aby ustanowić spójny punkt wyjścia we wszystkich przeglądarkach.

Co pokazuje panel Computed Styles, czego nie pokazuje panel Styles?

Panel Computed Styles i diagram modelu pudełkowego pokazują końcowe, rozstrzygnięte wartości wszystkich właściwości CSS po rozstrzygnięciu kaskady. Używaj ich do śledzenia dziedziczenia, debugowania rozwijania skrótów, analizowania box-sizing oraz ustalania, która reguła wygrywa konflikty specyficzności dla dowolnego elementu.