Download pdf - 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 !

http://www.goetter.fr/

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

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 !

Soyez révolutionnaire

utilisez CSS 2 !

Soyez révolutionnaire

utilisez CSS 2 !

1996 19971998 1999200020012002200320042005200620072008200920102011

1996 19971998 1999200020012002200320042005200620072008200920102011

1996 ← CSS 119971998 1999200020012002200320042005200620072008200920102011

1996 ← CSS 119971998 1999200020012002200320042005200620072008200920102011

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011 ← CSS 2.1

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011 ← CSS 2.1

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

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

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

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

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

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

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

Un monde sans IE6 ?Un monde sans IE6 ?

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

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

←←

98%98%

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

Démo !Démo !



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

Démo !Démo !



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

Démo !Démo !

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

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

Démo !Démo !

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

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

Démo !Démo !

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

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

Démo !Démo !

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

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

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

←←

91%91%

←←

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

Démo !Démo !



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

Démo !Démo !

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

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

Démo !Démo !



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



« pas facile d’avoir du style »

© internet explorer

« pas facile d’avoir du style »

© internet explorer

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

Merci !Merci !

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