CSS3 WebEducation

CSS3

CSS3 Logo by W3C

Nouveautés
19 mai 2011 - Rémy Savard

CSS3 - Nouveautés
•Un peu d’histoire
•Évolution technique et technologique
•Pourquoi débuter maintenant
•Stratégie
•Modules CSS3

UN PEU D’HISTOIRE
1996
•Première spéciﬁcation CSS à devenir une
Recommandation W3C Ofﬁciel, CSS 1

UN PEU D’HISTOIRE
1996
•Première spéciﬁcation CSS à devenir une
Recommandation W3C Ofﬁciel, CSS 1

1997
•Création de CSS 2
•Le W3C ne maintient plus la recommandation CSS 1

1998
•CSS 2 devient une recommandation
•CSS 2.1 = CSS 2 + retrait des fonctionnalités
•Développement de la spéciﬁcation CSS 3

1998
•CSS 2 devient une recommandation
•CSS 2.1 = CSS 2 + retrait des fonctionnalités
•Développement de la spéciﬁcation CSS 3

1999
•Le premier working draft CSS 3 est publié

http://www.ﬂickr.com/photos/jasperﬁelds/2442146122/

2005
•CSS 2.1 Candidate Recommendation à Working Draft
•CSS 2.1 devient Candidate Recommendation
•CSS 2.1 est renversé à Working Draft

2005

2007

2005

2007
2009
•CSS 2.1 est mis à jour 2 fois

2005

2007
2009
•CSS 2.1 est mis à jour 2 fois
2010

2011
•CSS 2.1 W3C Proposed Recommendation
•CSS 3 = Chaque module est indépendant

ÉVOLUTION TECHNIQUE
ET TECHNOLOGIQUE

http://www.ﬂickr.com/photos/raneko/4204026836/in/photostream/

1, 675 TECHNIQUES ULTIMES QUI VONT VOUS
PERMETTRE DE DEVENIR UN NINJA DU CSS

Problèmes = Solutions documentés, workarounds pour
navigateurs, groupes de supports, partages de
techniques, etc.

http://www.ﬂickr.com/photos/kartooner/32891895/

http://www.ﬂickr.com/photos/pete-karl/3654692936/

