Blackotine

Coins arrondis en css et javascript

Récemment, j’ai du découper un design comportant de nombreux coins arrondis, de tout styles, avec ou sans bordures, couleur de fond etc…

J’ai donc cherché un script simple à mettre en place et très modulable et comme je n’ai pas trouvé quelque chose qui correspondait exactement à mes besoins, j’ai décidé de créer mon propre script.

Avant tout, je suis contient que le fait de devoir créer des éléments supplémentaires juste pour satisfaire un besoin de mise en page est une technique à proscrire car cela n’a aucun sens. Tout devrait pouvoir se faire directement dans le CSS. Oui mais voilà, le CSS 3 et sa gestion native des bords arrondis (-moz-border-radius et -webkit-border-radius pour Firefox et Safari) est loin d’être implanté sur tous les navigateurs et nous sommes, malheureusement, dans l’obligation de ruser.

Ce que je voulais :

• Les balises ne servant qu’à la mise en page et n’ayant aucune portée sémantique sont générées en javascript.
• Un javascript non obstrusif, une mise en page non dégadée si le javascipt n’est pas activé / installé. Dans ce cas là, les coins restent simplement droits.
• Utilisation des images pour les coins pour un meilleur rendu et une plus grande modularité.
• Un script léger, syntaxe de l’appel simple mais paramétrable.
• Entièrement personnalisable via CSS.
• Conserve le DOM et génère du XHTML et du CSS valide.
• Rapide !

Pour commencer, voici une démo du script en action et une deuxième avec un bouton pour lancer le script.

Le script s’appuie sur le framework Javascript Mootools.

Documentation

class corners

Arguments

element : L’élément sur lequel vous voulez les coins arrondis
options : un objet, voir ci-dessous

Options

elementType : Le type des élément générés (défaut: div)
className : préfixe des classes des élément générés (défaut: corner)

Utilisation

L’élément modifié va être entouré par huit éléments permettant d’appliquer des styles CSS spécifiques sur chacun d’entre eux et correspondent aux cotés et aux coins répartis comme ceci (avec le préfixe par défaut, « corner ») :

• cornerT : Le bord supérieur
• cornerB : Le bord inférieur
• cornerR : Le bord droit
• cornerL : Le bord gauche
• cornerBL : Le coin inférieur gauche
• cornerBR : Le coin inférieur droit
• cornerTL : Le coin supérieur gauche
• cornerTR : Le coin supérieur droit

Ainsi, il ne reste plus qu’à appliquer les règles CSS adéquates pour ajouter les éléments de décoration voulus (coins arrondis, ombres, etc…)

Deux versions du script :

• non compressé (4143 octets)
• compressé avec YUI Compressor (1615 octets)

Allez plus loin

Je suis conscient que ce script peut alourdir les pages et donc ralentir leur chargement alors que l’on pourrait directement écrire ces balises dans la page sans passer par javascript. Mais ce sont les limitations de CSS 2 et les multiples incompatibilités des navigateurs qui nous forcent à insérer des balises inutiles et n’ayant aucun sens sémantiquement parlant. Ce javascript, ne touche pas à la structure du document et offre un rendu quasi similaire lorsqu’il est non activé.

En résumé, je ne suis pas entièrement convaincu de la pertinence et de l’utilité de ce script en terme de performance et d’optimisation mais son utilisation simple et efficace me semble toutefois interessante. On pourrait même trouver des applications diverses autres que les coins arrondis comme par exemple les ombres, dégradés complexes etc…

• Publié le 25 mars 2009 dans : CSS, Javascript
• 1 commentaire »