Podczas pisania kodu, pewnie zwróciłeś uwagę, że niektóre elementy wyglądają nieco inaczej w zależności od przeglądarki. W szczególności dotyczy to wyglądu nagłówków h1-h6, interlinii czy domyślny marginesów.
Stwarza to pewną przeszkodę w pisaniu kodu – trudno przewidzieć, jak elementy będą wyświetlały się na różnych przeglądarkach.
Z tego powodu zaczęły powstawać tak zwane style resetujące. Ich zadaniem jest wyeliminowanie niespójności w wyświetlaniu się elementów HTML, poprzez nadanie im domyślnych ustawień “resetujących”.
Resetowanie domyślnych ustawień przeglądarek
Jednym z najbardziej znanych stylów do resetowania jest Reset CSS Eric’a Meyer’a.
See the Pen Eric Meyer Reset CSS by Tomasz Wikło (@studioleopard) on CodePen.19725
Powyższy kod ustawi domyślne wartości dla marginesów, paddingów, interlinii czy punktorów.
Jak dołączyć plik resetujący
Jak pewnie zauważyłeś, jest to zwykły dokument CSS. Dołączasz go w dokładnie taki sam sposób jak każdy inny plik tego typu. Jedynie na co powinieneś zwrócić uwagę, to na kolejność dodawania pliku resetującego. Musi on być wczytany na samym początku aby następnie mógł być nadpisywany indywidualnymi stylami.
Najłatwiejszym sposobem będzie skopiowanie powyższego kodu do pliku (np. reset.css) i dołączenie go do dokumentu tak jak to możesz zobaczyć poniżej:
See the Pen Reset CSS html by Tomasz Wikło (@studioleopard) on CodePen.19725
Od tego momentu, przeglądarki internetowe powinny wyświetlać elementy w spójny sposób, co ułatwi pisanie selektorów i późniejszą analizę kodu.
Indywidualnie dostosowany plik resetujący to doskonały początek do dalszego pisania kodu. Dlatego jeżeli zazwyczaj używasz np. interlinii 1.3em, to śmiało zmodyfikuj domyślne style resetujące.
Opublikowano 26 września 2016 w kategorii blog, css, html.
