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, eller hvordan et element som <button> vises.
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. Oversigten over andelen af brugere af de tidlige versioner af IE er nu så lille, at det ikke længere er nødvendigt at tage hensyn til IE, når der udvikles nye hjemmesider.
Hvordan fungerer et Reset CSS
Et 'reset CSS' har som mål at nulstille de i browseren opstillede værdier for styling af HTML-elementer.
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:
En browser arbejder sig oppe fra og nedefter når den læser et stylesheet, og da det er den sidst angivne værdi 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:
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 'reset CSS' - nogle webudviklere mener, at det er for detaljefikseret at beskæftige sig udseendet af <button>, eller afvigelser på nogle få pixels, som i ovenstående eksempel med line-height fpr elementet 'p'. Andre foretrækker, at layoutet er præcis det samme uanset browser, og vil hellere selv 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", ligger der et eksempel på et basisk 'reset CSS', hvor jeg kun har medtaget de HTML-elementer jeg bruger oftest ligesom jeg kun har medtaget enkelte 'properties'.
