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

Sofia Emelianova
Sofia Emelianova

Czy zdarzyło Ci się stosować do elementu CSS, ale to po prostu nie działa?

Dzięki narzędziom deweloperskim w Chrome możesz szybko wykryć problemy związane z CSS, debugować je i przetestować.

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

  • Ostrzeżenie. Usługa o nieprawidłowej składni

  • Pole wyboru. Zastąpiona właściwość

  • Pole wyboru. Nieaktywna usługa Informacja.Z podpowiedź.

  • Odziedziczone z grupy parent

    • Pole wyboru. dziedziczona usługa
    • Pole wyboru. niedziedziczona usługa
  • Pole wyboru. Rozwijana właściwość skrócona Rozwiń.

    • Pole wyboru. Zastąpiona właściwość długa
    • Pole wyboru. Aktywna usługa długoterminowa

arkusz stylów klienta użytkownika

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

Więcej wskazówek dotyczących debugowania:

  • Użyj filtra w panelu Style, aby skupić się na tej samej usłudze, która Cię interesuje.
  • W panelu Obliczone możesz wyświetlić wszystkich zwycięzców w kategorii Kaskada wraz z ich obliczonymi wartościami.
  • W panelu Obliczone rozwiń usługę i kliknij link, aby znaleźć jej źródło w panelu Style.

Więcej informacji o tym, jak Narzędzia deweloperskie wyróżniają problemy z CSS, znajdziesz w artykule Znajdowanie nieprawidłowych, zastąpionych, nieaktywnych i innych elementów CSS.

Jeśli chcesz poszerzyć swoją wiedzę o CSS, przeczytaj artykuł Informacje o CSS.

Aby dowiedzieć się, jak tworzyć strony, które wyglądają świetnie i są wygodne dla wszystkich, obejrzyj uczestniczenie w lekcjach projektowania responsywnego.