Progressive Enhancement using CSS3

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

http://blog.dreamcss.com	431
http://semantic.pe.kr	353
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.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://postingsfromanedge.blogspot.co.uk	1
http://webcache.googleusercontent.com	1
http://blog.mindgarden.de	1
http://207.46.192.232	1
http://barcampbrighton3.backnetwork.com	1

Progressive Enhancement using CSS3

by Marc Tobias Kunisch on Sep 05, 2009

Accessibility

Categories

Upload Details

Usage Rights

21 Embeds 1,202

Statistics

Progressive Enhancement using CSS3 Presentation Transcript