CSS – Co Się Stało? Rozwiązywanie problemów z HTML i CSS

CSS – Co Się Stało? Rozwiązywanie problemów z HTML i CSS

W dzisiejszym wpisie przedstawiam kilka wskazówek, dzięki którym zaoszczędzisz godziny na szukaniu rozwiązań problemów z CSS, które nigdy nie powinny się wydarzyć.

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.

css_problemy_linter-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.

css_problemy_linter-css

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, borderlist-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.

 

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.