
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.

Proposer un nouveau commentaire