10 astuces CSS

Date de mise en ligne : 9 octobre 2004

Inspiré par :

• http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/ (article original)
• http://tantek.com/log/2004/09.html#d07t1434 (commentaires de Tantek Çelik)
• Une traduction française de l'article original est disponible ici : http://www.wikiservice.at/fractal/wikidev.cgi?FR/CityDeskEtDesignStandards/DixTrucsCssQueVousPourriezNePasConna%eetre

1. Les propriétés racourcies

Exemple avec la propriété raccourcie 'font':

En clair vous pouvez résumer ça:

p {
        font-size: 1em;
        line-height: 1.5em;
        font-weight: bold;
        font-style: italic;
        font-variant: small-caps;
        font-family: verdana,serif;
    }

par ça:

p { font: 1em/1.5em bold italic small-caps verdana,serif; }

Attention, cette propriété raccourcie ne fonctionnera que si vous spécifiez à la fois la valeur pour font-size et celle de font-family. Si vous ne spécifiez pas les valeurs pour font-weight, font-style ou font-variant, alors ces valeurs seront définies automatiquement à la valeur normal.

On peut aussi utiliser d'autres propriétés racourcies:

2. Deux classes ensemble

Vous pouvez attribuer plusieurs classes aux éléments. Attention à les séparer par un espace et non par une virgule.

Attention à l'ordre de priorité, prenons un exemple avec 2 classes CSS:

.box {
        width: 250px;
        padding: 10px;
        color: fuchsia;
        font: bold 12px verdana;
        border: solid;
    }

    .color { color: blue; }

Appliquons ces 2 classes au même div:

<div class="box color">
        Test de div avec 2 classes.
    </div>

Notre div prend toutes les propriétés des classes .box et .color mais au final, il sera de couleur bleue, car avec cette technique la dernière classe attribuée a la priorité. Cette technique peut-être très utile mais peut aussi devenir un super casse-tête si elle est mal utilisée. A utiliser avec modération.

Cybercodeur propose une mise en garde à propos des abus possibles avec cette technique !

3. Utilisez les valeurs par défaut

Exemple avec border. Lorsqu'on déclare des règles pour les contours, on déclare habituellement l'épaisseur, le style et la couleur avec la propriété raccourcie border. Par exemple, border: 3px solid #000; nous donnera des bords épais de 3 pixels, de style solide et de couleur noire.

Dans ce cas la seule valeur requise est celle de style.

Si on avait déclaré uniquement border: solid; alors les valeurs par défaut pour l'épaisseur et la couleur auraient été utilisées. Mais quelles valeurs par défaut ? La valeur par défaut de l'épaisseur d'un contour est medium (environ 3 à 4px) et la couleur par défaut est celle du texte à l'intérieur de ce contour. Si ces valeurs sont celles qu'on recherche, pas besoin de les déclarer !

Cette astuce des valeurs par défaut est appliquable à toutes les propriétés raccourcies de CSS.

Envie de connaître les valeurs des propriétés par défaut ?

4. !important ignoré par IE Windows

Normalement avec CSS, la règle spécifiée en dernier a la priorité. Mais si on utilise !important après la valeur d'une propriété, cette propriété prend la priorité. C'est vrai pour tous les navigateurs sauf IE Windows.

Par exemple :

#nav {
        margin-top: 3.5em !important;
        margin-top: 2em
    }

La marge en haut sera définie à 3.5em pour tous les navigateurs sauf IE Windows qui aura une marge supérieure de 2em. (Il y a une autre technique utilisant une limitation du support des CSS par IE Windows: l'utilisation du sélecteur d'enfant, IE ignorera ces déclarations. Voir le test).

J'avais parlé de !important dans mon weblog avec un test à voir dans IE Windows et dans un autre navigateur à la fois.

Attention, selon Tantek Çelik, cette astuce est fausse et n'a rien à voir avec !important car IE Windows supporte le test du W3C. La clef du processus se situe selon lui dans la déclaration de la même propriété plusieurs fois dans la même règle CSS.

Conclusion, technique peut-être à proscrire, à vous de voir. La notion de !important n'est pas très claire pour moi.

5. La technique de remplacement d'image

Comme le souligne Tantek Çelik, l'article publié sur Evolt.org est un peu léger sur ce point.

Il faut être très attentif avec les techniques de remplacement d'images. Maurice a publié un billet à propos des techniques de remplacement d'image avec CSS.

6. Une alternative au box model hack

Le box model hack est utilisé pour fixer un problème de rendu dans les versions d'IE Windows inférieures à la version 6 dans lesquels la bordure et le padding sont inclus dans la largeur totale de l'élément à la place d'être ajoutés.

Une explication complète et détaillée de l'application du box model hack est disponible sur OpenWeb.

Une alternative simple est d'utiliser cette syntaxe:

#box {
        width: 150px;
    }

    #box div {
        border: 5px;
        padding: 20px;
    }

En utilisant cette technique, il faut également modifier votre code (X)HTML:

<div id="box">
        <div>
        ...
        </div>
    </div>

Maintenant, notre boîte aura toujours 150px de largeur quelque soit le navigateur.

Cette technique force à ajouter des balises supplémentaires inutiles. A utiliser en fonction de votre éthique ;-)

7. Aligner un élément de type bloc au centre de l'écran

