Your SlideShare is downloading. ×
Global återställing av CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Global återställing av CSS

373
views

Published on

Russ Weakleys CSS reset i auktoriserad översättning.

Russ Weakleys CSS reset i auktoriserad översättning.

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
373
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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)