Beskrivelse af et reset CSS

Reset CSS
html,body,div,span,
pre,code,noscript,
strong,bold,br{margin:0;padding:0}
main,header,menu,nav,section,article,aside,figure,figcaption,details,footer{display:block;margin:0;padding:0}
p,h1,h2,h3,h4,h5,h6{line-height:1.2;margin:0;padding:0}
a,img,
ol,ul,li,
form,label,input,textarea,placeholder,button,
table,tr,th,td{text-decoration:none;outline:0;border:0;background:transparent;margin:0;padding:0}
placeholder{margin-left:6px}
Udvidet Reset CSS
html,body,div,span,
pre,code,noscript,
strong,bold,br{margin:0;padding:0}
main,header,menu,nav,section,article,aside,figure,figcaption,details,footer{display:block;margin:0;padding:0}
p,h1,h2,h3,h4,h5,h6{line-height:1.2;margin:0;padding:0}
a,img,
ol,ul,li,
form,label,input,textarea,placeholder,button,
table,tr,th,td{text-decoration:none;outline:0;border:0;background:transparent;margin:0;padding:0}
placeholder{margin-left:6px}
button  {
	outline: 0; 
	width: 100%; 
	border: 0; 
	background: transparent; 
	text-align: left; 
}
html {
	width: 100%; 
    height: 100%; 
	font-size: 62.5%; 
	-webkit-text-size-adjust: 100%; 
}
body  {
	width: 100%; 
    min-height: 100%; 
/*	height: 101%;*/
	background: #FFF;
	font-family: Verdana,Geneva,sans-serif;
	font-size: 12px;
	font-size: 1.2rem;
	color: #000;
	line-height: 1.2;
/*	padding-bottom: 12px; 
	padding-bottom: 1.2rem; */ 
}
p  {
	color: #2d1b05;
	margin-bottom: 8px; 
}
p strong {
	font-weight: bold;
}
p > a:link, p > a:visited, p > a:active { 
	color: #8c5815;
	text-decoration: underline;
}     
p > a:hover {
	color: #6a2710;
}
h1 {
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: bold;
	color: #003300;	
	margin-bottom: 22px;
}
Udvidet Reset CSS og kommentarer
html,body,div,span,
pre,code,noscript,
strong,bold,br{margin:0;padding:0}
main,header,menu,nav,section,article,aside,figure,figcaption,details,footer{display:block;margin:0;padding:0}
p,h1,h2,h3,h4,h5,h6{line-height:1.2;margin:0;padding:0}
a,img,
ol,ul,li,
form,label,input,textarea,placeholder,button,
table,tr,th,td{text-decoration:none;outline:0;border:0;background:transparent;margin:0;padding:0}
placeholder{margin-left:6px}
button  {
	outline: 0; /* FJERNER DEFAULT BUTTON STYLING - BLUE BORDER I CHROME */
	width: 100%; /* UDJÆVNER DEFAULT BUTTON STYLING - inline */
	border: 0; /* FJERNER DEFAULT BUTTON STYLING */
	background: transparent; /* FJERNER DEFAULT BUTTON STYLING */
	text-align: left; /* FJERNER DEFAULT BUTTON STYLING */	
}
html {
	width: 100%; 
    height: 100%; 
	font-size: 62.5%; /* TIL FONT-SIZE I REM */
	-webkit-text-size-adjust: 100%; /* WEBKIT TEXT - JUSTERING */
}
body  {
	width: 100%; 
    min-height: 100%; /* BAGGROUND IMAGES I HELE BODY */
/*	height: 101%;*/ /* SCROLLBAR PÅ ALLE SIDER */
	background: #FFF;
	font-family: Verdana,Geneva,sans-serif;
	font-size: 12px;
	font-size: 1.2rem;
	color: #000;
	line-height: 1.2;
	padding-bottom: 12px; 
	padding-bottom: 1.2rem; /* SKJUL WHITESPACE I BUND AF SIDEN */
}
p  {
	color: #2d1b05;
	margin-bottom: 8px; /* AFSTAND MELLEM TEKSTLINIER */
}
p strong {
	font-weight: bold;
}
p > a:link, p > a:visited, p > a:active { 
	color: #8c5815;
	text-decoration: underline;
}     
p > a:hover {
	color: #6a2710;
}
h1 {
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: bold;
	color: #003300;	
	margin-bottom: 22px;
}

Browsere og styling med CSS

Når jeg indsætter et element på min hjemmeside, vil jeg oftest bruge noget CSS til at style elementet med - for eksempel en baggrundsfarve og en bredde, og så måske heller ikke meget mere. Men ved hjælp af CSS er der jo mange flere måder at påvirke elementets opførsel på end ved blot at bestemme baggrundssfarve og bredde - hvert element har en række forskellige 'properties' til rådighed som hver især har betydning for elementets opførsel. Når jeg undlader at opstille en værdi for en 'property' i mit stylesheet, overtager browseren styingen - browseren har nemlig sit eget indbyggede stylesheet, som træder i kraft for de dele af elementet, jeg ikke har defineret i mit eget stylesheet.

Forskelle mellem browserne

Ovenstående er der ingen problemer i - det er jo netop browserens opgave at være i besiddelse af så mange værdier for et givent element, at det kan fremvise elementet korrekt og i overenstemmelse med standarderne for sproget HTML. Problemet opstår, når de enkelte browsere har stylesheets som adskiller sig fra hinanden - resultatet bliver, at elementernes opførsel varierer fra browser til browser, og at man som webudviller ikke kan være sikker på, at hjemmesiden ser ens ud uanset hvilken browser den fremvises i. Ofte drejer forskellen browserne imellem sig blot om nogle få pixels - et godt eksempel på dette er 'line-height'.

