Podczas pisania kodu, nie raz będziemy się zastanawiać, dlaczego nie działa coś, co powinno. Często są to tak drobne rzeczy jak zapomniany średnik czy nieprawidłowa wartość.
Poniżej przedstawiam kilka sugestii rozwiązywania problemów związanych z HTML i CSS.
Sprawdź poprawność kodu HTML
Jeżeli Twój kod wygląda na prawidłowy sprawdź czy w dokumencie HTML nazwy klas odpowiadają zapisanym w CSS.
Oprócz tego upewnij się, że struktura kodu jest prawidłowa: czyli czy wszystkie znaczniki są zamknięte w odpowiednich miejscach. Pomocnym narzędziem do tego celu będzie dodatek do edytora Sublime Text – SublimeLinter-html-tidy.
Na zrzucie możesz zobaczyć, że w statusbarze SublimeText wyświetlany jest błąd związany z nieprawidłowym zamknięciem nagłówka w linii 10.
Sprawdź poprawność kodu CSS
Upewnij się, że selektory odnoszą się do poprawnych znaczników, klas, identyfikatorów i atrybutów z dokumentu HTML.
Podobnie jak w przypadku HTML, aby upewnić się, że składnia jest poprawna można wykorzystać dodatkowe narzędzia. Jednym z nich jest SublimeLinter-csslint. Po instalacji i prawidłowej konfiguracji w edytorze Sublime Text, błędy składniowe będą zaznaczane podobnie jak w przypadku SublimeLinter-html-tidy dla dokumentów HTML.
W powyższym zrzucie błędnie wpisaliśmy nazwę jednostki dla marginesu wewnętrznego.
Po instalacji powyższych dwóch dodatków o składnie dokumentów możemy przestać się martwić, jednak pamiętaj, że walidator nie sprawdzi czy nie pomyliłeś się przy nazwie klasy.
Pamiętaj o kaskadowości CSS
Już sama nazwa Cascading Style Sheets o tym przypomina. Na czym polega kaskadowość CSS? Mówiąc najprościej – na priorytetach selektorów. Selektor #id{…} ma wyższy priorytet niż .klasa{…}.
Tak samo z kolejnością klas w dokumencie .css. Jeżeli priorytet jest wyższy, to nie ma znaczenia czy klasa jest na początku czy na końcu dokumentu. Selektor #id .klasa1 .klasa2 ma większy priorytet niż #id .klasa1 p > em i to właśnie on zostanie wykorzystany. Nawet, gdyby drugi selektor znajdywał się na samym końcu dokumentu .css.
Uważaj na skrócony zapisy reguł
Chodzi dokładnie o background, padding, margin, border i list-style. Przykładowo jeżeli ustawisz list-style: square; a deklaracja z list-style-image: url(‘1.png’); będzie miała niższy priorytet, ostylowanie dla list nie zadziała. Związane jest to z kaskadowością oraz domyślnymi wartościami.
See the Pen rrJQJw by Tomasz Wikło (@studioleopard) on CodePen.19725
W powyższym kodzie ul li ma domniemaną, domyślną wartość list-style-image: none; Jako że ma ona wyższy priorytet niż regułą z li, nasz obrazek dla wypunktowania nie zadziała.
Jeżeli nie bardzo rozumiesz o co chodzi z tymi priorytetami, to zapraszam do zapoznania się z artykułem ustal priorytety.
Sprawdź kolejność wczytywania plików
Jeżeli używasz kilku plików .css. Upewnij się, że są one wczytywane w odpowiedniej kolejności. Ostatnio załadowany plik nadpisuje style wcześniejszych dokumentów.
Jeżeli wszystkiego spróbowałeś i dalej nie możesz odnaleźć przyczyny problemu, spróbuj dodać !important; dla przykładu z listą moglibyśmy użyć list-style-image: url(‘1.png’) !important; Dzięki temu, upewniliśmy się, że problem był po stronie priorytetów.
Nie jest zalecanym używanie !important zbyt; często ponieważ psuje kaskadowość, ale w celach wyszukiwania błędów jest całkiem przydatny.
Czasami również się zdarza, że winowajcą jest cache przeglądarki. Dlatego aby wymusić odświeżenie strony w przeglądarce Chrome użyj skrótu klawiszowego CTRL + F5.
Jeżeli do tej pory nie udało Ci się zlokalizować usterki upewnij się, że dokument ze zmianami został zapisany i – jeżeli pracujesz na zdalnym serwerze – poprawnie wysłany na serwer.
Znasz inne sposoby na rozwiązywanie problemów z CSS? Zapraszam do podzielenia się wiedzą w komentarzach.
Opublikowano 17 października 2016 w kategorii css, html, poradnik.