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
![Page 1: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/1.jpg)
CSS3 WITH A SAFETY NET
PETER GASSTON@STOPSATGREEN
![Page 2: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/2.jpg)
BONJOURJE M’APPELLEPETERGASSTON
![Page 3: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/3.jpg)
I won’t be making jokes about French stereotypes
![Page 4: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/4.jpg)
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é.
![Page 5: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/5.jpg)
“WE CAN’T USE CSS3 YET”
I am so sick of hearing this.
![Page 6: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/6.jpg)
CONNERIE(PARDON MY FRENCH)
![Page 7: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/7.jpg)
~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.
![Page 8: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/8.jpg)
I recently worked for Top10.com and we used a lot of CSS3 across the site.
![Page 9: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/9.jpg)
HOW TO USE CSS3 NOW
Here are some practical examples of how we did it.
![Page 10: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/10.jpg)
PROGRESSIVE ENHANCEMENT& GRACEFUL
DEGRADATION
![Page 11: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/11.jpg)
DO NOTHING
Using some CSS properties, like border-radius, will cause no harm if they’re not supported.
![Page 12: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/12.jpg)
![Page 13: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/13.jpg)
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....
![Page 14: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/14.jpg)
C’EST LA VIE
![Page 15: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/15.jpg)
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?
![Page 16: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/16.jpg)
DON’T TELL THEM
This won’t work for everyone, but it’s worked for me on many occasions.
![Page 17: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/17.jpg)
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).
![Page 18: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/18.jpg)
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.
![Page 19: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/19.jpg)
![Page 20: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/20.jpg)
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;}
![Page 21: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/21.jpg)
![Page 22: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/22.jpg)
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.
![Page 23: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/23.jpg)
NB: USE CONDITIONAL COMMENTS &
SEPARATE CSS FILES FOR IE
Sidenote.
![Page 24: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/24.jpg)
<link href="all.css" rel="stylesheet"><!--[if lte ie 8]> <link href="ie.css" rel="stylesheet"><![endif]-->
![Page 25: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/25.jpg)
You may have to convince your designers about progressive enhancement
Because bad designers insist on pixel-perfection cross-platform. If so...
![Page 26: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/26.jpg)
DON’T TELL THEM
![Page 27: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/27.jpg)
![Page 28: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/28.jpg)
USE JS WHERE CSS IS NOT SUPPORTED
![Page 29: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/29.jpg)
![Page 30: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/30.jpg)
document.body.style.transition
![Page 31: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/31.jpg)
$.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;}
![Page 32: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/32.jpg)
if(jQuery.support.transition){ $('#foo').addClass('bar');} else { $('#foo').animate({ //Properties });};
![Page 33: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/33.jpg)
REWARD PEOPLE WITH GOOD BROWSERS
DO COOL STUFF
![Page 34: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/34.jpg)
![Page 35: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/35.jpg)
![Page 36: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/36.jpg)
POLYFILLS
![Page 37: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/37.jpg)
![Page 38: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/38.jpg)
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.
![Page 39: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/39.jpg)
FOR EMERGENCIES
ONLY
Polyfills etc, bring performance problems, so use them with caution and only if you really must.
![Page 40: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/40.jpg)
EVALUATE & PRIORITISE
![Page 41: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/41.jpg)
TRIAGE
![Page 42: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/42.jpg)
![Page 43: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/43.jpg)
![Page 44: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/44.jpg)
MAKE SOMEEXTRA EFFORT
STAY INFORMEDDON’T TELL ANYONE
WHAT YOU’RE DOING
![Page 45: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/45.jpg)
MERCI
![Page 46: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/46.jpg)
C’EST TRES BON
![Page 47: CSS3 With A Safety Net - Sudweb 2012](https://reader034.fdocuments.us/reader034/viewer/2022042813/54bd60d14a79598f278b457c/html5/thumbnails/47.jpg)
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