arrondis css3CSS 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.
Partager sur:
A propos de l'auteur:
Guillaume Jeantet: titulaire d'une licence pro et fort de quelques années d'expériences je suis administrateur système et développeur mais surtout un autodidacte dynamique et passionné. Je partage sur UBDT mes coups de coeurs et astuces.

Autres articles qui pourraient vous intéresser.

facebook vignetteFacebook: forcer le rafraîchissement d'une vignette
Lorsqu'on désire partager une page sur facebook il arrive parfois que la prévisualisation de celle-ci soit vide. Voici une petite astuce permettant de pallier ce problème.
taille image responsive designResponsive design: la taille des images
Faire du responsive design oui, mais dans la simplicité. Découvrez une astuce en css simple pour gérer la taille des images en responsive design.
optimiser mise cache mutuOptimiser la mise en cache sur les mutu ovh et autres hébergeurs
Optimisez le chargement de vos pages web en utilisant le mécanisme de cache sur les serveurs ovh et d'autres hébergeurs. Voyons comment faire avec mod_expires.
taxe publicite ligne 1 pourcentPublicité en ligne: taxe de 1%
Dans le cadre du projet de loi de finances 2011 un sénateur UMP a soutenue un amendement visant à taxer les dépenses publicitaires en ligne des professionnels à hauteur de 1%.
rss blog trop modificationModification de l'adresse du flux RSS d'un blog de trop.
L'adresse du flux rss d'un blog de trop change, pensez à mettre votre lecteur à jour avec l'adresse http://www.unblogdetrop.com/rss.xml

Proposer un nouveau commentaire

Votre pseudo s'il vous plaît :

Email (Facultatif, n'est pas affiché et permet de recevoir des notifications de validation / réponses):

Votre site Web (facultatif) :

Exprimez vous :

:arrow::D:confused::cool::cry::eek::evil::!::idea:lol:mad::|:?::p:redface::rolleyes::(:):wink: