Jaka jest różnica między normalizacją.css i Reset CSS?

Wiem co to jest CSS Reset, ale ostatnio słyszałem o nowej rzeczy o nazwie Normalize.css

Jaka jest różnica między normalizacja.css i Reset CSS ?

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

Czy to tylko nowe słowo buzz dla CSS Reset?

Author: John Slegers, 2011-07-31
Source

7 answers

Pracuję nad normalizacją.css.

Główne różnice to:

  1. Normalizować.css zachowuje użyteczne wartości domyślne, a nie" odskocznia " wszystkiego. na przykład elementy takie jak sup LUB sub" po prostu działają " po włączeniu normalizacji.css (i są faktycznie bardziej wytrzymałe), podczas gdy są wizualnie nie do odróżnienia od zwykłego tekstu po włączeniu resetu.css. Więc normalizować.css nie nakłada na Ciebie wizualnego punktu początkowego (homogeniczności). To może nie być dla wszystkich smak. Najlepszą rzeczą do zrobienia jest eksperymentować z obu i zobaczyć, które żele z Twoich preferencji.

  2. Normalizować.css koryguje niektóre typowe błędy, które nie są możliwe do resetowania.css. ma szerszy zakres niż reset.css, a także zapewnia poprawki dla typowych problemów, takich jak: ustawienia wyświetlania elementów HTML5, brak dziedziczenia font przez Elementy formularza, korekta renderowania font-size dla pre, przepełnienie SVG w IE9 i błąd stylizacji button w iOS.

  3. Normalizować.css nie zaśmieca twoich narzędzi programistycznych. częste podrażnienie podczas używania resetu.css to duży łańcuch dziedziczenia, który jest wyświetlany w narzędziach do debugowania CSS przeglądarki. To nie jest taki problem z normalize.css ze względu na celowe stylizacje.

  4. Normalizować.css jest bardziej modułowy. projekt jest podzielony na stosunkowo niezależne sekcje, dzięki czemu można łatwo usunąć sekcje (takie jak formularz normalizacji), jeśli wiesz, że nigdy nie będą potrzebne twojej stronie.

  5. Normalizować.css ma lepszą dokumentację. normalizacja.kod css jest udokumentowany w wierszu, jak również bardziej wyczerpująco w GitHub Wiki . Oznacza to, że możesz dowiedzieć się, co robi każda linia kodu, dlaczego została włączona, jakie są różnice między przeglądarkami i łatwiej uruchomić własne testy. Projekt ma na celu edukowanie ludzi w jaki sposób przeglądarki domyślnie renderują elementy, i ułatwić im udział w zgłaszaniu ulepszeń.

Napisałem o tym bardziej szczegółowo w artykule o normalizacji.css

 735
Author: necolas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-31 22:00:14

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, itp., wyglądają dokładnie tak samo, nie mają żadnej dekoracji. Następnie należy dodać wszystkie dekoracje samodzielnie.

  • Normalizacja CSS ma na celu ujednolicenie stylów wbudowanych w przeglądarkę w różnych przeglądarkach. Elementy takie jak H1-6 pojawią się pogrubione, większe itp. w spójny sposób w przeglądarkach. Następnie powinieneś dodać tylko różnicę w dekoracji, której potrzebujesz.

Jeśli twój projekt a) jest zgodny z powszechnymi konwencjami dla typografii i tak dalej, oraz b) normalizować.css działa dla grupy docelowej, a następnie za pomocą normalizacji.CSS zamiast resetu CSS sprawi, że twój własny CSS będzie mniejszy i szybszy do napisania.

 223
Author: Jesper Mortensen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-01 10:06:28

Normalizacja.css to głównie zestaw stylów, oparty na tym, co jego autor uważał za dobre i sprawiał, że wyglądał spójnie we wszystkich przeglądarkach. Reset 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 normalizacji.css. Na przykład z normalizacji.css, istnieje styl, aby upewnić się, że wszystkie elementy wejściowe mają tę samą czcionkę, która nie występuje(między wejściami tekstowymi i tekstowymi). Reset ma nie ma takiego stylu, więc wejścia mają różne czcionki, co zwykle nie jest pożądane.

Więc bazowo, używanie dwóch plików CSS robi lepszą robotę 'wyrównując' Wszystko;)

Pozdrawiam!

 37
Author: ricmetalster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-31 20:23:08

Z opisu wynika, że stara się, aby domyślny styl agenta użytkownika był spójny we wszystkich przeglądarkach, zamiast usuwać wszystkie domyślne style jako reset.

Zachowuje użyteczne wartości domyślne, W przeciwieństwie do wielu resetów CSS.

 5
Author: dbb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-31 03:21:26

Resetowanie wydaje się koniecznością, aby spełnić niestandardowe specyfikacje projektowe, zwłaszcza w złożonych projektach bez kotła. Wygląda na to, że normalizacja jest dobrym sposobem, aby postępować z czysto internetowym programowaniem, ale często strony internetowe są mariażem między programowaniem internetowym a zasadami projektowania UI / UX.

 5
Author: user3170099,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-07 17:13:11

First reset.css jest najgorszą biblioteką, której możesz użyć, ponieważ usuwa standardową strukturę HTML i wyświetla wszystko, co piszesz, po przypisaniu wartości margin padding i innych atrybutów do 0. Na przykład przekonasz się, że <H1>, będzie tym samym co <H6>.

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

 5
Author: Nader Elsayed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-23 12:47:10

Czasami najlepszym rozwiązaniem jest użycie obu. Czasami jest to użycie ani. A czasami jest to użycie jednego lub drugiego. Jeśli chcesz zresetować wszystkie style, w tym marginesy i padding we wszystkich przeglądarkach, użyj Resetuj.css. Następnie zastosuj wszystkie dekoracje i stylizacje samodzielnie. Jeśli po prostu lubisz wbudowane stylizacje, ale chcesz więcej synchronizacji między przeglądarkami, np. normalizacji, użyj normalizacji.css. Ale jeśli zdecydujesz się użyć obu reset.css i normalizacji./ align = "left" / csscss najpierw arkusz stylów, a potem normalizacja.arkusz stylów css (natychmiast). Czasami nie zawsze jest to kwestia, która jest lepsza, ale kiedy użyć który z nich versus kiedy używać obu versus kiedy używać żadnego. IMHO.

 0
Author: Sean Tank Garvey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-24 23:41:00