Używanie Normalize.css do jednorodnego rozwoju

Kompatybilność z przeglądarkami to duża część dostępności w sieci. Deweloperzy muszą wziąć pod uwagę wariancja ich odbiorców i wersji przeglądarki, które wymagają wsparcia. Chociaż resetowanie CSS jest opcją, większość deweloperów woli Normalize.css ze względu na swoją prostotę i kompatybilność krzyżową we wszystkich nowoczesnych przeglądarkach internetowych.

W tym poście opiszę podstawy Normalizacji i sposób, w jaki porównuje się z ogólnymi resetami CSS. To nie jest skomplikowana biblioteka i zrozumienie tego nie powinno zająć więcej niż kilka godzin. Ale kluczem do Normalizacji jest nauka w jaki sposób wdrożyć go właściwie i rozsądnie.

Resetowanie przeglądarki a normalizacja

Przez lata korzystałem ze spersonalizowanej wersji resetów CSS Erica Meyera. To wystarczyło do większości moich projektów i nie spowodowało większych problemów. Jednak Normalize zmienił mój widok resetowania, ponieważ działa inaczej niż reset CSS. Ważne jest, abyś rozumiał różnice.

Pomyśl o normalizacji jako odzież stosowana konsekwentnie do wszystkich przeglądarek, i pomyśl o Reset CSS jako detonacja termojądrowa we wszystkich przeglądarkach.

Normalizuj nagłówki stylów i formatów, akapity, cytaty blokowe i elementy wspólne, aby one działały wyglądają identycznie (lub wystarczająco blisko) we wszystkich obsługiwanych przeglądarkach. Resetowanie CSS całkowicie wyczyści łupek, więc są brak wartości domyślnych na wszystko.

Z resetem CSS nagłówki mogą wyglądać tak samo jak akapity; elementy nie mają żadnego dopełnienia, marginesów ani odstępów. Z resetem CSS musisz podać nowy kod poprawić styl. Z Normalize dostajesz wstępnie zaprojektowany styl które można zbudować.

Czy jeden z nich jest lepszy od drugiego? Jest to bardzo dyskutowany temat, chociaż jeden punkt argumentu stwierdza, że normalizuje działa lepiej dla kompatybilności i produkuje mniejsze rozmiary plików.

“Musiałbym argumentować, że normalizacja jest lepsza niż resetowanie. Spowoduje to zmniejszenie transferu CSS przez przewód, lepsze wykorzystanie domyślnych ustawień UA i lepsze zrozumienie sposobu, w jaki elementy są Oznaczało do wyświetlenia.”

Niezależnie od tego, czy zakochasz się w normalizacji, czy preferujesz typowy reset, ważne jest, aby przynajmniej zrozumieć obie strony i wybrać to, co pasuje najlepiej. Bardzo niewielu programistów zaczyna kodowanie od podstaw, więc Normalize lub CSS reset jest prawie wymagany do nowoczesnego rozwoju frontendu.

Jeśli chcesz spróbować zresetować CSS, wybierz kilka popularnych opcji:

Resety Erica Meyera
Reset HTML5
Resetowanie HTML5Doctor

Normalizuj konfigurację

Normalizujący twórca Nicolas Gallagher napisał wstępny post prowadzący z tym stwierdzeniem:

“Normalize.css to mały plik CSS, który zapewnia lepszą spójność między przeglądarkami w domyślnym stylu elementów HTML. Jest to nowoczesna, gotowa do HTML5 alternatywa dla tradycyjnego resetowania CSS.”

Z biegiem lat stała się zaufaną biblioteką wykorzystywaną przez programistów na całym świecie. Normalizacja została nawet w pewnym stopniu wykorzystana w Bootstrap i Pure CSS.

Istnieją dwa sposoby użycia Normalize w projekcie: edytuj źródło, aby dostosować własny arkusz stylów Normalize, lub użyj go jako bazy i dodaj style na górze.

