W poprzednim wpisie opisałem podstawy i czym jest Cross-browser. A w tym wpisie opiszę na temat resetu stylów CSS, a więc reset stylów CSS polega ono na usunięciu domyślnych właściwości/parametrów dla stylów CSS narzuconych przez przeglądarki internetowe i minimalizowaniu różnic pomiędzy różnymi przeglądarkami.
Po co reset stylów CSS?
Dla przykładu utworzyłem dokument html goły bez stylów CSS z wybranymi znacznikami takimi jak: h3, hr, ul, ol, li, label, input, p, abbr, acronym, br i a. A teraz zobaczmy jak one wyglądają w różnych przeglądarkach internetowych: Firefox, Internet Explorer 8, Opera i Chrome.
Kod HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cross-browser #2</title>
<link rel="stylesheet" href="cb_001.css" type="text/css" media="screen, projection" />
</head>
<body>
<div class="box_001">
<h3>Przykładowy boks #1, zawierający znaczniki:</h3>
<h3>H3, HR, UL, OL, LI, LABEL, INPUT, P, ABBR, ACRONYM, BR i A.</h3>
<hr/>
<ul>
<li>Lista z <UL>.</li>
<li>
<ul>
<li>Lista z <UL>.</li>
</ul>
</li>
</ul>
<hr/>
<ol>
<li>Lista z <OL>.</li>
<li>
<ol>
<li>Lista z <OL>.</li>
</ol>
</li>
</ol>
<hr/>
<label for="input"><LABEL></label>
<input type="text" value="<INPUT>" id="input"/>
<hr/>
<input type="submit" value="Wyślij"/>
<hr/>
<p>Tekst w znaczniku <P>.</p>
<hr/>
<abbr title="Tekst w znaczniku <ABBR>.">Tekst w znaczniku <ABBR>.</abbr>
<hr/>
<acronym title="Tekst w znaczniku <ACRONYM>.">Tekst w znaczniku <ACRONYM>.</acronym>
<hr/>
<a href="#">Tekst w znaczniku <A>.</a>
<hr/>
<br/>
</div>
</body>
</html>
Kod CSS
.box_001 { background: #eeeeee; border: 5px solid #cccccc; margin: 5px; padding: 10px; width: 300px; }
W poniższym rysunku zrobiłem taki szkic, na czerwono różnice i wysokości poszczególnych elementów w różnych przeglądarkach internetowych.
Jak widać różnice w każdej przeglądarce, każdy na swój sposób interpretuje: marginesy, odstępy poszczególnych elementów, nawet wygląd inputów, niektóre nawet nie ma stylów dla akronimów acronym czy skrótów abbr.
Dlaczego tak to się dzieje, że goły bez stylów html w każdym inaczej wygląda?
Ponieważ każda przeglądarka ma swój zestaw własnych stylów CSS, gdzie są domyślne i definiowane właściwości/parametry dla poszczególnych elementów html.
Dobrym przykładem jest strona http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm gdzie możemy zobaczyć różnice popularnych przeglądarek we właściwościach/parametrach poszczególnych elementów HTML.
I tu na ratunek będzie reset stylów CSS, która pomoże nam ujednolicić i zminimalizować różnice pomiędzy przeglądarkami albo również usunąć styl CSS narzucony przez przeglądarki dla niektórych elementów HTML w takie same identyczne elementy dla wszystkich przeglądarek.
Reset stylów CSS możemy podzielić na 3 kategorie.
Selektor uniwersalny
Selektor uniwersalny czyli *, to inaczej mówiąc pasuje do nazwy każdego elementu i każdego elementu w drzewie dokumentu. Reset stylów CSS za pomocą tego wyglądałby tak mniej więcej:
* {
background-color:transparent;
border:0;
border-collapse:collapse;
border-spacing:0;
font-size:100%;
font-style:inherit;
font-weight:inherit;
list-style:none;
margin:0;
padding:0;
outline:0;
vertical-align:baseline;
}
Niby najszybsze i najprostsze rozwiązanie zresetowania stylów CSS ale w tym przypadku wiąże z tym, że usuwamy wszystkie elementy jakie są dostępne w HTML do stanu gołego pustego i bez teł czy obramowań. Nawet nie zauważymy elementów formularza czy listy z wypunktowaniami. Tutaj to wymagałoby ciut więcej roboty przy zdefiniowaniu nowych własnych stylów dla poszczególnych elementów. W poniższym linku można zobaczyć jaki efekt będzie przy zastosowaniu tego resetu stylów CSS z selektorem uniwersalnym.
Gotowe resety stylów CSS
W sieci możemy też znaleźć dużo gotowych resetów zrobionych przez innych autorów. Poniżej linki do dwóch najpopularniejszych gotowych resetów:
- http://meyerweb.com/eric/tools/css/reset/index.html (Eric Meyer v2.0)
- http://developer.yahoo.com/yui/reset/ (Yahoo YUI)
Przez długi pewnien czas, często korzystałem z gotowego resetu stylów CSS Erica Meyera. Byłem zadowolony, chociaż przy niektórych projektach czy sytuacjach musiałem lekko modyfikować jego reset albo dopisać dodatkowe atrybuty dla niektórych elementów. Poniżej przykład z użyciem resetu stylów CSS Erica Meyera.
Własny reset stylów CSS
Tworzenie własnego resetu wymaga trochę poświęcenia czasu, ale warto bo wtedy wiesz co: resetuje, usuwa i ostyluje. Poniżej udostępnię i opiszę swój reset stylów CSS, którego z powodzeniem od dłuższego czasu używam w swoich pracach, projektach stron internetowych i jak również w projektach dla klientów.
Zacznijmy od podstawowych wszystkich elementów HTML (prawie wszystkie elementy HTML4 i HTML5). Elementy HTML oddzielamy przecinkiem.
Zwróćcie uwagę, że przy zerowych ustawieniach atrybutu/właściwości – nie ma potrzeby określania jednostek czyli px, em, % itd., w ten sposób możemy zaoszczędzić parę bajtów wagi pliku CSS.
Faza #1
a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,br,
canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,
figcaption,figure,footer,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,
i,iframe,img,ins,kbd,li,mark,menu,nav,object,ol,output,p,pre,q,
samp,section,small,span,strong,summary,table,tbody,td,tfoot,
th,thead,time,tr,tt,ul,var,video
{background-color:transparent; border:0; font-size:100%; margin:0; padding:0; vertical-align:baseline;}
Tutaj widzimy głównie większość elementów z HTML4, ale nie wszystkie o tym później napiszę.
background-color:transparent;– usuwa wszystkie kolory i tła w elementach na pusty lub przezroczysty.border:0;– usuwa wszystkie obramowania w elementach.font-size:100%;– ustawia rozmiar tekstu na 100% czyli wszystkie/prawie większość elementów będą miały identyczny rozmiar tekstu np. nagłówki h1-h6 będą jednego identycznego rozmiaru.margin:0;ipadding:0;– usuwa wszystkie marginesy i odstępy w elementach do zerowego stanu.vertical-align:baseline;– wyrównuje elementy i teksty do linii bazowej elementu nadrzędnego.
Faza #2
sub,sup
{background-color:transparent; border:0; font-size:100%; margin:0; padding:0;}
Właściwości CSS podobne co w poprzednim tylko bez vertical-align:baseline;. Dla swoich własnych potrzeb zrobiłem osobno, żeby zachować dla tych elementów ułożenia pionowe.
Faza #3
button,fieldset,form,input,label,legend,option,select,textarea
{font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; margin:0; padding:0; vertical-align:baseline;}
Elementy formularza, tu również zrobiłem osobno. Jest bez: background-color:transparent; i border:0; – żeby zachować oryginalne tło i obramowania dla elementów formularza np. dla input czy select bo inaczej będzie goły i przezroczysty, że wtedy nie zauważymy pola input lub select.
Dopisałem: font-family:inherit;, font-size:inherit;, font-style:inherit; i font-weight:inherit; – wartość inherit oznacza że wartość właściwości CSS zostanie skopiowana z elementu nadrzędnego/rodzica. Czyli będą takie jakie zostaną zastosowane w elementach rodzica: font-family – czcionki, font-size – rozmiar czcionki, font-style – styl tekstu i font-weight – grubość tekstu.
Faza #4
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary
{display:block;}
Elementy HTML5 – ze względu na brak oficjalnych informacji, do tej pory nic nie wiemy jak będzie z tym w końcu. Żeby te owe elementy dawały się stylować wedle uznania, potrzebny jest display:block;.
Faza #5
:active,:focus,:hover {outline:0;}
a:focus,button:focus,input:focus,select:focus,textarea:focus {outline:thin dotted;}
ul,ol {margin:0; padding:0 0 0 35px;}
ul {list-style-type:disc;}
ul ul {list-style-type:circle;}
ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
table {border-collapse:collapse; border-spacing:0;}
Pozostałe elementy z własnymi ustawieniami i właściwościami dla swoich własnych potrzeb. Niektóre elementy są pominięte w głównym resetcie.
:focus– na ten temat odsyłam do strony z świetnym tłumaczeniem i opisem tego problemu.ul,ol– tutaj sobie zdefiniowałem własne ustawienia i właściwości dla list z wypunktowaniem, dobry jest przy postach napisanych np. w WordPress’ie, a jak komuś zechciałoby mieć listy bez wypunktowań czy marginesów to się tworzy klasę dla danegoulluboli usuwamy za pomocąlist-style:none;imargin:0;.table– dopisałem usuwanie odstępów i scalanie obramowań czyliborder-collapse:collapse;i usuwanie odstępów między komórkami tabeli czyliborder-spacing:0;.
Poniżej reszta kodu resetu CSS.
hr {background:#000; clear:both; float:none; height:1px; width:100%;}
blockquote,q {quotes:'"' '"' "'" "'";}
blockquote:before,q:before {content:"\201c";}
blockquote:after,q:after {content:"\201d";}
b,dfn,dl dt,strong,th {font-weight:bold;}
cite,dfn,em,i,tfoot,var {font-style:italic;}
del,s {text-decoration:line-through;}
abbr,acronym {cursor:help; border-bottom:1px dotted;}
code,kbd,pre,samp,tt,var {font-family:"courier new",courier,monospace; white-space:pre;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
Demo oraz cały kod CSS
Podsumowanie
Poniżej drugi szkic po zastosowaniu własnego resetu stylów CSS, zauważamy jak wiele różnic jest w stosunku do stylów narzuconych przez przeglądarki internetowe.
Dzięki resetowi stylów CSS możemy łatwiej ostylować jakiekolwiek elementy HTML, w następnym wpisie o tematyce Cross-browser opiszę jak zminimalizować różnice pomiędzy poszczególnymi przeglądarkami czyli stosujac CSS hacki i triki.
Bardzo ciekawy, klarowny wpis. Trzymaj tak dalej:)
Mam problem polegający na rozszerzeniu się elementu w pionie o jakieś 10px w dół w FF w stosunku do IE 9 z resztą z IE8 było tak samo. Czyli na IE wyświetla się świetnie a na FF pojawia się na elemencie pasek przesuwania. Zwiększając wysokość elementu pasek ten kasuje w FF ale reszt elementów w tym głównym elemencie jest przesunięty o kilka pikseli. Tylko przez reset można to wyrównać, czy są inne sposoby. Może to wynik że element ma w sobie tabele?