Krzysztof Zawadzki – blog

Styl domyślny

Każda przeglądarka internetowa ma fabrycznie zdefiniowany, domyślny styl css (browser default/built-in stylesheet). Kod xhtml, który nie posiada przypisanego stylu jest renderowany z wykorzystaniem stylu domyślnego. Oczywiście taki stan rzeczy przewiduje specyfikacja css (stąd nazwa kaskadowy). Jest to pozytywna cecha, gdyż dokument xhtml (nie zawierający stylu) wyświetla się nam w wersji minimalistycznej i użytecznej, a nie jako jeden długi ciąg znaków.

Niestety w wielu przypadkach “defaultowe” style przeglądarek znacząco różnią się od siebie (szczególnie jeśli chodzi o elementy blokowe). Prowadzi to do niejednolitego wyglądu stron w zależności od przeglądarki. Szczególną niechęć webdesignerów w tej kwestii zyskały sobie różne wersje Internet Explorera, ale i na nie znalazł się sposób.

Metody restartowania stylu

Jedną z metod zapobiegania różnicom w wyświetlaniu treści jest resetowanie stylu, czyli nadpisanie stylu domyślnego stylem własnym (w kaskadzie styl domyślny jest najniżej w hierarchii). W sieci można znaleźć wiele tzw. resetów. Niektóre z nich są bardzo proste, ale i nie pozbawione wad, inne skomplikowane i tym samym niepotrzebnie rozbudowane. Według mnie ciekawą i wyważoną propozycją jest reset autorstwa Erica Meyera (eksperta css) prezentowany poniżej:

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: "" "";
}

Reset ten oprócz niwelowania różnic elementów blokowych, zmienia też elementy liniowe określając standardowy krój czcionki.

Selektor uniwersalny

Nie polecam korzystania z selektora uniwersalnego (*) przy resetowaniu. Selektor wybiera wszystkie elementy, blokowe i liniowe, również te, dla których nie ma potrzeby ustawiać np. marginesu. Może się to przekładać na szybkość renderowania strony. W przypadku korzystania z formularzy można spodziewać się efektu “ścięcia” niektórych pól.

Własny reset

Warto podczas pracy tworzyć i usprawniać własny reset, który oczywiście może bazować na gotowych rozwiązaniach.

Znajomość domyślnych stylów przeglądarek oraz sposobów na ich “zneutralizowanie” jest elementem kluczowym w tworzeniu stron działających w różnych przeglądarkach. Reset znacznie ułatwia pracę i może zaoszczędzić godziny spędzone na szukaniu przyczyny niespójności stron przy kodowaniu.