CSS3 With A Safety Net - Sudweb 2012
•
2 gostaram•550 visualizações
Practical ways to use CSS3 today. #sudweb
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a CSS3 With A Safety Net - Sudweb 2012
Semelhante a CSS3 With A Safety Net - Sudweb 2012 (20)
Mais de Peter Gasston
Último
Último (20)
CSS3 With A Safety Net - Sudweb 2012
- 1. CSS3 WITH A SAFETY NET PETER GASSTON @STOPSATGREEN
- 3. I won’t be making jokes about French stereotypes
- 4. 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é.
- 5. “WE CAN’T USE CSS3 YET” I am so sick of hearing this.
- 7. ~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.
- 8. I recently worked for Top10.com and we used a lot of CSS3 across the site.
- 9. HOW TO USE CSS3 NOW Here are some practical examples of how we did it.
- 11. DO NOTHING Using some CSS properties, like border-radius, will cause no harm if they’re not supported.
- 13. 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....
- 14. C’EST LA VIE
- 15. 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?
- 16. DON’T TELL THEM This won’t work for everyone, but it’s worked for me on many occasions.
- 17. 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).
- 18. 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.
- 20. 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; }
- 22. DO COOL STUFF REWARD PEOPLE WITH GOOD BROWSERS 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.
- 23. NB: USE CONDITIONAL COMMENTS & SEPARATE CSS FILES FOR IE Sidenote.
- 24. <link href="all.css" rel="stylesheet"> <!--[if lte ie 8]> <link href="ie.css" rel="stylesheet"> <![endif]-->
- 25. You may have to convince your designers about progressive enhancement Because bad designers insist on pixel-perfection cross-platform. If so...
- 26. DON’T TELL THEM
- 28. USE JS WHERE CSS IS NOT SUPPORTED
- 31. $.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; }
- 32. if(jQuery.support.transition){ $('#foo').addClass('bar'); } else { $('#foo').animate({ //Properties }); };
- 33. DO COOL STUFF REWARD PEOPLE WITH GOOD BROWSERS
- 36. POLYFILLS
- 38. 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.
- 39. FOR EMERGENCIES ONLY Polyfills etc, bring performance problems, so use them with caution and only if you really must.
- 41. TRIAGE
- 44. MAKE SOME EXTRA EFFORT STAY INFORMED DON’T TELL ANYONE WHAT YOU’RE DOING
- 45. MERCI
- 46. C’EST TRES BON