Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

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

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:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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…

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , , , , , ,

Dodaj komentarz

Komentarze (12)

  • 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 pisze:

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

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

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

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

    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?

  • Andrzej pisze:

    Jaki Pan spodziewa się rewanż za użycie „kodu resetu styli css” ?
    Oferuję (pod)linkowanie na czterech domenach :
    fand.pl
    8kompetencji.pl
    12kompetencji.pl
    eko-fand.pl
    i perspektywicznie jeszcze „nie wpiętą w Internet” domenę samostanowczyk.pl

    • Andrzej pisze:

      -Doczytałem „o dowolnym udostępnieniu” Pańskiego rozwiązania. I, i tak oferuję (pod)linkowanie, jeżeli moje treści nie kłócą się w Wizerunkiem STREFYKODERA.PL

      • Łukasz Dudziński pisze:

        Hej, Andrzej. Dziękuję, za każdy link :) Możesz również powiedzieć znajomym o blogu oraz zapisać się do newslettera (formularz w prawej kolumnie). Zapraszam do lektury innych artykułów!

      • Andrzej pisze:

        Inaugurujesz więc „zakresy” tematyczne „Linki SEO” na moich domenach. Chciałem znaleźć ( chyba ) skromną formę tym zakresom i z Twoją odpowiedzią to się stało.

      • Andrzej pisze:

        Kliknąłem dodane linki SEO. Chwil kilka minęło, tyle że Żywym Słowem Pisałem.
        Kliknięcia u mnie widoczne w statystykach domen. ;)

Odpowiedz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest