Créer des coins arrondis en CSS et sans images Roundies : du JavaScript pour Internet Explorer

La propriété CSS3 border-radius n'est pas reconnue par Internet Explorer (version 8 incluse). Pour réaliser ce genre d'effets esthétiques sur IE, il va donc falloir ruser.

Il existe plusieurs techniques basées sur JavaScript pour permettre d'émuler automatiquement la création de coins arrondis, nous en listons quelques unes en fin de tutoriel. Chaque technique a ses avantages et inconvénients (poids, complexité, accessibilité) et c'est pourquoi nous avons fait le choix de nous intéresser à la mise en application de la plus légère d'entre-elles : Roundies.

Léger et simple à mettre en place, le script roundies.js permet la gestion des coins arrondis sur Internet Explorer

Roundies, c'est quoi ?

Roundies est un petit JavaScript de 8 ko très simpliste qui se contente de réaliser ce qu'on lui demande, des angles arrondis sur IE sans image et sans ajouter de contenu inutile.

Nous n'allons l'appliquer qu'à Internet Explorer puisqu'il nous servira de béquille pour ce navigateur tant qu'il ne reconnaîtra pas border-radius.
Notez que Roundies ne fonctionnera pas sur les images d'arrière-plan et qu'il est malheureusement inopérant sur Opera. Vous trouverez ce script roundies.js à l'adresse suivante.

Appliquer Roundies

Pour mettre en application Roundies, commencez par le télécharger et copiez le fichier roundies.js (8ko). Puis, à l'aide d'un commentaire conditionnel judicieusement placé dans l'entête de votre page, liez roundies.js à votre document HTML.

Le code HTML suivant ne va s'appliquer qu'à Internet Explorer (versions égales ou plus anciennes que IE8) et il va récupérer et appliquer roundies.js que nous avons placé dans un répertoire nommé "script" :

 <!--[if lte IE 8]> 
<script type="text/javascript" src="script/roundies.js"> 
</script><![endif]-->

A présent, il faut indiquer quels seront les éléments qui bénéficieront des coins arrondis. Pour cela, vous devez ajouter une instruction DD_roundies.addRule, soit à la fin du fichier roundies.js, soit dans le code de votre page (de préférence avant la fin de l'élément body, après l'appel à roundies.js).

Voici les règles que nous avons mis en place pour notre page d'exemple :

 DD_roundies.addRule('div.arrondi', '10px'); 
DD_roundies.addRule('h1', '10px'); 
DD_roundies.addRule('a', '8px');

La première règle indique que nos éléments HTML <div> de classe arrondi bénéficieront d'un arrondi de 10px; la seconde s'applique éléments de titre (<h1>) et la dernière ligne génère un arrondi autour des liens hypertextes (<a>). Il est également possible de cumuler les éléments sélectionnés au sein de la même règle.

Côté HTML, les éléments sont structurés ainsi (exemple pour le bloc <div>) :

 <div class="arrondi"> 
   <p>ici un bloc arrondi</p> 
</div>