/* http://meyerweb.com/eric/tools/css/
reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object,
iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
pre,
a, abbr, acronym, address, big, cite,
code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr,
th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

http://www.ﬂickr.com/photos/aquan/2780541892/ http://www.ﬂickr.com/photos/aquan/2780541892/

Aujourd’hui nos sites sont :

http://www.ﬂickr.com/photos/ajc1/4663140532/


Mulit-platforme



Mulit-platforme
Accessible



Mulit-platforme
Accessible
Sémantique



Mulit-platforme
Accessible
Sémantique
Optimisé



Mulit-platforme
Accessible
Sémantique
Optimisé
Standard


Accélération des sorties des navigateurs

http://meyerweb.com/eric/browsers/timeline-structured.html

Les navigateurs modernes gagnent du terrain.

http://gs.statcounter.com/

“10 years ago a browser was born. Its name was Internet
Explorer 6. Now that we’re in 2011, in an era of modern web
standards, it’s time to say goodbye.”

Microsoft - http://www.theie6countdown.com/

Le design doit être identique sur tous les navigateurs

http://www.ﬂickr.com/photos/jstar/2338025074/

Augmentation des mobiles et contextes d’utilisations

http://gs.statcounter.com/

POURQUOI DÉBUTER
MAINTENANT

CSS3 vs. CSS: A Speed Benchmark

1. linear-gradient
2. border-radius
3. radial-gradient
4. text-shadow
5. box-shadow with RGBa

http://www.smashingmagazine.com/2011/04/21/css3-
vs-css-a-speed-benchmark/

Résultats : Diminution du temps de chargement

“Pour moi, CSS3 a été non seulement plus rapide mais
beaucoup plus agréable,parce que j'étais concentré sur une
seule fenêtre (mon éditeur CSS)[...]. D'autre part, le tranchage
et le transfert des images à partir de Photoshop à FTP à
l'éditeur CSS à été une corvée, ce qui a pris plus de temps.”
Trent Walton - http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

Temps de production, de maintenance et coûts réduits

http://www.ﬂickr.com/photos/disowned/1158857526/

STRATÉGIE
•Statuts des modules
•Priorités des modules
•Support des navigateurs
•Choix et implantation des alternatives(Fallbacks)

Statuts des modules

Completed work
REC W3C Recommendation

Drafts
PR Proposed Recommendation
CR Candidate Recommendation
LC Last Call Draft
WD Working Draft

http://www.w3.org/standards/techs/css#w3c_all

Priorités des modules

Completed work
High priority
Medium priority
Low Priority

http://www.w3.org/Style/CSS/current-work

Support des navigateurs
•caniuse.com
•QuirksMode - CSS contents and browser compatibility
•Robert Nyman - CSS3 - Information and samples
•ﬁndmebyIP - HTML5 & CSS3 Support

http://morcha.blogbus.com/logs/30886671.html

Choix et implantation des alternatives

PR

CSS COLOR MODULE LEVEL 3
RGB(A), HSL(A) et noms de couleurs
•≠ propriété, = nouveau modèle de couleur
•Valeur RGB ou HSL avec optionnellement l’opacité

http://robertnyman.com/css3/

opacity
•Opacité d’un élément de 0 à 1
•RGBa = 1 couleur / Opacity = 1 élément + enfants

http://www.ﬁndmebyip.com/litmus/

PR

SELECTORS LEVEL 3
[att]
•Attribut att, peut importe la valeur de l’attribut

PR

SELECTORS LEVEL 3
[att]
[att=val]
•Attribut att et la valeur exact val

PR

SELECTORS LEVEL 3
[att]
[att=val]
•Attribut att et la valeur exact val

[att~=val]
•Attribut att avec des valeurs séparés par des espaces,
l’une d’elles doit être val

[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

[att|=val]

[att^=val]
•Attribut att et une valeur qui commence par val

[att|=val]

[att^=val]
[att$=val]
•Attribut att et une valeur qui se termine par val

[att|=val]

[att^=val]
[att$=val]
•Attribut att et une valeur qui se termine par val

[att*=val]
•Attribut att et une valeur qui contient au moins une
instance de la substring val

::ﬁrst-line
•Représente la première ligne formatté d’un élément.

::ﬁrst-line
•Représente la première ligne formatté d’un élément.

::ﬁrst-letter
•Représente la première lettre d’un élément, si elle n’est
pas précédé par aucuns autres éléments de contenu
(images) sur sa ligne.
•Utiliser pour donner du style
•La ponctuation qui précède ou suit le première lettre
devrait être inclus
•Pourrait être un chiffre. 67 millions = 6

The target pseudo-class :target
•Certaines URIs ce terminant par # et un identiﬁant de
fragement refère à un emplacement dans une ressource.
•Exemple: http://example.com/html/top.html#section_2
•Ces URIs ciblent vers un élément dans le document,
connu comme l’élément cible.

The target pseudo-class :target
•Certaines URIs ce terminant par # et un identiﬁant de
fragement refère à un emplacement dans une ressource.
•Exemple: http://example.com/html/top.html#section_2
•Ces URIs ciblent vers un élément dans le document,
connu comme l’élément cible.

::selection
•Change la couleur de background et de texte des
sélections.
•http://css-tricks.com/overriding-the-default-text-
selection-color-with-css/

General sibling combinator (~)
•Fait de 2 séquences de sélecteurs séparés par ~. Les
éléments représenté par ces deux séquences partagent
le même parent et 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.

http://www.quirksmode.org/css/selector_sibling.html

CR

CSS BACKGROUNDS AND
BORDERS MODULE LEVEL 3

Background-image
•Plusieurs image 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

Background-clip
•Spécifie la zone de peinture de fond du background
•“border-box” Affiché à l’intérieur du border-box
•“padding-box” Affiché à l’intérieur du padding-box
•“content-box” Affiché à l’intérieur du content-box


Background-origin
•Spéciﬁe comment la position du background est calculé
•“border-box” Positionné relativement selon la bordure
•“padding-box” Positionné relativement selon le padding
•“content-box” Positionné relativement selon le contenu


Background-size
•Spéciﬁe la taille de l’image de background
•La première valeur donne la largeur tandis que la
deuxième valeur donne la hauteur
•Si une des dimensions à sa valeur à auto, l’image doit
garder son ration.


Border-radius
•Arrondis les coins d’un élément avec une valeur de
rayon (%, px ou ems)
•Possibilité de contrôlé chaque coins
•IE7 et IE8 = coins carrés devraient être acceptables


Box-shadow
•Ajoute une ombre à un élément
•Possibilité de combiné avec RGBa pour un effet
•La première valeur = au décalage horizontal, la seconde
= décalage vertical et la troisième valeur = rayon de
ﬂou. Finalement, couleur pour l’ombrage
•Pour créé une effet plus naturel de 3D il est possible
d’ajouter une 2e ombre


CR

MEDIA QUERIES
•Étiquettage plus précis des feuilles de styles
•width, height, min/max, color, orientation, aspect-ratio, etc
•Outil pour “Responsive Web Design”
•Changement de CSS en haut de 800px de large:


Responsive Web Design
•Le site doit être construit avec une grille ﬂexible.
•Les images dans le design doivent être ﬂexibles.
•Différentes vues doivent êtres offertes pour les
différents contextes via les media queries.
http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design/

http://mediaqueri.es/

CR

CSS MULTI-COLUMN LAYOUT
MODULE
•Mise en page avec colonnes ≠ floats
•Nous pouvons définir un système de colonnes soit en
définissant le nombre de colonnes ou la largeur des
colonnes
•Le contenu peut continuer d’une colonne à une autre


CR

CSS3 BASIC USER INTERFACE
MODULE
box-sizing
•content-box = width, height et min/max appliqué au
content box. Padding et border à l’éxtérieur des
dimensions
•border-box = width, height et min/max détermine le
border box. Padding et border compris dans les
dimensions


Outline
•Agit comme border (width, style, color)
•+ outline-offset
MAIS
•Ils ne prenne pas d’espace
•Peuvent être non-rectangulaire


WD

CSS TEXT LEVEL 3
text-shadow
•Propriété CSS2 abandonné dans CSS 2.1 et ré-introduis
dans CSS3
•Ajout d’une ombre au texte, avec des options de
direction, quantité de ﬂou et couleur de l’ombre
•Les 2 premières valeurs servent au décalage horizontal
et vertical. La 3e valeur est le rayon du dégradé de
l’ombre. Finalement, la couleur de l’ombre
•Valeurs négatives acceptés
•Possibilité de mettre plusieurs ombres


http://unitinteractive.com/blog/test/textshadow.html

WD

CSS FONTS MODULE LEVEL 3
•Utilisation de fonts plus variés. Pas de Flash, pas de
JavaScripts
•Vériﬁer la licence EULA (End User License Agreement)
•La police doit se trouver sur le même domaine

http://www.fontspring.com/fontface

http://fffo.grahambird.co.uk/


WD

CSS 2D TRANSFORMS
MODULE LEVEL 3
•Développé initialement par l’équipe de WebKit et
ensuite incorporé au W3C
•Permet au élément rendu par CSS d’être transformé
dans un espace en 2 dimensions


Scale
•Les élément qui ont la transformation scale n’inﬂuencent
pas le layout du document.
•Possible de mettre un point d’origine

Scale
•Les élément qui ont la transformation scale n’inﬂuencent
pas le layout du document.
•Possible de mettre un point d’origine

Rotate

Skew
•Skew prends les coordonnés x et y et penche un
élément.

Skew
•Skew prends les coordonnés x et y et penche un
élément.

Translate
•Translate déplace les éléments via les coordonnés x/y
•Valeurs négatives acceptés

WD

CSS TRANSITIONS MODULE
LEVEL 3
•Développé initialement par l’équipe de WebKit et
ensuite incorporé au W3C
•Changement des valeurs dans les CSS lorsque qu’une
interaction est déclenché (hover)
•Liste des propriétés qui peuvent être en transition


transition-timing-function
•ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier

Transition pour plusieurs propriétés
•Séparés par une virgule (,)
•Chacuns peu avoir ses fonctionnalités de temps et de
délais

CONCLUSION

Commencez maintenant!

CONCLUSION

Commencez maintenant!

•W3C - Statut des modules CSS3
•W3C - Priorités des modules CSS3
•caniuse.com
•html5boilerplate.com
•Hardboiled CSS3 Media Queries

RESSOURCES

Liens d’introduction
•http://meyerweb.com/eric/html-xhtml/html5logo/

Support des navigateurs
•caniuse.com
•QuirksMode - CSS contents and browser compatibility
•Robert Nyman - CSS3 - Information and samples
•ﬁndmebyIP - HTML5 & CSS3 Support
•universal-ie6-css

CSS3 Selectors
•CSS3 Selectors Test
CSS3 Font-face
•Font Squirrel @font-face generator
•Review of Popular Web Font Embedding Services
Media Queries
•CSS 3 Media Queries for all Browser (jQuery Plugin)
•css3-mediaqueries-js
•Respond
•1140 CSS Grid
•ProtoFluid
•Hardboiled CSS3 Media Queries
•Responsive-Images

Générateurs
•http://css3generator.com/
•http://css3please.com/
•http://www.css3maker.com/index.html
•http://border-radius.com/
•http://css3-buttons.heroku.com/generator
•http://www.colorzilla.com/gradient-editor/

CSS3

CSS3 Logo by W3C

http://www.slideshare.net/rsavard/css3-webeducation
@REMYSAVARD

CSS3 WebEducation

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a CSS3 WebEducation

Similar a CSS3 WebEducation (20)

CSS3 WebEducation

Notas del editor