Normalize.css - nie resetuj, normalizuj?
Podejść do resetowania stylów CSS przed rozpoczęciem danego projektu jest niemal tyle, ilu front-end developerów. Chyba każdy ma swój własny sposób na rozpoczęcie nowego zadania, czy to posiadając jakiś gotowy szkielet, czy tworząc go sobie z pamięci bądź kopiując z poprzednich projektów. Normalize.css zmienia podejście do tego problemu i zamiast resetować style, zaleca ich ujednolicenie.
Resetowanie
Zazwyczaj nasz przykładowy plik reset.css sprowadza się do zresetowania różnic pomiędzy przeglądarkami. Klasycznym do bólu jest przykład:* { margin: 0; padding: 0; }
. Dzięki takiemu zabiegowi wszystkie (użycie gwiazdki) elementy DOM dostają zerowy margin i padding, niwelując różne, domyślne ustawienia przeglądarek. Ustawiamy sobie img { border: 0 }
dla obrazków, by uniknąć niepotrzebnego bordera, czy *:focus { outline: none; }
, by pozbyć się wykropkowanego obramowania. Jest całe mnóstwo mniej lub bardziej istotnych resetów, każdy stosuje je według uznania, dopasowując je do danego projektu. Najpopularniejszym jest chyba reset, którego autorem jest Eric Meyer. Listę najciekawszych rozwiązań znaleźć można w serwisie CSSReset.com.Normalizacja
Tu podejście jest nieco inne. Co prawda nadal mamy na starcie plik CSS, który porządkuje nam style w projekcie, jednak zamiast zerować, ustawiamy wartości domyślne. Dzięki temu rozwiązaniu nagłówki (H1
, H2
...) mają już zdefiniowaną wielkość czcionki, listy (UL
) odpowiednie wcięcia podczas zagnieżdżania, a formularze spójny wygląd. Jeśli chcemy zapoznać się dokładniej z całą listą modyfikacji, bez problemu przebrniemy przez plik normalize.css, ponieważ zawiera on wiele przydatnych komentarzy. Dodatkowo możemy obejrzeć demo wyglądu poszczególnych elementów z zaaplikowanymi stylami. Autorzy tego rozwiązania, Nicolas Gallagher oraz Jonathan Neal na stronie projektu tłumaczą dlaczego to podejście jest według nich lepsze od zwykłych resetów: zatrzymują przydatne wartości domyślne, ujednolicają wygląd dużej liczby elementów, poprawiają najpopularniejsze błędy i nieścisłości silników renderujących przeglądarek, zwiększają użyteczność, a przede wszystkim tłumaczą dokładnie każdą linijkę kodu.
1shpyo dnia 01.07.2011 o 12:53: