Normalize.css jest alternatywą dla resetu CSS. Zapewnia wysoki stopień spójności w przeglądarkach na domyślnym stylu elementów HTML. Normalize.css to nowoczesna, premium alternatywa dla HTML5 (http://necolas.github.io/normalize.css/）
Zarówno normalize.css, jak i reset.css to arkusze stylów do resetowania kart przeglądarki
Celem tworzenia normalize.css jest następujący:
Chroń domyślne style przeglądarki zamiast całkowicie je usuwać
Style uogólnione: Dostępne dla większości elementów HTML
Napraw błędy przeglądarki i zapewnij spójność między przeglądarkami
Optymalizuj użyteczność CSS: Skorzystaj z kilku wskazówek
Wyjaśnij kod: użyj komentarzy i szczegółowej dokumentacji
Normalize.css obsługuje szeroki zakres przeglądarek, w tym przeglądarki mobilne, i uogólnia elementy HTML5, typografię, listy, osadzone treści, formularze i tabele. Chociaż projekt opiera się na uogólnieniach, stosowaliśmy bardziej praktyczne domyślne rozwiązania tam, gdzie to było stosowne.
Normalizacja vs Reset
1. Normalize.css Chronione wartościowe niewypłacenia
Reset wymusza elementy do tego samego efektu wizualnego, narzucając domyślny styl niemal wszystkim elementom. Dla porównania, Normalize.css zachowuje wiele domyślnych stylów przeglądarki. Oznacza to, że nie musisz już zmieniać wszystkich typowych elementów typografii. Gdy element ma różne domyślne ustawienia w różnych przeglądarkach, Normalize.css dążyć do utrzymania tych stylów spójnych i jak najbardziej spójnych z nowoczesnymi standardami.
2. Normalize.css Naprawiono błąd w przeglądarce
Naprawia typowe błędy w przeglądarkach desktopowych i mobilnych. To często przekracza możliwości Resetu. W tym zakresie problemy Normalize.css naprawione obejmują ustawienia wyświetlania elementów HTML5, problemy z rozmiarem czcionki przy wstępnie sformatowanym tekście, przepełnienie SVG w IE9 oraz wiele błędów związanych z formularzami występujących w różnych przeglądarkach i systemach operacyjnych.
3. Normalize.css Nie sprawi, że narzędzia do debugowania będą zagracone
Jednym z najbardziej irytujących aspektów korzystania z Resetu jest duży łańcuch dziedziczenia w narzędziu do debugowania przeglądarki, co pokazano na poniższym obrazku. W Normalize.css nie będzie takiego problemu, ponieważ bardzo ostrożnie stosujemy multi-selektory w naszych wytycznych i celowo stylizujemy element docelowy.
4. Normalize.css jest modułowy
Projekt został podzielony na powiązane, ale oddzielne części, co ułatwia i jasno pokazuje, które elementy są ustawione na określone wartości. Pozwala to selektywnie usuwać elementy, których nigdy nie użyjesz (np. uogólnienia form).
5. Normalize.css Posiada szczegółową dokumentację
Normalize.css kod opiera się na szczegółowych i kompleksowych badaniach i testach międzyprzeglądarkowych. Ten plik zawiera szczegółowe opisy kodu oraz dalsze instrukcje na Github Wiki. Dzięki temu możesz dowiedzieć się, co dokładnie robi każda linia kodu, dlaczego ją napisałeś, jakie są różnice między przeglądarkami i łatwiej testować własną.
Jak korzystać z normalize.css
Najpierw zainstaluj lub pobierz Normalize.css z Githuba, a potem są dwa główne sposoby korzystania z niego.
Strategia 1: Wykorzystaj normalize.css jako podstawę CSS dla własnych projektów, dostosowując wartości stylowe do potrzeb projektanta.
Strategia 2: Zaimportuj normalize.css kod źródłowy i buduj na nim, nadpisując domyślne kody własnym CSS, gdy zajdzie taka potrzeba.
Pobranie pliku CSS:https://necolas.github.io/normalize.css/8.0.0/normalize.css
|
Opublikowano 27.07.2018 14:49:36
|
|
|
|
