30 octobre 2009


Créer des coins arrondis en CSS et sans images

Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même.


Coins arrondis


Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables, pour dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible.


C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants :


  • Avec ou sans images,
  • Avec ou sans JavaScript,
  • Avec ou sans ajout de markup (éléments dans le code HTML),
  • Fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu),
  • Compatible tous navigateurs ou non,
  • Plus ou moins accessibles.


Simple et approprié : border-radius



border-radius est une propriété CSS3, encore à l'état de brouillon mais tout à fait utilisable en production dans les navigateurs modernes. Elle permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité.



Compatibilité et utilisation concrète
A l'heure où ce tutoriel est écrit, seuls les navigateurs basés sur Gecko (Mozilla Firefox) et sur Webkit (Safari, Chrome) reconnaissent la propriété border-radius. En pratique, la propriété doit être préfixée par -moz- sur Gecko ou -webkit- sur Webkit pour fonctionner sur ces navigateurs. border-radius devient donc -moz-border-radius et -webkit-border-radius.

Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces préfixes pour fonctionner.



Exemple :


#cadre {
border-radius: 10px;
}


coins arrondis en CSS3


Voir le résultat avec votre navigateur


Il est possible de définir l'arrondi de chacun des angles, à l'aide d'une écriture raccourcie qui se lit comme à l'accoutumée dans le sens des aiguilles d'une montre en débutant par le haut (top, right, bottom, left).

Ainsi la règle suivante va créer un bloc arrondi de 5px en haut à gauche, 10px en haut à droite, 0px en bas à droite et 5px en bas à gauche :



#cadre {
border-radius: 5px 10px 0 5px;
}


coins arrondis en CSS3

Note : l'écriture raccourcie de type -webkit-border-radius: 10px 10px 0 0; ne fonctionnant pas sur Chrome, il faudra écrire chaque propriété complètement, soit -webkit-border-top-left-radius: 10px; et -webkit-border-top-right-radius: 10px; pour obtenir un arrondi sur les angles du haut.


Il est tout à fait possible de réaliser des courbes non circulaires en précisant le degré d'arrondi horizontal et vertical.



Roundies : du JavaScript pour Internet Explorer



La propriété CSS3 border-radius n'est pas reconnue par Internet Explorer (jusqu'à sa version 8 incluse). Pour réaliser ce genre d'effets esthétiques sur ce navigateur, 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.


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 sous deux formes : non-compressée (17 ko) et compressée (8 ko).


Appliquer Roundies



Pour mettre en application Roundies, commencez par le télécharger et copiez le fichier roundies.js (8ko) sur votre hébergement.


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 l'ajoutant à 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 liste (<li>) et arrondit les coins supérieurs uniquement; 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>


Visualisez notre page d'exemple avec votre navigateur


Exemples de résultats avec la combinaison border-radius + Roundies (sur IE, l'image d'arrière-plan sera remplacée par la couleur de fond alternative) :


coins arrondis avec Roundies


Léger et simple à mettre en place, le script roundies.js permet la gestion des coins arrondis sur Internet Explorer. Elle représente une excellente alternative aux solutions lourdes basées sur des images mais reste très limitée et ne fonctionne pas sur tous les navigateurs. Elle ne fait qu'émuler la propriété CSS3 border-radius sur IE.


Il s'agit toutefois d'une technique qui peut être idéale en production : en pratique, vous commencerez par appliquer border-radius (avec ses préfixes) pour les navigateurs modernes, puis appliquerez la béquille Roundies pour IE. Au final, la technique sera fonctionnelle sur un large panel : IE, Firefox, Safari, Chrome, Camino, Konqueror, Safari Mobile, Fennec, etc. Seul Opera sera en reste.


Application : un menu à onglets



Mettons en pratique cette technique pour réaliser le menu suivant :

menu à onglets


Notre structure xHTML sera très classique, sous forme de liste :


<ul id="menu">
<li><a href="*">onglet 1</a></li>
<li><a href="*">onglet 2</a></li>
<li><a href="*">onglet 3</a></li>
<li><a href="*">onglet 4</a></li>
<li><a href="*">onglet 5</a></li>
</ul>


Et notre mise en forme CSS va se résumer (outre les fioritures habituelles) à arrondir les angles supérieurs des liens hypertextes :


#menu {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline; /* affichage horizontal */
}
#menu li a {
padding: 5px 20px;
margin: 0;
background: #98B924;
color: #fff;
border: 1px solid #89a;
text-decoration: none;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;       
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */

}
#menu li a:hover, #menu li a:focus {
background: #b8da40;
color: #000;
}

A cet instant, le menu est parfaitement stylé sur l'ensemble des navigateurs modernes, mis à par Internet Explorer et Opera où les coins demeurent en angle droit.


Il ne suffit plus que d'appliquer Roundies.js, de l'appeler via un commentaire conditionnel pour IE et d'y ajouter l'instruction DD_roundies.addRule('#menu li a', '10px 10px 0 0'); pour que le script soit fonctionnel. C'est tout !


Voir le résultat sur votre navigateur


Ressources et variantes




Bookmark and Share

Posted by Maël at vendredi, octobre 30, 2009
Labels:

Aucun commentaire:

Publier un commentaire

S'abonner à : Publier des commentaires (Atom)