Jaka jest różnica między Normalize.css a Reset CSS?

Wiem, czym jest reset CSS, ale ostatnio słyszałem o tej nowej rzeczy o nazwie Normalize.css

Jaka jest różnica między Normalize.css a Reset CSS ?

Jaka jest różnica między normalizacją CSS a resetowaniem CSS?

Czy to tylko nowe słowo „buzz” dla resetowania CSS?

Pracuję na normalize.css.

Główne różnice to:

1. Normalize.css zachowuje przydatne wartości domyślne zamiast „cofania stylu” wszystkiego. Na przykład, elementy podoba suplub sub„tylko praca” po tym normalize.css (i faktycznie bardziej wytrzymałe), podczas gdy są one wizualnie nie do odróżnienia od zwykłego tekstu po tym reset.css. Zatem normalize.css nie nakłada na ciebie wizualnego punktu początkowego (homogenizacji). To może nie odpowiadać każdemu gustowi. Najlepiej jest poeksperymentować z obydwoma i sprawdzić, które żele z twoimi preferencjami.

2. Normalize.css naprawia niektóre typowe błędy, które są poza zakresem dla reset.css. Ma szerszy zakres niż reset.css, a także zapewnia poprawki błędów dla typowych problemów, takich jak: ustawienia wyświetlania elementów HTML5, brak fontdziedziczenia według elementów formularza, poprawianie font-sizerenderowania pre, przepełnienie SVG w IE9 i buttonbłąd stylizacji w iOS.

3. Normalize.css nie zaśmieca narzędzi programistycznych. Częstym problemem podczas korzystania z reset.css jest duży łańcuch dziedziczenia wyświetlany w narzędziach do debugowania CSS przeglądarki. To nie jest taki problem z normalize.css ze względu na ukierunkowane style.

4. Normalize.css jest bardziej modułowy.Projekt jest podzielony na stosunkowo niezależne sekcje, co ułatwia potencjalne usuwanie sekcji (takich jak normalizacje formularzy), jeśli wiesz, że nigdy nie będą one potrzebne Twojej witrynie.

5. Normalize.css ma lepszą dokumentację. Kod normalize.css jest udokumentowany zarówno wewnętrznie, jak i bardziej kompleksowo na Wiki GitHub . Oznacza to, że możesz dowiedzieć się, co robi każdy wiersz kodu, dlaczego został uwzględniony, jakie są różnice między przeglądarkami i łatwiej uruchomić własne testy. Projekt ma na celu edukację użytkowników w zakresie domyślnego renderowania elementów przez przeglądarki i ułatwienie im udziału w zgłaszaniu ulepszeń.

Bardziej szczegółowo o tym napisałem w artykule o normalize.css

Główną różnicą jest to, że:

• Resetowanie CSS ma na celu usunięcie wszystkich wbudowanych stylów przeglądarki. Standardowe elementy, takie jak H1-6, p, strong, em, i tak dalej, wyglądają dokładnie tak samo, bez żadnej dekoracji. Następnie powinieneś samodzielnie dodać całą dekorację .

• Normalize CSS ma na celu zapewnienie spójności wbudowanego stylu przeglądarki we wszystkich przeglądarkach. Elementy takie jak H1-6 będą wyglądać pogrubione, większe i tak dalej w spójny sposób w różnych przeglądarkach. Następnie należy dodać tylko różnicę w dekoracji, jakiej potrzebuje projekt.

Jeśli Twój projekt a) jest zgodny z typowymi konwencjami dla typografii i tak dalej, oraz b) Normalize.css działa dla Twojej grupy docelowej, to użycie Normalize.CSS zamiast resetu CSS sprawi, że Twój własny CSS będzie mniejszy i szybszy do napisania.

Normalize.css to głównie zestaw stylów, oparty na tym, co według jego autora wyglądałoby dobrze i sprawia, że ​​wygląda spójnie w różnych przeglądarkach. Zresetuj zasadniczo usuwa stylizację z elementów, dzięki czemu masz większą kontrolę nad stylizacją wszystkiego.

Używam obu.

