CSS3 With A Safety Net - Sudweb 2012
-
Upload
peter-gasston -
Category
Technology
-
view
445 -
download
1
description
Transcript of CSS3 With A Safety Net - Sudweb 2012
CSS3 WITH A SAFETY NET
PETER GASSTON@STOPSATGREEN
BONJOURJE M’APPELLEPETERGASSTON
I won’t be making jokes about French stereotypes
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é.
“WE CAN’T USE CSS3 YET”
I am so sick of hearing this.
CONNERIE(PARDON MY FRENCH)
~77% OF BROWSERS HAVE CSS3 SUPPORT
TO SOME DEGREE
Source: StatcounterThe point when every browser fully supports CSS3 may be very far into the future, or not at all.
I recently worked for Top10.com and we used a lot of CSS3 across the site.
HOW TO USE CSS3 NOW
Here are some practical examples of how we did it.
PROGRESSIVE ENHANCEMENT& GRACEFUL
DEGRADATION
DO NOTHING
Using some CSS properties, like border-radius, will cause no harm if they’re not supported.
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....
C’EST LA VIE
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?
DON’T TELL THEM
This won’t work for everyone, but it’s worked for me on many occasions.
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).
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.
e { background-color: #F00; background-image: url(‘foo.png’); background-image: repeating-linear-gradient(45deg, #FFF, #FFF 7px, #F00 7px, #F00 12px); animation: bar 250ms infinite;}
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.
NB: USE CONDITIONAL COMMENTS &
SEPARATE CSS FILES FOR IE
Sidenote.
<link href="all.css" rel="stylesheet"><!--[if lte ie 8]> <link href="ie.css" rel="stylesheet"><![endif]-->
You may have to convince your designers about progressive enhancement
Because bad designers insist on pixel-perfection cross-platform. If so...
DON’T TELL THEM
USE JS WHERE CSS IS NOT SUPPORTED
document.body.style.transition
$.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;}
if(jQuery.support.transition){ $('#foo').addClass('bar');} else { $('#foo').animate({ //Properties });};
REWARD PEOPLE WITH GOOD BROWSERS
DO COOL STUFF
POLYFILLS
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.
FOR EMERGENCIES
ONLY
Polyfills etc, bring performance problems, so use them with caution and only if you really must.
EVALUATE & PRIORITISE
TRIAGE
MAKE SOMEEXTRA EFFORT
STAY INFORMEDDON’T TELL ANYONE
WHAT YOU’RE DOING
MERCI
C’EST TRES BON
http://www.flickr.com/photos/ryder-mw/7235646886/
http://www.flickr.com/photos/76354601@N07/7232416600
http://www.flickr.com/photos/ning2506/6993848945/
http://www.flickr.com/photos/mowestein/4363779898/
http://www.flickr.com/photos/omechanical/3796329118/
http://www.flickr.com/photos/micsworld/5670824432/
http://www.flickr.com/photos/customvestguy/4434533718/
http://www.flickr.com/photos/tourainesereine/2309124143/
http://www.flickr.com/photos/volcanologist/4309186873/
http://www.flickr.com/photos/21373331@N00/2697299280/
http://www.flickr.com/photos/elondotcom/4376838640/
http://alexdemora.blogspot.co.uk/2009/05/allo-allo.html
http://www.flickr.com/photos/qinn/3691031138/
http://chezclio.c.h.pic.centerblog.net/c8ok62hi.jpg