Globalny reset domyślnych stylów CSS przeglądarki Grzegorz Wójcik

Plik reset.css z pakietu Yahoo! UI Library

Pożegnałeś się z tabelami. Chcąc iść z duchem czasu zacząłeś projektować layouty stron w całości za pomocą arkuszy stylów CSS. Weryfikujesz efekty swojej pracy z wykorzystaniem kilku popularnych przeglądarek i szybko dochodzisz do wniosku, że Twoja strona nie wygląda identycznie w każdej z nich – nie wiadomo skąd w przeglądarce X pojawiają się tajemnicze marginesy i dopełnienia, zmienia się krój i rozmiar czcionki, dziwnie zachowują się listy wypunktowane czy formularze…

Prawdopodobnie winę za takie różnice w renderowaniu ponoszą domyślne style CSS narzucane przez każdą przeglądarkę wszystkim HTML-owym elementom i fakt, iż nie dokonałeś neutralizacji tych stylów.

Domyślne style CSS przeglądarki

Każdy dokument HTML (nawet taki, w którym nigdzie nie zdefiniowano żadnego stylu oraz nie podpięto zewnętrznego arkusza) renderowany jest przez przeglądarkę z wykorzystaniem tzw. domyślnego (wbudowanego) arkusza stylów (ang. browser default/built-in stylesheet).

Na przykładzie 1 przedstawiony jest standardowy dokument HTML, w którym wykorzystano wszystkie najpopularniejsze obecnie znaczniki. Z dokumentem nie powiązano absolutnie żadnych deklaracji stylów i oglądając go w oknie przeglądarki mamy wrażenie, że widzimy „gołą” stronę. Nic bardziej mylnego – ten „bezstylowy” wygląd jest właśnie rezultatem zastosowania przez przeglądarkę jej domyślnych stylów.

Idea domyślnych stylów została wprowadzona w specyfikacji CSS i jest jak najbardziej słuszna – dzięki niej nawet „bezstylowe” dokumenty HTML uzyskują pewną minimalistyczną ale akceptowalną reprezentację wizualną i stają się przez to bardziej dostępne. Gdyby przeglądarka nie aplikowała domyślnego stylu, naszym oczom ukazał by się ciąg jednolitego tekstu, który wymagał by od nas formatowania za pomocą własnych stylów. W ten sposób do każdego dokumentu zmuszeni bylibyśmy dołączać swoje style co nie byłoby najszczęśliwszym rozwiązaniem.

Specyfikacja CSS, oprócz koncepcji domyślnych stylów podaje także wytyczne a nawet konkretne przykłady jak taki arkusz powinien wyglądać – trzeba jednak zaznaczyć, że producenci przeglądarek dosyć dowolnie i w zróżnicowanym stopniu czerpią z tych wzorców. Jak się za chwilę przekonamy stanie się to dla nas głównym źródłem problemów związanych z uzyskaniem spójnego layoutu. Przyjrzyjmy się wybranym fragmentom domyślnego arkusza stylów przeglądarki Mozilla Firefox 2 (plik html.css w katalogu instalacyjnym przeglądarki):

  1. body {
  2. display: block;
  3. margin: 8px;
  4. }
  5.  
  6. p, dl, multicol {
  7. display: block;
  8. margin: 1em 0;
  9. }
  10.  
  11. h1 {
  12. display: block;
  13. font-size: 2em;
  14. font-weight: bold;
  15. margin: .67em 0;
  16. }
  17.  
  18. b, strong {
  19. font-weight: bolder;
  20. }
  21.  
  22. i, cite, em, var, dfn {
  23. font-style: italic;
  24. }
  25.  
  26. ul, menu, dir {
  27. display: block;
  28. list-style-type: disc;
  29. margin: 1em 0;
  30. -moz-padding-start: 40px;
  31. }
  32.  
  33. ol {
  34. display: block;
  35. list-style-type: decimal;
  36. margin: 1em 0;
  37. -moz-padding-start: 40px;
  38. }
  39.  
  40. li {
  41. display: list-item;
  42. -moz-float-edge: margin-box;
  43. }

