Docsmartinez

Les webmestres attendent depuis longtemps une fonctionalité du CSS 3 qui tardent à venir : les coins arrondis !

Oh, il y a bien des solutions pour faire cela, qui passent toutes par des images si on veut être sûr de la compatibilité la plus grande, mais c'est une chose complexe, puisqu'il s'agit de faire des images pile à la bonne taille et que, par conséquent, on perd tout dynamisme des conteneurs qui ne peuvent s'adapter à la fenêtre sans se désolidariser de l'image. :(

Le CSS 3, toujours dans les cartons du W3C, prévoie quelque chose comme cela : -border-radius: 10px;

Mieux encore, on peut décider de faire un ou plusieurs coins arrondis en déclinant : -border-radius-bottomleft: 10px;

Voilà qui est simple et pratique !

Devant l'empressement des webmestres à pouvoir utiliser cette fonctionnalité nouvelle, certains moteurs d'affichage web, devancent la CSS 3 en proposant leur propre style :

• -moz-border-radius-bottomleft: 10px; pour les naviagteurs basés sur Gecko (Firefox par ex.),
• -webkit-border-radius-bottomleft: 10px; pour les navigateurs basés sur Webkit (Safari par ex.).

Opera, un temps, a envisagé également de proposer lui-aussi une balise propre en attendant le CSS3 puis a abandonné cette idée.

Oui mais voilà, en tant qu'aficionado d'Opera, je trouvais désespérant de ne pouvoir afficher mes coins arrondis que sur les navigateurs concurrents.

Ah oui, oubliez Internet Explorer, lui ne comprend pas le CSS 3, ne développe pas de balise propre (pour une fois !), ne supporte pas les images vectorielles, et n'est capable de fonctionner qu'avec des images matricielles de taille adéquate. Ceci étant dit, passons aux navigateurs plus respectueux des standards...

Donc comment afficher des coins arrondis avec Opera ?

Tout simplement en profitant d'une de ses forces : l'affichage de qualité des SVG !

On va utiliser ce format d'image vectoriel pour créer une image qui s'adaptera toute seule à la taille de son conteneur !

Soit une <div> quelconque pour laquelle nous souhaitons afficher deux coins arrondis en bas.

Tout d'abord, dans notre feuille de style, nous allons embarquer les balises propres au différents navigateurs et même prévoir une compatibilité CSS3 dès maintenant. De toute façon, toute balise inconnue d'un navigateur sera ignorée par lui.

Et voilà, notre conteneur dispose de coins arrondis sous Gecko, Webkit, et tout moteur d'affichage embarquant le CSS3 !

Mais Opera et Internet Explorer ne comprennent rien à ce charabia :(

Créons le SVG spécifique à Opera.

Que veut-on ? Un rectangle dont les coins arrondis sont en bas !

Comment faire ?

Le plus simple est de créer trois rectangle en SVG :

Remontons le code précédent, depuis la fin :

• Le premier rectangle est un rectangle qui occupera tout l'espace du conteneur mais qui a tous ses coins arrondis,
• Le second est de la couleur du fond de ma page et permet de bien mettre en évidence les coins arrondis du bas du précédent,
• Le dernier, enfin, permet de cacher les coins arrondis en haut de mon image (que je ne veux pas voir).

Voilà c'est prêt, plus qu'à l'ajouter à ma feuille de style :

#madiv {
 background: #f4a80a url(../images/roundedcorners.svg) repeat scroll 0% 50%;
 display: block;
 -moz-border-radius-bottomleft: 10px;
 -webkit-border-radius-bottomleft: 10px;
 -border-radius-bottomleft: 10px;
 
 -moz-border-radius-bottomright: 10px;
 -webkit-border-radius-bottomright: 10px;
 -border-radius-bottomright: 10px;
}

J'ai cependant noté que sous Firefox, je ne parviens pas à afficher le SVG en fond si j'enlève ses balises spécifiques -moz o_O