CSS 3 Aujourd'hui : quoi et comment

Où l'on ne parlera presque que de CSS

Animé par Jérémie Patonnier

Web : http://jeremie.patonnier.net
Mail : jeremie@patonnier.net
Twitter : @JeremiePat

Avec l'aimable participation de nos navigateurs préférés

IE6 IE8 IE9 Firefox Chrome Safari Opera

Ces slides et les exemples : http://jeremie.patonnier.net/experiences/parisweb2010/

Le CSS Working Group

Parce que CSS 2 c'est l'avenir

Où en sont les spécifications : http://www.w3.org/Style/CSS/current-work

Envie de participer ? La mailing-list publique : http://lists.w3.org/Archives/Public/www-style/

Les oubliés de CSS 2

Wesh gros, CSS3 c'est pour les newfags !

On peut s'en servir, alors allons-y.

Propriété IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera
3,2% 14,8% 82%
Source : Statcounter - Septembre 2010 (France)
7,4% 13% 79,6%
Source : Statcounter - Septembre 2010 (Worldwide)
15,5% 10,4% 74,1%
Source : Netmarketshare - Septembre 2010 (Worldwide)
@font-face oui oui oui oui oui oui oui oui
position : fixed non oui oui oui oui oui oui oui
display : inline-block ??? ??? oui oui oui oui oui oui
display : table-cell non non oui oui oui oui oui oui
min-width non oui oui oui oui oui oui oui
max-width non oui oui oui oui oui oui oui
min-height non oui oui oui oui oui oui oui
max-height non oui oui oui oui oui oui oui
:before non non ??? oui oui oui oui oui
:after non non ??? oui oui oui oui oui

Pour les curieux : CSS2.1 Conformance Test Suite

Les sélecteurs CSS

Toi, toi mon toi...

Le module Selectors Level 3 : PR
Le module CSS Basic User Interface Level 3 : CR

L'existant de CSS 2

Les selecteurs "simples"
ELEMENT
#
.
*
+
[att]
[att=val]
[att~=val]
[att|=val]
>
Les pseudo-classes
:hover
:active
:link
:visited
:focus
:first-child
:lang()
Les pseudo-éléments
:before
:after
:first-line
:first-letter

Les nouveautés de CSS 3

Les selecteurs "simples"
~
[att^=val]
[att$=val]
[att*=val]
Les pseudo-classes
:root
:last-child
:nth-child(an+b)
:nth-last-child(an+b)
:first-of-type
:last-of-type
:nth-of-type(an+b)
:nth-last-of-type(an+b)
:only-child
:only-of-type
:empty
:target
:enabled
:disabled
:checked
:indeterminate
:not()
Les pseudo-classes du module "User Interface"
:default
:valid
:invalid
:in-range
:out-of-range
:required
:optional
:read-only
:read-write
Les pseudo-elements
Tous les pseudo-éléments commencent désormais par ::
De nouveau pseudo-éléments pourrait voir le jour
::selection
::value
::choices
::repeat-item
::repeat-index

Le calcul de la spécificité des selecteurs

  1. Le nombre de selecteurs d'identifiant : #
  2. Le nombre de selecteurs de classe, d'attributs et de pseudo-classes : ., [...], :...
  3. Le nombre d'éléments et pseudo-elements

Comment s'en sortir avec Internet Explorer ?

Avec selectivizr (IE8) ou avec IE7 JS (IE6+) \o/

Les couleurs

Double rainbow rulez!

Le module CSS Color Level 3 : LC

CSS 2

CSS 3

Bordures et Arrière-plan

Can I haz cheesburger?

Le module CSS Backgrounds and Borders : CR

CSS2

Arrière-plans
background
background-color
background-image
background-repeat
background-attachment
background-position
Bordures
border
border-color
border-style
border-width

CSS3

Arrière-plans
déclarations multiples
background-clip
background-origin
background-size
Coins arrondis
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Images pour les bordures
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
Autres
box-shadow
box-decoration-break

Media Queries

Comment t'es toi ? Hé ! Dis, dis, hein ?

Le module Media Queries : CR

CSS2 : les types de média

CSS3 : les "media queries"

Applicables via les balises link, les déclarations @import et les déclarations @media

Les fonctionnalités testées sont entourées par des parenthèses

Chaque déclaration est associée via le mot clé and (AND) ou séparée par une virgule (OR)

Les capacités de média testable

Transformations

A droite... Non ! L'autre droite.

Le module CSS 2D Transforms Level 3 : WD (2)
Le module CSS 3D Transforms Level 3 : WD (1)

Les transformations 2D

Les proriétés
transform
transform-origin
Les fonctions de transformation
matrix(a, b, c, d, e, f)
translate(x, y)
translateX(x)
translateY(y)
scale(a, b])
scaleX(a)
scaleY(b)
rotate(n)
skewX(n)
skewY(n)

Les transformations 3D

C'est prometteur, mais c'est encore un peu tôt pour en parler, seul Webkit (Safari/Chrome) l'implémente et aucun autre constructeur ne va les implémenter à court termes malgrès l'intéret qu'ils y portent.

Transitions (& Animations)

Il... Il est... VIVAAAAAANT !

Le module CSS Transitions Level 3 : WD (2)
Le module CSS Animations Level 3 : WD (1)

Les animations

Très intéressant mais c'est beaucoup trop tôt pour en parler. Seul Webkit (Safari/Chrome) l'implémente et trop de questions restent encore sans réponse : Comment réconcilier ça avec SVG/SMIL ? Comment résoudre les problèmes d'accessibilités (controle des animations par l'utilisateur) ? etc.

Les Transitions

Les proriétés
transition
transition-property
transition-duration
transition-timing-function
transition-delay
Les fonctions d'animation
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps(n, s)
cubic-bezier(x1, y1, x2, y2)

Qu'est-ce qui est animable ?

Modernizr

Attention où tu mets les pieds, y'a des p'tits Lego par terre

http://www.modernizr.com


L'erreur à ne pas commettre

.no-rgba p{
	background-color : #7F7F7F;
}

.rgba p{
	background-color : rgba(255,255,255, .5);
}
		

Comment écrire cette règle plus simplement

Outillage

Comment ça "il faut supporter IE6" !

Ressources utiles

Non, mais vraiment.

Documentation générale

Documentation des navigateurs

Outils & recettes de cuisine