3. CSS3
• HTML5 Logo
• madmanimation
• Shaun the Sheep
• Our Solar System
• Gabriel Sharp's Small Planet
• CSS3 Ads Versus Flash Ads
4. CSS3
1996
• 1ère spécification CSS à devenir une
Recommandation W3C Officiel, CSS 1
1997
• Création de CSS 2
• Le W3C ne maintient plus CSS 1
5. CSS3
1998
• CSS 2 devient une recommandation
• CSS 2.1 = CSS 2 - fonctionnalités
• Développement de la spécification
CSS 3
• Le W3C ne maintient plus la
recommandation CSS 2
16. CSS3
Graceful degradation
• Navigateurs modernes = Prioritaires
avec tests sur les versions précédentes
des principaux
• Anciens navigateurs = expérience
passable + petits fixes
17. CSS3
Progressive enhancement
• Focus sur le contenu, ≠ navigateurs
• CSS2 et un peu de CSS3
• Bloque le notre potentiel créatif
18. CSS3
Hardboiled
• Aucuns compromis, meilleur
expérience Web possible
• Expérience selon les capacités du
navigateur (CSS3)
• Design différent pour les navigateurs
19. CSS3
Do websites need to be
experienced exactly the same
in every browser
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
35. Modules
"Rather than attempting to shove dozens of updates
into a single monolithic specification, it will be
much easier and more efficient to be able to update
individual pieces of the specification. Modules will
enable CSS to be updated in a more timely and
precise fashion, thus allowing for a more flexible
and timely evolution of the specification as a
whole."
W3C - http://www.w3.org/TR/css3-roadmap/
45. CSS3 selectors
[att|=val]
• Attribut att et la valeur exact val ou
commençant par val et
immédiatement suivit de "-"
• Principalement pour les sous-code de
languages
51. CSS3 selectors
:nth-child(N)
• Si l’argument a la forme an+b
• "b" représente la position ordinale du
premier élément sélectionné
• "a" représente la position ordinale de
chaque éléments que nous voulons
sélectionné par la suite
58. CSS3 selectors
:checked
• Éléments radio et checkbox choisis
• Lorsque ces élément sont choisi(on) la
pseudo-class :checked s’applique
• Bon aussi pour les éléments qui
peuvent avoir l’attribut "selected"
61. CSS3 selectors
::before et ::after
• Les pseudo-éléments ::before et ::after
peuvent êtres utilisés pour inséré du
contenu généré avant ou après le
contenu d’un élément
62. CSS3 selectors
::selection
• Change la couleur de background et
de texte des sélections
• http://css-tricks.com/examples/
DifferentSelectionColors/
63. CSS3 selectors
General sibling combinator (~)
• 2 séquences de sélecteurs séparés (~)
• Partagent le même parent
• L'élément représenté par la première
séquence précède (Pas nécessairement
immédiatement) l’élément représenté
par la deuxième séquence
66. CSS3
Multiple backgrounds
• Images de background sur un élément
• Séparés par une virgule (,)
• Les navigateurs qui ne supportent pas
vont ignoré la règle, donc mettre une
déclaration simple avant
• La première image dans la liste est la
plus près de l’utilisateur
69. CSS3 Background-clip
• Spécifie la zone de peinture de fond du
background
• "border-box": Intérieur du border-box
• "padding-box": Intérieur du padding-
box
• "content-box": Intérieur du content-box
72. CSS3 Background-size
• Spécifie la taille de l’image de
background
• Première valeur = largeur
• Deuxième valeur = hauteur
• Si une des dimensions à sa valeur à
auto, l’image doit garder son ratio
75. CSS3 Border-radius
(rounded corners)
• Arrondis les coins d’un élément avec
une valeur de rayon (%, px ou ems)
• Possibilité de contrôlé chaque coins
• http://lab.simurai.com/buttons/
78. CSS3 Border images
• Images de background comme bordure
à la place d’un style
• Les côtés et les coins sont pris de
l’image spécifié, dont les parties seront
découpé, redimentionné et tendu au
besoin
79. CSS3 Border images
• L’image fournit sera découpé en 9
partie selon une grille 3x3. Comme avec
les guides dans Photoshop
• Valeurs = Source de l’image suivit par
la position des guides de découpe
80. CSS3 Border images
• "stretch": Étiré pour couvrir la zone
• "repeat": Tuilé et répété pour couvrir la zone
• "round": Tuilé et répété pour couvrir la
zone. Si la zone n’est pas couverte avec un
nombre complet de tuiles, les images sont
redimensionnés afin qu’il la couvre
• "space": Tuilé et répété pour couvrir la
zone. Si la zone n’est pas couverte avec un
nombre complet de tuiles, les images se
distribuent l’espace afin qu’il la couvre
83. CSS3 Box-shadow
• Possibilité de combiné avec RGBa
• Première valeur = Décalage horizontal
• Seconde valeur = Décalage vertical
• Troisième valeur = Rayon de flou
• Quatrième valeur, couleur pour
l’ombrage
• Effet de 3D = Ajouter une 2e ombre
86. CSS3 Media Queries
• Étiquettage CSS selon le contexe
• width, height, min/max, color,
orientation, aspect-ratio, etc
• Outil pour "Responsive Web Design"
89. Responsive Web Design
• Différentes vues offertes pour les
différents contextes via les media
queries
• Site construit avec une grille flexible
• Images doivent être flexibles
Understanding the Elements of Responsive Web Design
91. Responsive Web Design
Media Queries
• Cibler les appareils soutenus et identifier
les points d'arrêt commun:
• 320px, 480px, 600px, 768px, 900px et
1200px
• 320 and up
• css3-mediaqueries-js
93. Responsive Web Design
Images flexibles
• Code réactif pour servir les images de
taille appropriée en échangeant la source.
Par défaut, c'est la plus petite image.
• Ou utiliser max-width: 100%
• Responsive-Images
• Respond.js
94. CSS3 Text-shadow
• Ombre du texte
• 1e valeur = Décalage horizontal
• 2e valeur = Décalage vertical
• 3e valeur = Rayon du dégradé
• 4e valeur = Couleur de l’ombre
• Possibilité de mettre plusieurs ombres
97. CSS3 Multiple
column layout
• Mise en page avec colonnes ≠ floats
• Système de colonnes en définissant:
• Nombre de colonnes
• Largeur des colonnes
• Le contenu peut continuer d’une
colonne à une autre
102. @font-face Web fonts
• Utilisation de fonts plus variés. Pas de
Flash, pas de JavaScripts
• Vérifier la licence EULA (End User
License Agreement)
• La police doit se trouver sur le même
domaine
107. CSS3 Transforms
• Développé initialement par WebKit et
ensuite incorporé au W3C
• Permet au élément rendu par CSS d’être
transformé dans un espace en 2D
108. CSS3 Transforms
Scale
• La transformation "scale"n'influence
pas la mise en page du document
• Possible de mettre un point d’origine
115. CSS3 Transitions
• Développé initialement par WebKit et
ensuite incorporé au W3C
• Changement des valeurs dans les CSS
lorsque qu'une interaction est déclenché
• Liste des propriétés qui peuvent être en
transition
126. Support
"10 years ago a browser was born. Its name was
Internet Explorer 6. Now that we’re in 2012, in an
era of modern web standards, it’s time to say
goodbye."
Microsoft - http://www.theie6countdown.com/
131. Support
"We, as developers, should be able to develop with
the HTML5 apis [...]. Developing in this future-
proof way means as users upgrade, your code
doesn't have to change but users will move to the
better, native experience cleanly."
Paul Irish - Google
136. Support
Préfixes "vendor-specific"
• Navigateurs + développeurs testes =>
Commentaires pour améliorer la
spécification
• L'ordre est important
• Filtres propriétaires Microsoft ≠ préfixes
137. Support
Préfixes "vendor-specific"
• CSSPrefixer
• cssFx
• CSS Crush
• CSS Agent
• CSS 3 Finalize
• How do you deal with Vendor prefixes?
143. Polyfills
"So here we're collecting all the shims, fallbacks, and
polyfills in order to implant html5 functionality in
browsers that don't natively support them."
The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
144. Polyfills
The All-In-One
Entirely-Not-Alphabetical
No-Bullshit
Guide to
HTML5 Fallbacks
The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
145. Polyfills
"JavaScript library to make MSIE behave like a
standards-compliant browser. It fixes many HTML
and CSS issues and makes transparent PNG work
correctly under IE5 and IE6."
146. Polyfills
• Fixed positioning supported
• Max & min width & height supported
• Additional CSS selectors
• Double margin float bug
• Unscrollable content bug
• Peekaboo bug
• 3 pixel text jog bug