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, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.
There are many new and exciting features in the CSS3 draft specification being implemented by many of the mainstream browsers that make old tricks insanely easy, and some new ones that previously required JavaScript, animations. Leveraging these features allows us to enhance the aesthetics and user experience of a website like never before.
Let’s take a look at some of the more interesting CSS3 properties available that can be used in a non-destructive way, so that those browsers that don’t offer support won’t break; they just won’t see them.
Instead of showing a demo of each technique I have put them into 1 layout that shows what can be accomplished. I will then break down the demo and explain and show the syntax of all the progressive enhancements used.
I have also taken a screenshots of the demo as it should look if you are using a browser like Safari 4 or Firefox 3.5.
The CSS3
Multi column
p.multicol
{
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
}
Splitting text into multiple columns has been available in Firefox since 1.5 and Safari since 3.0. We use both the column-count and column-gap properties. Column count will try to fit the number of columns you specify, in our case 3, into the available width. Column-gap will specify a gap in em/px/% between the columns.
Transitions (CSS animations)
h2 + p
{
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
transition: height 1s ease;
}
Animations in CSS was pioneered by the webkit team and is only currently available in webkit based browsers (Firefox will have it in either 3.6 or 4.0). Using the shorthand transition property we can specify what property to transition, how long it will transition for in seconds and what transition-timing-function to use, we are using ease.
Transforms (CSS Rotation, scaling...)
.images img
{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
margin: 100px 0 100px;
}
.images img:nth-child(2)
{
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5) rotate(45deg);
transform: scale(0.5);
}
Another property pioneered by the webkit team and now available in both Safari 3 and Firefox 3.5 is the transform property for doing things like rotation, scale and skewing. Using both the rotate and scale functions in supporting browsers, all 3 images will be rotated 45 degrees and the middle image will also be scaled to half its original size.
Custom fonts
@font-face {
font-family: 'Sunset';
src: url(SUNSET.eot);
src: local('Sunset'), local('Sunset'), url(SUNSET.TTF) format('truetype');
}
h1 { font-family: 'Sunset', Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 100px; color: #008200; margin: 0 0 0.3em; }
@font-face started life as a Microsoft proprietary property and has since been adopted into the CSS3 spec. The custom font in the demo will work across all latest release browsers with IE needing an eot font file and the others using either a ttf or otf font file. There is an online conversion tool for converting ttf to eot. The above code snippet is used from the great article by Paul Irish on doing a cross browser implementation that gets around all the quirks
Drop shadows
h1 { text-shadow: 2px 2px 5px #000; }
p.multicol { text-shadow: -1px -1px 1px #fff; }
.container
{
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
box-shadow: 3px 3px 5px #000;
}
Text shadow was originally in the CSS2 spec and later dropped in the CSS 2.1 and has been in Safari since 1.1, has been re-added to the CSS3 spec which allows you to specify multiple shadows.
The box shadow which allows you to add drop shadows to box items that also pays attention to the border-radius property. The syntax of this is the same as the text-shadow property.
Rounded corners
.container
{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
h2
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Adding rounded corners to elements is very easy using CSS3. Using the shorthand border-radius we can specify the top, right, bottom & left values, or in the demo set 1 value that is applied to all corners.
Transparency
.container { background: rgba(0,182,234,0.5); }
Adding transparency to an element is very easy now and you would no longer need a transparent png to do so. Using the rgba model , the a being the value for alpha, we can set a colour and then set a value between 1 and 0 for the transparency level. The advantage of using this over the widely used opacity property is that it will not affect child elements.
Media queries
@media (-webkit-transition) {
body
{
/* Multiple backgrounds */
background: url(http://blog.dtdigital.com.au/Assets/gr_bg_body02.png) 50% 90px no-repeat, url(http://blog.dtdigital.com.au/Assets/gr_bg_body03.png) -1000px -215px no-repeat;
}
h2 + p:target
{
height: 3.583em;
}
}
@media all and (orientation: portrait)
{
.container { background: rgba(0,0,0,0.5); }
p, p.multicol { color: #ffffff; text-shadow: 1px 1px 1px #000; }
}
Media queries allows us to add separate styles for different media types, you will be familiar with@media print for targeting print styles on your website. Media queries in CSS3 are vastly extended. In the demo we use them to target browsers that support transitions and to change a few properties when the browser is in portrait mode (the window is taller than it is wider).
Custom selection
::selection { background: #EA2C23; color: #fff; /* Safari */ }
::-moz-selection { background: #EA2C23; color: #fff; /* Firefox */ }
The selection pseudo class has technically been removed from the CSS3 specification but is still a nice enhancement that can be used and is widely implemented in browsers. It allows you to set the color and background-color when a user highlights some text (it’s used on this site, try highlighting this text).
Gradients
.container { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1995CA), to(#00B6EA), color-stop(.6,#00b6ea)); }
Gradients are probably the most complicated CSS3 property, given its convoluted syntax that isn’t all that easy to grasp. Thankfully there is a great tool by a fellow Aussie (John Allsopp) to generate gradients. Safari 4 and Chrome 3 currently support CSS gradients and soon Firefox 3.6 will too, although their syntax is different to webkits (they split linear and radial into 2 separate properties).
Use in right situation, not always possible
Of course there are situations where progressive enhancement is not always a viable option. If it’s important the site needs is 100% consistent across all major browsers, you will need to do it the old laborious way.
Repetition sucks
One issue of using these cool new features is just that, they are new. Many are still in draft specification (though nearing their final draft spec and a lot less likely to change). The browser vendors who implement these features all do so with their own propriety vendor extensions e.g. -moz, -webkit, -o, -ms. There is a good reason for this; so as not to conflict with the final draft if the syntax or properties order changes. This causes a lot of repetition when doing semi-cross browser progressive enhancement, potentially doing the same style up to 5 times.
The future is looking bright
More and more browsers are implementing CSS3 properties from draft spec, ensuring these enhancements reach a wider audience. Soon these techniques and enhancements will become common place in a front-end developer’s bag of tricks. Imagine the day when you get a design with rounded corners, drop shadows and gradients, instead of looking at the Designer in a ball of rage you say “easy, that‘ll be done in 5 minutes.”