CSS3 With a Safety Net

Transcript

1. CSS3 WITH A SAFETY NET PETER GASSTON @STOPSATGREEN

2. BONJOUR JE M’APPELLE PETER GASSTON

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.

6. CONNERIE (PARDON MY FRENCH)

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.

10. PROGRESSIVE ENHANCEMENT & GRACEFUL DEGRADATION

11. DO NOTHING Using some CSS properties, like border-radius, will cause

    no harm if they’re not supported.
12. None

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.
19. None

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; }
21. None

22. 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.

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

27. None

28. USE JS WHERE CSS IS NOT SUPPORTED

29. None

30. document.body.style.transition

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. REWARD PEOPLE WITH GOOD BROWSERS DO COOL STUFF

34. None
35. None

36. POLYFILLS

37. None

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.

40. EVALUATE & PRIORITISE

41. TRIAGE

42. None
43. None

44. MAKE SOME EXTRA EFFORT STAY INFORMED DON’T TELL ANYONE WHAT

    YOU’RE DOING

45. MERCI

46. C’EST TRES BON

47. 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