So funktioniert der CSS Reset

Bei der Suche nach den besten CSS-Praktiken im Jahr 2023, taucht in den Ergebnissen oft die CSS-Reset-Funktion auf. Dabei handelt es sich im Grunde um die Aufnahme eines Stylesheets in denIhrer Website, das die Standardstile der verschiedenen Browser zurücksetzt. Auf diese Weise wird eine einheitliche Darstellung der Website in allen Browsern gewährleistet. Es gibt zwei Arten von CSS-Resets:

 

 

 

 

Hard Resets: Sie entfernen alle Standardstile, die von den Browsern angewendet werden. Zum Beispiel:

 

* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}

 

/* Optional: Additional resets for specific elements */
body, figure {
margin: 0;
}

 

/* Remove list styling */
ul, ol {
list-style: none;
}

 

 

In diesem Beispiel:

*: targets all elements, margin, padding, border – set the properties to zero •
font: Preserves the default font styles.
vertical-align: Aligns elements to the baseline.
box-sizing: Includes padding and border in the element's total width and height.

 

Soft Resets: Sie entfernen die Stile nicht vollständig in allen Browsern, sondern versuchen, sie zu vereinheitlichen und konsistent zu machen. Die beliebteste unter den Soft-Resets ist die normalise.css. Sie kann von dieser Seite http://necolas.github.io/normalize.css/ heruntergeladen werden. Normalise.css behebt die browserübergreifenden Inkonsistenzen und bewahrt gleichzeitig die nützlichen Standardstile. Die Datei normalise.css kann entweder lokal oder über ein CDN in den Head verlinkt werden, oder der Code kann einfach am Anfang des Stylesheets eingefügt werden. Das Zurücksetzen von CSS ist immer noch weit verbreitet und wird als gute Praxis empfohlen, wird aber nicht mehr so häufig benötigt wie noch vor 10 Jahren. Heute sind die neuesten Versionen der beliebtesten Browser konsistenter als früher und weisen weniger Unterschiede bei der Darstellung von Websites auf.

 

 

Unsere Internetagentur München, Econcess, legt einen großen Wert auf ein aufgewecktes Design, um viele Kunden anzusprechen. Wenn Sie nun Interesse an einer Webseite für Ihre Firma haben, melden Sie sich gerne bei uns. Wir sind spezialisiert auf maßgeschneiderte Lösungen und bieten Ihnen professionelle Unterstützung bei der Realisierung Ihrer digitalen Projekte.