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
Ces slides et les exemples : http://jeremie.patonnier.net/experiences/parisweb2010/
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/
On peut s'en servir, alors allons-y.
| Propriété | |
 |
 |
|
|
|
|
|
|---|---|---|---|---|---|---|---|---|
| 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 |
 |
|
|
|
|
|
|
|
position : fixed |
 |
|
|
|
|
|
|
|
display : inline-block |
 |
|
|
|
|
|
|
|
display : table-cell |
|
|
|
|
|
|
|
|
min-width |
|
|
|
|
|
|
|
|
max-width |
|
|
|
|
|
|
|
|
min-height |
|
|
|
|
|
|
|
|
max-height |
|
|
|
|
|
|
|
|
:before |
|
|
|
|
|
|
|
|
:after |
|
|
|
|
|
|
|
|
Pour les curieux : CSS2.1 Conformance Test Suite
Le module Selectors Level 3 : PR
Le module CSS Basic User Interface Level 3 : CR
ELEMENT#.*+[att][att=val][att~=val][att|=val]>:hover:active:link:visited:focus:first-child:lang():before:after:first-line:first-letter~[att^=val][att$=val][att*=val]: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():default:valid:invalid:in-range:out-of-range:required:optional:read-only:read-write::::selection::value::choices::repeat-item::repeat-index#., [...], :...Avec selectivizr (IE8) ou avec IE7 JS (IE6+) \o/
Le module CSS Color Level 3 : LC
Le module CSS Backgrounds and Borders : CR
backgroundbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionborderborder-colorborder-styleborder-widthbackground-clipbackground-originbackground-sizeborder-radiusborder-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusborder-imageborder-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatbox-shadowbox-decoration-breakLe module Media Queries : CR
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)
width: <length>
min-width: <length>max-width: <length>height: <length>
min-height: <length>max-height: <length>device-width: <length>
min-device-width: <length>max-device-width: <length>device-height: <length>
min-device-height: <length>max-device-height: <length>orientation: [ portrait | landscape ]aspect-ratio: <ratio>
min-aspect-ratio: <ratio>max-aspect-ratio: <ratio>device-aspect-ratio: <ratio>
min-device-aspect-ratio: <ratio>max-device-aspect-ratio: <ratio>color: <integer>?
min-color: <integer>?max-color: <integer>?color-index: <integer>?
min-color-index: <integer>?max-color-index: <integer>?monochrome: <integer>?
min-monochrome: <integer>?max-monochrome: <integer>?resolution: <integer>
min-resolution: <integer>max-resolution: <integer>scan: [ progressive | interlace ]grid: [ 0 | 1 ]Le module CSS 2D Transforms Level 3 : WD (2)
Le module CSS 3D Transforms Level 3 : WD (1)
transformtransform-originmatrix(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)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.
Le module CSS Transitions Level 3 : WD (2)
Le module CSS Animations Level 3 : WD (1)
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.
transitiontransition-propertytransition-durationtransition-timing-functiontransition-delayeaselinearease-inease-outease-in-outstep-startstep-endsteps(n, s)cubic-bezier(x1, y1, x2, y2)background-colorbackground-positionborder-bottom-colorborder-bottom-widthborder-colorborder-left-colorborder-left-widthborder-right-colorborder-right-widthborder-spacing lengthborder-top-colorborder-top-widthborder-widthbottomclipcolorcropfont-sizefont-weightgrid-*heightleftletter-spacingline-heightmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityoutline-coloroutline-offsetoutline-widthpadding-bottompadding-leftpadding-rightpadding-toprighttext-indenttext-shadowtopvertical-alignvisibilitywidthword-spacingz-index
.no-rgba p{
background-color : #7F7F7F;
}
.rgba p{
background-color : rgba(255,255,255, .5);
}
Comment écrire cette règle plus simplement