CSS3 With a Safety Net

Techniques to use CSS3 today while accommodating all browsers. Presented at SudWeb 2012 on 25th May in Toulouse, France. #sudweb

Transcript

1. CSS3 WITH A
   SAFETY NET
   PETER GASSTON
   @STOPSATGREEN
   

   View Slide

2. BONJOUR
   JE M’APPELLE
   PETER
   GASSTON
   

   View Slide

3. I won’t be making jokes about French stereotypes
   

   View Slide

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

   View Slide

5. “WE CAN’T USE
   CSS3 YET”
   I am so sick of hearing this.
   

   View Slide

6. CONNERIE
   (PARDON MY FRENCH)
   

   View Slide

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.
   

   View Slide

8. I recently worked for Top10.com and we used a lot of CSS3 across the site.
   

   View Slide

9. HOW TO USE
   CSS3 NOW
   Here are some practical examples of how we did it.
   

   View Slide

10. PROGRESSIVE
    ENHANCEMENT
    & GRACEFUL
    DEGRADATION
    

    View Slide

11. DO NOTHING
    Using some CSS properties, like border-radius, will cause no harm if they’re not supported.
    

    View Slide

12. View Slide

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

    View Slide

14. C’EST LA VIE
    

    View Slide

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?
    

    View Slide

16. DON’T TELL THEM
    This won’t work for everyone, but it’s worked for me on many occasions.
    

    View Slide

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

    View Slide

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.
    

    View Slide

19. View Slide

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;
    }
    

    View Slide

21. View Slide

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.
    

    View Slide

23. NB: USE
    CONDITIONAL
    COMMENTS &
    SEPARATE CSS FILES
    FOR IE
    Sidenote.
    

    View Slide

24. rel="stylesheet">
    
    

    View Slide

25. You may have to
    convince your
    designers about
    progressive
    enhancement
    Because bad designers insist on pixel-perfection cross-platform. If so...
    

    View Slide

26. DON’T TELL THEM
    

    View Slide

27. View Slide

28. USE JS WHERE
    CSS IS NOT
    SUPPORTED
    

    View Slide

29. View Slide

30. document.body.style.transition
    

    View Slide

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;
    }
    

    View Slide

32. if(jQuery.support.transition){
    $('#foo').addClass('bar');
    } else {
    $('#foo').animate({
    //Properties
    });
    };
    

    View Slide

33. REWARD PEOPLE WITH
    GOOD BROWSERS
    DO COOL STUFF
    

    View Slide

34. View Slide

35. View Slide

36. POLYFILLS
    

    View Slide

37. View Slide

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.
    

    View Slide

39. FOR
    EMERGENCIES
    ONLY
    Polyfills etc, bring performance problems, so use them with caution and only if you really
    must.
    

    View Slide

40. EVALUATE &
    PRIORITISE
    

    View Slide

41. TRIAGE
    

    View Slide

42. View Slide

43. View Slide

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

    View Slide

45. MERCI
    

    View Slide

46. C’EST TRES BON
    

    View Slide

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
    

    View Slide