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.“


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


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

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: 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

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

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

„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

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?

slideshare.com/tobestobs
marc tobias kunisch
marctobiaskunisch.com
@tobestobs

Progressive Enhancement using CSS3

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Progressive Enhancement using CSS3