Dix Trucs Css Que Vous Pourriez Ne Pas Connaître

Cette traduction d'un article de trenton sur http://evolt.org a été réalisée début septembre. Seul le lien original fait référence. Cette page sera relue plus tard et n'hésitez pas à la corriger en utilisant le bouton Editer dans la barre de menu. La lecture de ces quelques remarques de TantekÇelik à propos de cet article m'a amené à supprimer l'item n°4.

Depuis j'ai découvert une traduction plus correcte sur http://w3qc.org/docs/dix_trucs_css.html mais les corrections semblent toujours demeurer valables ? -- ChristopheDucamp

Table des Matières 1. Règle de raccourci pour la Police CSS    2. Deux classes ensemble    3. Valeur par défaut de la bordure CSS    4. !important ignoré par IE    5. Technique de remplacement d'image    6. Alternative au CSS "box model hack"    7. Aligner au milieu un élément de bloc    8. Alignement vertical avec CSS    9. Positonnement CSS à l'intérieur d'un conteneur    10. Couleur d'arrière-plan jusqu'en bas de l'écran

1. Règle de raccourci pour la Police CSS    

Au moment de styler les polices avec CSS vous pouvez faire ça :

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

Mais c'est inutile parce que vous pouvez utiliser la propriété de raccourci CSS :

font: 1em/1.5em bold italic small-caps verdana,serif

Beaucoup mieux ! Simplement deux mots d'avertissement : cette version de raccourci CSS ne fonctionnera seulement que si vous spécifiez à la fois font-size et le font-family. Aussi si vous ne spécifiez pas les font-weight, font-styleou font-variant alors ces valeurs seront automatiquement réglées par défaut à normal, aussi gardez cela vraiment en tête.

TantekÇelik fait remarquer que l'auteur aurait pu citer tous les raccourcis :

Propriété de raccourcis règle tout en un font font-weight, font-style, font-variant, font-size, line-height, font-family background background-color, background-image, background-repeat, background-attachment, background-position margin margin-top, margin-right, margin-bottom, margin-left padding padding-top, padding-right, padding-bottom, padding-left border border-width, border-style, border-color border-width border-top-width, border-right-width, border-bottom-width, border-left-width border-style border-top-style, border-right-style, border-bottom-style, border-left-style border-color border-top-color, border-right-color, border-bottom-color, border-left-color list-style list-style-type, list-style-position, list-style-image outline outline-color, outline-style, outline-width

2. Deux classes ensemble    

Habituellement les attributs sont assignés à simplement une classe, mais cela ne veut pas dire que c'est tout ce qui est permis. En réalité, vous pouvez assigner autant de classes que vous voulez ! Par exemple :

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

3. Valeur par défaut de la bordure CSS    

Au moment d'écrire une règle de bordure, vous spécifirez habituellement la couleur, la largeur et le style (dans n'importe quel ordre). Par exemple, border: 3px solid #000 vous donnera une bordure solide noire d'une épaisseur de 3px. Cependant, la seule valeur requise ici est le style de bordure.

Si vous pensiez écrire simplement border: solid alors les valeurs par défaut pour cette bordure seont utilisées. Mais quelles valeurs par défaut ? Bien, la valeur par défaut pour la largeur d'une bordure est medium (equivalent à 3 ou 4 px) et la couleur par défaut est celle de la couleur du texte à l'intérieur de cette bordure. Si l'une ou plusieurs de ces valeurs par défaut sont ce que vous voulez, alors vous pouvez les sortir de la règle CSS !

4. !important ignoré par IE    

Section supprimée. Voir l'article de Tantek Çelik

5. Technique de remplacement d'image    

Il est toujours recommandable d'utiliser du balisage HTML standard pour l'affichage du texte, et ceci contrairement à une image. Le fait de faire ainsi permet d'accélérer la vitesse de téléchargement et présente des bénéfices d'accessiblité. Cependant si vous avez à coeur d'utiliser absolument une police spécifique et que les visiteurs de votre site aient de fortes chances de ne pas être équipés de cette police de caractère sur leurs ordinateurs, alors vous n'avez vraiment pas d'autre choix que d'utiliser une image.

Disons par exemple, que vous voulez que l'en-tête de titre de chaque page soit "Achetez des Gadgets", parce que vous êtes un vendeur de gadgets et que vous aimeriez que cette phrase soit trouvée dans les moteurs de recherche. Vous savez que c'est une fonte obscure aussi vous devez utiliser une image :

<h1><img src="gadget-image.png" alt="Achetez des Gadgets" /></h1>

Ceci est OK mais il est avéré que les moteurs de recherche n'assignent pas autant d'importance au texte spécifié qu'ils ne le font sur un vrai texte. (parce qu'aussi beaucoup de webmasters utilisent le texte alt pour bourrer les mots-clés). Aussi une alternative serait :

<h1><span>Achetez des Gadgets</span></h1>

Désormais, ceci n'utilisera évidemment pas votre fonte obscure. Pour pallier ce problème placez ces commandes dans votre document CSS :

h1
{
background: url(gadget-image.png) no-repeat;
}

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

L'image avec votre fonte amusante s'affichera désormais et le texte régulier sera mis à l'écart en toute sécurité, positionné à 2000px de la gauche de l'écran grâce à notre règle CSS.

'Attention : Selon TantekÇelik ce truc simplifie une question ayant déjà fait l'objet de nombreux articles.

En résumé : soyez très prudent avec les techniques de remplacement d'images CSS. Lisez la première page d'une requête Google sur les mots CSS image replacement pour trouver des auteurs comme DougBowan, DaveShea (Digital Web article), JoeClark / ALA, and StuartLangridge avant d'utiliser ces dites techniques, et notez comment même les experts ont révisé leurs techniques de remplacement d'image après les expériences de la communauté toute entière sur ce sujet.