Pierwsza z nich to strategia wybierania i wybierania, w której przechodzisz przez plik Normalize.css i usuwasz wszystko, czego nie potrzebujesz do tworzenia własnego niestandardowego arkusza stylów. Jest to najlepsze rozwiązanie dla każdego projektu, aby utrzymać niski rozmiar plików.

Alternatywnie niektórzy programiści dołączają cały plik Normalize.css i dodatkowo budują własny arkusz stylów. Pełny arkusz stylów Normalize obejmuje 420+ linii kodu, co odpowiada ~ 6,8 KB bez kompresji.

Żadna z tych metod nie jest lepsza od drugiej i warto śledzić wszystko, co działa najlepiej dla każdego projektu lub preferowany przepływ pracy.

Aby rozpocząć, pobierz kopię Normalize z GitHub lub hostuj ją z zewnętrznego CDN. Możesz także pobrać najnowszą wersję Normalize bezpośrednio z NPM w następujący sposób:

npm install --save normalize.css

Jeśli nie chcesz pobierać żadnych plików, możesz nawet utworzyć nowy projekt CodePen, który można dołączyć Normalizuj jednym kliknięciem.

Ponieważ Normalize jest modułowy, możesz tymczasowo usuwać sekcje, a nawet tworzyć własne niestandardowe wersje Normalize. Następnie możesz rozpocząć każdy projekt z wybranymi fragmentami, takimi jak elementy wyświetlania HTML5, usuwając style dla osadzonej zawartości.

Każda reguła Normalize ma odpowiedni komentarz CSS wyjaśniający, co robi i jakie problemy / błędy rozwiązuje. Niektóre są oczywiste, jak ustawienie Blok wyświetlacza na nowszych elementach HTML5.

Inne są mniej oczywiste, jak ten kod SVG, który ukrywa przepełnienie w Internet Explorerze:

svg: not (: root) overflow: hidden;

Gorąco polecam przeglądanie arkusza stylów, aby zobaczyć dokładnie, jak działa i dowiedzieć się, czy Normalize będzie odpowiedni dla twojego projektu.

Normalize.css In Web Design

Najnowsza wersja Normalize v4.0 oferuje szeroką obsługę przeglądarki.

Chrome (ostatnie dwa)
Edge (ostatnie dwa)
Firefox (ostatnie dwa)
Firefox ESR
Internet Explorer 8+
Opera (ostatnie dwa)
Safari 6+

Z tego, co mogę powiedzieć, Normalize może obsługiwać starsze wersje przeglądarek dzięki stałym aktualizacjom, takim jak Firefox. Ale “urzędnik” Wsparcie obejmuje tylko dwie najnowsze wersje Chrome / Edge / FF / Opera.

Również IE6 + i Safari 4+ są obsługiwane przez Normalize v1, ale ta wersja nie jest już aktualizowana.

Ważne jest, aby sprawdzić wersje przeglądarki za pomocą narzędzia takiego jak Google Analytics. Pozwoli to lepiej zrozumieć, czy Normalize może być użytecznym narzędziem do nowoczesnego projektowania stron internetowych.

Dalsze zasoby

Nie ma wiele do nauczenia o normalizacji, więc większość nauki odbywa się poprzez działanie.

I szczerze mówiąc, nie ma wiele do wyjaśnienia, że nie można odebrać, czytając arkusz stylów i kopiując / zmieniając kod w razie potrzeby. Ale jeśli szukasz innych istotnych informacji, dodałem kilka linków poniżej.

Powiązane artykuły

Nicolas Gallagher: O Normalize.css
Wprowadzenie do HTML5 Boilerplate
Normalize.css vs Reset.css: Którego użyć?

Intro Filmy

Korzystanie z normalizacji CSS
Resetowanie i normalizowanie przez Envato
Nicolas Gallagher - Myślenie poza Skalowalnym CSS