Resetowanie domyślnych stylów CSS

Zanim rozpoczniemy stylowanie strony internetowej warto zresetować domyślne wartości CSS ustawiane przez przeglądarkę WWW. Jest to o tyle ważne, że tak naprawdę każda przeglądarka internetowa inaczej interpretuje wygląd poszczególnych elementów HTML. Takie zachowanie wiąże się z tym, że w niektórych sytuacjach strona może nie wyświetlać się poprawnie czego raczej chcielibyśmy uniknąć. Do tego dochodzi również dodatkowy problem polegający na tym, że jeżeli zdecydujemy się już na wykorzystanie domyślnie osadzonych stylów CSS to de facto tracimy kontrolę nad własnym projektem, a w przypadku jakiejś niezależnej od nas aktualizacji, wszystko może się zepsuć.

Fot: unsplash.com ,CC0 License.

Jakie style wymagają zresetowania?

Oczywiście nie wszystkie domyślne style CSS resetujemy. Nie ma większego sensu wykonywać tej procedury na przykład dla znacznika <code> </code> zmieniając format czcionki. Zresetowania wymagają między innymi elementy takie jak:

  • margin, padding,
  • ul, ol, line-height, outline, border, vertical-align
  • blockquote.

Kod resetujący

Najpopularniejszym resetem CSS’a jest chyba reset autorstwa Erica Meyera. Jego kod możecie dowolnie wykorzystać w swoich projektach:

Po wklejeniu tego kodu na początku swojego arkusza stylów możecie bez większego problemu rozpocząć dalszą pracę.

Myślę, że to rozwiązanie w całości załatwia sprawę ale jeśli chcielibyście coś dodać do tematu to zapraszam do dyskusji w komentarzach…

Przeczytaj również

, , , , , , , ,

  • Jak widać w komentarzu jest to kod z 2011 roku. Obecnie praktycznie zawsze korzysta się z frameworków HTML (np. Bootstrapa) i wtedy nie mamy żadnego problemu z resetowaniem stylów CSS.

    Nawet jeśli korzystamy z czystego CSSa to nie jest to jakoś bardzo konieczne i odpowiednie style zmienia się po prostu według własnego uznania. Wiem, bo miesiąc temu skończyłem projekt bez użycia jakichkolwiek frameworków :)

    No ale warto wiedzieć, że takie coś było i ewentualnie można takie coś zastosować w razie potrzeby.

    • Jeżeli korzystamy z frameworków to nie ma o czym mówić ;) Ale jeśli ich nie używamy no to tutaj moim zdaniem warto te CSS’y zresetować, oszczędzi to wiele pracy i nerwów w późniejszych etapach projektu ;)

    • Bartosz Rędziniak

      Tak, zmienia się według własnego uznania, ale, powiedzmy że robisz coś w chromie, a on sobie nadaje swoją jakąś tam wartość vertical align(która nam odpowiada), a firefox swoją(która już nam coś psuje) i teraz ten sam kod wygląda inaczej i musisz potem to sprawdzać i ręcznie ustalać. Resetowanie oszczędza nam czasem tych kilku drobnych nieścisłości pomiędzy przeglądarkami. :)

  • Artykuł dobry, krótki i treściwy. Przydatny szczególnie dla początkujących programistów stron internetowych. Liczę na więcej tego typu wpisów, z konkretną dawką wiedzy :)