6. Alternative au CSS "box model hack"    

Le bidouillage du modèle de boîte (BoxModelHack) est utilisé pour pallier un problème de rendu dans les navigateurs pre-IE6, où quand la bordure et le padding sont inclus dans la largeur d'un élément, en opposition à ajoutés. Par exemple, au moment de spécifier les dimensions d'un conteneur vous pourriez utiliser la règle CSS suivante :

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

Cette règle CSS s'appliquerait à :

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

Ceci signifie que la largeur totale de la boîte est de 150px (100px de largeur + 2 foix 5px de bordures + deux fois 20px de padding) dans tous les navigateurs sauf les versions IE avant IE6. Dans ces navigateurs le total de la largeur serait simplement de 100px, avec les largeurs de padding et de bordures incorporées dans cette largeur. Le box model hack peut être utilisé pour pallier ceci, mais ce peut être véritalement le grand désordre.

Une simple alternative est d'utiliser cette CSS :

#box
{
width: 150px
}

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

Et le nouveau HTML serait :

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

Parfait ! Désormais la largeur de la boîte sera toujours de 150px, quel que soit le navigateur !

Notons néanmoins une petite critique de TantekÇelik : better to use CSS hacks to keep hacks out of your markup than the opposite.

7. Aligner au milieu un élément de bloc    

Disons que voulez disposer d'un gabarit de site avec une largeur fixée et le contenu qui flotte au milieu de l'écran. Vous pouvez utiliser la commande CSS suivante :

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

Vous pourriez ensuite encapsuler le <div id="contenu"> autour de chaque item dans le corps du document HTML et cela donnera une marge automatique à la fois sur les côtés droit et gauche, vous assurant que le contenu sera toujours placé au centre de l'écran. Simple... bien pas tout à fait - nous avons encore les versions pre-IE6 à prendre en considération, parce que ces navigateurs ne centrent pas l'élément avec cette commande CSS. Vous devrez modifier les règles CSS :

body
{
text-align: center;
}

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

La commande initiale centre le contenu principal mais elle centre aussi le texte. Pour désactiver le centrage du texte, probablement non voulu, nous avons inséré text-align:left à l'intérieur de la div content.

TantekÇelik : ''La seule amélioration que je pourrais suggérer et d'utiliser les propriétés individuelles pour 'auto' au lieu du raccourci margin...'

8. Alignement vertical avec CSS    

Aligner verticalement à l'aide de tables était une tâche facile. Pour faire que le contenu des cellules s'alignent au milleu vertical d'une cellule, vous utilisiez : vertical-align: middle. Ceci ne fonctionne vraiment pas avec une mise en page CSS. Disons que vous avez un item de menu de navigation dont la hauteur est fixée à 2 em et vous insériez cette commande d'alignement vertical à l'intérieur de la règle CSS. Cela ne produira basiquement pas de différence et le texte sera poussé vers le haut de la boîte.

Hmm... pas forcément l'effet désiré. La solution ? Spécifiez la hauteur de ligne pour être la même que la hauteur du tableau lui-même dans la CSS. Dans ce cas, la boîte a une hauteur de 2 em, aussi nous pourrons insérer line-height: 2em à l'intérieur de la règle CSS et le texte flotte maintenant au milieu de la boîte - parfait !

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

Une des meilleures choses à propos des CSS est que vous pouvez positionner un objet absolument n'importe où vous voulez dans le document. C'est aussi possible (et souvent désirable) de positionner les objets à l'intérieur d'un conteneur. C'est simple à faire aussi. Assignez simplement la règle CSS suivante au conteneur :

#conteneur
{
position: relative
}

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

Pour positionner la navigation exactement à 30px de la gauche et à 5px du haut de la boîte conteneur, vous pourriez utiliser ces commandes CSS :

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

Parfait dans cet exemple, vous pourriez bien sûr aussi utiliser margin: 5px 0 0 30px, mais il y a des cas où il est préférable d'utiliser le positionnement.

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

Un des inconvénients des CSS est son incapacité à être contrôlée verticalement, provoquant un problème particulier dotn ne souffre pas la mise en page par tableaux. Disons que vous avez une colonne sur la gauche de la page qui contient la navigation du site. La page a un arrière-plan blanc, mais vous voulez que cette colonne de gauche ait un arrière-plan bleu. Simple vous lui assignez la règle CSS suivante :

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

Juste un problème : parce que les items de navigation ne vont pas jusqu'aù bas de l'écran, la couleur d'arrière-plan ne le fera pas non plus. La couleur bleue d'arrrière-plan sera coupée à mi-chemin du bas de la page, ruinant votre conception. Que faire ?!

Malheureusement, la seule solution à cela est de tricher et assigner au corps une image d'arrière-plan exactement de la même couleur et de la m^me largeur que la colonne de gauche. Vous pourriez utiliser ce document CSS :

body
{
background: url(image-bleue.png) 0 0 repeat-y
}

Cette image que vous placez dans l'arrière-plan devrait être exactement de 150px de largeur et de la même couleur bleue comme l'arrière-plan de la colonne de gauche. L'inconvénient de cette méthode est que vous ne pouvez déclarer la colonne de gauche en em, et que si l'utilisateur retaille le texte et que la colonne s'épanche, sa couleur d'arrière-plan ne le fera pas.

Au moment d'écrire cela, c'est la seule solution à ce problème spécifique, aussi la colonne de gauche sera exprimée en px si vous voulez qu'elle ait un couleur d'arrière-plan différente du reste de la page.