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. ...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. You would‘t expect to receive
HD Television on this...
http://www.flickr.com/photos/roadsidepictures/1637623713/
6. ...but you can still watch the programme
http://www.flickr.com/photos/roadsidepictures/1637623713/
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/
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
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. 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. 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
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. 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
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. 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
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
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. know your users
http://www.flickr.com/photos/loush555/3552196113/
audience
