CSSGlobal återställning

(CSS reset)

Vad är global återställning?

Alla webbläsare har eninbyggd stilmall.

Problemet är att dessa inbyggda stillmallar varierar i de olika

webbläsarna.

Återställning av CSS syftar till att ta bort de speciella

stilmallarna för webbläsare, för att sedan kunna skapa CSS från

början. På det sättet kommer alla element att se likadana ut i alla

webbläsare.

Den enklaste återställningen är att ta bort marginal och padding

från alla element genom att använda universalselektorn.

*{

margin: 0;padding: 0;

}

Men denna återställning kan påverka en del element

negativt och är mycket krävande för webbläsarna.

Vissa avancerade återställningar av CSS försöker att återställa

nästan alla delar av varje element:

• Ställ margin and padding till noll• Ställ border till noll

• Ta bort synliga liststilar• Ställa teckensnitt till en bas

• Ställa font-weight och font-style till normal

Två av de mest använda återställningarna av CSS är:

Eric Meyer Resethttp://meyerweb.com/eric/thoughts/2007/05/0

1/reset-reloaded/

YUI 2: Reset CSShttp://developer.yahoo.com/yui/reset/

Är det bra att använda

återställning med CSS?

Några älskar återställning med CSS, andra hatar den. Det finns

varken rätt eller fel, enbart åsikter!

Att tänka på

För mig är det tre sakersom gäller för återställning

med CSS

Den första:Varje element som “nollas” måste definiereas igen. Detta kan leda

till större filstorlek.

Det andra:Många använder återställning av

CSS utan att riktigt förstå den.

Det tredje:Vissa återställningar kan vara

skadliga för användare som litar till tangentbordet för navigering.

:focus {outline: 0;}

Ett exempel på en enkel åsterställning

med CSS

Jag föredrar att använda en mindre mängd css-regler som

låter mig:

återställa några inbyggda beteenden “ställa in och glömma” vissa element

minska upprepning

Min enkla återställningsfil harförändrats gradvis med tiden.

Mina regler för återställning:

html, body, ul, ol, li, form, fieldset, legend{

margin: 0;padding: 0;

}

1. Ta enbart bort margin och padding på några viktiga element

h1, h2, h3, h4, h5, h6, p {

margin-top: 0;}

2. Ta bort toppmarginal på rubriker och stycken

fieldset, img {

border: 0;}

3. Ta bort kantlinjer frånfieldset och image

legend{

color: #000;}

4. Tillämpa color på fieldset för att komma förbi problem med IE

input, textarea, select, button{

font-family: [font-stack];font-size: 110%;line-height: 1.1;

}

5. Använd font-size, -family och line-height på element för

formulär

button{

width: auto;overflow: visible;

}

6. Ange width och overflow på button för att undvika problem

med IE

table{

border-collapse: collapse;border-spacing: 0;

}

7. Sätt kantlinje och spacing på tabeller

caption, th, td{

text-align: left;vertical-align: top;font-weight: normal;

}

8. Sätt justering på caption, tabeller, rubriker och celler

li {

list-style: none; }

9. Ta bort punkter från listor

abbr, acronym{

border-bottom: .1em dotted;cursor: help;

}

10. Använd border-bottom och cursor för abbr och acronym

sup {

vertical-align: text-top;}

sub{

vertical-align: text-bottom; }

11. Använd vertical-align för sup och sub

pre, code{

font-family: “Courier new”,monospace, serif;font-size: 100%;line-height: 1.2;

}

12. Använd font-size, -family och line-height för pre och code

Russ WeakleyMax Design

Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin: linkedin.com/in/russweakley

(översättning: Thomas Lindbjer)