soyez revolutionnaire, utilisez css2 !
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.TRANSCRIPT
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