pilgrim[.maleo.net]

IEBlog nous fait savoir qu'il existe un article nommé Rounded Corners in Internet Explorer: Staying Ahead of the Curve publié par MSDN qui décrit plusieurs méthodes pour ajouter des coins arrondis à vos éléments de mise en page.

Le fait est que les techniques présentées datent un peu de Mathusalem et qu'elles ne sont guère applicables pour qui veut contruire un site qui suit les standards du moment (fichier source HTML sémantiquement correct et tout le design externalisé dans une feuille de style) ; en effet, les différents exemples s'appuient soit sur l'utilisation de tableaux HTML avec les images des coins dans les cellules externes, soit sur l'utilisation de <div> imbriqués... Dans un cas comme dans l'autre, l'application de coins arrondis n'est pas "génériques" et doit être pensée au moment de la création de la page en HTML.

Pour m'être penché sur la question il y a très peu de temps et après avoir fait une recherche sur le sujet, je suis tombé sur la technique Nifty Corners qui permet d'ajouter des coins arrondis sans utiliser d'images sur n'importe quel élément de votre page d'une manière simple et pratiquement transparente : le tout passe par javascript et la manipulation DOM pour créer, à la volée, l'effet arrondi. Cette technique a été améliorée et bénéficie d'un nouvel article : More Nifty Corners.

Dans l'exemple ci-dessous, à placer dans le head de votre page, on arrondi les coins des élements header, navcontainer et footer de la page (voir l'article pré-cité pour les options) :

<script type="text/javascript" src="js/nifty.js"></script>
<link rel="stylesheet" type="text/css" href="css/niftyCorners.css" />
<link rel="stylesheet" type="text/css" href="css/niftyPrint.css" media="print" />
<script type="text/javascript">
window.onload = function() {
    if ( !NiftyCheck() ) return;
    Rounded("div#header","bottom","#fff","#ddd","smooth");
    Rounded("div#navcontainer","all","#fff","#555","smooth");
    Rounded("div#footer","top","#fff","#eee","smooth");
}
</script>

Un script similaire existe dans la librairie Rico avec un code du genre :

<script type="text/javascript" src="scripts/rico.js"></script>
<script type="text/javascript">
window.onload = function() {
    new Effect.Round(null, 'roundNormal');
}
</script>

où tous les éléments dont la classe est roundNormal sont arrondis.

Rico est, par contre, une librairie complète pour créer toutes sortes d'effets en javascript et son désavantage est que le fichier rico.js fait dans les 80 Ko ce qui semble un peu énorme à charger quand on veut juste améliorer un design de cette manière... à vous de voir car il existe des manières de reduire la taille du fichier en le compressant par exemple.