10 trucs à savoir

1. Abréger l'écriture des règles CSS de police

Lorsque vous donnez un style à une police en CSS, vous le faites peut-être comme ceci :

Non seulement ce n'est pas nécessaire, mais le raccourci suivant existe :

C'est bien mieux, non ?

Un petit avertissement  : cette notation abrégée ne fonctionnera que si vous spécifiez font-size et font-family. De plus, si vous ne spécifiez pas font-weight, font-style, ou font-variant, ces valeurs prendront automatiquement la valeur par défaut qui est normal. Gardez ceci en tête.

2. Deux classes ensemble

Habituellement, les attributs ne sont assignés qu'à une classe, mais cela ne signifie pas qu'il ne soit pas permis de faire autrement. En réalité, vous pouvez assigner autant de classes que vous le souhaitez.

<p class="text side">...</p>

Utiliser ces deux classes ensemble (séparées par une espace et non par une virgule) signifie que le paragraphe va appliquer à la fois les règles assignées à text et celles assignées à side. Si certaines règles se contredisent, c'est la dernière classe dans l'ordre d'écriture qui aura préséance.

3. La valeur par défaut des bordures CSS

Lorsque vous écrivez une règle de bordure, vous en spécifiez généralement la couleur, la largeur et le style (dans n'importe quel ordre).

Par exemple,

border: 3px solid #000;

donnera une bordure noire, solide, d'une épaisseur de 3 pixels. Pourtant, la seule valeur requise, ici, est le style de la bordure .

Si vous indiquez simplement border: solid; les valeurs par défaut pour cette bordure seront utilisées. Mais quelles sont-elles? Eh bien, la largeur par défaut d'une bordure est medium (l'équivalent de 3 ou 4 pixels) et la couleur par défaut est celle du texte dans la bordure. Si vous voulez l'une ou l'autre de ces valeurs, vous pouvez les laisser de côté dans votre règle CSS !

4. !important est ignoré par IE6

Normalement, en CSS, la dernière règle spécifiée a préséance sur les autres. Par contre, si vous utilisez !important après une règle, c'est cette dernière qui a préséance, peu importe ce qui apparaît après. Cette règle est valable pour tous les navigateurs, excepté IE6. En voici un exemple :

margin-top: 3.5em !important; margin-top: 2em;

Ainsi, la marge du haut aura 3.5em pour tous les navigateurs, sauf IE6 , dont la marge du haut aura 2em. Cette technique peut être pratique, en particulier lorsque vous utilisez des marges relatives (comme dans cet exemple), puisqu'elles peuvent être rendues différemment dans IE6 et d'autres navigateurs.

(Beaucoup d'entre vous savent par ailleurs que le contenu des règles relatives aux sélecteurs d'enfant (child selector) sont ignorées par IE6.)

5. Technique de remplacement d'images

Même si vous concevez votre site sans CSS, il est toujours préférable d'utiliser du balisage HTML pour afficher du texte, plutôt que d'utiliser une image. Vous favorisez ainsi un téléchargement plus rapide, sans compter les bénéfices reliés à l'accessibilité. Toutefois, si vous désirez absolument utiliser une police de caractères particulière et qu'il y ait peu de chance pour que vos visiteurs l'aient installée, vous n'avez alors d'autre choix que celui d'utiliser une image.

Par exemple, si vous voulez que l'en-tête de chaque page soit « Achetez des gadgets » (puisque vous vendez des gadgets) et que vous souhaitez que cette phrase soit prise en compte par les engins de recherche, vous pouvez choisir une police de caractères obscure et utiliser une image  :

<h1><img src="widget-image.gif" alt="Achetez des gadgets" /></h1>

Cette technique fonctionne, mais les engins de recherche n'accordent pas autant d'importance au contenu d'un alt qu'à du vrai texte (parce que de nombreux webmestres profitent de l'attribut alt pour camoufler des mots-clés). Une autre méthode serait :

<h1><span>Achetez des gadgets</span></h1>

De toute évidence, votre police obscure ne sera pas utilisée ici. Pour régler ce problème, vous pouvez ajouter ces règles dans vos documents CSS  :

h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left: -2000px;
}

L'image avec votre police élaborée sera maintenant visible, tandis que le texte normal sera hors champ, situé à 2000 pixels à gauche de l'écran grâce à notre règle CSS .

6. Une solution au bidouillage de boîtes (box-model hack)

Le bidouillage de boîtes ( box-model hack ) est utilisé pour régler un problème de rendu qui date d'avant IE  6, lorsque la bordure et le remplissage ( padding ) sont inclus dans la largeur totale d'un élément, plutôt qu'ajouté à ce dernier. Par exemple, pour spécifier les dimensions d'un contenant, vous pourriez utiliser la règle suivante :

#box
{
width: 100px;
border: 5px;
padding: 20px;
}

Cette règle sera appliquée à :

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

Ce qui signifie que la largeur totale de la boîte sera de 150 pixels (une largeur de 100 pixels + deux bordures de 5 pixels + 2 paddings de 20 pixels) dans tous les navigateurs, sauf ceux qui datent d'avant IE  6. Dans ces derniers, le total sera seulement de 100 pixels, le padding et la bordure étant implicitement compris dans cette largeur. Le bidouillage de boîtes peut être utilisé pour régler ce problème, mais il peut devenir très chaotique .

