Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Enhancement using CSS3

6,394 views

Published on

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

Published in: Technology, Education
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Njce! Thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • CSS does not Vaildation.
    Good Point.
    Vaildation is not Best.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Progressive Enhancement using CSS3

  1. 1. Progressive Enhancement using CSS3 september 2009, marctobiaskunisch.com
  2. 2. so, what is Progressive Enhancement
  3. 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. 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. 5. You would‘t expect to receive HD Television on this... http://www.flickr.com/photos/roadsidepictures/1637623713/
  6. 6. ...but you can still watch the programme http://www.flickr.com/photos/roadsidepictures/1637623713/
  7. 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. 8. Websites don‘t have to look exactly the same in all browsers
  9. 9. just don‘t lock anyone out http://www.flickr.com/photos/magh/2159613408/
  10. 10. what you can do today with.. CSS3
  11. 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. 12. selectors
  13. 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. 14. colors
  15. 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. 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. 17. backgrounds & borders
  18. 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. 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. 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. 21. Rounded corners without images -moz-border-radius: 5px; -webkit-border-radius: 5px; 11? 3 3.1 border-radius
  22. 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. 23. multi-column & css tables
  24. 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. 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. 26. text & fonts
  27. 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. 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. 29. media queries
  30. 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. 31. but some criticism
  32. 32. it does not validate validation
  33. 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. 34. know your users http://www.flickr.com/photos/loush555/3552196113/ audience
  35. 35. http://www.pixellabs.com/images/browserwars.png new browser wars?
  36. 36. thanks! questions?
  37. 37. slideshare.com/tobestobs marc tobias kunisch marctobiaskunisch.com @tobestobs

×