Stylesheet reset. Forebyg browser problemer med reset.css

En af mine venner Thor Madsen Holm, gjorde mig igår opmærksom på, en smart måde at udligne nogle af forskellene på IE, Firefox og Safari.

Metoden kaldes stylesheet reset, og oftest bruger man et specielt stylesheet: reset.css

Jeg har selv i flere år brugt denne meget forsimplede udgave af et reset.css, der dog kun udligner browsernes default forskelligheder på margin og padding:

*{
margin: 0px;
padding: 0px;
}

Men metoden med et reset.css tager det hele et skridt videre og inddrager mange flere både tags, attributter og properties.

Princippet bag et stylesheet reset

Reset stylesheet’ets formål er at udligne de områder, hvor de forskellige browsere er inkonsistente f.eks margin, line-height, padding osv. Det vil sige at forskellige browsere fra IE og Firefox til Safari og Konqueror får nulstillet deres default style værdier, og derfor på vil starte fra samme udgangspunkt.

Metoden er simpel. Man inkludere stylesheet i toppen af sit normale stylesheet. Stylesheetet nulstiller alle potentielle problemområder. Man kan enten copy-paste reset stylesheetet ind i toppen af sit stylesheet. Eller man kan importere det ind i stylesheetet med følgende:

@import url(“/stylesheet/reset.css”);

body {
background-color: black;
width: 800px;
…
}

Når man så begynder at definere de forskellige elementer længere nede i stylesheetet, vil de nye værdier overskrive reset.css

Her kan du finde et komplet reset.css lige til at copy-paste.

Potentielle problemer med reset.css

En anden af mine venner Hans Skov, har dog oplevet problemer med “mærkelig opførsel”, når han er begyndt at overskrive styles fra et reset.css.

Thor har dog brugt metoden mange gange og kender kun til et enkelt problemområde. Nemlig tabeller, som i visse tilfælde kan give problemer. Løsningen er dog igen simpel. Følgende linie skal ifølge Thor enten fjernes eller udkommenteres, hvilket skulle løse problemet.

vertical-align: baseline;

Anvendelsesområder for reset.css

Metoden er måske især anvendelig hvis man har travlt (læs: arbejder professionelt med stylesheets). Personligt foretrækker jeg nok at skyde med lidt mindre spredehagl. Men der er helt sikkert meget inspiration at hente i et reset.css.

Et reset af stylesheetet virker dog heldigvis ikke på de deciderede bugs. Så der vil også i fremtiden være rig lejlighed til at rive sig i håret over Microsofts programmører. 😉

3 Responses to “Stylesheet reset. Forebyg browser problemer med reset.css”
By Martin on jun 11, 2008

Et reset stylesheet kan afhjælpe rigtigt mange problemer, men som du siger skyder Meyers rimelig meget med spredehagl, og hvis man skal bruge standard design for lister osv. er det nærmest bare ekstra arbejde at sætte list-style none, så man skal lige bruge scriptet modificeret til den pågældende opgave.

Det værste jeg har oplevet var nogen som havde brugt et reset stylesheet, og så kun redefineret de styles der var i brug på siden i udviklingsøjeblikket, men da kunden så tog over kom der både lister og tabeller som overhovedet ikke var stylet og jo end ikke havde standard browser formatering.
By Michael on jun 11, 2008

Brugte faktisk også førhen dit første eksempel, men er gået helt fra den metode igen – bruger slet ikke noget, som det er nu.

Blev dog først for nylig bekendt med Myers udgave, som jeg dog ikke har studeret specielt meget. Den er bare røget i gemmeren.
By Niels on jun 11, 2008

Tak for kommentarerne.

@Martin.

Tror at Thor har arbejdet med det i forbindelse med et CMS. Der har de så sandsynligvis selv haft nogle definerede standard værdier på alle tagene. Og lige præcis i den forbindelse kan jeg godt se værdien. Der handler det jo ofte om at blive færdig med jobbet så hurtigt som muligt, og så elleres videre til den næste opgave.

Og hvis der er noget, der driller virker Meyers reset.css som et godt sted at finde inspriration til nye eksperimenter.

@Michael.

Hvorfor gik du fra den simple reset igen?

Giver det ikke en del redundans/ekstra arbejde i stylesheetet, når man mange steder skal nulstille padding og margin?

Blog om foto, web og brugervenlighed