CSS3 - Possibilite creatives

CSS3

CSS3 Logo by W3C

Possibilités créatives
8 mars 2011 - Rémy Savard

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

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

1997
•Création de CSS level 2 par le CSS Working Group
•Le W3C ne maintient plus la recommandation CSS1

1998
•CSS2 devient une recommandation
•CSS2 révision 1 = Retrait des fonctionnalités
•Développement de la spéciﬁcation CSS3

1998
•CSS2 devient une recommandation
•CSS2 révision 1 = Retrait des fonctionnalités
•Développement de la spéciﬁcation CSS3

1999
•Le premier working draft CSS3 est publié

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

2005
•Des standard déjà publié tel que CSS 2.1, CSS 3
Selectors et CSS 3 Text sont ramenés de Candidate
Recommendation à Working Draft
•CSS 2.1 devient Candidate Recommendation, mais est
renversé à l’état de Working Draft quelques mois après

2005

2007
•CSS 2.1 devient Candidate Recommendation

2005

2007
2009
•CSS 2.1 est mis à jour 2 fois

2005

2007
2009
•CSS 2.1 est mis à jour 2 fois
2010
•CSS 2.1 est renversé à l’état de Working Draft

LES TECHNOLOGIES
ÉVOULENT, LES DESIGNS AUSSI

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

Hier à aujourd’hui

1, 675 ULTIMATE CSS TECHNIQUES YOU WISH
YOU KNEW BEFORE AND WILL HELP YOU
BECOME A NINJA WEB DESIGNER

Hier à aujourd’hui
•Problèmes = Solutions documentés, workarounds pour
navigateurs, groupes de supports, partages de
techniques, etc.
•Sortie des navigateurs au ralentie = Temps pour fabriqué
des approches réutilisable + des bonnes pratiques
•Obsession du pixel perfect sur tous les navigateurs
•Aujourd’hui nos sites sont: mulit-platforme, accessible,
ﬂexible, sémantique, optimal, standard, indexable, etc.
•Regroupé et nommé ces bonne pratiques

Graceful degradation
•Navigateurs modernes = Prioritaires avec tests sur les
versions précédentes des principaux
•Anciens navigateurs = expérience passable + petits ﬁxes


Progressive enhancement
•Focus sur le contenu, ≠ navigateurs
•CSS2 et un peu de CSS3
•Bloque le notre potentiel créatif


Progressive enhancement
•Focus sur le contenu, ≠ navigateurs
•CSS2 et un peu de CSS3
•Bloque le notre potentiel créatif
Hardboiled
•Aucuns compromis, meilleur expérience Web possible
•Expérience selon les capacités du navigateur (CSS3)
•Design différent pour les navigateurs

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

