Wskazówki dla deweloperów: znajdowanie problemów z CSS

Sofia Emelianova
Sofia Emelianova

Czy zdarzyło Ci się zastosować do elementu styl CSS, który po prostu nie działa?

Za pomocą Narzędzi deweloperskich Chrome możesz szybko wykrywać problemy z kodem CSS, a następnie je debugować i testować.

Obejrzyj film, aby dowiedzieć się, jak panel Elementy > Style wyróżnia różne problemy związane z CSS:

  • Ostrzeżenie. Właściwość o nieprawidłowej składni

  • Pole wyboru. Właściwość zastąpiona

  • Pole wyboru. Nieaktywna usługa Informacje.Z podpowiedzią.

  • Odziedziczone z parent

    • Pole wyboru. Właściwość odziedziczona
    • Pole wyboru. Właściwość nieodziedziczona
  • Pole wyboru. Rozwijana właściwość skrótu Rozwiń.

    • Pole wyboru. Zastąpiona właściwość w wersji szczegółowej
    • Pole wyboru. Aktywna własność w widoku długim

arkusz stylów klienta użytkownika

  • Właściwość, której nie można edytować
  • Zastąpiona właściwość, której nie można edytować

Więcej wskazówek dotyczących debugowania:

  • Aby skupić się na jednej interesującej Cię właściwości, użyj filtra w panelu Style.
  • W panelu Obliczone możesz zobaczyć wszystkich zwycięzców Cascade i ich obliczone wartości.
  • W panelu Obliczone rozwiń właściwość i kliknij link, aby znaleźć jej źródło w panelu Style.

Więcej informacji o tym, jak narzędzia dla deweloperów wskazują problemy z CSS, znajdziesz w artykule Znajdowanie nieprawidłowego, zastąpionego, nieaktywnego i innego kodu CSS.

Aby pogłębić swoją wiedzę na temat CSS, przeczytaj artykuł Uczenie się CSS.

Aby dowiedzieć się, jak tworzyć witryny, które wyglądają świetnie i są przydatne dla wszystkich użytkowników, przeczytaj artykuł Elastyczne projektowanie – wprowadzenie.