jak debugować CSS za pomocą narzędzi programistycznych przeglądarki

CSS nie jest językiem programowania. Jednak w zależności od tego, kogo zapytasz, powie Ci, że pisanie dobrego CSS może czasami być tak trudne, jak pisanie w językach programowania, takich jak Java lub JavaScript.

w tym artykule chcę pokazać kilka sztuczek, w jaki sposób można debugować problemy CSS, aby je rozwiązać. Jako dobry programista stron internetowych powinieneś znać narzędzia programistyczne dla przeglądarek (np.

tryb szkieletu

masz problemy z układem? Może bardziej podobny do szkieletu wygląd pomoże Ci lepiej zrozumieć układ. Poniższa reguła CSS sprawi, że każdy element będzie miał czarne tło, zielony kolor tekstu i czerwoną ramkę. Możesz dodać regułę w arkuszu stylów lub bezpośrednio w przeglądarce. W zależności od przypadku użycia można nawet poprawić tę regułę. Nie zapomnij wyłączyć tego na produkcji!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

obliczone właściwości stylu

niektóre narzędzia programistyczne przeglądarki (np. Chrome developer tools) oferują widok wyświetlający właściwości stylu, które są stosowane do określonego elementu. Tutaj możesz również zobaczyć dla każdej właściwości stylu, w której została ustawiona.

testowanie zapytań CSS bezpośrednio w przeglądarce

o ile nie wstawiasz stylów, musisz utworzyć poprawne bloki deklaracji CSS. Czasami selektory CSS mogą stać się skomplikowane do odczytu i zapisu. Szybkim sposobem sprawdzenia, czy selektory CSS działają poprawnie, jest wyszukiwanie bezpośrednio w narzędziach programistycznych przeglądarki. Możesz szukać zarówno selektorów tekstu, jak i CSS.

przełączanie Stanów elementu

niektóre elementy, takie jak pola wejściowe, są stylizowane, gdy są skupione. Inne elementy, takie jak przyciski, reagują, gdy najedziesz na nie kursorem myszy. Większość narzędzi programistycznych przeglądarki pozwala przełączać Stany elementów, takie jak focus lub hover. Jeśli jednak słuchacz DOM nasłuchuje tego zdarzenia, To przełączenie stanu elementu zwykle nie spowoduje zdarzenia, które byłoby zarejestrowane przez tego słuchacza.

wniosek

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.