CSS3 WITH A
SAFETY NET
PETER GASSTON
@STOPSATGREEN
Slide 2
Slide 2 text
BONJOUR
JE M’APPELLE
PETER
GASSTON
Slide 3
Slide 3 text
I won’t be making jokes about French stereotypes
Slide 4
Slide 4 text
LES GASSTONS
Because I’m part French myself. My family came over with the Normans in 1066. So any jokes
I make will be done with a sense of fraternité.
Slide 5
Slide 5 text
“WE CAN’T USE
CSS3 YET”
I am so sick of hearing this.
Slide 6
Slide 6 text
CONNERIE
(PARDON MY FRENCH)
Slide 7
Slide 7 text
~77% OF BROWSERS
HAVE CSS3 SUPPORT
TO SOME DEGREE
Source: Statcounter
The point when every browser fully supports CSS3 may be very far into the future, or not at
all.
Slide 8
Slide 8 text
I recently worked for Top10.com and we used a lot of CSS3 across the site.
Slide 9
Slide 9 text
HOW TO USE
CSS3 NOW
Here are some practical examples of how we did it.
Slide 10
Slide 10 text
PROGRESSIVE
ENHANCEMENT
& GRACEFUL
DEGRADATION
Slide 11
Slide 11 text
DO NOTHING
Using some CSS properties, like border-radius, will cause no harm if they’re not supported.
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
e {
background-color: #FF64C1;
background-image: linear-
gradient(#FF64C1,#FF049B);
border-radius: 5px;
}
This means some elements will display differently cross-browser. But, as we say in English....
Slide 14
Slide 14 text
C’EST LA VIE
Slide 15
Slide 15 text
YOU MAY BE
WORRIED THAT YOUR
CLIENT WON’T
ACCEPT THAT
I know Sarkozy isn’t president any more, but there are no images of Hollande dressed as
Napolean. Also, is it okay to make jokes about Napoleon in France?
Slide 16
Slide 16 text
DON’T TELL THEM
This won’t work for everyone, but it’s worked for me on many occasions.
Slide 17
Slide 17 text
A metaphor for progressive enhancement: everybody gets the croissant, but some get the
croissant au jambon et fromage. (In England I use biscuits in this metaphor).
Slide 18
Slide 18 text
DO SOMETHING
Add a little extra code to make sure that non-CSS3 browsers still get a good experience, like
using a background-image as well as gradients.
REWARD PEOPLE WITH
GOOD BROWSERS
DO COOL STUFF
It means extra work, so why bother doing it? You get to learn new things, and your users with
modern browsers get a better experience.
Slide 23
Slide 23 text
NB: USE
CONDITIONAL
COMMENTS &
SEPARATE CSS FILES
FOR IE
Sidenote.
Slide 24
Slide 24 text
Slide 25
Slide 25 text
You may have to
convince your
designers about
progressive
enhancement
Because bad designers insist on pixel-perfection cross-platform. If so...
Slide 26
Slide 26 text
DON’T TELL THEM
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
USE JS WHERE
CSS IS NOT
SUPPORTED
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
document.body.style.transition
Slide 31
Slide 31 text
$.support.transition=(function(){
var aBody=document.body||
document.documentElement;
var aStyle=aBody.style;
var support=
aStyle.transition!==undefined||
aStyle.WebkitTransition!==
undefined||aStyle.MozTransition!==
undefined||aStyle.MsTransition!==
undefined||aStyle.OTransition!==
undefined;
return support;
}
HTTPS://GITHUB.COM/
MODERNIZR/MODERNIZR/WIKI/
HTML5-CROSS-BROWSER-POLYFILLS
There are no good screenshots of Github, so I used a photo from the French TV series,
Engrenages.
Slide 39
Slide 39 text
FOR
EMERGENCIES
ONLY
Polyfills etc, bring performance problems, so use them with caution and only if you really
must.
Slide 40
Slide 40 text
EVALUATE &
PRIORITISE
Slide 41
Slide 41 text
TRIAGE
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
MAKE SOME
EXTRA EFFORT
STAY INFORMED
DON’T TELL ANYONE
WHAT YOU’RE DOING