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ż

, , , , , , , ,

Dodaj komentarz

guest
7 komentarzy
Najstarsze
Najnowsze Najlepiej oceniane
Inline Feedbacks
View all comments
Szalony Pecet
19 grudnia 2016 15:16

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.

lukas124
19 grudnia 2016 23:42
Reply to  Szalony Pecet

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
Bartosz Rędziniak
17 lutego 2017 00:02
Reply to  Szalony Pecet

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. :)

Jakub Adamczyk
Jakub Adamczyk
18 marca 2018 23:25
Reply to  Szalony Pecet

Obecnie właśnie korzystanie z takich durnych frameworków jest debilizmem. Nawet obserwijac rynek, korzystają z tego głównie ci, którzy nie wiedzą, co robia. Uzywajac natywnego flexboxa czy grida, w 5 minut masz pełny układ calej strony, ktory działa lepiej, nic nie narzuca, działa szybciej i jest w pełni elastyczny.

Offon
13 lutego 2017 17:40

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 :)

Magdalena
Magdalena
15 maja 2017 14:18

A co jeśli reset działa tylko na niektórych przeglądarkach? Nie wiedzieć czemu firefox 53.0.2 nie przyjął tego resetu i w związku z tym nie wyświetla stylów ustalonych w cssie. Jak to naprawić? Wie ktoś może?

lukas124
15 maja 2017 15:47
Reply to  Magdalena

Jakie style konkretnie się wyświetlają dalej?