Bouton customisé à taille variable en CSS

Matt — Tue, 16 Feb 2010 15:41:39 +0000

Introduction

Récemment, je me suis penché sur ce que l’on appelle les css layout « élastiques ».
Basiquement, il s’agit d’utiliser l’unité « em » au lieu du pixel. Cette unité est une unité relative, comme le « % », mais elle est relative à la taille de la police de caractères courante et non pas à la taille du contenant.
Pour comprendre son utilité, il faut savoir que certaines personnes ayant des problèmes de vue utilisent généralement une option de leur navigateur leur permettant d’augmenter la taille par défaut de la police.
Les textes sont alors plus gros et plus lisibles. Malheureusement, il est rare que le site visité ai anticipé ce changement, et généralement toute la mise en page se retrouve complètement cassée.

Imaginez par exemple que vous ayez décidé de mettre une jolie image sous un lien pour avoir un bouton sympathique. Si la taille de la police de caractère est augmentée, il est très probable que le texte dépasse de cette image. Tout à coup, le bouton devient beaucoup moins joli.

A la recherche d’une solution à ce problème, je suis tombé sur un article de l’excellent site positioniseverything.net qui propose une solution permettant d’appliquer des ombres portées semi-transparentes à n’importe quelle image. L’article en question est visible ici : http://www.positioniseverything.net/articles/dropshadows2.html

L’approche m’a semblé intéressante, mais pas assez souple à mon goût. En effet, elle se base sur une énorme image en espérant que le conteneur ne dépasse jamais cette taille. Sans tenir compte de l’évolution rapide de la taille des écrans, cette méthode a un coût en terme de bande passante. Par ailleurs, elle présuppose que l’on cherche à avoir un contour d’image régulier, ce qui n’est pas forcément le cas.

Sous flash, il existe une façon de gérer les bords arrondis appelée Scale9Grid : On découpe un bloc en 9 parties distinctes comme illustré dans le schéma ci-dessous, et celles situées dans les coins ne sont jamais redimensionnées.

En se basant sur cette méthode et la technique de positioniseverything, j’ai mis au point un moyen d’avoir un bouton customisé qui s’adapte à son contenu. N’hésitez pas à visiter la page de démonstration interactive du bouton custom redimensionnable. Mais je vous entends déjà vous impatienter, aussi voici la technique en question :

Découpe de l’image

Nous allons découper notre bouton suivant le schema ci-dessus, à une nuance prêt.
Contrairement à Flash, le CSS2 ne permet pas d’étirer les images. Nous allons donc pour les parties qui doivent s’étendre en largeur ne garder qu’un morceau de 1 pixel de large qui se répétera autant que nécessaire.
De même pour les parties verticales en ne gardant qu’un pixel de haut.
Cette étape n’est pas réellement nécessaire, mais elle permet de ne pas surcharger la bande passante avec des données inutiles.

Le HTML


    
        
            
                
                    
                        
                            
                                
                                    Place your content here

Comme vous le voyez, il faut une certaine quantité de balises qui ont pour seule utilité d’aider à la construction du bouton. Cela va à l’encontre du principe selon lequel le html doit toujours garder sa sémantique propre (ce qui est bon pour les moteurs de recherche), mais on ne fait pas d’omelette sans casser des oeufs !

Les classes représentent la partie de l’image qui sera utilisée. « l » pour « left », « b » pour « bottom », « br » pour « bottom-right », etc.

Le CSS

Les commentaires sont placés directement dans le corps du CSS.

.tl{
    background:url('tl.gif') no-repeat top left;
    display:inline-block;
}

.ie7root .tl, .ie7root .tl div{ /* ie7 fix : n'importe quelle règle déclenchant haslayout peut remplacer cela */
    float:left;
}

.tr{
    background:url('tr.gif') no-repeat top right;
}
.bl{
    background:url('bl.gif') no-repeat bottom left;
}
.br{
    background:url('br.gif') no-repeat bottom right;
    padding-right:23px; /* dépend de la largeur de vos images de droite */
}
.t{
    background:url('t.gif') repeat-x top left;
    margin-left:23px; /* dépend de la largeur de vos images de gauche */
    padding-top:18px; /* dépend de la hauteur de vos images du haut */
}
.b{
    background:url('b.gif') repeat-x bottom left;
    padding-bottom:18px; /* dépend de la hauteur de vos images du bas */
}
.l{
    background:url('l.gif') repeat-y top left;
    margin-left:-23px; /* dépend de la largeur de vos images de gauche */
}
.r{
    background:url('r.gif') repeat-y top right;
    margin-left:23px; /* dépend de la largeur de vos images de gauche */
    margin-right:-23px; /* dépend de la largeur de vos images de droite */
    padding-right:23px; /* dépend de la largeur de vos images de droite */
}
.content{
    overflow:hidden; /* empêche les contenus insécables de dépasser */
    vertical-align:bottom; /* corrige un bug bizarre générant un gap de 3 pixel dans le bas */
    background-color:#28bcd9;
}

Conclusion

Cette méthode fonctionne avec tous les navigateurs testés, y compris le redoutable IE6 (qui va semble-t-il enfin bientôt prendre sa retraite!).
Vous pouvez utiliser des images avec transparence en gif ou en png (pour les navigateurs qui le supportent), et ainsi créer des ombres portées ou tout autre type de contour pour vos liens ou vos contenus.
Si le contenu change ou si l’utilisateur change la taille de la police de caractère, le bouton s’adaptera !