Internet Explorer og CSS

Klassiske eksempler på browsere der har opstillet værdier for HTML-elementer som adskiller sig fra andre browsere, er de tidlige versioner af Internet Explorer (IE). Det har givet webudviklere mange grå hår få elementerne til at opføre sig på samme måde i versionerne IE6 til IE8 som de gør i andre browsere, og der er skrevet side op og side ned om problemerne. Heldigvis viser oversigten, at andelen af brugere af de tidlige versioner af IE er dalende og i det mindste i Danmark så lille, at det i forhold til IE6 og IE7 nu ikke længere er nødvendigt at tage hensyn til dem, når der udvikles nye hjemmesider.

Hvordan fungerer et Reset CSS

Eksemplerne på hvordan de tidlige versioner af IE har opstillet værdier for HTML-elementernes opførsel som afviger fra alle øvrige browsere, er ekstreme, og falder faktisk lidt uden for hvad et almindeligt 'reset CSS' har som mål. Mange af løsningerne for IE målrettes specifikt IE ved at indsætte 'conditional comments' i stylesheet'et, og kan indebære, at værdierne for et element ændres fundamentalt - et 'reset CSS' går mindre dramatisk til værks; elementernes værdier "nulstilles" blot, og målgruppen er i modsætning til en "conditional comment" alle typer af browsere.

Nulstilling af værdierne

Ved at nulstille værdierne for HTML-elementerne ved hjælp af et 'reset CSS', "trumfer" man så at sige browserens eget stylesheet - hvor browserens stylesheet før brugen af et 'reset CSS' var det eneste sted værdierne var definerede, overtager mit stylesheet nu kontrollen, fordi jeg definerer værdierne.

Se her hvordan elementet 'p' har masser af plads i top og bund, når jeg ikke selv definerer 'margin', men i stedet overlader stylingen til browseren:

CSS
p  {
    font-family: Verdana, Geneva, sans-serif, sans-serif;
    font-size: 18px;
    color: black;
    line-height: 1.2;
    border: 1px solid #35495e;
}
default margin for elementet 'p'

Default margin i top og bund for elementet 'p'

Se hvad der sker, når jeg nulstiller browserens stylesheet ved at definere margin i mit eget stylesheet - jeg "trumfer" så at sige browserens CSS:

CSS
p  {
    font-family: Verdana, Geneva, sans-serif, sans-serif;
    font-size: 18px;
    color: black;
    line-height: 1.2;  
    margin: 0;
    border: 1px solid #35495e;
}
Elementet 'p' med 'margin: 0'

Elementet 'p' med 'margin: 0'

Placering af et Reset CSS

En browser arbejder sig oppe fra og nedefter når den læser et stylesheet, og da det er den sidst angivne værdie i et stylesheet der er gældende, har placeringen af et 'reset CSS' stor betydning. Er 'reset CSS' det sidste læser browseren læser, vil andre "rigtige" værdier med en funktion blive overskrevet, så et 'reset CSS' skal altid ligge i topppen og være den første styling browseren læser.

Jeg kan vælge at placere definitionerne fra 'reset CSS' i toppen af "det rigtige" stylesheet 'main.css', eller jeg kan placere linket til det eksterne 'reset CSS' i topppen af 'head' før alle andre stylesheets:

<head>
	<link href="css/reset.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">
</head>

Hvilket Reset CSS

Der findes flere forskellige typer 'reset CSS' - nogle er omfattende og nulstiller så mange elementer som overhovedet muligt, mens andre nøjes med 'margin' og 'padding'. Et af de første - og mere gennemgribende - 'reset CSS' udvikledes af Eric Meyer, som i øvrigt også på en række andre områder har bidraget til udviklingen af web ved hjælp af nytænkning og innovative forsøg og artikler.

Da Eric Meyer's originale 'eeset CSS' er af ældre dato, er det rettet mod HTML4 - siden da er flere HTML-elementer blevet skrottet, og der er kommet nye til i forlængelse af overgangen til HTML5. Opdaterede versioner af både Eric Meyer's 'reset CSS' og andre populære 'reset CSS' kan findes og kopieres fra siden www.cssreset.com

Fordele og ulemper

Der er delte meninger om brugen af et 'eeset CSS' - nogle webudviklere mener, at det er for detaljefikseret at beskæftige sig med afvigelser på nogle få pixels som i for eksempel ovenstående elsempel med line-height fpr elementet 'p', mens andre foretrækker, at layoutet er præcis det samme uanset browser, og hellere selv vil definere værdierne for eksempel 'font-size' og 'margin' for elementet 'p' end at bruge browserens indstillinger.

Desuden hævder kritikerne, at udbyttet af et 'reset CSS' ikke modsvares af den øgede 'loadtime' på især mobile enheder på grund af den ekstra kode i et 'reset CSS' - et uddybende argument er, at du senere i stylesheet'et alligevel vil ændre værdierne fra "nulstillingen" i 'reset CSS' til en funktionel værdi, og at brugen af et 'reset CSS' derfor bare er "dobbelt-kodning".

Personligt ligger jeg et sted midt imellem - som det kan ses i topppen af siden under "KODE", har jeg defineret mit eget eget 'reset CSS', hvor jeg kun har medtaget de HTML-elementer jeg bruger oftest ligesom jeg kun har medtaget enkelte 'properties'.