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 !
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 : minima et maximaUn monde sans IE6 : minima et maxima
Un monde sans IE6 : minima et maximaUn monde sans IE6 : minima et maxima
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 : first-child et :hoverUn monde sans IE6 : first-child et :hover
Un monde sans IE6 : first-child et :hoverUn monde sans IE6 : first-child et :hover
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 : :before et :afterUn monde sans IE7 : :before et :after
Un monde sans IE7 : :before et :afterUn monde sans IE7 : :before et :after
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 !
Un monde sans IE7 : modèle tabulaireUn monde sans IE7 : modèle tabulaire
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
Un monde sans IE7 : modèle tabulaireUn monde sans IE7 : modèle tabulaire
Un monde sans IE7 : modèle tabulaireUn monde sans IE7 : modèle tabulaire
« 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