CSS3 With A Safety Net - Sudweb 2012

755 views

Published on

Practical ways to use CSS3 today. #sudweb

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
755
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS3 With A Safety Net - Sudweb 2012

  1. 1. CSS3 WITH A SAFETY NET PETER GASSTON @STOPSATGREEN
  2. 2. BONJOURJE M’APPELLEPETERGASSTON
  3. 3. I won’t be making jokes about French stereotypes
  4. 4. LES GASSTONSBecause I’m part French myself. My family came over with the Normans in 1066. So any jokesI make will be done with a sense of fraternité.
  5. 5. “WE CAN’T USE CSS3 YET”I am so sick of hearing this.
  6. 6. CONNERIE(PARDON MY FRENCH)
  7. 7. ~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 atall.
  8. 8. I recently worked for Top10.com and we used a lot of CSS3 across the site.
  9. 9. HOW TO USE CSS3 NOWHere are some practical examples of how we did it.
  10. 10. PROGRESSIVEENHANCEMENT & GRACEFULDEGRADATION
  11. 11. DO NOTHINGUsing some CSS properties, like border-radius, will cause no harm if they’re not supported.
  12. 12. 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....
  13. 13. C’EST LA VIE
  14. 14. YOU MAY BE WORRIED THAT YOUR CLIENT WON’T ACCEPT THATI know Sarkozy isn’t president any more, but there are no images of Hollande dressed asNapolean. Also, is it okay to make jokes about Napoleon in France?
  15. 15. DON’T TELL THEMThis won’t work for everyone, but it’s worked for me on many occasions.
  16. 16. A metaphor for progressive enhancement: everybody gets the croissant, but some get thecroissant au jambon et fromage. (In England I use biscuits in this metaphor).
  17. 17. DO SOMETHINGAdd a little extra code to make sure that non-CSS3 browsers still get a good experience, likeusing a background-image as well as gradients.
  18. 18. e { background-color: #F00; background-image: url(‘foo.png’); background-image: repeating-linear-gradient(45deg, #FFF, #FFF7px, #F00 7px, #F00 12px); animation: bar 250ms infinite;}
  19. 19. DO COOL STUFF REWARD PEOPLE WITH GOOD BROWSERSIt means extra work, so why bother doing it? You get to learn new things, and your users withmodern browsers get a better experience.
  20. 20. NB: USE CONDITIONAL COMMENTS & SEPARATE CSS FILES FOR IESidenote.
  21. 21. <link href="all.css"rel="stylesheet"><!--[if lte ie 8]> <link href="ie.css"rel="stylesheet"><![endif]-->
  22. 22. You may have to convince your designers about progressive enhancementBecause bad designers insist on pixel-perfection cross-platform. If so...
  23. 23. DON’T TELL THEM
  24. 24. USE JS WHERE CSS IS NOT SUPPORTED
  25. 25. document.body.style.transition
  26. 26. $.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;}
  27. 27. if(jQuery.support.transition){ $(#foo).addClass(bar);} else { $(#foo).animate({ //Properties });};
  28. 28. DO COOL STUFFREWARD PEOPLE WITH GOOD BROWSERS
  29. 29. POLYFILLS
  30. 30. HTTPS://GITHUB.COM/ MODERNIZR/MODERNIZR/WIKI/ HTML5-CROSS-BROWSER-POLYFILLSThere are no good screenshots of Github, so I used a photo from the French TV series,Engrenages.
  31. 31. FOR EMERGENCIES ONLYPolyfills etc, bring performance problems, so use them with caution and only if you reallymust.
  32. 32. EVALUATE &PRIORITISE
  33. 33. TRIAGE
  34. 34. MAKE SOME EXTRA EFFORT STAY INFORMEDDON’T TELL ANYONEWHAT YOU’RE DOING
  35. 35. MERCI
  36. 36. C’EST TRES BON
  37. 37. http://www.flickr.com/photos/ryder-mw/7235646886/http://www.flickr.com/photos/76354601@N07/7232416600http://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/21373331@N00/2697299280/http://www.flickr.com/photos/volcanologist/4309186873/http://www.flickr.com/photos/tourainesereine/2309124143/http://www.flickr.com/photos/elondotcom/4376838640/http://alexdemora.blogspot.co.uk/2009/05/allo-allo.htmlhttp://www.flickr.com/photos/qinn/3691031138/http://chezclio.c.h.pic.centerblog.net/c8ok62hi.jpg

×