Progressive Enhancement using CSS3

37
Progressive Enhancement using CSS3 september 2009, marctobiaskunisch.com

description

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

Transcript of Progressive Enhancement using CSS3

  • 1. Progressive Enhancementusing 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 wouldt 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): Lets have a closer look at the chocolate... Illustration The Chocolatey Layers of Progressive Enhancementby Dave Stewart and taken from the A List Apart articlehttp://www.alistapart.com/articles/understandingprogressiveenhancement/ 8. Websites dont have to look exactly the same in all browsers 9. just dont lock anyone outhttp://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 heavydevelopment browser support varies greatly the following are just someexamples of what you can dohttp://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 its child elements takes values between 1 (opaque) and 0 (transparent)

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 imagesbackground: -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 elementborder-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;23.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 823.1 css table display 26. text & fonts 27. Defines the drop shadow of text Takes 3 values, horizontal offset, vertical offset and blur radiustext-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!103.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, dont make exclusive (remember, dont lock anyone out) http://www.flickr.com/photos/puppiesofpurgatory/3067934263/be aware of what youre doing 34. know your users http://www.flickr.com/photos/loush555/3552196113/audience 35. http://www.pixellabs.com/images/browserwars.pngnew browser wars? 36. thanks! questions? 37. slideshare.com/tobestobs marc tobias kunischmarctobiaskunisch.com @tobestobs