Progressive Enhancement using CSS3
Upcoming SlideShare
Loading in...5
×
 

Progressive Enhancement using CSS3

on

  • 7,666 views

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

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

Statistics

Views

Total Views
7,666
Views on SlideShare
6,291
Embed Views
1,375

Actions

Likes
21
Downloads
173
Comments
1

21 Embeds 1,375

http://blog.dreamcss.com 594
http://semantic.pe.kr 360
http://marctobiaskunisch.com 261
http://www.semantic.pe.kr 73
http://www.slideshare.net 21
http://www.mindgarden.de 15
http://mindgarden.de 12
http://www.marctobiaskunisch.com 10
http://postingsfromanedge.blogspot.co.uk 4
http://postingsfromanedge.blogspot.com 4
http://onwebdev.blogspot.com 4
http://127.0.0.1 3
http://www.hanrss.com 3
http://core.traackr.com 3
http://translate.googleusercontent.com 2
http://www.linkedin.com 1
applewebdata://39986572-2CA1-4F05-8049-42A145809E2F 1
http://blog.mindgarden.de 1
http://webcache.googleusercontent.com 1
http://207.46.192.232 1
http://barcampbrighton3.backnetwork.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • CSS does not Vaildation.
    Good Point.
    Vaildation is not Best.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Progressive Enhancement using CSS3 Progressive Enhancement using CSS3 Presentation Transcript

  • 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 content and functionality of a web page, using any browser or Internet connection, ... http://en.wikipedia.org/wiki/Progressive_enhancement
  • ...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
  • You would‘t expect to receive HD Television on this... http://www.flickr.com/photos/roadsidepictures/1637623713/
  • ...but you can still watch the programme http://www.flickr.com/photos/roadsidepictures/1637623713/
  • 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/
  • 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 support varies greatly • the following are just some examples of what you can do http://en.wikipedia.org/wiki/Progressive_enhancement
  • selectors
  • 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
  • colors
  • 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
  • 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
  • backgrounds & borders
  • 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
  • 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
  • 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
  • Rounded corners without images -moz-border-radius: 5px; -webkit-border-radius: 5px; 11? 3 3.1 border-radius
  • 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
  • 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; -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
  • 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
  • text & fonts
  • 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
  • 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
  • media queries
  • „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
  • but some criticism
  • it does not validate validation
  • 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
  • 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