Slide 1

Slide 1 text

CSS3 WITH A SAFETY NET PETER GASSTON @STOPSATGREEN

Slide 2

Slide 2 text

BONJOUR JE M’APPELLE PETER GASSTON

Slide 3

Slide 3 text

I won’t be making jokes about French stereotypes

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

CONNERIE (PARDON MY FRENCH)

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

PROGRESSIVE ENHANCEMENT & GRACEFUL DEGRADATION

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

C’EST LA VIE

Slide 15

Slide 15 text

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?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

DON’T TELL THEM

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

USE JS WHERE CSS IS NOT SUPPORTED

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

document.body.style.transition

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

REWARD PEOPLE WITH GOOD BROWSERS DO COOL STUFF

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

POLYFILLS

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

EVALUATE & PRIORITISE

Slide 41

Slide 41 text

TRIAGE

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

MERCI

Slide 46

Slide 46 text

C’EST TRES BON

Slide 47

Slide 47 text

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