Reset i normalizacja w CSS.
Jak zapewne wiesz przeglądarka ma swoje domyślne style CSS, które są stosowane do Twojej strony. Zazwyczaj te ustawienia nie są optymalne i powinniśmy je resetować. Możemy to zrobić za pomocą właściwości priorytetów stosowania styli. Zauważ, że style autora mają większy priorytet, niż style przeglądarki. Można to zatem wykorzystać w praktyce. Tworząc swój plik CSS nadpisujesz ustawienia domyślne przeglądarki. Taki minimalny reset CSS może wyglądać następująco:
* { margin: 0; padding: 0; }
Jednak warto się zastanowić nad całkowitym resetem wszystkich ustawień domyślnych. Przykład zawartości pliku resetującego ustawienia przeglądarki znajdziesz na wielu stronach traktujących o CSS. Przykładowy plik można pobrać np. z tej lokalizacji:
https://css-tricks.com/snippets/css/meyer-reset/
Oto zawartość resetu:
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Warto również zajrzeć do tej lokalizacji:
http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
Coraz częściej pojawiają się głosy mocnej krytyki stosowania resetu CSS. Przeciwnicy tej metody twierdzą, że resetowanie ustawień, których nigdy nie użyjemy na naszej witrynie nie ma większego sensu, a te które użyjemy i tak musimy generalnie ustawiać od nowa (więc i tak w praktyce resetujemy je samodzielnie).
Powstała więc alternatywna dla resetu normalizacja.
Normalizacja polega na zastosowaniu kodu, który odpowiada za standaryzację interpretacji wybranych znaczników we wszystkich przeglądarkach ! Po zastosowaniu normalize.css mamy pewność, że dany znacznik będzie wyglądał tak samo we wszystkich przeglądarkach. My jedynie
w dalszej kolejności (nadpisując te style) zmieniamy ich wygląd dostosowując je ew. do naszej typografii.
Fragment pliku normalize.css:
article,
aside,
footer,
header,
nav,
section {
display: block;
}
Od tej pory wszystkie przeglądarki (nawet starsze wer. IE) będą odpowiednio interpretowały nowe znaczniki semantyczne jako elementy blokowe.
Gotowy skrypt normalize.css pobierzesz z następującej lokalizacji:
http://necolas.github.io/normalize.css/
Główna różnica pomiędzy resetem, a normalizacją jest taka, że normalize normalizuje style często używanych elementów np. nagłówków, a reset je „zeruje”.
Co zatem używać ? Musisz sam sobie wyrobić zdanie praktykując oba podejścia. Warto jednak zaznaczyć, że normalize jest podejściem zdecydowanie nowszym. Zdarza się również, że ani jedno, ani drugie rozwiązanie nie jest nam przecież do niczego potrzebne ;)