Les cahiers de l'intégrateur

Depuis plusieurs années maintenant, le langage CSS est devenu commun dans le monde du Web, que ce soit en tant que miracle pour permettre à certains de sortir du dilemme des balises <table> mal utilisées, ou que soit en tant que casse-tête pour les autres notamment au niveau de l'interopérabilité entre les différents navigateurs Web.

Mais il aura fallu quand même un bon moment avant de voir arriver les premiers navigateurs prenant en compte parfaitement (ou pas) le standard W3C dans sa version la plus récente, le CSS 2.1. Un test parmi tant d'autres permettant de s'en rendre compte sur les navigateurs modernes, n'est autre que le célébrissime test Acid2 (le 3 leur donne déjà plus de fil à retordre).

Mais alors qu'on commence à peine à arriver dans une situation idéale avec la plupart des navigateurs actuels au niveau du rendu du CSS 2.1, qu'en sera-t-il de son successeur le CSS 3 ? Sera-t-il détrôné par les RIA ? Mettra-t-il aussi autant de temps que son grand frère pour être bien pris en compte par les navigateurs Web ?

Évidemment, certains n'auront pas chômer à leur tache et quelques uns des navigateurs sont déjà capables d'afficher des éléments CSS3 au travers de différents hacks ou variantes comme -moz- ou encore -webkit- (Je vous laisse deviner les navigateurs concernés).
Et bien sûr, je ne vous cacherai pas que pour avoir l'effet voulu, il faudra afficher l'élément avec un de ces navigateurs. Mais dans ce billet, j'en ferai des images.

Quand les ronds et les carrés fusionnent

Une propriété qui en intéressera plus d'un et permettra aussi de s'affranchir d'une certaine pollution de balises "inutiles" n'est autre que border-radius. Ceci est déjà possible d'une certaine façon en CSS ou via des images, mais autant dire que ce n'est pas très propre dans le code appliqué derrière...
Dans cet exemple, j'utilise les propriétés -moz-border-radius et -webkit-border-radius que j'applique de la manière suivante :

<div style="border:Black 1px solid;background:#ccc;-moz-border-radius:10px;-webkit-border-radius:10px;padding:10px;margin:10px 0;">

    Lorem ipsum dolor sit amet, [...] Aliquam aliquet nibh ullamcorper mauris.

</div>

Ce qui donne :

En utilisant -webkit-border-top-left-radius, -webkit-border-bottom-right-radius, -moz-border-radius-topleft et -moz-border-radius-bottomright, cela donne aussi :

Affichage du texte en plusieurs colonnes

Ne vous y trompez pas ! Dans cet exemple, il s'agit simplement de diviser le texte placé dans un élément en plusieurs colonnes, et non d'un layout donnant une possibilité de se passer du float (et pourtant, il est bel et bien prévu ;)).
Les propriétés en question sont column-count, column-gap, column-width et quelques autres encore . Mais ici je vais les appliquer avec -moz-column-count, -moz-column-gap, -webkit-column-count et -webkit-column-gap de la même façon que plus haut.
Ce qui donne :

Plusieurs images en background pour un seul élément

Une petite amélioration (et n'étant pas la seule) de la propriété background qui elle aussi permettra d'éviter de jouer avec des couches de balises pour arriver au même résultat. Car avec le CSS 2.1, il est seulement possible de superposer une couleur et une image.
Cependant, cette amélioration est seulement supporter à l'heure actuelle par Safari (La page de test), mais donne un jolie résultat :

Dans cet exemple, il n'y a qu'une seule <div> qui contient tous les backgrounds !

div.example
{ 
	height: 200px;
	width: 720px;
	padding: 150px 20px 20px 20px;
	background: url(http://www.joostdevalk.nl/oud/images/body-top.gif) top left no-repeat,
	url(http://www.joostdevalk.nl/oud/images/banner_fresco.jpg) 11px 11px no-repeat,
	url(http://www.joostdevalk.nl/oud/images/body-bottom.gif) bottom left no-repeat,
	url(http://www.joostdevalk.nl/oud/images/body-middle.gif) left repeat-y;
}

Autant dire qu'avec le CSS3, en plus d'avoir de jolies effets graphiques, nous aurons aussi un code beacoup plus propre

Pour plus d'infos sur le CSS3, je vous invite à faire un tour par le site du W3C ou via css3.info qui recèle de quelques bonnes previews.