58
www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter Raphaël Goetter Raphaël Goetter Soyez révolutionnaires, utilisez CSS 2 ! Soyez révolutionnaires, utilisez CSS 2 !

Soyez revolutionnaire, utilisez CSS2 !

Embed Size (px)

DESCRIPTION

Parce que CSS3 c'est super, mais qu'on vit encore un peu dans le présent et que des pans entiers de CSS 2.1 ont été occultés en raison du dinosaure IE6. En attendant que tout le monde ait Internet Explorer 9 ou Firefox 4, voyons ce qu'on peut faire avec IE7 et IE8 en utilisant un langage CSS2 mal connu.

Citation preview

Page 1: Soyez revolutionnaire, utilisez CSS2 !

www.alsacreations.comwww.goetter.frwww.ie7nomore.com@goetter

Raphaël GoetterRaphaël Goetter

Soyez révolutionnaires, utilisez CSS 2 !Soyez révolutionnaires, utilisez CSS 2 !

Page 2: Soyez revolutionnaire, utilisez CSS2 !

Soyez révolutionnaires, utilisez CSS 2 !Soyez révolutionnaires, utilisez CSS 2 !

depuis le17 mars

depuis le17 mars

et aussi...et aussi...Techniques CSS avancéesPositionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3)Gestion de projet(conventions, optimisation des performances, frameworks)HTML5, CSS3Résolution de boguesMultimédia(web mobile, e-mailing, impression, projection,...)

Techniques CSS avancéesPositionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3)Gestion de projet(conventions, optimisation des performances, frameworks)HTML5, CSS3Résolution de boguesMultimédia(web mobile, e-mailing, impression, projection,...)

Page 3: Soyez revolutionnaire, utilisez CSS2 !

Au menu :des aspects de CSS 2 ...

Au menu :des aspects de CSS 2 ...Finalisés depuis des annéesUtilisables en production Très pratiques à l'usage… Souvent méconnus !

Finalisés depuis des annéesUtilisables en production Très pratiques à l'usage… Souvent méconnus !

Page 4: Soyez revolutionnaire, utilisez CSS2 !

Soyez révolutionnaire

utilisez CSS 2 !

Soyez révolutionnaire

utilisez CSS 2 !

Page 5: Soyez revolutionnaire, utilisez CSS2 !

1996 19971998 1999200020012002200320042005200620072008200920102011

1996 19971998 1999200020012002200320042005200620072008200920102011

Page 6: Soyez revolutionnaire, utilisez CSS2 !

1996 ← CSS 119971998 1999200020012002200320042005200620072008200920102011

1996 ← CSS 119971998 1999200020012002200320042005200620072008200920102011

Page 7: Soyez revolutionnaire, utilisez CSS2 !

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011

Page 8: Soyez revolutionnaire, utilisez CSS2 !

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011 ← CSS 2.1

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011 ← CSS 2.1

Page 9: Soyez revolutionnaire, utilisez CSS2 !

1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 62002200320042005200620072008200920102011 ← CSS 2.1

1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 62002200320042005200620072008200920102011 ← CSS 2.1

Page 10: Soyez revolutionnaire, utilisez CSS2 !

1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 720072008200920102011 ← CSS 2.1

1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 720072008200920102011 ← CSS 2.1

Page 11: Soyez revolutionnaire, utilisez CSS2 !

1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 7200720082009 ← IE 820102011 ← CSS 2.1

1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 7200720082009 ← IE 820102011 ← CSS 2.1

Page 12: Soyez revolutionnaire, utilisez CSS2 !

1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 7200720082009 ← IE 820102011 ← CSS 2.1 ← IE 9

1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 7200720082009 ← IE 820102011 ← CSS 2.1 ← IE 9

Page 13: Soyez revolutionnaire, utilisez CSS2 !
Page 14: Soyez revolutionnaire, utilisez CSS2 !

Où est passé CSS 2 ?Où est passé CSS 2 ?

Page 15: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE 6 ?!Un monde sans IE 6 ?!

Page 16: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 ?Un monde sans IE6 ?

Nos successeurs ne connaîtront pas IE6 !Nos successeurs ne connaîtront pas IE6 !

Page 17: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : où en est-on ?Un monde sans IE6 : où en est-on ?

←←

98%98%

Page 18: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : minima et maximaUn monde sans IE6 : minima et maxima

min-widthmax-widthmin-heightmax-height

min-widthmax-widthmin-heightmax-height

body { max-width: 1100px; }

Page 19: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 20: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : minima et maximaUn monde sans IE6 : minima et maxima

Page 21: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : minima et maximaUn monde sans IE6 : minima et maxima

Page 22: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : first-child et :hoverUn monde sans IE6 : first-child et :hover

pseudo-classesfirst-child

:hover

pseudo-classesfirst-child

:hover

p:hover { background-color: pink; }

Page 23: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 24: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : first-child et :hoverUn monde sans IE6 : first-child et :hover

Page 25: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : first-child et :hoverUn monde sans IE6 : first-child et :hover

Page 26: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : enfants A > BUn monde sans IE6 : enfants A > B

sélecteur d’enfants

A > B

sélecteur d’enfants

A > B

ul#nav > li { list-style: none; }

Page 27: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 28: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : enfants A > BUn monde sans IE6 : enfants A > B

Page 29: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : attribut [attr]Un monde sans IE6 : attribut [attr]

sélecteur d’attribut

[attr]

sélecteur d’attribut

[attr]

input[type="submit"] { cursor: pointer; }

Page 30: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 31: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : attribut [attr]Un monde sans IE6 : attribut [attr]

Page 32: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : adjacent A + BUn monde sans IE6 : adjacent A + B

sélecteur d’adjacence

A + B

sélecteur d’adjacence

A + B

h1 + p { font-style: italic; }

Page 33: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 34: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : adjacent A + BUn monde sans IE6 : adjacent A + B

Page 35: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : position fixéeUn monde sans IE6 : position fixée

positionnement position: fixed;

positionnement position: fixed;

#nav { position: fixed; top: 0; left: 0;}

Page 36: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 37: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE6 : position fixéeUn monde sans IE6 : position fixée

Page 38: Soyez revolutionnaire, utilisez CSS2 !
Page 39: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE 7 ?!Un monde sans IE 7 ?!

Page 40: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7: où en est-on ?Un monde sans IE7: où en est-on ?

←←

91%91%

←←

Page 41: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : :before et :afterUn monde sans IE7 : :before et :after

contenu généré:before:after

contenu généré:before:after

blockquote:after { content: url(guillemets.png); }

Page 42: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 43: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : :before et :afterUn monde sans IE7 : :before et :after

Page 44: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : :before et :afterUn monde sans IE7 : :before et :after

Page 45: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : inline-blockUn monde sans IE7 : inline-block

inline et block à la fois

inline-block

inline et block à la fois

inline-block

a { display: inline-block; width: 150px; }

Page 46: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 47: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : inline-blockUn monde sans IE7 : inline-block

Page 48: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : modèle tabulaireUn monde sans IE7 : modèle tabulaire

modèle tabulaire

display: table

modèle tabulaire

display: table

#aside, #content { display: table-cell; }

Page 49: Soyez revolutionnaire, utilisez CSS2 !

Démo !Démo !

Page 50: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : modèle tabulaireUn monde sans IE7 : modèle tabulaire

Page 51: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : modèle tabulaireUn monde sans IE7 : modèle tabulaire

Mise en page facile et intuitiveHauteurs égalesCentrage verticalLargeur fluideHauteur fluideRéordonnement d’éléments

Mise en page facile et intuitiveHauteurs égalesCentrage verticalLargeur fluideHauteur fluideRéordonnement d’éléments

Page 52: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : modèle tabulaireUn monde sans IE7 : modèle tabulaire

Page 53: Soyez revolutionnaire, utilisez CSS2 !

Un monde sans IE7 : modèle tabulaireUn monde sans IE7 : modèle tabulaire

Page 54: Soyez revolutionnaire, utilisez CSS2 !
Page 55: Soyez revolutionnaire, utilisez CSS2 !

« pas facile d’avoir du style »

© internet explorer

« pas facile d’avoir du style »

© internet explorer

Page 56: Soyez revolutionnaire, utilisez CSS2 !
Page 57: Soyez revolutionnaire, utilisez CSS2 !

CréditsCrédits

Raphaël Goetter alsacreations.com @goetterRaphaël Goetter alsacreations.com @goetter

Photos, illustrations : www.fotolia.frPolice : MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.net

Photos, illustrations : www.fotolia.frPolice : MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.net

Page 58: Soyez revolutionnaire, utilisez CSS2 !

Merci !Merci !

Raphaël Goetter alsacreations.com Raphaël Goetter alsacreations.com