Une solution simple consiste à utiliser la feuille de style suivante :

#box
{
width: 150px;
}

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

Et le nouveau HTML serait :

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

Parfait ! Maintenant, la boîte aura toujours 150 pixels de large, quel que soit le navigateur !

7. Centrer un élément de type bloc

Disons que vous voulez avoir une mise en page avec une largeur fixe, mais dont le contenu flotte au milieu de l'écran. Vous pouvez utiliser la règle CSS suivante :

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

Vous allez alors ajouter <div id="content"> autour de chaque item du corps du document HTML ( body ), qui aura automatiquement une marge à gauche et à droite, assurant ainsi que l'élément est toujours placé au centre de l'écran. Simple... pas vraiment – nous avons toujours à nous inquiéter des navigateurs antérieurs à IE  6, étant donné que ces derniers n'alignent pas au centre les éléments ayant cette règle CSS . Il faudra changer la règle pour ceci :

body
{
text-align: center ;
}

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

Cette règle va aligner le contenu principal, mais aussi le texte. Pour empêcher cet effet, probablement non souhaité, on ajoute text-align: left; dans le div content.

8. Alignement vertical avec des CSS

L'alignement vertical était facile à réaliser avec des tableaux . Pour aligner le contenu d'une cellule au milieu, on utilisait simplement vertical-align: middle; Ceci ne fonctionne pas vraiment avec une mise en page CSS. Par exemple, si vous avez un élément du menu de navigation dont la hauteur est de 2em et que vous insérez une règle pour l'alignement vertical dans la feuille de style, cela ne fera pas vraiment de différence et le texte sera tout de même aligné en haut de la boîte.

Hum... Ce n'est pas l'effet souhaité. La solution ? La hauteur de la ligne doit être la même que la hauteur de la boîte elle-même dans la feuille de style. Si la boîte a une hauteur de 2em, nous ajoutons alors line-height: 2em; dans les règles CSS, et le texte flotte maintenant au milieu de la boîte. Et voilà !

9. Positionnement CSS avec un contenant

L'un des aspect les plus intéressants des feuilles de style demeure la capacité de positionner un objet absolument n'importe où dans un document. Il est aussi possible (et même souhaitable) de placer des objets dans un contenant. C'est très simple à faire. Il s'agit simplement d'assigner cette règle au contenant :

#container
{
position: relative;
}

Ainsi, n'importe quel élément à l'intérieur du contenant sera désormais positionné relativement à ce dernier. Par exemple, vous avez cette structure HTML  :

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

Pour positionner le bloc navigation à exactement 30 pixels de la gauche et 5 pixels du haut par rapport au contenant, vous pourriez utiliser ces règles CSS  :

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

Dans cet exemple, vous auriez également pu utiliser margin: 5px 0 0 30px; mais dans certains cas, il est préférable d'utiliser du positionnement.

A lire également : la mise en page en CSS.

10. Couleur de fond allant jusqu'au bas de l'écran

L'un des inconvénients des CSS est l'incapacité de contrôler l'alignement vertical des éléments, ce qui entraîne un problème qui était inexistant dans les mises en page avec des tableaux. Par exemple, vous avez une colonne contenant la navigation qui va jusqu'au bas du côté gauche de la page. Votre page a un fond blanc, mais vous voulez que la colonne de gauche ait un fond bleu. C'est simple : vous lui assignez la règle CSS appropriée :

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

Malgré tout, un problème demeure : comme les éléments de navigation ne descendent pas jusqu'au bas de l'écran, la couleur de fond ne suit pas. Le bleu du fond de la page est coupé vers le milieu de celle-ci, cassant votre superbe design. Que faire ?

Malheureusement, la seule solution consiste à tricher en assignant au corps une image de fond qui aura exactement les mêmes couleur et largeur que la colonne de gauche. Vous pourriez utiliser cette règle CSS  :

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

Cette image située en arrière-plan devrait avoir exactement 150 pixels de large et être du même bleu que le fond de la colonne de gauche. L'inconvénient de cette méthode est que vous ne pouvez décrire la colonne avec des em, car si l'usager change la taille du texte et que la colonne grandit, la couleur de fond ne bougera pas.

Lors de la rédaction de ce texte, le 1er septembre 2004, la seule solution à ce problème particulier consistait à définir une taille en pixels à la colonne lorsque vous voulez une couleur de fond différente du reste de la page.

 

---

Le texte original de cette page provient du site http://w3qc.org.
Ecrit par Trenton Moss pour webcredible, la traduction est de Chantal Ide, l'adaptation est de CSS-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les liens ci-dessus) dans le contenu copié.

Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

---

-

Introduction
aux CSS Premiers pas
avec les CSS Héritages
et cascades Eléments "blocs"
et "en ligne" Mise en page
avec les CSS Problèmes et solutions Des tableaux
en CSS Pseudo-frames
en CSS Menu déroulant
en CSS Styles alternatifs 10 trucs à savoir   Toutes les propriétés CSS Couleurs CSS
et HTML Unités CSS Classement alphabétique Classement par familles Reflexions et prises de tête Les fausses promesses Tableaux contre CSS : le combat Les ayatollahs
des CSS

Dans cette page :

Raccourcis

---