{"id":148,"date":"2008-06-10T21:23:25","date_gmt":"2008-06-10T20:23:25","guid":{"rendered":"http:\/\/www.nielsgamborg.dk\/wordpress\/webudvikling\/stylesheet-reset-forebyg-browser-problemer-med-resetcss.htm"},"modified":"2008-06-10T21:23:25","modified_gmt":"2008-06-10T20:23:25","slug":"stylesheet-reset-forebyg-browser-problemer-med-resetcss","status":"publish","type":"post","link":"https:\/\/nielsgamborg.dk\/wordpress\/browser_bugs\/stylesheet-reset-forebyg-browser-problemer-med-resetcss.htm","title":{"rendered":"Stylesheet reset. Forebyg browser problemer med reset.css"},"content":{"rendered":"

En af mine\u00a0venner Thor Madsen Holm<\/a>, gjorde mig ig\u00e5r opm\u00e6rksom p\u00e5,\u00a0en smart m\u00e5de at udligne nogle af forskellene p\u00e5 IE, Firefox og Safari.<\/p>\n

Metoden kaldes stylesheet reset, og oftest bruger man et specielt stylesheet: reset.css<\/p>\n

Jeg har selv i flere \u00e5r brugt denne meget forsimplede udgave af et reset.css, der dog kun udligner\u00a0browsernes default forskelligheder \u00a0p\u00e5 margin og padding:<\/p>\n

*{
\nmargin: 0px;
\npadding: 0px;
\n}<\/p><\/blockquote>\n

Men metoden med et reset.css tager det hele et skridt videre og inddrager mange flere b\u00e5de tags, attributter og properties.<\/p>\n

Princippet bag et stylesheet reset<\/h3>\n

Reset stylesheet’ets form\u00e5l er at\u00a0udligne de omr\u00e5der, hvor de forskellige browsere er inkonsistente f.eks margin, line-height,\u00a0padding osv. Det vil sige at forskellige browsere fra IE og Firefox\u00a0til Safari og Konqueror f\u00e5r nulstillet deres default style v\u00e6rdier, og derfor p\u00e5 vil starte\u00a0fra \u00a0samme udgangspunkt.<\/p>\n

Metoden er simpel. Man inkludere stylesheet i toppen af sit normale stylesheet. Stylesheetet nulstiller alle potentielle problemomr\u00e5der. Man kan enten copy-paste reset stylesheetet ind i toppen af sit stylesheet. Eller man kan importere det ind i stylesheetet med f\u00f8lgende:<\/p>\n

@import url(“\/stylesheet\/reset.css”);<\/p>\n

body {
\nbackground-color: black;
\nwidth: 800px;
\n…
\n}<\/p><\/blockquote>\n

N\u00e5r man s\u00e5 begynder at definere de forskellige elementer l\u00e6ngere nede i\u00a0stylesheetet, vil de nye v\u00e6rdier overskrive reset.css<\/p>\n

Her kan du finde et komplet\u00a0reset.css<\/a>\u00a0lige til at copy-paste.<\/p>\n

Potentielle problemer med reset.css<\/h3>\n

En anden af mine venner Hans Skov<\/a>,\u00a0 har dog oplevet\u00a0problemer med “m\u00e6rkelig opf\u00f8rsel”, n\u00e5r han er begyndt at overskrive styles fra et reset.css.<\/p>\n

Thor har dog brugt metoden mange gange og kender kun til et enkelt problemomr\u00e5de.\u00a0Nemlig tabeller, som i\u00a0visse tilf\u00e6lde kan give problemer. L\u00f8sningen er dog igen simpel. F\u00f8lgende linie skal if\u00f8lge Thor enten fjernes eller udkommenteres, hvilket skulle l\u00f8se problemet.<\/p>\n

vertical-align: baseline;<\/p><\/blockquote>\n

Anvendelsesomr\u00e5der for reset.css<\/h3>\n

Metoden er m\u00e5ske is\u00e6r anvendelig hvis man har travlt (l\u00e6s: arbejder professionelt med stylesheets). Personligt foretr\u00e6kker jeg nok at skyde med lidt mindre spredehagl.\u00a0Men der er helt sikkert meget\u00a0inspiration at hente i et reset.css.<\/p>\n

Et reset af stylesheetet virker dog heldigvis ikke p\u00e5 de deciderede bugs. S\u00e5 der vil ogs\u00e5 i fremtiden v\u00e6re rig lejlighed til at rive sig i h\u00e5ret over Microsofts programm\u00f8rer. \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"

En af mine\u00a0venner Thor Madsen Holm, gjorde mig ig\u00e5r opm\u00e6rksom p\u00e5,\u00a0en smart m\u00e5de at udligne nogle af forskellene p\u00e5 IE, Firefox og Safari. Metoden kaldes stylesheet reset, og oftest bruger man et specielt stylesheet: reset.css<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,19],"tags":[54,62,71,222,252,296],"_links":{"self":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/148"}],"collection":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":0,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/148\/revisions"}],"wp:attachment":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/media?parent=148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/categories?post=148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/tags?post=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}