Russ Weakleys CSS reset i auktoriserad översättning.

1. CSS Global återställning (CSS reset)

2. Vad är global återställning?

3. Alla webbläsare har en inbyggd stilmall.

4. Problemet är att dessa inbyggda stillmallar varierar i de olika webbläsarna .

5. Å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.

6. Den enklaste återställningen är att ta bort marginal och padding från alla element genom att använda universalselektorn . * { margin: 0; padding: 0; }

7. Men denna återställning kan påverka en del element negativt och är mycket krävande för webbläsarna.

8. 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

9. Två av de mest använda återställningarna av CSS är: Eric Meyer Reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ YUI 2: Reset CSS http://developer.yahoo.com/yui/reset/

10. Är det bra att använda återställning med CSS?

11. Några älskar återställning med CSS, andra hatar den. Det finns varken rätt eller fel, enbart åsikter !

12. Att tänka på

13. För mig är det tre saker som gäller för återställning med CSS

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

15. Det andra: Många använder återställning av CSS utan att riktigt förstå den.

16. Det tredje: Vissa återställningar kan vara skadliga för användare som litar till tangentbordet för navigering. :focus {outline: 0;}

17. Ett exempel på en enkel åsterställning med CSS

18. 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

19. Min enkla återställningsfil har förändrats gradvis med tiden .

20. Mina regler för återställning:

21. html, body, ul, ol, li, form, fieldset, legend { margin: 0; padding: 0; } 1. Ta enbart bort margin och padding på några viktiga element

22. h1, h2, h3, h4, h5, h6, p { margin-top: 0; } 2. Ta bort toppmarginal på rubriker och stycken

23. fieldset, img { border: 0; } 3. Ta bort kantlinjer från fieldset och image

24. legend { color: #000; } 4. Tillämpa color på fieldset för att komma förbi problem med IE

25. 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

26. button { width: auto; overflow: visible; } 6. Ange width och overflow på button för att undvika problem med IE

27. table { border-collapse: collapse; border-spacing: 0; } 7. Sätt kantlinje och spacing på tabeller

28. caption, th, td { text-align: left; vertical-align: top; font-weight: normal; } 8. Sätt justering på caption, tabeller, rubriker och celler

29. li { list-style: none; } 9. Ta bort punkter från listor

30. abbr, acronym { border-bottom: .1em dotted; cursor: help; } 10. Använd border-bottom och cursor för abbr och acronym

31. sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } 11. Använd vertical-align för sup och sub

32. 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

33. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley (översättning: Thomas Lindbjer)