Jak widać wbudowany styl przeglądarki definiuje m.in. margines całej strony, odstępy między paragrafami tekstu objętymi znacznikiem <p>, pogrubienie czcionki dla fragmentów objętych znacznikiem <strong>, odpowiedni margines, rozmiar i pogrubienie czcionki dla nagłówków (<h1>,<h2>,..) i wiele innych.

O ile domyślne formatowanie elementów liniowych w najpopularniejszych przeglądarkach jest praktycznie identyczne to jednak sytuacja komplikuje się w przypadku elementów blokowych. Niektóre przeglądarki definiują dla tych elementów tylko margines, inne tylko dopełnienie a jeszcze inne obie te rzeczy naraz. Dodatkowo wielkość tego domyślnego marginesu/dopełnienia jest różna w zależności od przeglądarki.

Reset domyślnych stylów

Skoro nie mamy stuprocentowej pewności jakie domyślne wartości marginesu i dopełnienia aplikowane są przez daną przeglądarkę poszczególnym elementom blokowym, jedynym wyjściem wydaje się zresetowanie (wyzerowanie) tych własności a następnie określenie dla nich własnych wartości np.:

  1. body, p {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. /*
  7. Wskazówka:
  8. w przypadku zerowych wartości nie ma potrzeby określania jednostek (px, em, itp.) - w ten sposób
  9. nasz arkusz będzie o kilka bajtów mniejszy
  10. */
  11.  
  12. body { padding: 20px; }
  13.  
  14. p { margin: 0 0 20px 0; }

Rysunek 1 - Kaskada CSS
Rysunek 1 – Kaskada CSS

Po prostu – definiując własne reguły nadpisujemy domyślne style przeglądarki – jednym słowem domyślne style przeglądarki są najniżej w hierarchii kaskady (Rysunek 1).

Zasadniczo istnieją dwie metody zerowania domyślnych wartości marginesu/dopełnienia elementów:

  • metoda wykorzystująca selektor uniwersalny (*)

Za pomocą selektora uniwersalnego (*) możemy w łatwy sposób wybrać wszystkie elementy dokumentu i określić dla nich styl (w naszym przypadku wyzerować domyślny margines/dopełnienie):

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

Niestety, wykorzystanie selektora uniwersalnego niesie ze sobą kilka problematycznych implikacji. Po pierwsze, selektor musi wybrać wszystkie elementy (zarówno te blokowe jak i liniowe, dla których nie ma potrzeby określania marginesu/dopełnienia) co w przypadku rozbudowanego drzewa dokumentu może w jakimś stopniu przekładać się na szybkość renderowania strony przez przeglądarkę.

Rysunek 2 - Kontrolki formularzy po resecie domyślnych styli
Rysunek 2 – Kontrolki formularzy po resecie domyślnych styli

Po drugie, globalny reset tą metodą „psuje” wygląd niektórych kontrolek formularzy (chodzi tutaj zwłaszcza drop-down listy i przyciski). Zjawisko to jest szczególnie mocno dostrzegalne pod Operą i Firefoxem – po zresetowaniu domyślnych stylów strzałka odpowiedzialna za rozwijanie drop-down listy zostaje maksymalnie „przyciśnięta” do prawej strony tekstu (Rysunek 2). Podobny efekt „sciśnięcia” dla tych przeglądarek można zaobserwować również dla przycisków input. Co ciekawe, w przypadku Internet Explorera wygląd kontrolek przed i po resecie jest identyczny.

Reasumując, jeśli Twoja strona nie korzysta z formularzy i jest w miarę prosta, selektor uniwersalny to najkrótsza i najwygodniejsza metoda na reset domyślnych stylów przeglądarki.

  • metoda polegająca na jawnym określeniu elementów, które chcemy wyzerować

To najpewniejszy i najbezpieczniejszy sposób na neutralizację wbudowanych stylów przeglądarki. W miarę budowania strony dopisujemy wykorzystywane przez nas znaczniki do listy zerowanych elementów, a następnie określamy dla nich własne wartości marginesu i/lub dopełnienia:

  1. html, body, h1, p, form {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. body {
  7. background: #fff;
  8. padding: 20px;
  9. }
  10.  
  11. h1 {
  12. color: #666;
  13. margin: 5px 0 0 20px 0;
  14. }
  15.  
  16. p {
  17. margin: 0 0 20px 0;
  18. }

Gotowce

W Internecie odnaleźć można kilka godnych uwagi gotowych arkuszy resetujących domyślne style przeglądarek. Wystarczy dołączyć taki arkusz na początku projektowanej strony i przystąpić do budowy własnych stylów. Osobiście polecam reset.css z pakietu Yahoo! UI Library. Inną alternatywą (przeznaczoną jednak dla bardziej zaawansowanych twórców) jest arkusz opracowany przez guru CSSErica Meyera. Charakterystyczne dla powyżej wymienionych rozwiązań jest to, że dokonują one neutralizacji domyślnych stylów także w stosunku do niektórych elementów liniowych określając np. styl czcionki:

  1. /* Yahoo! UI Library reset.css */
  2. address,caption,cite,code,dfn,em,strong,th,var {
  3. font-style: normal;
  4. font-weight: normal;
  5. }

Tak naprawdę zależy to tylko od Ciebie jak daleko chcesz posunąć się w neutralizacji domyślnych stylów. Dobrym pomysłem jest zaczerpnięcie z wymienionych powyżej gotowców pewnych odpowiadających nam fragmentów i zbudowanie własnego arkusza resetującego. Na pewno absolutnym minimum jest zerowanie domyślnych wartości marginesu/dopełnienia dla elementów blokowych. Reszta jest już tylko kwestią podjęcia decyzji w jakim stopniu wygląd projektowanej strony ma być wynikiem zastosowania przez przeglądarkę domyślnego formatowania.

Podsumowując – świadomość istnienia domyślnych stylów przeglądarki jest absolutną koniecznością dla każdego, kto projektuje layouty oparte na CSS i kto ma na uwadze spójny wygląd strony w jak największej liczbie przeglądarek.

Czytaj więcej:
Artykuły » CSS
Tagi:
,

Grzegorz Wójcik

Grzegorz Wójcik jest założycielem internetowego magazynu kminek.pl. Pasjonat i twórca lekkich, dostępnych i użytecznych stron internetowych budowanych w oparciu o standardy sieciowe i najlepsze praktyki. Prywatnie wielki miłośnik ambitnego kina sci-fi oraz grunge-rocka z lat 90.

Zobacz wszystkie artykuły tego autora (15)

  1. Maciek 1

    Ciekawe… Wiedzialem, ze kazda przegladarka ma swoj domyslny styl, ale nie wpadlem na to, ze warto je resetowac. Dobra rzecz.

  2. Blaze 2

    i jest to duzo lepsze rozwiazanie niz “* {margin:0;padding:0}”, ktore takze jest czesto stosowane. Ja rowniez polecam uzywanie global reset css, osobiscie uzywam rozwiazania zaproponowanego na meyerweb.com (wyzej wspomnianym)

  3. Tomek 3

    Co do resetu sam go używam. Autor zauważył ważną rzecz – jeśli na stronie nie ma za dużo ZŁOŻONYCH formularzy najlepszym wyjściem jest uniwersalny selektor. Sam E.Meyer powiedział:

    If the :not() selector were universally supported, I’d use it in conjunction with a universal selector, but it isn’t.

    – jest to w komentarzach do postu Reset Styles.

    Chodzi jedynie o elementy formularzy – mnóstwo ludzi bezmyślnie powtarza, że użycie uniwersalnego selektora spowalnia działanie przeglądarki, ale jeśli wypunktujemy wszystkie użyte znaczniki, to i tak wszystkie definicje zostaną zastosowane do wszystkich wymienionych elementów, więc… zwiększamy tylko objętość arkusza.

Dodaj komentarz * pola obowiązkowe

 
 

Dozwolone tagi HTML: <strong> <em> <a href="" title=""> <code> <pre lang=""> <blockquote cite="">

Komentarze są moderowane. Mile widziane wpisy wnoszące nowe, ciekawe informacje do omawianego tematu
lub sygnalizujące ewentualne błędy merytoryczne. Wszelkie przejawy spamu lub nieetycznego zachowania bedą
karane blokadą adresu IP/domeny.