Was ist der Unterschied zwischen Normalize.css und Reset CSS?

Question

Ich weiß, was CSS Reset ist, aber vor kurzem habe ich von dieser neuen Sache namens Normalize.css gehört

Was ist der Unterschied zwischen dem Normalisieren.css y CSS zurücksetzen ?

Was ist der Unterschied zwischen der Normalisierung von CSS und dem Zurücksetzen von CSS?

Ist das nur ein neues Modewort für den CSS-Reset?

Answer 1

Die Rückstellung scheint eine Notwendigkeit zu sein, um kundenspezifische Konstruktionsspezifikationen zu erfüllen, insbesondere bei komplexen Konstruktionsprojekten, die nicht auf Kesselplatten basieren. Es hört sich so an, als ob die Normalisierung ein guter Weg ist, um mit der reinen Webprogrammierung im Hinterkopf vorzugehen, aber oft sind Websites eine Mischung aus Webprogrammierung und UI/UX-Designregeln.

Answer 2

Diese Frage wurde bereits mehrfach beantwortet, ich fasse sie jeweils kurz zusammen, mit einem Beispiel und den Erkenntnissen ab September 2019:

• Normalisieren.css - wie der Name schon sagt, es normalisiert Stile in den Browsern für ihre User Agents, d.h. sie sind in allen Browsern gleich, weil sie standardmäßig leicht unterschiedlich sind.

Beispiel : <h1> Tag innen <section> Google Chrome verkleinert standardmäßig die "erwartete" Größe von <h1> Tag. Microsoft Edge hingegen macht die "erwartete" Größe von <h1> Tag. Normalize.css wird es konsistent machen.

Aktueller Stand : Das npm-Repository zeigt, dass normalize.css-Paket hat derzeit mehr als 500k Downloads pro Woche. GitHub Sterne in der Projekt des Repositorys sind mehr als 36k.

• CSS zurücksetzen - wie der Name schon sagt, es setzt zurück. alle Stile, d.h. es werden alle User-Agent-Stile des Browsers entfernt.

Beispiel : Es würde etwas Ähnliches wie das Folgende tun:

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

Aktueller Stand : Es ist viel weniger populär als Normalize.css, das reset-css Paket zeigt, dass es sich um etwa 26k Downloads pro Woche handelt. Die GitHub-Sterne sind nur 200, wie man an der Projektseite sehen kann Repository .

Answer 3

Manchmal ist es die beste Lösung, beides zu verwenden. Manchmal ist es auch keine. Und manchmal ist es die Verwendung des einen oder des anderen. Wenn Sie wollen, dass alle Stile, einschließlich margin und padding, in allen Browsern zurückgesetzt werden, verwenden Sie reset.css. Wenden Sie dann alle Dekorationen und Formatierungen selbst an. Wenn Ihnen die eingebauten Stile gefallen, Sie aber mehr browserübergreifende Synchronität, d. h. Normalisierungen, wünschen, verwenden Sie normalize.css. Wenn Sie sich jedoch dafür entscheiden, sowohl reset.css als auch normalize.css zu verwenden, verlinken Sie zuerst das Stylesheet reset.css und danach (sofort) das Stylesheet normalize.css. Manchmal geht es nicht darum, welches Stylesheet besser ist, sondern darum, wann man welches Stylesheet verwendet und wann man beide verwendet und wann man keines verwendet. IMHO.

Answer 4

Normalisieren.css

Normalize.css ist eine kleine CSS-Datei, die browserübergreifende Konsistenz bei der Standardgestaltung von HTML-Elementen bietet.

Das bedeutet, dass, wenn wir uns die W3C-Standards der von den Browsern angewandten Stile ansehen und es eine Inkonsistenz in einem der Browser gibt, die normalize.css Stile wird der Browser-Stil, der den Unterschied aufweist, korrigiert.

Aber in einigen Fällen können wir die fehlerhaften Browser nicht gemäß dem Standard reparieren, in der Regel wegen des IE oder EDGE. In diesen Fällen werden die Korrekturen in der Normalisierung die IE- oder EDGE-Stile auf den Rest der Browser anwenden.

Beispiel aus der Praxis

Chrome, Safari und Firefox rendern <h1> Tags, die sich innerhalb einer <article> / <aside> / <nav> / <section> Tag mit einer Schriftgröße, die kleiner ist als die eines unabhängigen Tags, und mit einer anderen Randgröße. Dies sind die User-Agent-Stile in Chrome, Safari und Firefox im Falle eines <h1> Tag innerhalb eines <article> / <aside> / <nav> / <section>

Tag

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
   margin-block-start: 0.83em;
   margin-block-end: 0.83em;
   }

Beispiel:

/* 
 Correct the font size and margin on `h1` elements within `section`  and `article` 
 contexts in Chrome, Firefox, and Safari.
 */
  h1 {  font-size: 2em;  margin: 0.67em 0;}

CSS zurücksetzen

Reset CSS verfolgt einen anderen Ansatz und besagt, dass wir die Standardstile des Browsers überhaupt nicht brauchen. Die Stile, die wir brauchen, werden wir im Projekt nach unseren Bedürfnissen definieren. CSS Reset" setzt also alle Stile zurück, die mit dem User Agent des Browsers geliefert werden.

Dieser Ansatz funktioniert im obigen Beispiel gut, da die <h1> a <h6> Standardstile: In den meisten Fällen wollen wir weder die Standardstile des Browsers font-size noch die Standardeinstellung des Browsers margin .

Hier ist ein Beispiel dafür, wie ein kleiner Teil von CSS Reset aussieht

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, 
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary, time, mark, audio, video {  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 100%;  
font: inherit;  
vertical-align: baseline; 
}

In der CSS-Reset-Methode werden alle HTML-Tags so definiert, dass sie keine Polsterung, keinen Rand, keinen Rahmen, die gleiche Schriftgröße und die gleiche Ausrichtung haben.

Das Problem mit CSS-Resets ist, dass sie hässlich sind: sie haben eine große Kette von Selektoren, und sie machen eine Menge von unnötigen Überschreibungen. Und was noch schlimmer ist, sie sind bei der Fehlersuche unlesbar.

Aber es gibt immer noch Stile, die wir lieber zurücksetzen, wie <h1> a <h6> , <ul> , <li> und so weiter.

Answer 5

Normalize.css : Jeder Browser kommt mit einigen Standard-CSS-Stile, die, zum Beispiel, fügen Sie Padding um einen Absatz oder Titel.Wenn Sie die normalize Stylesheet alle diese Browser-Standard-Regeln werden zurückgesetzt, so dass für dieses Beispiel 0px Padding auf Tags.Hier ist ein paar Links für weitere Details: https://necolas.github.io/normalize.css/ http://nicolasgallagher.com/about-normalize-css/