Reset-Stylesheet

Reset-Stylesheet

Ein Reset-Stylesheet (oder auch: CSS Reset) ist eine Sammlung von Stylesheet-Definitionen, die Formatierungen für HTML-Elemente vereinheitlichen oder zurücksetzen.

Inhaltsverzeichnis

Definition

Ein CSS-Reset ist abzugrenzen von einem CSS-Framework. Ein Reset-Stylesheet hat lediglich die Aufgabe, Basisformatierungen zurückzusetzen, ohne dem Benutzer eine API bereitzustellen. Oftmals sind CSS-Resets Teile eines CSS-Frameworks.

Problematik

Jeder Browser hat unterschiedliche Standardeinstellungen für sämtliche HTML-Elemente. So ist etwa die Farbe für Linktexte im Internet Explorer 7 eine andere als die im Internet Explorer 8[1]. Auch Abstandsdefinitionen oder Textformatierungen können sich je nach Browser unterschiedlich auswirken: Der Abstand eines Paragraph-Elements unterscheidet sich im Internet Explorer beispielsweise vom Mozilla Firefox. Wenn ein Entwickler nun für ein Element keine eigenen Styleangaben definiert hat, so benutzt der jeweilige Browser sein Basisstylesheet. Dies kann unvorhergesehene Auswirkungen auf das Gesamtlayout zur Folge haben, welche besonders bei pixelgenauen Designs weitreichende Folgen haben können.

Das Zurücksetzen der Stylesheet-Definitionen

Etwa 2004 wurden erste sogenannte Stylesheet-Resets veröffentlicht[2], welche sich auf das Zurücksetzen der Abstandsangaben beschränkten:

* {
    padding:0;
    margin:0;
}

Dieses Verfahren wurde von verschiedenen Entwicklern nach und nach verfeinert, so dass nur ausgewählte und sinnvolle Elemente auf grundlegende Angaben zurückgesetzt wurden.

Bekannte Stylesheet-Resets

  • Ein bekanntes CSS-Reset ist Teil von Yahoo! User Interface (YUI)[3]
  • Eric Meyers CSS Reset ist ebenfalls sehr bekannt und setzt nahezu jedes Element auf einen unformatierten Zustand[4]

Vorteile

Mit der Hilfe eines Stylesheet-Resets haben Entwickler die volle Kontrolle über das Aussehen und die Positionierung der HTML-Elemente innerhalb des Markups. Im Idealfall sieht die erstellte Webseite in jedem Browser exakt identisch aus.

Nachteile

  • Viele CSS-Resets entfernen jede Formatierung eines HTML-Elements. So hat beispielsweise selbst das strong-Element, welches hervorgehobenen bzw. fettgedruckten Text auszeichnet, in Form und Farbe oft keinen Unterschied mehr zum Rest des Textes. Der Entwickler muss sich also um jeden designrelevanten Parameter seines HTML-Codes kümmern.
  • Je nach Umfang eines Resets entsteht eine höhere Ladezeit, da die bestehende Stylesheet-Datei entweder erweitert oder die Ressource zusätzlich geladen werden muss.

Weblinks

Einzelnachweise

  1. http://www.iecss.com/
  2. http://sixrevisions.com/css/the-history-of-css-resets/
  3. http://yuilibrary.com/yui/docs/cssreset/
  4. http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

Wikimedia Foundation.

Игры ⚽ Нужно решить контрольную?

Schlagen Sie auch in anderen Wörterbüchern nach:

  • 960 Grid System — Autor Nathan Smith http://960.gs/ Información general Género Framewor …   Wikipedia Español

  • Cascading Style Sheets — Vorlage:Infobox Dateiformat/Wartung/MagischeZahl fehltVorlage:Infobox Dateiformat/Wartung/Website fehlt Cascading Style Sheets (CSS) Vorlage:Infobox Dateiformat/Wartung/Screenshot Format …   Deutsch Wikipedia

  • Cross-Browser — bezeichnet die Fähigkeit von in Webseiten eingebetteten Inhalten (insbesondere Cascading Style Sheets (CSS) und JavaScript), unabhängig vom jeweiligen Browsertyp und Betriebssystem die gleiche Ausgabe zu erzeugen beziehungsweise sich… …   Deutsch Wikipedia

  • HTML element — This article is about the HTML elements in general. For information on how to format Wikipedia entries, see Help:Wiki markup and Help:HTML in wikitext HTML HTML and HTML5 Dynamic HTML XHTML XHTML Mobile Profile and C HTML Canvas element Character …   Wikipedia

  • Comparison of layout engines (Cascading Style Sheets) — Cascading Style Sheets CSS Animations Dynamic CSS Comparison of layout engines Comparison of stylesheet languages Internet Explorer box model bug CSS Zen Garden The Zen of CSS Design CSSTidy Style sheet Tableless web design Holy Grail (web… …   Wikipedia

  • Comparison of layout engines (Document Object Model) — The following tables compare DOM compatibility and support for a number of layout engines. Please see the individual products articles for further information. This article is not all inclusive or necessarily up to date. Unless otherwise… …   Wikipedia

  • OpenID — The OpenID logo OpenID is an open standard that describes how users can be authenticated in a decentralized manner, eliminating the need for services to provide their own ad hoc systems and allowing users to consolidate their digital… …   Wikipedia

  • Blueprint (CSS framework) — Blueprint is a framework designed to cut down development time when working with Cascading Style Sheets. Features Blueprint s README file lists the following features as being provided out of the box:* An easily customizable grid * Sensible… …   Wikipedia

Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”