Przeskocz nawigację i wyszukiwarkę

Perfection or Vanity

Wyszukiwarka

Reset CSS

Czym jest reset?

Resetowanie CSS polega na usunięciu domyślnych, automatycznych stylów. Gdy stworzysz pusty dokument HTML i zaczniesz pisać kod, zauważysz że przeglądarka pokazuje pogrubione nagłówki, odstępy dla list i akapitów, wyśrodkowane nagłówki tabel. Reset pozbywa się domyślnej prezentacji, pozwalając Ci się skupić na znaczeniu HTML, a nie wyglądzie.

Poniżej znajduje się odświeżony, kuloodporny reset.css, którego możesz z powodzeniem używać w swoich projektach.

a, abbr, address, article, aside, audio, b, blockquote, body, canvas, 
caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, 
object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, 
sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
}

article, aside, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary {
  display: block;
}

a, ins, del {
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

caption, th {
  text-align: left;
}

q:after, q:before {
  content: "";
}

Wyjaśnienie

Reset zaczyna się zerowaniem odstępów i obramowań dla wszystkich widocznych elementów HTML4 i nowych HTML5:

a, abbr, address, article, aside, audio, b, blockquote, body, canvas, 
caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, 
object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, 
sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
}

Dlaczego nie użyć więc *? Selektor uniwersalny jest faktycznie krótszy, ale zniszczy natywny wygląd formularzy i przycisków – czegoś co w większości przypadków nie chcemy zmieniać.

Skoro już wypisaliśmy tyle elementów, warto też zając się tekstem:

a, abbr, address, /* … */ video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
  1. Ustawienie rozmiaru tekstu na 100% zmniejszy nagłówki h1-h6 oraz zwiększy small.
  2. Vertical-align wpłynie na pozycję tekstu w tabelach oraz wyrówna sup i sub, aby nie rozpychały pionowo tekstu.

Zdaję sobie sprawę, że większość tych elementów nie posiada żadnych domyślnych marginesów, obramowań ani odmiennego rozmiaru tekstu. Powodem wypisania ich wszystkich jest wyłącznie pragmatyzm – taki CSS sprawia, że nie trzeba się zastanawiać czy dziwne zachowanie to wina przeglądarki czy naszego kodu.

Nie wiadomo też jak nowe elementy HTML5 będą finalnie wyglądać, ten kod bierze to pod uwagę.

Nowe elementy HTML5

Aby nowe elementy HTML5 dawały się stylować zgodnie z przeznaczeniem, potrzeba poniżej deklaracji.

article, aside, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary {
  display: block;
}

Pogrubienie i kursywa vs inherit

W wielu resetach widuje się taki kod: †

† – Także w moich starszych 
h1, h2, h3, h4, h5, h6, strong, b, th {
  font-weight: normal;
}

address, cite, em, i, var {
  font-style: normal;
}

Przysparza on wielu problemów – nie będzie brał pod uwagę stylu elementów nadrzędnych. Na przykład, jeśli design linków na Twojej stronie przewiduje wytłuszczenie, to umieszczony w nich strong nie będzie pogrubiony.

Rozwiązaniem jest skorzystanie ze słowa kluczowego inherit. Mówi ono, że wartość właściwości CSS ma zostać skopiowana z elementu nadrzędnego.

Istnieje jeden problem – dopiero Internet Explorer 8 rozumie tę wartość. Musisz więc wybrać: uniwersalny reset.css i późniejsze poprawki na IE lub wyłączanie pogrubienia i kursywy dla poszczególnych fragmentów w main.css. Albo inherit albo nic.

Jeśli uważasz, że możesz skorzystać z uniwersalnego rozwiązania †, wrzuć te dwie linijki w pierwszej regule:

† – bo poprawki IE nie są tak ważne lub mogą być odłożone na później 
a, abbr, address, /* … */ video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
}

Text-decoration

Dla własnych potrzeb zwykle też usuwam podkreślenia linków oraz styl dla elementów ins & del.

a, ins, del {
  text-decoration: none;
}

Używam tego CSS mimo negatywnego wpływu na dziedziczenie, opisanego wyżej na przykładzie font-weight. Dlaczego więc znajduje się w resecie?

  1. Dodanie podkreślenia (lub przekreślenia) do tekstu poza linkami występuje bardzo rzadko – link umieszczony w dowolnym elemencie najpewniej nie będzie miał w ogóle okazji popsuć dziedziczenia.
  2. Bardzo często zdarza mi się wyłączać text-decoration dla tych trzech elementów.
  3. Zawsze pamiętam, aby ostylować linki. A dla ins/del zwykle używam koloru.

Są to dość subiektywne argumenty, dlatego ta reguła CSS jest opcjonalna.

Pozostałe reguły

ul, ol {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

caption, th {
  text-align: left;
}

q:after, q:before {
  content: "";
}
  1. Wyłączenie wypunktowania i numeracji dla list. Zwykle przeszkadzają, ale jeśli w treści używasz list <ul> (i chcesz aby samodzielnie zmieniały list-style dla każdego poziomu zagnieżdżenia), lepiej wyłączyć je pojedynczo.
  2. Border-spacing usunie odstępy między komórkami tabeli…
  3. …a border-collapse zadba aby obramowania się scalały (oraz usunie odstępy w IE).
  4. Tekst w podpisie tabeli oraz nagłówkach wyrównany do lewej strony.
  5. Aby używać elementu q musimy zadbać, aby nie dodawał automatycznie cudzysłowów.

Błędy

Najpopularniejszym rozwiązaniem jest reset Erica Meyera – dlatego warto opisać błędy występujące w wielu odmianach tego kawałka kodu.

Outline

Mimo komentarza /* remember to define focus styles! */, tysiące stron zostawiają poniższą linijkę bez zmian:

:focus {
  outline: 0;
}

Jest to jedna z najgorszych plag internetu; outline jest bowiem odpowiedzialne za:

  1. aktywny stan linków gdy obsługujemy stronę z klawiatury
  2. oraz za aktywny stan formularzy

Jeśli chcesz się pozbyć kropek wychodzących poza ekran w Firefoksie gdy link z ujemnym text-indent jest kliknięty, użyj tego kodu:

.sliczny-element a:focus {
  overflow: hidden;
}

A gdy chcesz się pozbyć kropek psujących estetykę Twojego designu, zawsze pamiętaj o ustawieniu alternatywnego stanu :focus. Z tego powodu mój reset nie usuwa ich domyślnie – bardzo mało osób pamięta o tym kroku, a z każdym bezmyślnym przekopiowaniem resetu Meyera sieć staje się coraz mniej dostępna.

Poza tym, aktywne linki i formularze na Maku mają niebieską poświatę, spójną z każdym aktywnym elementem w całym systemie. Upewnij się trzy razy czy chcesz usuwać natywne, oczekiwane przez użytkownika style.

Czym reset nie jest

Należy podkreślić, że reset nie zawiera żadnych przydatnych stylów – jeśli większość Twoich projektów używa w nagłówkach Helvetiki, ułatw sobie pracę i dołącz kawałek napisanego wcześniej CSS. Nie będzie to jednak reset, który z definicji pozbywa się narzuconej prezentacji.

Dlatego nie ustawiłem line-height: 1 w body jak pan Meyer – ta część kodu najpewniej zostanie zmieniona w późniejszym CSS.

Oddzielny plik

Gdy kończysz pracę, pamiętaj aby wyciąć zawartość reset.css i wstawić ją do głównego pliku CSS w miejsce @import url("reset.css") – zaoszczędzisz dodatkowego żądania HTTP, strona załaduje się szybciej.