CSS Minimal Reset

Zurück auf null - CSS Minimal Reset - iX 5/2015, Seite 112
iX 5/2015, Seite 112
Heft kaufen
Alle Links zum CSS Reset-Artikel
Dieses CSS Reset verfolgt das Ziel, nicht alle HTML-Elemente brachial auf 0-Werte zurückzusetzen, sondern nur relevante bzw. sinnvolle Einstellungen in ein CSS Reset zu übernehmen.

Für jedes einzelne HTML-Element werden die nativen CSS-Eigenschaften betrachtet und geschaut, welche CSS-Eigenschaften sinnvoll und welche überflüssig sind bzw. immer wiederkehrende Probleme bereiten.

In der Ausgabe der iX ist ein Artikel über die Überlegungen zu einem sinnvollen CSS Reset zu finden, auf dieser Seite finden Sie das Ergebnis dieser Überlegungen.

Download

Download CSS Minimal Reset Files (expanded and minified) als ZIP

CSS Reset für alle Browser

In diesem Abschnitt finden Sie den CSS-Reset für alle Browser. Weiter unten finden Sie besondere Code-Schnipsel für ältere Internet Explorer-Versionen sowie mehr über die Einbindung des CSS Resets.

CSS:

/**
 * CSS Reset
 *
 * Another concept of a CSS Reset
 * The idea behind it, to create a reset which responses to CSS design in 2015 
 * 
 * License: GNU General Public License
 * Copyright: 2015 Stephan Heller [daik.de] 
*/

/**
* @section minimal reset of margin and padding
* 
* in a lot of CSS resets you find a general reset of all elements 
* by universal selector * { margin: 0, padding: 0 }.
* BUT - most of the elements don't have any margins and paddings. 
* So, reset only the element which has...
* and there are some other margins/paddings, which are good. So, don't reset all
* 
* only elements with margins and paddings to left and right 
* except body, there is a general reset
*/

body {
    margin: 0;
}
blockquote,
dd,
figure {
    margin-right: 0;
    margin-left: 0; 
}
fieldset {
    padding-right: 0;
    padding-left: 0;
}

/**
* @section total reset of margin and padding
* 
* this is an alternate to the last section "minimal reset"
* more the classical way of resetter. 
* resetting all margins and paddings - but only of elements which have...
*

body,
blockquote,
button,
dd,
dl,
fieldset,
h1, h2, h3, h4, h5, h6,
hr,
input,
menu,
ol,
p,
pre,
select,
textarea {
    margin: 0;
    padding: 0;
}
/*
change the end of this comment, if you want to reset all 
*/

/**
* @section nav list reset
* 
* in the meanwhile it's common to use the UL for navigation structures
* these elements never will have any margins or bullets, 
* here is the supposed most useful way of reset.
*/

nav ul, 
nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
* @section box model
* 
* issues of block elements are the growing by adding padding and borders
* this rule will make sure, that boxes will always have the same width, 
* not effected by paddings and borders
*/

address,
article,
aside,
audio,
blockquote,
canvas,
del,
div,
dl,
fieldset,
figcaption,
figure,
footer,
form,
h1, h2, h3, h4, h5, h6,
header,
hgroup,
li,
ol,
p,
pre,
section,
table,
td,
tfoot,
th,
ul,
video {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/**
* @section list reset
* 
* reset the bullets and numbers of all list elements
* 
* still there is the question, why using a list and not showing it
*
ul, 
ol {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}
/*
change the end of this comment, if you want to reset all lists
*/

/**
* @section table reset 
* 
* tables styles in the native way are not used anywhere,
* here a smart reset of table style
*/

table {
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    text-align: left;
}
td, th {
    vertical-align: baseline; 
    /* not top, because: with different font-sizes the different 
    cells have the same baseline of the fonts
    @see: http://www.css-wiki.com/css-eigenschaft/vertical-align - example No 19 */
}

/**
* @section hr reset 
* 
* the hr is not used in any design - reset to a simple border
*/

hr {
    height: 1px;
    background-color: #fff;
    border-width: 1px 0px 0px;
    border-style: solid none none;
    border-color: #ccc;
}

/**
* @section fonts reset 
* 
* some fonts make sense.
* in form elements most want to have the same font as outside the form
*/

input, 
button,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;    
}