Niektóre style z Reset, niektóre z Normalize.css. Na przykład z Normalize.css istnieje styl zapewniający, że wszystkie elementy wejściowe mają tę samą czcionkę, co nie występuje (między wprowadzaniem tekstu a obszarem tekstowym). Reset nie ma takiego stylu, więc wejścia mają różne czcionki, co zwykle nie jest pożądane.

Zasadniczo, użycie dwóch plików CSS ma lepszą pracę z „wyrównaniem” wszystkiego;)

pozdrowienia!

Pierwsza reset.cssto najgorsza biblioteka, której możesz użyć, ponieważ usuwa ona standardową strukturę HTML i wyświetla wszystko, co piszesz jako tekst, po przypisaniu wartości marginesu marginesu i innych atrybutów 0. Na przykład przekonasz się, że <H1>będzie taki sam jak<H6> .

Z drugiej strony Normalize.cssużywa standardowej struktury, a także naprawia prawie wszystkie istniejące w niej błędy. Na przykład rozwiązuje problem z wyświetlaniem formularza z jednej przeglądarki do drugiej. Normalizuj naprawia to, modyfikując te funkcje, aby elementy były wyświetlane tak samo we wszystkich przeglądarkach.

Cóż, z jego opisu wynika, że ​​próbuje on zachować domyślny styl agenta użytkownika we wszystkich przeglądarkach, zamiast usuwać wszystkie domyślne style, tak jak zresetowałoby to.

Zachowuje przydatne ustawienia domyślne, w przeciwieństwie do wielu resetów CSS.

resetowanie wydaje się koniecznością, aby spełnić niestandardowe specyfikacje projektowe, szczególnie w przypadku złożonych projektów nieobjętych płytą grzejną. Wygląda na to, że normalizacja jest dobrym sposobem na kontynuację programowania czysto internetowego, ale często strony internetowe są mariażem między programowaniem internetowym a regułami projektowania UI / UX.

Czasami najlepszym rozwiązaniem jest użycie obu. Czasami nie należy używać żadnego z nich. A czasem używa się jednego lub drugiego. Jeśli chcesz zresetować wszystkie style, w tym marginesy i marginesy we wszystkich przeglądarkach, użyj reset.css. Następnie samodzielnie zastosuj wszystkie dekoracje i stylizacje. Jeśli po prostu lubisz wbudowane style, ale chcesz więcej synchronizacji między przeglądarkami, tj. Normalizacji, skorzystaj z normalize.css. Ale jeśli wybierzesz zarówno reset.css, jak i normalize.css, najpierw połącz arkusz stylów reset.css, a następnie arkusz stylów normalize.css (natychmiast). Czasami nie zawsze jest kwestia, która z nich jest lepsza, ale kiedy użyć której z nich, a kiedy użyć obu, a kiedy nie. MOIM ZDANIEM.

Odpowiedź na to pytanie była już kilkakrotnie, dla każdego z nich krótko podsumuję, przykład i spostrzeżenia z września 2019 r .:

• Normalize.css - jak sama nazwa wskazuje, normalizuje style w przeglądarkach dla ich aplikacji klienckich, tzn. Czyni je takimi samymi we wszystkich przeglądarkach, ponieważ domyślnie są one nieco inne.

Przykład : <h1>tag wewnątrz <section>domyślnie Google Chrome zmniejszy rozmiar <h1>tagu do „oczekiwanego” . Z drugiej strony Microsoft Edge tworzy „oczekiwany” rozmiar <h1>znacznika. Normalize.css sprawi, że będzie spójny.

Obecny status : repozytorium npm pokazuje, że pakiet normalize.css ma obecnie ponad 500 000 pobrań tygodniowo. Gwiazdy GitHub w projekcie repozytorium mają ponad 36 tys.

• Resetuj CSS - jak sama nazwa wskazuje, resetuje wszystkie style, tzn. Usuwa wszystkie style agenta użytkownika przeglądarki.

Przykład : zrobiłby coś takiego poniżej:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Obecny status : jest znacznie mniej popularny niż Normalize.css, pakiet reset-css pokazuje, że jest to około 26 000 pobrań tygodniowo. Gwiazdy GitHub mają tylko 200, co można zauważyć w repozytorium projektu .