Un zeste d'arrondis CSS3 sur Un Blog De Trop

CSS 2 est tout juste supporté par Internet Explorer 8 que tous les regards se tournent vers les spécifications de CSS3. Le standard est toujours en cours d'élaboration (voir CSS3 current worksur le site du W3C ) pourtant les navigateurs comme Firefox ou Safari commencent à implémenter ou tester certaines des propriétés les plus populaires. Intéressons nous à "border-radius".

En effet dans l'optique d'un développement j'ai eu l'envi subite d'arrondir les angles de blocs ou d'images. Il faut avouer que lorsque ce genre d'effet est bien intégré c'est beaucoup plus agréable à l'œil. J'avais déjà une petit idée de comment réaliser ce genre d'effet comme par exemple avec des classes javascript ou plusieurs div en CSS2. Cependant ces deux solutions ne me conviennent pas:

- Javascript m'oblige à modifier le code de mes scripts ce qui rend les rends plus difficilement maintenable.
- Les bidouilles CSS2 utilisent plusieurs div ce qui complique également les scripts.

Notons de plus que pour se faciliter la vie il est logique d'avoir un code html le plus simple possible et que tous les éléments de design se retrouvent dans la feuille de style ce qui par définition m'amène à exclure js pour ce genre de chose par ailleurs c'est un langage que je ne maitrise pas donc ça m'arrange. La technique avec CSS2 ne correspondant pas non plus à mes besoins je me tourne donc vers les solutions du futur.

La propriété border-radius permet d'arrondir les angles d'un élément html sur lequel il est possible d'appliquer une bordure ce qui par conséquent doit fonctionner avec les div et les images. En regardant le code du blog vous vous rendez donc compte que j'ai rajouté une feuille de style hack.css destiné à faire mes tests et via laquelle j'applique des arrondis sur quelques blocs et images.

CSS3 n'étant pas encore finalisé il faut utiliser les options propriétaires des navigateurs, le standard étant border-radius je l'ai donc implémenté en complément de -moz-border-radius pour firefox et -webkit-border-radius pour les navigateurs basés sur webkit (safari et chrome). Pour l'instant IE n'implémente pas cette fonctionnalité et à ma connaissance il n'existe pas de commande proprio pour opéra.

Notez qu'il est possible de sélectionner un angle en particulier avec les propriétés:

- border-radius-topleft
- border-radius-topright
- border-radius-bottomleft
- border-radius-bottomright

On remarque très vite quelques différences de rendu selon les navigateurs:

- FF3 ou 3.5RC2: les arrondis ne sont pas appliqués au images.
- Safari 4: Tout semble ok (cliquez sur la capture en haut à droite).
- Chrome: fait des arrondis mais sans anti-aliasing ce qui rend très moche.
- Internet Explorer & Opera: pas d'implémentation de border-radius

Bref du coup je vais laisser mon code ainsi et on verra avec le temps comment évoluent les choses, sachant que les specs CSS3 ne sont pas attendus avant 2010 on a encore un peu de temps devant nous.