/**
* @section iPhone/iPad reset
* 
* @info datetime and week types are not affected.
*
* apple forces his own style for button elements. 
* buttons and input fields appear like stranger elements of a page. 
*
* reset for this.
* but be aware - to take away the appearance of all fields will take the elements away,
* reset only the fields which look like input fields of the type "text"
*/

button,
input[type=button],
input[type=color],
input[type=email],
input[type=password],
input[type=reset],
input[type=search],
input[type=submit],
input[type=tel],
input[type=text],
input[type=url],
textarea {
    -webkit-border-radius: 0;
    border-radius: 0;
    background-image: url('');
}

/**
* @section iPhone/iPad alternate reset
* 
* if you don't want reset the individuell fields to avoid 100% sideeffect in the future, 
* you can do a simple reset - but only this fields, wicht are like text fields or buttons
*

button,
input[type=button],
input[type=search],
input[type=reset],
input[type=submit] {
    -webkit-appearance: none;
}
/*
change the end of this comment, if you want to use this part
*/

CSS Reset für alte Internet Explorer (IE 8 und darunter)

Im Grunde ist dies kein Reset, sondern ein Basis-CSS, damit alte Internet Explorer neue HTML5 korrekt darstellen. HTML5-Elemente werden erst ab Internet Explorer-Version 9 unterstützt.

Dieses CSS ist in den meisten CSS Resets zu finden, allerdings macht dieser CSS-Abschnitt alleine keinen Sinn. Sie müssen immer ein JavaScript (weiter unten) einsetzen, um dem Browser die HTML5-Elemente bekanntzugeben.

CSS:

/**
 * @section HTML5 support for old IE
 * 
 * this reset is not working on its own.
 * you allways need to add a JS
 * to add elements to the DOM via document.createElement(elem);
 * the whole HTML5 element support needs the CSS and JS
 */

article,
aside,
audio,
canvas,
figcaption,
figure,
footer,
header,
hgroup,
output,
section,
track,
video {
    display: block;
}

/* Hide datalist for old IEs*/
datalist {
    position: absolute;
    left: -10000px;
    top: auto;
    height: 0;
    overflow: hidden;
}

JavaScript, um HTML5-Elemente in alten Browser zu erzeugen

Alleine die Vergabe von display: block; reicht nicht aus, um HTML5-Elemente in alten Internet Explorer-Versionen mit CSS ansteuern zu können. Sie müssen immer das betreffende Element mit document.createElement(elem) erzeugen, damit geben Sie es dem Browser bekannt, erst danach können Sie weitere CSS-Eigenschaften auf ein HTML5-Element anwenden.

JavaScript:

// configuration - all new HTML5 elements
var html5_elements = ['article', 
'aside', 
'audio', 
'canvas', 
'figcaption', 
'figure', 
'footer', 
'header', 
'hgroup', 
'output', 
'section', 
'track', 
'video'];

// run a loop for each element
for (var i = 0, len = html5_elements.length; i < len; i++) {
    document.createElement(html5_elements[i]);
}

Einbindung der einzelnen Dateien des CSS Minimal Resets

Die drei Code-Abschnitte, sind in separate Dateien aufgeteilt. Das CSS und JavaScript für den Internet Explorer 8 und darunter wird über einen Conditional Comments eingebunden. Damit werden diese Dateien nur von den alten Internet Explorer-Versionen eingelesen, alle anderen Browser erkennen diese HTML-Abschnitt als Kommentar, die Dateien werden in dem Fall nicht geladen.

HTML:

<!-- CSS reset for all browser -->
<link href="css/css-reset.css" type="text/css" rel="stylesheet">

<!-- add relevant CSS and JS for old Internet Explorer (IE8 and lower) -->
<!--[if lte IE 8]>   
    <script type="text/javascript" src="js/old-ie-html5-elements.js"></script>
    <link href="css/old-ie-reset.css" type="text/css" rel="stylesheet">
<![endif]-->

Download

In der Zip-Datei finden Sie jeweils die CSS- und JavaScript-Dateien sowie eine HTML-Datei mit der Bespieleinbindung. Jeweils als normale und als minifizierte Version aller Dateien.

Download CSS Minimal Reset Files (expanded and minified) als ZIP

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.029 sec.