Reset stylesheet

from Wikipedia, the free encyclopedia

A reset stylesheet (also: CSS reset ) is a collection of stylesheet definitions that unify or reset formatting for HTML elements.

Problem

Each browser has different default settings for different HTML elements. For example, the color for link texts and spacing definitions for certain elements are defined differently by default in many browsers. These basic information sometimes differ greatly from browser to browser, sometimes even within different versions of a browser. These standard styles, especially in combination with specifications defined by the author, can have unforeseen effects on the appearance of the website.

With the help of a stylesheet reset, these basic browser information can be reset. The style specifications then used by the developer are ideally interpreted consistently by all browsers.

Resetting the style sheet definitions

Around 2004, the first so-called stylesheet resets were published, which were limited to resetting the distance information: 

* {
    padding:0;
    margin:0;
}

This procedure was gradually refined by various developers so that only selected and meaningful elements were reset to basic information.

Known stylesheet resets

  • A known CSS reset is part of Yahoo User Interface ( YUI )
  • Eric Meyer's CSS reset is also very well known and sets almost every element to an unformatted state

disadvantage

  • Many CSS resets remove all formatting from an HTML element. For example, even the strongelement that distinguishes highlighted or bold text often no longer differs from the rest of the text in terms of shape and color. The developer has to take care of every design-relevant parameter of his HTML code.
  • Depending on the scope of a reset, there is a longer loading time, since the existing stylesheet file either has to be expanded or the resource has to be loaded additionally.
  • The differences between individual browsers are only minor and mostly irrelevant for the overall impression. A website should be displayed flexibly, whereby the distance between individual pixels is not important. There is additional work for the developer to fix minimal differences between browsers when using a CSS reset.

Further development

To remedy the disadvantages, there are various further developments of the classic CSS reset:

One approach is CSS normalize . All properties are set uniformly instead of being reset. The aim is that all browsers behave in the same way, but that reasonable default settings such as list items or bold text are strongretained for an element. Known bugs in various browser representations are also fixed.

As a further development of CSS-Normalize , CSS-Sanitize was created to better meet the requirements of current projects. For this, the compatibility of outdated browsers is not considered and the rules have been improved. Many rules are subjective, but well founded in the stylesheet file.

CSS-Sanitize has been the most popular since February 2020 , which is evident from the number of downloads on Npm .

Differentiation from the CSS framework

A CSS reset must be distinguished from a CSS framework . A reset stylesheet only has the task of resetting basic formatting. In contrast to this, a CSS framework tries to accelerate the development process of a website, for example with the help of ready-made style definitions for frequently required elements of the user interface or a grid system. Often, however, a CSS reset is part of the CSS framework.

Web links

Individual evidence

  1. ↑ Browser compatibility: Problems with the display of websites in different browsers | Tips on web usability. Retrieved June 12, 2020 .
  2. ↑ William Craig President of WebFX, Inc .: The History of CSS resets. In: WebFX Blog. December 2, 2010, accessed June 12, 2020 .
  3. ↑ CSS Reset - YUI Library. Retrieved June 12, 2020 .
  4. ↑ Poll Results: What CSS Reset Do You Use? March 6, 2008, accessed June 12, 2020 .
  5. ↑ CSS reset: Resetting the browser settings. Retrieved June 12, 2020 .
  6. ↑ CSS Tools: Reset CSS. Retrieved June 12, 2020 .
  7. ↑ by Ellen: Tips and Tricks for CSS Reset | Elmastudio. In: Elmastudio - Creative & Minimal WordPress Themes. February 23, 2011, accessed on June 12, 2020 (German).
  8. ↑ Normalize.css - What is it? - Information on CSS normalization. In: Webdesign Hannover - Saskia Lund. June 13, 2015, accessed on June 12, 2020 (German).
  9. ↑ About normalize.css - Nicolas Gallagher. Retrieved June 12, 2020 .
  10. ↑ CSS base through reset or normalization - normalize CSS | Adfreak. Accessed June 12, 2020 (German).
  11. ↑ NPM Trends: Compare NPM package downloads. Retrieved June 12, 2020 .