Progressive Enhancement using CSS3

  • 5,472 views
Uploaded on

My talk for Barcamp Brighton 4 about Progressive Enhancement using CSS3.

My talk for Barcamp Brighton 4 about Progressive Enhancement using CSS3.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • CSS does not Vaildation.
    Good Point.
    Vaildation is not Best.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,472
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
173
Comments
1
Likes
21

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. Progressive Enhancement using CSS3 september 2009, marctobiaskunisch.com
  • 2. so, what is Progressive Enhancement
  • 3. „Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, ... http://en.wikipedia.org/wiki/Progressive_enhancement
  • 4. ...while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.“ http://en.wikipedia.org/wiki/Progressive_enhancement
  • 5. You would‘t expect to receive HD Television on this... http://www.flickr.com/photos/roadsidepictures/1637623713/
  • 6. ...but you can still watch the programme http://www.flickr.com/photos/roadsidepictures/1637623713/
  • 7. The classic layers of Progressive Enhancement (and web design in general): Let‘s have a closer look at the chocolate... Illustration „The Chocolatey Layers of Progressive Enhancement“ by Dave Stewart and taken from the A List Apart article http://www.alistapart.com/articles/understandingprogressiveenhancement/
  • 8. Websites don‘t have to look exactly the same in all browsers
  • 9. just don‘t lock anyone out http://www.flickr.com/photos/magh/2159613408/
  • 10. what you can do today with.. CSS3
  • 11. • it comes in modules • some modules are almost done, others are still under heavy development • browser support varies greatly • the following are just some examples of what you can do http://en.wikipedia.org/wiki/Progressive_enhancement
  • 12. selectors
  • 13. Lots of new selectors (think jQuery) ! *, E, .class, #id, E F, E > F, E + F, E[attribute], E[attribute=value], ! E[attribute~=value], E[attribute|=value], :first-child, :link, :visited, ! :lang(), ::before, ::after, ::first-letter, ::first-line, E ~ F, :last-child, ! :only-child, :nth-child(), :nth-last-child(), :first-of-type, :last-of-type, ! :only-of-type, :nth-of-type(), :nth-last-of-type(), :empty,! :not(), :target, :enabled, :disabled, :checked http://www.markboulton.co.uk/journal/comments/design-in-open-source selectors
  • 14. colors
  • 15. Sets the opacity for an element and it‘s child elements takes values between 1 (opaque) and 0 (transparent) <div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div> 9.5 3 3 Opacity
  • 16. Ads the alpha value to RGB div { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, 0.5); } http://css-tricks.com/rgba-browser-support/ 3 3 RGBa
  • 17. backgrounds & borders
  • 18. Lets you create gradients without the need for background images background: -moz-linear-gradient(20% center, 30% center, from(blue), to (yellow)) no-repeat; background: -webkit-gradient(linear, left top, left bottom, from(#247DCF), to(#fff), color-stop(0.9, #fff)); 3.6 4 Gradients
  • 19. You can now specify several border images per element border-image: url(border.png) 27 27 27 27 round round; border-image: url(border.png) 27 27 27 27 stretch stretch; 10 3.5 3.1 Gradients
  • 20. Specifies the size of background images in pixels, width and height, or in percentages. -moz-background-size: 100% 100%; /* Firefox 3.6 */ -o-background-size: 100% 100%; /* Opera 9.5 */ -webkit-background-size: 100% 100%; /* Safari 3.0 */ -moz-background-size: contain; -moz-background-size: cover; 9.5 3.6 3 background-size
  • 21. Rounded corners without images -moz-border-radius: 5px; -webkit-border-radius: 5px; 11? 3 3.1 border-radius
  • 22. Defines the drop shadow of an element Takes 3 values, horizontal offset, vertical offset and blur radius -webkit-box-shadow: 10px 10px 5px #888; -moz-box-shadow: 10px 10px 5px #888; -o-box-shadow: 10px 10px 5px #888; 10 3.5 3.1 box-shadow
  • 23. multi-column & css tables
  • 24. Arranges text in multiple columns You can either specify the column width or the number of colmuns -moz-column-count: 3; -moz-column-width: 13em; -moz-column-gap: 1em; -webkit-column-width: 13em; -moz-column-rule: 1px solid black; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; 2 3.1 multi columns
  • 25. Tables. In CSS. Watch out not to fall back into old habits! #content { ! display: table; -moz-column-width: 13em; } -webkit-column-width: 13em; -moz-column-gap: 1em; ! #mainContent { -webkit-column-gap: 1em; ! ! display: table-cell; ! ! width: 620px; ! ! padding-right: 22px; ! } ! aside { ! ! display: table-cell; ! ! width: 300px; ! } 10 8 2 3.1 css table display
  • 26. text & fonts
  • 27. Defines the drop shadow of text Takes 3 values, horizontal offset, vertical offset and blur radius text-shadow: 2px 2px 2px #000; This text has some text shadow And this one too! 9.6 3.5 4 box-shadow
  • 28. Any fonts you like! (almost) @font-face { font-family: Fontin; src: url(fontin/Fontin-Regular.otf) format(opentype); } h3 { ! font-family: Fontin, Arial, sans-serif; } I could be text rendered in a browser. Me too! 10 3.5 3.2 @font-face
  • 29. media queries
  • 30. „Presentations can be tailored to a specific range of output devices without changing the content itself.“ .entry-content { ! font-size: 1.2em; ! line-height: 1.8em; ! color: #444; } @media all and (min-width: 100em) { ! .entry-content { ! ! -moz-column-count: 3; ! ! -webkit-column-count: 3; ! } } 9.6 3.5 4 media queries
  • 31. but some criticism
  • 32. it does not validate validation
  • 33. enhance, don‘t make exclusive (remember, don‘t lock anyone out) http://www.flickr.com/photos/puppiesofpurgatory/3067934263/ be aware of what you‘re doing
  • 34. know your users http://www.flickr.com/photos/loush555/3552196113/ audience
  • 35. http://www.pixellabs.com/images/browserwars.png new browser wars?
  • 36. thanks! questions?
  • 37. slideshare.com/tobestobs marc tobias kunisch marctobiaskunisch.com @tobestobs