Podstawy#
Resetowanie stylów#
Standard CSS definiuje początkowe wartości dla każdej właściwości. Będą one używane dla dokumentów HTML w chwili, kiedy żadne reguły CSS nie zostaną wprowadzone w arkuszach autora, użytkownika lub aplikacji klienckiej.
Wygląd dokumentu przy użyciu początkowych wartości stanowiłby zwykłą ścianę tekstu (przykład 1), dlatego też przeglądarki stosują domyślne style, dzięki którym całość otrzymuje formatowanie przynajmniej w podstawowym zakresie użyteczności (przykład 2). Jak widać różnica jest znacząca.
Style domyślne opisuje specyfikacja CSS 2.01, ale są one jedynie zaleceniem. Nie ma gwarancji, że każda przeglądarka na każdym systemie operacyjnym zastosuje identyczne style domyślne. Problem najbardziej dało się odczuć w przypadku starszych przeglądarek z rodziny IE, ale trzeba sobie zdawać sprawę, że może dotyczyć dowolnego programu. Większość przeglądarek stara się jak najwierniej naśladować to, co robiła przeglądarka Mosaic. Tak, Mosaic, ponieważ ją starano się naśladować w przeglądarce Netscape 1.0, którą próbowano naśladować w IE3 itd. Jeśli dobrze przyjrzysz się domyślnym stylom, to spostrzeżesz, że można w nich znaleźć wiele rzeczy takich samych jak we wczesnych wersjach beta przeglądarki Mosaic.
Rozwiązaniem powyższego problemu są style resetujące, nazywane też stylami zerującymi lub stylami adaptacyjnymi. Są to reguły umieszczane na samym początku w naszym własnym arkuszu CSS (zewnętrznym lub wewnętrznym), które ustawiają spójny wygląd dla wszystkich elementów (X)HTML. Dzięki temu, zgodnie z zasadami kaskady, nadpiszemy wszystkie style pochodzące z przeglądarek (oprócz reguł z adnotacją ważności).
Najprostszą z takich reguł jest:
* {margin:0; padding:0;}Wiele osób używa tej techniki, ponieważ jest prosta. Niektórym jednak nie odpowiada zerowanie wszystkich elementów - bo dotyczy także elementów formularzy, takich jak pola tekstowe czy pola wyboru. Ponieważ aktualnie przeglądarki bardzo różnie obsługują CSS dla kontrolek formularzy (a niektóre w ogóle tego nie robią), wyzerowanie wszystkich elementów w celu ujednolicenia formatowania może w tym przypadku dać skutek odwrotny od zamierzonego. W związku z tym utworzono bardziej skomplikowane arkusze resetujące.
Nie istnieje doskonały zestaw stylów resetujących - większość deweloperów ma swoje własne warianty, opracowane na podstawie gotowych projektów i kilku osobistych preferencji popartych doświadczeniem. Z biegiem czasu każdy powinien skompletować swój własny arkusz resetujący. Warto przeanalizować następujące gotowce:
- Reset Styles - Erick Meyer
- Reworked Reset - Erick Meyer (jak wyżej, ale z poprawkami)
- CSS Tools: Reset CSS - Erick Meyer (ostatnia wersja, z uwzględnieniem nowych elementów HTML5)
- HTML5 Reset Stylesheet - HTML5 Doctor (jak wyżej, ale z modyfikacjami)
- Yahoo! YUI 3 CSS Reset (opis autora)
- Normalize.css (opis autora, opis z Yahoo!, opis z Pure)
- I wiele więcej
Dopiero za regułami resetującymi powinniśmy umieszczać kolejne polecenia CSS nadające dokumentom właściwą prezentację. Niektórzy stosują osobne pliki CSS dla reguł resetujących i właściwych reguł, choć w przypadku kodu produkcyjnego wypadałoby wszystkie pliki połączyć w jeden, co wyeliminuje zbędne żądania HTTP. Cały proces można zautomatyzować gotowymi narzędziami lub własnymi skryptami.
Warto zapoznać się z ciekawym artykułem "Style CSS: resetować, czy nie resetować – oto jest pytanie".
Alternatywy#
Resetowanie stylów można przeprowadzić także przy użyciu nowej właściwość all, co zauważone zostało przez niektórych webdeweloperów.
Prosty przykład dla przywrócenia początkowych wartości we wszystkich elementach wewnątrz ciała dokumentu:
body * {all: initial;}
/* lub */
body * {all: unset;}Specjalnie zawęziłem reguły do elementów wewnątrz <body>, co ma zagwarantować, że zawartość elementów wewnątrz <head> pozostanie ukryta. W przeciwnym razie polecenia umieszczone w znacznikach takich jak <title>...</title>, <style>...</style> lub <script>...</script> zostałyby wyświetlone.
Właściwość all może być przydatna, ale pod warunkiem dokładnego zrozumienia działania wartości initial i unset. Tak czy inaczej będzie trzeba z powrotem poustawiać niektóre kluczowe właściwości, jak np. display, wygląd kontrolek formularzy może ulec "zepsuciu" (ze względu na użycie uniwersalnego selektora *), zatem własny arkusz resetujący wciąż wydaje się najwłaściwszym rozwiązaniem.