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