HTML5 & CSS3

Resetowanie domyślnych ustawień CSS

Każda przeglądarka ma fabrycznie ustawiony zestaw arkuszy stylów CSS. Opisuję one w domyślny sposób wszystkie elementy specyfikacji HTML. Sęk tkwi w tym, że ustawienia każdego typu przeglądarki nieznacznie się od siebie różnią, co powoduje, w niektórych przypadkach, przesunięcia, rozciągnięcia i inne temu podobne nieprawidłowości. Zauważyć można, że mało doświadczeni projektanci stron internetowych pozwalają powiedzieć ostatnie słowo twórcom przeglądarek, zamiast samemu sprawować pełną kontrolę nad wyświetlaniem swoich witryn. W dzisiejszym poradniku dowiemy się jak zaradzić w/w problemowi, wykorzystując tzw. resety CSS, czyli arkusze (bądź polecenia) zerujące domyślne ustawienia przeglądarek.

Dzięki takiemu działaniu przygotujemy sobie odpowiednie pole manewru, ujednolicając wyświetlanie stron www we wszystkich przeglądarkach. Jest to pierwszy krok do osiągnięcia identycznego wyświetlania się witryn na wszystkich platformach (pomijając oczywiście fakt niepełnej implementacji w różnych wersjach produktów). Jakie zalety przynosi nam wyzerowanie stylów CSS?

  • Eliminacja formatowania słabej jakości

Dzięki temu usuniemy większość denerwujących ustawień zaaplikowanych nam w przeglądarkach (np. domyślny obrys pól w formularzach).

  • Eliminacja stylów domyślnych

Przygotuje to nam projekt do identycznej pracy we wszystkich przeglądarkach. To my będziemy mieć kontrolę nad formatowaniem CSS.

  • Ujednolicenie stylów

Niestety domyślnie użyte ustawienia w przeglądarkach nieznacznie się różnią, przez co ujednolicimy wygląd naszych witryn.

Kiedy już znamy podstawowe pojęcie resetu CSS, oraz wiemy do czego będzie on nam przydatny, przystąpimy do części praktycznej.

Własny reset CSS

Najprostszym sposobem, aby wykonać własny reset CSS, jest zdefiniowanie szeregu instrukcji za pomocą selektora uniwersalnego (*). Pomimo tego, że jest to najszybszy sposób na działanie, ma jedną wadę. Przeglądarka Internet Explorer 6 nie rozpoznaje wspomnianego selektora. Jeśli więc przejmujemy się IE6 musimy przejść już teraz do kolejnego kroku. Zaletą tego rozwiązania, jest zastosowanie do wszystkich elementów HTML, nawet tych, które dopiero powstaną.

* {
margin: 0;
padding: 0;
border: 0;
line-height: 1.4em;
vertical-align: baseline;
text-decoration: none;
outline: 0;
}

Powyższy kod wystarczy zaimplementować na początku naszego arkusza stylów. Oczywiście sami możemy dopasować elementy, które chcemy na starcie ujednolicić.

Reset Erica Meyera

W wypadku, kiedy nie chcemy korzystać z selektora uniwersalnego, z pomocą przychodzi nam reset stworzony przez Pana Erica Meyera. Można go znaleźć na jego blogu.
Aby skorzystać z resetu, musimy dodać na początku arkusza poniższy kod:

/* 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;
}

Elementy, które należy resetować

Główne elementy wymagające zerowania są następujące:

  • Marginesy (margin), dopełnienia (padding) i obramowania (border)
  • Podkreślenia tekstu (text-undeline)
  • Wysokość linii bazowej tekstu (line-height)
  • Obrys aktywnych elementów (outline)
  • Wyrównanie w pionie (vertical-align)

Powyższe czynności pozwolą nam uniknąć przykrych niespodzianek i sporej większości kłopotów.

Czy korzystanie z resetów CSS w swoich projektach? Jeśli tak, to z jakich? Jakie są Wasze sposoby na utrzymanie jednolitego wyświetlania wybranych elementów w różnych przeglądarkach?
Czekam na Wasze komentarze i opinie.

komentarze 2

  • Awatar
    Majkel

    15 maja 2014 09:25

    Ale później wszystko co zresetowaliśmy trzeba od nowa zdefiniować, co w przypadku prostych i krótkich witryn nie ma najmniejszego sensu, natomiast sam z tego zawsze korzystam, bo to rozwiązuje wszystkie problemy.
    Bardzo fajny artykuł!

    PS Jak się nazywa wtyczka komentarzy, której używacie tutaj?

    Odpowiedz
    • Awatar
      Majkel

      15 maja 2014 09:26

      Ok, już wiem jak się nazywa :P

      Odpowiedz

Zostaw odpowiedź