Demain
•Les sites Web ≠ pareil dans tous les navigateurs
•Pixel Perfect = Abandonné les nouvelles technologies
non supportés par tous les navigateurs
•Accepter les nouvelles réalités: augmentation des
mobiles, TV et écrans de toutes tailles
•Navigateurs sortent plus rapidement
•Les navigateurs modernes ont gagnés du terrain
•IE6 est mort(http://ie6countdown.com/)
•Regarder à l’avant, pas à l’arrière
•Pour avancé, nous devons changé notre façon de penser

Demain
•Les sites Web ≠ pareil dans tous les navigateurs
•Pixel Perfect = Abandonné les nouvelles technologies
non supportés par tous les navigateurs
•Accepter les nouvelles réalités: augmentation des
mobiles, TV et écrans de toutes tailles
•Navigateurs sortent plus rapidement
•Les navigateurs modernes ont gagnés du terrain
•IE6 est mort(http://ie6countdown.com/)
•Regarder à l’avant, pas à l’arrière
•Pour avancé, nous devons changé notre façon de penser

dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

CSS3 Logo by W3C

“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/

Pourquoi
•Interactions, animations, mouvements ≠ Flash/JavaScripts
•Sites Web ﬂexible qui prennent en comptes les largeurs
d’écrans
•Temps de développement et coûts réduits
•Fonts variés, drop shadow, coins arrondis, sélecteurs
avancés, transparence transitions, transformations, etc.

Pourquoi
•Interactions, animations, mouvements ≠ Flash/JavaScripts
•Sites Web ﬂexible qui prennent en comptes les largeurs
d’écrans
•Temps de développement et coûts réduits
•Fonts variés, drop shadow, coins arrondis, sélecteurs
avancés, transparence transitions, transformations, etc.

Comment
•Stratégie
•Modules CSS3
•Ressources

STRATÉGIE
•Statuts des modules
•Priorités des modules
•Préﬁxes “vendor-specﬁc”
•Support des navigateurs
•Choix et implantation des alternatives(Fallbacks)

Statuts des modules
•Si on se limite aux normes ﬁnalisées = CSS2 de 1998
•Focusé sur les modules implémentés

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
•Focusé sur les modules de priorités élevés

Completed work
High priority
Medium priority
Low Priority

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

Préfixes “vendor-specific”
•Processus intéressant = Navigateurs + développeurs
testes => Commentaires pour améliorer la spécification
•Les validateurs devraient l'accepté, ≠ hack
•L’ordre est important
•Filtres propriétaires Microsoft ≠ préfixes
•CSSPrefixer

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

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

Choix et implantation des alternatives
•Cas par cas
•Abandonné/exclure les usagers des anciens navigateurs
•Commentaires conditionnel + feuilles de style pour IE
•JavaScripts pour ajouter le support CSS3
•CSS3 PIE
•eCSSstender
•ie7-js
•cssSandpaper

Choix et implantation des alternatives
•Cas par cas
•Abandonné/exclure les usagers des anciens navigateurs
•Commentaires conditionnel + feuilles de style pour IE
•JavaScripts pour ajouter le support CSS3
•CSS3 PIE
•eCSSstender
•ie7-js
•cssSandpaper

Offrir une alternative à la hauteur du
navigateur pour les différentes
fonctionnalités

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

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.
•Un élément cible peut être représenté par la pseudo-
class :target.

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.
•Un élément cible peut être représenté par la pseudo-
class :target.

The language pseudo-class :lang
•Représente un sélecteur pour un élément selon sa
langue si elle est spéciﬁé

:enabled
•Représente un élément de l’interface usager (ex: input)
qui est dans l’état enabled

:enabled

:disabled
qui est dans l’état disabled

:enabled

:disabled
qui est dans l’état disabled

:checked
•Les éléments radio et checkbox peuvent être choisi par
l’usager. 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

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

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

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

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


Border-image
•Images de background à l’intérieur de la zone de
bordure à la place d’un style
•Les côtés et les coins sont pris de l’image spéciﬁé, dont
les parties seront découpé, redimentionné et tendu au
besoin.
•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. Chaque partie de découpe devient
une composante de la bordure: 4 coins, 4 côté entre les
coins et la partie du centre (top, right, bottom, left)

•“stretch” L’image est étiré pour couvrir la zone
•“repeat” L’image est tuilé et répété pour couvrir la zone
•“round” L’image est 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 aﬁn
qu’il couvrent la zone
•“space” L’image est 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 aﬁn
qu’ils couvrent la zone

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
•http://outsideapp.com/

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

RESSOURCES
Liens d’introduction
•http://meyerweb.com/eric/html-xhtml/html5logo/
•http://shakenandstirredweb.com/playground/blur/
•https://mozillademos.org/demos/planetarium/demo.html

RESSOURCES
Liens d’introduction
•http://meyerweb.com/eric/html-xhtml/html5logo/
•http://shakenandstirredweb.com/playground/blur/
•https://mozillademos.org/demos/planetarium/demo.html

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 Selectors
CSS3 Font-face
•Font Squirrel @font-face generator
•Review of Popular Web Font Embedding Services

CSS3 Selectors
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

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

CSS3 - Possibilite creatives

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à CSS3 - Possibilite creatives

Similaire à CSS3 - Possibilite creatives (20)

CSS3 - Possibilite creatives

Notes de l'éditeur