Progressive
Enhancement
     using
    CSS3

             september 2009, marctobiaskunisch.com
so, what is



 Progressive
Enhancement
„Progressive enhancement uses web
    technologies in a layered fashion
    that allows everyone to access the
    basic c...
...while also providing those with
    better bandwidth or more advanced
    browser software an enhanced
    version of t...
You would‘t expect to receive
HD Television on this...
                          http://www.flickr.com/photos/roadsidepict...
...but you can still watch the programme
                          http://www.flickr.com/photos/roadsidepictures/163762371...
The classic layers of Progressive Enhancement
(and web design in general):




Let‘s have a closer look at the chocolate.....
Websites don‘t have to look exactly
the same in all browsers
just don‘t lock anyone out




                             http://www.flickr.com/photos/magh/2159613408/
what you can do today with..




  CSS3
• it comes in modules
   • some modules are almost done,
     others are still under heavy
     development
   • browser s...
selectors
Lots of new selectors
    (think jQuery)


!   *, E, .class, #id, E F, E > F, E + F,
    E[attribute], E[attribute=value],...
colors
Sets the opacity for an element
and it‘s child elements
takes values between 1 (opaque) and 0
(transparent)

<div   style=...
Ads the alpha value to RGB
div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5)...
backgrounds
     &
  borders
Lets you create gradients without
the need for background images

background: -moz-linear-gradient(20%
center, 30% center,...
You can now specify several border
images per element



border-image: url(border.png) 27 27
27 27 round round;


border-i...
Specifies the size of background
images in pixels, width and height,
or in percentages.

-moz-background-size: 100% 100%; ...
Rounded corners without images


-moz-border-radius: 5px;
-webkit-border-radius: 5px;




                                ...
Defines the drop shadow of an
element
Takes 3 values, horizontal offset, vertical offset
and blur radius

-webkit-box-shad...
multi-column
     &
 css tables
Arranges text in multiple columns
You can either specify the column width or the
number of colmuns

-moz-column-count: 3; ...
Tables. In CSS.
Watch out not to fall back into old habits!

#content {
! display: table;                  -moz-column-wid...
text
  &
fonts
Defines the drop shadow of text
Takes 3 values, horizontal offset, vertical offset
and blur radius

text-shadow: 2px 2px 2...
Any fonts you like!
(almost)


@font-face {
    font-family: Fontin;
    src: url(fontin/Fontin-Regular.otf) format(openty...
media queries
„Presentations can be tailored to a specific
range of output devices without changing the
content itself.“

.entry-content...
but
  some criticism
it does not validate




validation
enhance, don‘t make exclusive
(remember, don‘t lock anyone out)




                                http://www.flickr.com/...
know your users




                        http://www.flickr.com/photos/loush555/3552196113/

audience
http://www.pixellabs.com/images/browserwars.png

new browser wars?
thanks!
  questions?
slideshare.com/tobestobs
      marc tobias kunisch
     marctobiaskunisch.com
          @tobestobs
Upcoming SlideShare
Loading in …5
×

Progressive Enhancement using CSS3

5,931 views
5,822 views

Published on

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

Published in: Technology, Education
1 Comment
21 Likes
Statistics
Notes
No Downloads
Views
Total views
5,931
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
175
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide

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

×