W tym przewodniku zakładamy, że potrafisz sprawdzać CSS w Narzędziach deweloperskich w Chrome. Aby poznać podstawy, przeczytaj artykuł Wyświetlanie i zmienianie kodu CSS.
Sprawdzanie tworzonego przez siebie kodu CSS
Załóżmy, że do elementu dodano kod CSS i chcesz się upewnić, że nowe style są stosowane prawidłowo. Po odświeżeniu strony element będzie wyglądać tak samo jak wcześniej. Coś jest nie tak.
Najpierw sprawdź element i upewnij się, że nowy kod CSS został do niego zastosowany.
Czasami nowy kod CSS może się pojawić w panelu Elementy > Style, ale jest on wyraźny, nieedytowalny, przekreślony lub ma obok niego ikonę ostrzeżenia bądź podpowiedzi.
CSS w panelu Style
Panel Style rozpoznaje różnego rodzaju problemy z CSS i wyróżnia je na różne sposoby.
Selektory dopasowane i niedopasowane
W panelu Style wyświetlają się dopasowane selektory w zwykłym tekście i niedopasowane w jasnym tekście.
Nieprawidłowe wartości i deklaracje
Panel Style przekreśla i wyświetli ikony ostrzeżeń 
obok tych elementów:
- Cała deklaracja CSS (właściwość i wartość), gdy właściwość CSS jest nieprawidłowa lub nieznana.
- Wartość tylko wtedy, gdy właściwość CSS jest prawidłowa, ale wartość jest nieprawidłowa.
Zastąpione
W panelu Style przekreślono właściwości, które zostały zastąpione przez inne właściwości zgodnie z kolejnością kaskadową.
W tym przykładzie atrybut stylu width: 300px; elementu zastępuje atrybut width: 100% w klasie .youtube.
Nieaktywny
Panel Style jest wyświetlany małym tekstem i umieszcza ikony informacji 
obok właściwości, które są prawidłowe, ale nie mają żadnego wpływu na działanie innych właściwości.
Są one nieaktywne z powodu logiki CSS, a nie kolejności kaskadowej.
W tym przykładzie właściwość display: block; wyłącza elementy justify-content i align-items, które kontrolują układy Flex i siatki.
Dziedziczone i niedziedziczone
W panelu Style wymienione są właściwości w sekcjach Inherited from <element-name> w zależności od ich domyślnego dziedziczenia:
- Są dziedziczone domyślnie w zwykłym tekście.
- Niedziedziczone domyślnie są wyświetlane w jasnym tekście.
Skrót
Właściwości skrótu (zwięzła) pozwalają ustawić wiele właściwości CSS naraz i mogą zwiększyć czytelność arkusza stylów. Jednak ze względu na krótki charakter takich właściwości można pominąć (precyzyjną) właściwość, która zastępuje właściwość zastosowaną w skrócie.
W panelu Style wyświetlane są właściwości skrótów w postaci list 
, które zawierają wszystkie skrócone właściwości.
W tym przykładzie 2 z 4 skróconych właściwości zostały zastąpione.
Nie można edytować
W panelu Style wyświetlają się właściwości, których nie można edytować, używając kursywy. Nie można na przykład edytować kodu CSS z tych źródeł:
user agent stylesheet– domyślny arkusz stylów Chrome.
Atrybuty HTML związane ze stylem elementu, np. wysokość, szerokość, kolor itp. Możesz je edytować w drzewie DOM. Spowoduje to zaktualizowanie kodu CSS w panelu Style, ale nie na odwrót.
W tym przykładzie atrybut
height="48"elementu<svg>ma wartość50. Spowoduje to zaktualizowanie odpowiedniej właściwości w sekcjisvg[Attributes Style]w panelu Style.
Sprawdź element, który nadal nie ma stylu, w jakim myślisz
Aby dowiedzieć się, co jest nie tak, sprawdź:
- dokumentację CSS oraz specyfikację selektora na etykietkach w panelu Style,
- Panel Obliczony, w którym można zobaczyć „ostateczny” kod CSS zastosowany do elementu i porównać go z zadeklarowanym przez Ciebie elementem.
Panel Elementy > Style wyświetla dokładny zestaw reguł CSS zapisanych w różnych arkuszach stylów. Z kolei panel Elementy > Wynikowy zawiera listę rozwiązanych wartości CSS, których Chrome używa do renderowania elementu:
- Kod CSS pobrany z dziedziczenia
- Zwycięzcy Kaskadowy
- Właściwości długoterminowe (precyzyjne), a nie skrócone (zwięzłe)
- Obliczone wartości, np.
font-size: 14pxzamiastfont-size: 70%
CSS w panelu Computed
W panelu Obliczone różne właściwości są też wyświetlane w różny sposób.
Zadeklarowane i dziedziczone
W panelu Wynikowy wymienione są właściwości zadeklarowane w dowolnym arkuszu stylów przy użyciu zwykłej czcionki – zarówno własnych, jak i dziedziczonych elementów. Kliknij znajdującą się obok ikonę rozwijania 
, aby zobaczyć źródło.
Aby wyświetlić deklarację w panelu Style, najedź kursorem na rozwiniętą właściwość i kliknij przycisk strzałki 
.
Aby wyświetlić deklarację w panelu Źródła, kliknij link do pliku źródłowego.
W przypadku usług z wieloma źródłami panel Obliczone wyświetla najpierw Zwycięzcę kaskadowego.
Środowisko wykonawcze
W panelu Obliczone znajdziesz listę wartości właściwości obliczonych w czasie działania w jasnym tekście.
W tym przykładzie Chrome obliczył następujące wartości dla elementu <ul>:
- Element nadrzędny
width(<div>) - Element
heightw odniesieniu do jego elementów podrzędnych – 2 elementy<li>
Niedziedziczone i niestandardowe
Aby w panelu Obliczone wyświetlały się wszystkie właściwości i ich wartości, zaznacz pole wyboru 
Pokaż wszystkie. Wszystkie usługi obejmują:
- Początkowe wartości właściwości niedziedziczonych w jasnym tekście.
- Właściwości niestandardowe – z prefiksem
--w zwykłym tekście. Takie właściwości są domyślnie dziedziczone.
Aby podzielić tę długą listę na kategorie, zaznacz 
Grupa.
Ten przykład pokazuje początkowe wartości właściwości niedziedziczonych w sekcji Animacja i właściwości niestandardowe w sekcji Zmienne CSS.
Wyszukaj duplikaty
Aby sprawdzić konkretną właściwość i jej potencjalne duplikaty, wpisz jej nazwę w polu tekstowym Filtr. Możesz to zrobić zarówno w panelach Style, jak i Obliczone.
Przeczytaj sekcję Wyszukiwanie i filtrowanie kodu CSS elementu.
Znajdowanie nieużywanego kodu CSS
Zobacz Zasięg: znajdowanie nieużywanego kodu JavaScript i CSS.