Si notre site dispose d'une largeur fixe et qu'on souhaite qu'il soit aligné au centre de la fenêtre du navigateur, on peut utiliser un élément div de largeur fixe qui contiendra le reste du contenu et lui appliquer les règles CSS suivantes:

#contenu {
        width: 700px;
        margin: 0 auto;
    }

En placant le reste de notre code à l'intérieur du <div id="contenu"> le tour sera joué et tout sera centré sauf dans les versions d'IE Windows inférieures à la version 6 car ces anciens navigateurs ne comprennent pas cette commande. Pour régler le problème, il faut appliquer ces règles:

body { text-align: center; }

    #contenu {
        text-align: left;
        width: 700px;
        margin: 0 auto;
    }

La règle text-align: center; appliquée à body va permettre aux versions antérieures à IE 6 Windows de centrer tout sur la page. En contre-partie, cela va également aligner tous les textes de tous les enfants de body au centre. Pour contrer cet effet, on utilise text-align: left; dans le div #contenu.

Tantek Çelik suggère d'utiliser dans ce cas des propriétés individuelles plutôt que la propriété racourcie pour margin afin d'éviter des problèmes avec certains anciens navigateurs qu'il ne cite pas d'ailleurs. Le code CSS devient:

body { text-align: center; }

    #contenu {
        text-align: left;
        width: 700px;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    }

Personnellement, je n'ai jamais rencontré de problème en utilisant la propriété raccourcie margin pour centrer un élément de type div. Cependant, Philippe Wittenbergh ajoute que pour aligner un élément table dans IE Mac, il est nécessaire d'utiliser les propriétés individuelles.

8. Aligner verticalement avec CSS

L'alignement vertical avec les tables et CSS était très facile. Pour afficher le contenu d'une cellule en son milieu (verticalement) on utilisait vertical-align: middle;. Ca ne fonctionne pas avec une mise en page CSS. Suposons qu'on ait un élément d'un menu de navigation dont la hauteur est fixée à 2em et qu'on lui applique notre règle CSS d'alignement vertical. Ca ne fera pas grand chose et le texte sera affiché en haut de la boite.

La solution est de spécifier une propriété line-height avec une valeur qui soit la même que la valeur assignée à la hauteur de la boite. Dans notre exemple, notre boîte fait 2em de hauteur, il suffit d'insérer en plus line-height: 2em; dans notre déclaration CSS et le texte va maintenant être aligné verticalement dans la boîte !

Attention, cette technique fonctionne très bien avec des boites contenant peu de contenu. Si on spécifie une hauteur pour une boite, n'oublions pas que si le contenu est important, il sortira de la boite. J'ai mis un exemple en ligne pour démontrer la chose.

Conclusion, cette techique est très utile avec des boites contenant peu de contenu, par exemple un élément du menu de navigation.

9. Positionnement CSS à l'intérieur d'un conteneur

Une des meilleures choses avec CSS est que l'on peut positionner nos éléments n'importe où dans le document. Il est également possible de positionner des éléments par rapport à leur conteneur. C'est facile à faire. Il faut simplement déclarer la règle suivante pour notre conteneur:

#conteneur {
        position: relative;
    }

Maintenant, tous les éléments à l'intérieur de ce conteneur seront positionnés relativement à lui. Admettons qu'on ait cette structure (X)HTML:

<div id="conteneur">
        <div id="navigation">
            ...
        </div>
    </div>

Pour positionner la navigation exactement à 30px de la gauche et à 5px du haut de notre boite conteneur, on peut utiliser cette technique:

#navigation {
        position: absolute;
        left: 30px;
        top: 5px;
    }

Dans cet exemple, on aurait pu utiliser margin: 5px 0 0 30px; à la place du positionnement absolu. C'est ce que Tantek Çelik recommande car selon lui la propriété position: relative; est moins supportée par les navigateurs anciens que la propriété margin.

Personnellement je n'ai jamais rencontré de difficultés insurmontables avec cette technique de positionnement relatif et absolu. Si jamais vous tombez sur un os, essayez de positionner votre élément avec margin.

10. Couleur d'arrière plan jusqu'en bas de l'écran

Un des désavantages de CSS est son incapacité à être contrôlé verticalement avec facilité. Cela cause un problème particulier dont la mise en page par tableaux ne souffre pas. Supposons qu'on ait avec une mise en page CSS une colonne à gauche qui contient la navigation de notre site. La page à une couleur de fond blanche, mais on souhaite que notre colonne de gauche ait un fond bleu. Facile, on déclare nos règles CSS comme ça:

#navigation {
        background: blue;
        width: 150px;
    }

Or, la couleur bleu n'ira pas jusqu'en bas de la page car elle s'arrêtera lorsqu'il n'y aura plus d'éléments de navigation. Si votre navigation occupe moins de la moitié de la hauteur de notre page, la couleur de fond de notre navigation n'ira pas plus loin.

La seule solution à ce problème aujourd'hui est de tricher et de créer une image de fond avec la même couleur et la même largeur que notre menu de gauche et d'appliquer par exemple cette règle CSS à l'élément body:

body {
        background: url(blue-image.gif) 0 0 repeat-y;
    }

Cette image qu'on place dans l'arrière plan doit être dans notre cas de 150px de large et de couleur bleue identique à celle de notre navigation. L'inconvénient est l'impossibilité d'exprimer la largeur d'une colonne en em avec cette technique.

Pour l'instant, c'est la seule solution à ce problème particulier.