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 !

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 ← CSS 119971998 1999200020012002200320042005200620072008200920102011

1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011

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

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 : 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 : enfants A > BUn monde sans IE6 : enfants A > B

sélecteur d’enfants

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

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;

#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

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

« pas facile d’avoir du style »

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

Merci !Merci !

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

Soyez revolutionnaire, utilisez CSS2 !

Technology

Soyez créatif, Soyez inspiré, soyez connecté

Soyez brillant - Xerox

YOIUliOI ro 1r1ennearchivesautonomies.org/IMG/pdf/syndrev/revolutionproletarienne/serieap1947/la...ro .YOIUliOI • - 1r1enne . REVUE SYNDICALISTE REVOLUTIONNAIRE ( - Méthodes de

Où que VOUS SOYEZ

Feuilles de Styles en Cascade CSS : C ascading S tyle S heets CSS2 : Les feuilles de style en cascade, niveau 2

«Soyez les bienvenus»

Deux Siecles de La Rethorique Revolutionnaire

Poissons-pilotes: Soyez plus efficaces!

Soyez Positif

Boen soyez inspir

SarvanSarvan 620 AA2MF3 Soyez prudent, soyez pratique, soyez vu. Protégez-vous, jour et nuit, avec ce gilet anti-statique inginifuge. Comme ce gilet, disponible en orange et …

CPEHN - Site WebSite Web - HTML · 2016-11-25 · Ameliorations graphique – feuille de style, frame,… XML 1998 Extensible Marked Language CSS2 Mai 1998 HTML 4.01 Décembre 1999

Soyez un vrai adorateur

La Democratie Un Projet Revolutionnaire

Équipes de développement : soyez experts!

SOYEZ AUDACIEUSE SOYEZ BRAVE - CUPE Ontario...Soyez audacieux, soyez courageux Plan d'action du SCFP Ontario pour l'année 2017 1. Les membres du SCFP se font évincer à la table

Sébastien Soyez

Communautés en ligne et bouche à oreille 2015 2016 - soyez-catchy soyez-smart

Soyez les Bienvenus

Soyez réalistes, demandez l’impossible !