color-index : indique le nombre dentres dans la table de couleurs indexes pour le priphrique de sortie.

device-aspect-ratio : format dimage du priphrique de sortie. Elle reprsente le nombre de pixels horizontaux sur le nombre de pixels verticaux cela permet, par exemple, de tester si lon est en 16:9 ou 19:10. device-height : hauteur du priphrique de sortie. device-width : largeur du priphrique de sortie. grid : dtermine si le priphrique de sortie est un priphrique en grille ou bitmap. height : dcrit la hauteur de la surface de rendu du priphrique de sortie. monochrome : nombre de bits par pixels sur un priphrique monochrome (chelle de gris). resolution : rsolution (densit de pixels) du priphrique de sortie soit en points par pouce (dpi) ou en points par centimtre (dpcm). scan : dcrit le processus de balayage des priphriques de sortie de type tlvision. width : largeur de la surface de rendu du priphrique de sortie.
Notez enn que la beta de Safari 4 supporte galement ces Media Queries !

Pour en savoir plus

www.kiwano.fr www.letstudio.fr

conception : www.letstudio.fr - sources : www.kiwano.fr

Par les experts de

les nouveauts

CSS3

Les nouveauts CSS 3

Les nouveauts CSS 3

Les nouveauts CSS 3 sur les slecteurs
Slecteur dattribut
3 nouveaux slecteurs dattribut sont introduits par la norme CSS 3 : [att^=val] Reprsente un attribut dont la valeur commence exactement par le prxe val. [att$=ident] Reprsente un attribut dont la valeur nit exactement par le sufxe ident. [att*=val] Reprsente un attribut dont la valeur contient au moins une fois la sous-chane val.
Le seul navigateur qui ne supporte pas les slecteurs dattribut CSS3 est IE6. IE7, IE8, Opera et les navigateurs bass les moteurs Webkit (Safari et Chrome) et Gecko (Firefox) supporte ces slecteurs.

La pseudo-classe de negation :not La pseudo-classe de ngation est une notation fonctionnelle prenant un slecteur simple pour argument. Elle reprsente un lment qui nest pas reprsent par largument. Lexemple ci-dessous permet dafcher le texte des paragraphes qui nont pas la classe lead en noir. p:not([class*=lead]) { color: black; }
Les navigateurs bass sur le moteur Webkit ou Opera supportent toutes les nouveauts CSS 3 des slecteurs de pseudo-classe. Firefox 2 et 3 supporte uniquement :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled et :disabled, mais Firefox 3.5 aura un support complet des slecteurs CSS 3. Internet Explorer na aucun support actuel de ces pseudo-classes.

Pseudo-lment
Les pseudo-lments fragments dlments dinterface Le nouveau pseudo-lment ::selection sapplique la portion du document qui a t mise en exergue par lutilisateur. Lexemple suivant permet de modier la couleur de fond du texte en cours de slection. ::selection { background-color: blue; }

Combinateur dadjacence indirecte

Les combinateurs dadjacence indirecte sont composs du caractre ~ sparant deux squences de slecteurs simples. Lexemple suivant permet dajouter une bordure grise toutes les images qui suivent une div particulire (limage et la div doivent avoir le mme parent). div~img { border: 1px solid #ccc; }
Tous les navigateurs supportent le combinateur dadjacence indirecte sauf votre navigateur favori : Internet Explorer 6.

Les nouveauts CSS 3 : les Media Queries

Cest quoi les Media Queries ?
Les medias queries sont une nouveaut CSS 3 qui permet de dnir des styles en fonction du mdia sur lequel est afch la page web. Avec les medias queries on peut limiter laction dun style en fonction dinformations prcises comme par exemple les proprits width, height, et color du navigateur. Exemple @media min-width Un exemple dapplication trs utile des media queries serait de pouvoir dnir des styles en fonction de la taille du navigateur. On peut imaginer par exemple un site qui afcherait un texte dans une structure en colonne dont le nombre dpendrait de la taille du navigateur. Avec les media queries, il est trs facile de xer un style pour les navigateurs ayant une largeur minimum. Voici lexemple de code pour une largeur de 1200px :
/* style appliqu uniquement aux navigateurs ayant une largeur suprieure 1200px */

Pseudo-classes
Contient les plus grosses nouveauts de la norme CCS 3. La pseudo-classe :nth-child() Ce slecteur vous permet de cibler les lments en se basant sur leur position dans la liste des enfants de leur parent. Vous pouvez utiliser un numro, une expression numrique ou les mots odd et even correspondant impair et pair (parfait pour faire un style alternatif pour vos tableaux). tr:nth-child(2n+1) /* correspond aux lignes paires */ tr:nth-child(odd) /* pareil */ La pseudo-classe :nth-last-child() Ce slecteur ressemble beaucoup au slecteur prcdent sauf quil correspond au dernier enfant dun lment parent. tr:nth-last-child(-n+2) /* correspond aux 2 dernires lignes du tableau */ La pseudo-classe :last-child Identique :nth-last-child(1). La pseudo-classe :last-child reprsente un lment qui est le dernier fils dun autre lment. La pseudo-classe :checked Correspond aux lments qui sont cochs. La pseudo-classe :empty Correspond aux lments qui nont pas denfant ou qui sont vides.

@media screen and (min-width: 1200px) { div#content {width: 1200px;} }

Les fonctionnalits Media Queries

Les medias queries permettent donc de tester des proprits media du navigateur avant lapplication des styles. Voici la liste des proprits dj testables qui seront supportes dans la prochaine version de Firefox : color : indique le nombre de bits par composante de couleur sur le priphrique de sortie (nombre de bits pour les couleurs).