Imprimerie Nice - Carnet Web de Dimension Internet, professionnel des arts graphiques et des technologies liées à Internet - CSS

Image Map en CSS

Sven CAILTEUX — Mon, 22 Dec 2008 13:56:48 +0000

Autre technique suite à l'article précédent

Toujours sur la même base que l'article précédent et suite à un commentaire d'un de nos lecteurs demandant si on pouvait faire la même chose avec des ovales,
voici le résultat.

Voici le dossier complet.

Et voici le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css" title="text/css">
/* <![CDATA[ */
body { font-family: Arial,Helvetica,sans-serif; }
/* Groupe d'animaux */
#gmap {display:block; width:600px; height:400px; background:url(group_white.gif); position:relative; margin:0 auto 2em auto;}
#gmap a {color:#000; font-family:arial, sans-serif; font-size:1.2em; font-weight:bold; text-transform:uppercase;}

a#title2, a#title2:visited {display:block; width:600px; height:0; padding-top:400px; position:absolute; left:0; top:0; cursor:default; text-decoration:none;}
* html a#title2 {height:400px; he\ight:0;}
#gmap a#title2:hover {background:transparent url(group_col.gif) no-repeat 0 0; overflow:visible; color:#c00;}

a#rhino {display:block; width:126px; height:0; padding-top:126px; overflow:hidden; position:absolute; left:131px; top:151px;}
* html a#rhino {height:130px; he\ight:0;}
a#rhino:hover {background:transparent url(rhino.gif) no-repeat 0 0; overflow:visible;}

a#zebre {display:block; width:68px; height:0; padding-top:122px; overflow:hidden; position:absolute; left:208px; top:175px;}
* html a#zebre {height:122px; he\ight:0;}
a#zebre:hover {background:transparent url(zebre.gif) no-repeat  0 0; overflow:visible;}

a#buffle {display:block; width:87px; height:0; padding-top:149px; overflow:hidden; position:absolute; left:236px; top:152px;}
* html a#buffle {height:149px; he\ight:0;}
a#buffle:hover {background:transparent url(buffle.gif) no-repeat 0 0; overflow:visible;}

a#girafe {display:block; width:78px; height:0; padding-top:222px; overflow:hidden; position:absolute; left:299px; top:82px;}
* html a#girafe {height:78px; he\ight:0;}
a#girafe:hover {background:transparent url(girafe.gif) no-repeat 0 0; overflow:visible;}

a#gazelle {display:block; width:67px; height:0; padding-top:149px; overflow:hidden; position:absolute; left:359px; top:152px;}
* html a#gazelle {height:149px; he\ight:0;}
a#gazelle:hover {background:transparent url(gazelle.gif) no-repeat 0 0; overflow:visible;}

/* ]]> */
</style>
</head>
<body>
<dl id="gmap">
<dt><a id="title2" href="http://www.dimension-internet.com/blog/index.php/post/2008/12/22/136-image-map-en-css#nogo">Safari</a></dt>
<dd><a id="rhino" title="Rhino" href="http://www.dimension-internet.com/blog/index.php/post/2008/12/22/rhino.html">Rhino</a></dd>
<dd><a id="zebre" title="Zebre" href="http://www.dimension-internet.com/blog/index.php/post/2008/12/22/zebre.html">Zebre</a></dd>
<dd><a id="buffle" title="Buffle" href="http://www.dimension-internet.com/blog/index.php/post/2008/12/22/buffle.html">Buffle</a></dd>
<dd><a id="girafe" title="Girafe" href="http://www.dimension-internet.com/blog/index.php/post/2008/12/22/girafe.html">Girafe</a></dd>
<dd><a id="gazelle" title="Gazelle" href="http://www.dimension-internet.com/blog/index.php/post/2008/12/22/gazelle.html">Gazelle</a></dd>
</dl>
</body>
</html>

Image Map en full CSS - Zones réactives d'images en CSS uniquement

Sven CAILTEUX — Sun, 20 Apr 2008 11:17:46 +0000

Aujourd'hui je vous présente une solution simple pour créer des zones réactives dans une images, uniquement avec des CSS.

Nous ne verrons ici que l'aspect technique, sans rentrer trop dans les détails au niveau du code.

Pour ce faire nous avons besoin d'une image, la voici :
Image d'exemple

Le plus simple pour repérer les zones réactives d'une image, c'est de l'ouvrir dans un logiciel auquel vous avez accès aux coordonnées de votre image et curseur.

Nous allons pour cet exemple faire 2 zones réactives, une pour les carottes et une pour les radis, on relève la taille de l'image, les coordonnées X Y du début de chaque zones, ainsi que la taille de la zone à savoir largeur et hauteur.
On utilisera également une image PNG de 1x1 pixels, avec un fond blanc de 10% et la transparence, afin de remplir la zone réactive d'un voile laiteux au passage du curseur de la souris.
Dans cet exemple je n'ai pas pris la peine d'indiquer où se trouve les zones mais vous pouvez tout aussi bien remplir les zones avec une image en transparence, entourer d'un cadre,... bref je laisse libre cours à votre imagination.

Nous allons utiliser une liste pour présenter nos zones en l'occurence avec les éléments dl, dt et dd, nous réglons l'élément dl entourant nos zones en plaçant notre image en fond.

Voici le code :

dl#marcheMap{
	margin: 0;
	padding: 0;
	background: transparent url('marche.jpg') top left no-repeat;
	height: 600px;
	width: 450px;
	position: relative;
}

on initialise les éléments dt et dd :

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }
dd{ margin: 0; padding: 0; position: absolute;  font-size: 85%; }

et enfin on déclare nos zones réactives :

/* ---------- Déclarations des Zones Réactives ---------- */

/* Coordonnées X Y du début de la zone */
dd#carottes{ left: 85px; top: 205px;  }

/* Taille de la zone à délimiter */
dd#carottes a{ position: absolute; width: 220px; height: 270px; text-decoration: none; }
dd#carottes a span{ display: none; }
dd#carottes a:hover{ position: absolute; border:1px dashed white; background: transparent url(hover.png) repeat; }

/* Bloc de description  */
dd#carottes a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: lightgrey;
 font-weight: bold;
 position: absolute;
 border: 1px solid gray;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 95%;
}

Voici notre exemple complet :
http://www.dimension-internet.com/dev/imagemap/

Un tableau en CSS qui positionne une cellule en soulignant la colonne et la ligne.

Sven CAILTEUX — Thu, 01 Nov 2007 10:31:23 +0000

On souhaite situer à tout moment à quelle ligne et colonne appartient une cellule...

Voici le code correspondant à un exemple de prix pour l'impression de prospectus, les quantités à gauche et le grammage en haut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exemple de table avec styles CSS</title>
<style type="text/css" title="text/css" media="all">
/* <![CDATA[ */
table	{border-collapse:collapse;}
thead th {
	font:bold 13px/18px georgia;
	text-align:left;
	background:#fff4c6;
	color:#333;
	padding:8px 16px 8px 8px;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
}
th.vide {background:#fff;}
tbody th {
	font:bold 12px/15px georgia;
	text-align:left;
	background:#fff9e1;
	color:#333;
	padding:8px;
	border-bottom:1px solid #f3f0e4;
	border-right:1px solid #fff;
}
tbody td {
	font:normal 12px/15px georgia;
	color:#333;
	padding:8px;
	border-right:1px solid #f3f0e4;
	border-bottom:1px solid #f3f0e4;
}

tbody td.on {background:#f3f0e4;}
thead th.on {background:#ffe068;}
tbody th.on {background:#ffe068;}
/* ]]> */
</style>
<script type="text/javascript">
/*
	For functions getElementsByClassName, addClassName, and removeClassName
	Copyright Robert Nyman, http://www.robertnyman.com
*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function getElementsByClassName(className, tag, elm){
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}
	}
	return returnElements;
}

function addClassName(elm, className){
    var currentClass = elm.className;
    if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){
        elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className;
    }
    return elm.className;
}

function removeClassName(elm, className){
    var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
    elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, "");
    return elm.className;
}

function makeTheTableHeadsHighlight() {
	// get all the td's in the heart of the table...
	var table = document.getElementById('prospectus');
	var tbody = table.getElementsByTagName('tbody');
	var tbodytds = table.getElementsByTagName('td');
	
	// and loop through them...
	for (var i=0; i<tbodytds.length; i++) {
	
	// take note of their default class name
		tbodytds[i].oldClassName = tbodytds[i].className;
		
	// when someone moves their mouse over one of those cells...
		tbodytds[i].onmouseover = function() {
	
	// attach 'on' to the pointed cell
			addClassName(this,'on');
			
	// attach 'on' to the th in the thead with the same class name
			var topheading = getElementsByClassName(this.oldClassName,'th',table);
			addClassName(topheading[0],'on');
			
	// attach 'on' to the far left th in the same row as this cell
			var row = this.parentNode;
			var rowheading = row.getElementsByTagName('th')[0];
			addClassName(rowheading,'on');
		}
	
	// ok, now when someone moves their mouse away, undo everything we just did.
	
		tbodytds[i].onmouseout = function() {
	
	// remove 'on' from this cell
			removeClassName(this,'on');
			
	// remove 'on' from the th in the thead
			var topheading = getElementsByClassName(this.oldClassName,'th',table);
			removeClassName(topheading[0],'on');

	// remove 'on' to the far left th in the same row as this cell
			var row = this.parentNode;
			var rowheading = row.getElementsByTagName('th')[0];
			removeClassName(rowheading,'on');
		}
	}
}
addLoadEvent(makeTheTableHeadsHighlight);
</script>

</head>

<body>
<table id="prospectus">
  <tr>
    <th class="vide"> </th>
    <th class="135">135gr</th>
    <th class="170">170gr</th>
    <th class="300">300gr</th>
  </tr>
  <tr>
    <th>1000 ex.</th>
    <td class="135">100 €</td>
    <td class="170">200 €</td>
    <td class="300">300 €</td>
  </tr>
  <tr>
    <th>2000 ex.</th>
    <td class="135">150 €</td>
    <td class="170">250 €</td>
    <td class="300">350 €</td>
  </tr>
  <tr>
    <th>3000 ex.</th>
    <td class="135">200 €</td>
    <td class="170">300 €</td>
    <td class="300">400 €</td>
  </tr>
  <tr>
    <th>4000 ex.</th>
    <td class="135">250 €</td>
    <td class="170">350 €</td>
    <td class="300">450 €</td>
  </tr>
</table>
</body>
</html>

et son exemple.

Nous avons un tableau HTML tout simple avec une en-tête en haut et à gauche avec les balises <thead><th> pour le haut et <tbody><th> pour la gauche.

L'utilisation de ":hover pour ce type d'effet n'est pas approprié, nous allons utilisé Javascript avec les événements "onmouseover" et "onmouseout".
Nous souhaitons que lors du passage sur une cellule que la classe 'on' lui soit appliquée, ainsi qu'aux cellules dans les en-têtes haut et gauche.
Et lorsque l'on sort de la cellule du tableau, on retire la class 'on' de toutes les cellules.

Pour ce faire nous allons utiliser des fonctions Javascript :

getElementsByClassName
addClassName
removeClassName
une fonction pour lier les deux
addLoadEvent

Le nom est assez évocateur pour ne pas rentrer dans les détails...

Comment réaliser un bouton façon 3D tout en CSS ?

Sven CAILTEUX — Fri, 27 Jul 2007 13:39:23 +0000

Voici une petite astuce qui vous permettra d'obtenir un effet intéressant.

En utilisant les bordures et la propriété "outset", on peut donner l'illusion d'un bouton en 3D à un simple lien.
Voici le code CSS :

.dimension{
color: white;
background-color: #4CB7ED;
border: 2px #4CB7ED outset;
padding: 1px 4px;
text-decoration: none;
font-family:"Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
font-weight:bold;
font-size:0.95em;
}

.dimension:visited{
color: white;
}

.dimension:hover{
border-style: inset;
background-color: #8ED3F5;
padding: 2px 3px 0 5px; /* déplacement du texte d'un pixel à droite et en bas */
}

.dimension:active{
color: white;
}

Et un exemple concret.

Comment réaliser un lien animé ?

Sven CAILTEUX — Fri, 27 Jul 2007 12:20:29 +0000

Voici une astuce pour réaliser un lien animé. Au passage de la souris sur le lien, le lien s'anime en fonction de l'image créée.

Tout d'abord voici l'image, un gif animé :

Et voici le code CSS qui permettra d'avoir le lien survolé qui s'anime :

a:link {
	color: green;
	white-space: nowrap;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: green;
}

a:hover {
	text-decoration: none;
	background-image: url(animated_line.gif);
	background-repeat: repeat-x;
	background-position: 100% 100%;
	padding-bottom: 0;
	color: navy;
}

a:active {
	text-decoration: none;
}

Et enfin un exemple concret.

Une lettrine en CSS

Sven CAILTEUX — Fri, 06 Jul 2007 09:51:25 +0000

Voici une façon simple de réaliser une lettrine avec des propriétés CSS.

Le code pour réaliser cette lettrine est simple, on place la lettre destinée à être transformée en lettrine dans une balise et on attribue des propriétés de styles CSS à cette balise.

Voici le code :

<p>
<span style="margin-right:10px;margin-top:5px;float:left;
color:white;background-color:#C00000;border:1px solid #850000;
font-size:80px;line-height:60px;padding:3px;font-family:times;
">L</span>orem ipsum dolor sit amet,
consectetuer adipiscing elit. Curabitur consequat mi sed
eros. Etiam leo urna, tincidunt vel, elementum et, varius
id, metus. Nullam eu dolor vitae ligula rutrum porta.
Integer eget ante nec justo euismod laoreet. Maecenas nulla.
Aenean pellentesque, pede ac consequat pretium, ipsum pede
placerat sapien, egestas semper quam erat at tellus. Nam
mattis velit non tellus. Nam lacinia, sem at porttitor
sodales, dui neque consequat nunc, id vehicula sem leo quis
libero. Phasellus eu mi et mauris faucibus cursus. Nulla
dignissim odio in quam. </p> <p> Nullam eget
quam in erat interdum pharetra. Vestibulum dictum, sapien
viverra mattis luctus, lorem ipsum suscipit justo, nec
commodo lorem est a lorem. Donec mattis eros laoreet ipsum.
Etiam sagittis. Donec augue ligula, malesuada a, malesuada
at, eleifend quis, urna. Phasellus vestibulum, risus id
pulvinar faucibus, tortor metus tincidunt sem, eu iaculis
ligula urna ac est. Nunc quam mi, cursus non, congue sit
amet, posuere aliquet, neque. Vestibulum posuere venenatis
erat. Cras consequat, metus id consequat ultricies, lectus
mauris dictum nisi, sit amet cursus eros magna quis mauris.
Vestibulum pellentesque, quam sed ornare porttitor, odio
metus lacinia velit, a consectetuer dolor nulla nec felis.
Aliquam dolor. Integer ipsum eros, dictum venenatis,
pulvinar non, ultricies euismod, nunc. </p>
<div style="clear:both;"><br /></div>

et voici un exemple :

orem ipsum dolor sit amet, nullam eget quam in erat interdum pharetra. Vestibulum dictum, sapien viverra mattis luctus, lorem ipsum suscipit justo, nec commodo lorem est a lorem. Donec mattis eros laoreet ipsum. Etiam sagittis. Donec augue ligula, malesuada a, malesuada at, eleifend quis, urna. Phasellus vestibulum, risus id pulvinar faucibus, tortor metus tincidunt sem, eu iaculis ligula urna ac est. Nunc quam mi, cursus non, congue sit amet, posuere aliquet, neque. Vestibulum posuere venenatis erat. Cras consequat, metus id consequat ultricies, lectus mauris dictum nisi, sit amet cursus eros magna quis mauris. Vestibulum pellentesque, quam sed ornare porttitor, odio metus lacinia velit, a consectetuer dolor nulla nec felis. Aliquam dolor. Integer ipsum eros, dictum venenatis, pulvinar non, ultricies euismod, nunc.

N'oubliez pas de laisser un commentaire

Technique du remplacement d'image (Image replacement)

Sven CAILTEUX — Mon, 04 Jun 2007 18:02:51 +0000

Voici comment faire pour remplacer vos logos et bandeaux par du texte en restant néammoins accessible...

Si vous avez besoin d'afficher un texte sous forme d'image à cause d'une police particulière ou pour un logo.

Pour un logo voici ce qu'il ne faut pas faire :

<img src="http://www.dimension-internet.com/blog/index.php/post/2007/06/04/logo.gif" alt="Nom de la société" />

mais plutôt ceci :

XHTML :

<h1 id="logo">Nom de la société</h1>

CSS :

h1 {
height:100px; /* Hauteur du logo */
width:100px; /* Largeur du logo */
background:url(logo.gif) no-repeat;
text-indent:-9000px;
}

A présent, vous souhaitez remplacer le texte par une image de fond :

CSS :

#logo {
background:transparent url(image.png) no-repeat 0 0;
display:block;
height:100px; /* Hauteur du logo */
width:100px; /* Largeur du logo */
overflow:hidden;
line-height:1000px;
}

D'une part, les personnes utilisant un navigateur texte seront ravies et d'autre part, c'est excellent pour le référencement

OUI, MAIS !
car il y a un mais, si vous utilisez votre image comme un lien, vous aurez un cadre pointillé tout autour de l'élément et voici la solution pour éviter ce genre de désagrément.
Il suffit juste d'ajouter ceci comme propriété CSS:

outline: 0;

et le tour est joué !

Gabarits de pages HTML en CSS

Sven CAILTEUX — Tue, 15 May 2007 10:16:41 +0000

Voici une liste de gabarits qui grossira au fur et à mesure...
Si vous utilisez l'un d'eux, merci de laisser un petit commentaire

1 colonne fixe

1 colonne fixe avec Header et Footer

1 colonne liquide

Lorsque vous redimensionnez la fenêtre le gabarit se redimensionne.

1 colonne liquide avec Header et Footer

1 colonne élastique

Le gabarit reste fixe, mais si vous grossissez ou réduisez la taille du texte, le gabarit se redimensionne.

1 colonne élastique avec Header et Footer

Le gabarit reste fixe, mais si vous grossissez ou réduisez la taille du texte, le gabarit se redimensionne.

2 colonnes avec Sidebar à droite

Le gabarit reste fixe.

2 colonnes avec Sidebar à droite Header et Footer

Le gabarit reste fixe.

Placer un gif animé par dessus une image en CSS

Sven CAILTEUX — Sun, 25 Feb 2007 10:14:19 +0000

Voici une solution simple, il suffit tout simplement de placer le gif animé par dessus l'image, en utilisant la position absolute.

Code CSS :

body { background:url(fond.jpg) no-repeat; }
#fleche { position:absolute; top:380px; left:430px; }

Code HTML :

<body>
<div id="fleche">
<a href="http://www.dimension-internet.com/blog/index.php/post/2007/02/25/67-placer-un-gif-anime-par-dessus-une-image-en-css#"><img src="http://www.dimension-internet.com/blog/index.php/post/2007/02/25/fleche.gif" /></a>
</div>
</body>

Une galerie de menus en CSS

Sven CAILTEUX — Fri, 24 Nov 2006 20:55:36 +0000

Une galerie CSS rassemblant des créations de menus et des techniques en CSS pour créer différents types de navigation.

Si vous êtes en panne d'inspiration lors de votre prochain projet, voici le site qu'il vous faut Vitaly Friedman’s CSS Showcase

La galerie nous démontre qu'il est possible de faire de beaux menus en CSS, facilement éditable. Le site mis à jour par Vitaly Friedman inclut une galerie de menus CSS téléchargables, vous pourrez les utiliser à des fins personnelles ou commerciales.

Pour aider les internautes qui souhaitent créer leurs propres menus, vous avez également une vue d'ensembles des techniques de navigation.

Le fait d'avoir une galerie rassemblant tous ces menus est très appréciable.

A noter : Le site est en anglais

Trucs et astuces pour les CSS (en cours d'écriture)

Sven CAILTEUX — Wed, 26 Jul 2006 07:37:05 +0000

Pour réduire l'espace et faire que vos feuilles de styles CSS soient plus lisibles, je recommande l'utilisation de raccourci syntaxiques afin de déclarer plusieurs propriétés en une seule déclaration.

Sections :

Indiquez une unité à moins que la valeur ne soit 0 (zéro)

Une erreur commune chez les débutants en CSS, est de ne pas déclarer les unités de longueur pour certains éléments. En HTML, vous pouvez ne pas les déclarer, mais en CSS toutes les ces valeurs de longueur doivent avoir une unité. Il y a deux exceptions : line-height et la valeur 0 (zéro). Notez que la valeur doit être immédiatement suivie par une unité de mesure et qu'il ne faut pas d'espace entre les deux.

Il n'y a pas besoin de spécifier une unité pour la valeur 0 (zéro), car 0 pixel = 0 centimètre = 0 pour toutes autres unités de longueur. En dépit de celà, il n'est pas rare de voir quelque chose comme

padding:0px

au lieu de

padding:0

Alors que ce n'est pas faux d'indiquer une unité lorsque la valeur est 0 (zéro), c'est une perte de temps et d'espace.

Sensible à la casse

Lorsque les feuilles de styles CSS sont utilisées avec du XHTML, les noms des éléments dans les sélecteurs sont sensibles à la casse. Pour éviter de tomber dans le piège, je recommande de toujours utiliser des minuscules pour les noms d'éléments des sélecteurs CSS.

Spécifier des couleurs

En CSS, lorsque vous utilisez la notation de couleurs en hexadécimale, la couleur est définie par trois paires de chiffres hexadécimaux, vous pouvez écrire cette couleur de manière simplifiée en omettant le deuxième chiffre de chaque paire :

#000 équivaut à #000000, #369 équivaut à #336699.

N'oubliez pas le dièse (#) avant le code couleur !

Une autre astuce est que vous pouvez spécifier des couleurs web sécurisé (web safe colors) en utilisant uniquement des chiffres qui sont des multiples de 3 : 0, 3, 6, 9, C et F. Exemple #99c est une couleur sécurisée, #98c n'en est pas une.

Les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour les principales, par leur nom en anglais (red). Une couleur sécurisée pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la même dans Netscape Navigator et Microsoft Internet Explorer, sous Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web.

Des tests approfondis ont cependant révélé qu'en réalité seules 212 couleurs sont sécurisées pour le Web. Sous Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0).

Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n'affichaient que 265 couleurs (8 bits). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des millions de couleurs (16 et 32 bits). L'utilité de la palette adaptée à tous les navigateurs est donc bien moindre si vous développez votre site pour les utilisateurs de systèmes informatiques modernes.

La palette de couleurs sécurisée pour le Web peut s'avérer utile si vous créez des sites pour des appareils différents, comme les organisateurs personnels et les téléphones mobiles. Un grand nombre de ces appareils sont équipés d'un écran noir et blanc (1 bit) ou 256 couleurs (8 bits).

Ecrire les sélecteurs 'class' et 'id' sans le nom de l'élément

Quand vous écrivez un sélecteur qui pointe sur un élément avec une certaine "classe" ou "id", vous pouvez omettre l'élément devant le ( . ) ou ( # ).

Donc à la place d'avoir :

div#contenu { ... }
fieldset.details { ... }

vous avez :

#contenu { ... }
.details { ... }

ainsi vous allez économiser quelques octets pour chaque sélecteur.

C'est particulièrement utile pour les sélecteurs "id" puisqu'ils sont uniques dans un document, ce qui réduit le risque de conflits avec les autres. les "class" peuvent être utilisées autant de fois que l'on veut dans un document et différents types d'éléments peuvent avoir la même "class". Pour styler différement des types d'éléments avec la même "class", vous aurez besoin de spécifier chaque type dans le sélecteur.

Mais attention que ces règles ne sont pas identiques. Si vous écrivez une règle avec un type d'élément et une sans, la règle qui utilise le type d'élément sera prioritaire.

Valeurs par défaut

Vous pouvez très souvent ne pas spécifier de valeur pour une propriété en tenant compte de la valeur par défaut de la propriété. C'est particulièrement important à prendre en compte lorsque vous utilisez des raccourcis pour les propriétés, puisque les propriétés non définies ont les valeurs par défaut correspondantes à chaque propriété.

Par défaut, certaines valeurs ont 0 (zéro) pour le padding et transparent pour le background-color

Étant donné qu'il existe des différences mineures pour les valeurs par défaut entre les navigateurs, certaines personnes initialisent les valeurs margin et padding pour tous les éléments au début de la feuille de style.

* {
margin:0
padding:0;
}

Ne pas redéclarer de valeurs héritées

De nombreuses propriétés héritent des éléments parents dont vous avez spécifié la propriété. Les propriétés de color et font sont les exemples les plus communs de cet héritage.

Attention que certaines propriétés peuvent être dépassées par les feuilles de styles de certains navigateurs. C'est pourquoi vous ne pouvez pas rendre tous les entêtes non gras avec ce type de règle :

body { font-weight:normal; }

Les règles prédéfinies des navigateurs sont plus spécifiques en raison de la feuille de style qui est décrite ci-dessous.

Tirez parti de la feuille de style

La feuille de style vous permet d'utiliser de nombreuses règles pour spécifier des propriétés d'un élément. Vous pouvez redéfinir la même propriété ou définir des propriétés supplémentaires. Mettons que vous avez ce code ci :

<p class="exemple">Exemple : Voici du texte servant de test</p>

Dans la feuille de style, vous pouvez séparer les règles pour spécifier des propriétés qui sont communes à tous les éléments p et celles qui sont spécifiques aux éléments p avec la classe exemple

p {
margin:1em 0;
font-size:1em;
color:#333;
}

.exemple {
font-weight:bold;
color:#600;
}

Les deux règles seront combinées pour les éléments p avec class="exemple". Puisqu'un sélecteur de classe est plus spécifique qu'un type de sélecteur, les propriétés définies dans la deuxième règle seront utilisées quand un conflit se produira, dans ce cas se sera color.

Plus d'informations sur la spécificité d'application des règles CSS sont disponibles sur la documentation CSS

Noms multiples de classes

Vous pouvez appliquer de multiples classes à un élément. Ce qui permet d'écrire plusieurs règles qui définissent différentes propriétés et qui sont appliquées uniquement à la demande. Supposons que vous inscriviez dans une galerie photo, sur certaines images, qu'elles sont libres de droit ou non. Et mettons que sur certaines photos il y a une promotion. Voici ce que ca donnera pour les trois exemples :

<img src="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/image.gif" class="promotion" alt="" />
<img src="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/photo.gif" class="libre" alt="" />
<img src="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/portrait.gif" class="libre promotion" alt="" />

Pour appliquer un style à l'image qui est libre de droit, afin de la différencier des autres, vous pouvez créer une règle pour les éléments ayant comme classe libre et si vous souhaitez démarquer une image en promotion, vous pouvez utiliser la classe promotion pour en faire une règle. Ainsi vous aurez quelque chose comme ceci :

.royaltyfree { border:2px solid #666; }
.special { padding:2px; background:#ff0; }

Toutes les images qui ont une classe promotion auront un "padding" et un fond jaune. Les images qui ont une classe libre auront une bordure et celles qui auront les deux classes, auront une bordure un "padding" et un fond jaune.

Ce n'est qu'un simple exemple, à vous d'aller plus loin. Essayez d'utiliser des noms de classe sémantiquement correct, qui décrivent l'élément et non à quoi il ressemble.

Utilisez des sélecteurs descendants

La non utilisation des sélecteurs descendants par les débutants, est l'exemple le plus courant de l'inefficacité des CSS. Les sélecteurs descendants peuvent vous aider à éliminer un bon nombre d'attributs de classe de votre code et rendre vos sélecteurs beaucoup plus efficace. Prenez le code suivant :

<div id="subnav">
<ul>
<li class="subnavitem"><a href="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/19-trucs-et-astuces-pour-les-css#" class="subnavitem">Item 1</a></li>
<li class="subnavitemselected"><a href="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/19-trucs-et-astuces-pour-les-css#" class="subnavitemselected">Item 1</a></li>
<li class="subnavitem"><a href="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/19-trucs-et-astuces-pour-les-css#" class="subnavitem">Item 1</a></li>
</ul>
</div>

Avec la feuille de style correspondante :

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

Tout ceci peut-être remplacé par :

<ul id="subnav">
<li><a href="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/19-trucs-et-astuces-pour-les-css#">Item 1</a></li>
<li class="sel"><a href="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/19-trucs-et-astuces-pour-les-css#">Item 1</a></li>
<li><a href="http://www.dimension-internet.com/blog/index.php/post/2006/07/26/19-trucs-et-astuces-pour-les-css#">Item 1</a></li>
</ul>

et la CSS par :

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

Faites en sorte que vos feuilles de styles et vos pages soient le plus propre possible et vous verrez à quel point se sera plus efficace et facile à relire

Évitez d'entourer les URL avec des guillemets

Pour sauver quelques octets par-ci par-là, ne mettez pas de guillemets dans les images en "background". Ce n'est pas nécessaire de les entourer et surtout il arrive que celà pose même des problèmes avec certains navigateurs, comme par exemple avec IE/Mac

Groupe de sélecteurs

Quand plusieurs types d'éléments, classes, ou "id" partagent les mêmes propriétés, vous pouvez grouper ces sélecteurs, pour éviter d'avoir à spécifier la même propriété plusieurs fois. Celà économisera beaucoup d'octets. Si vous mettez chaque sélecteur sur la même ligne ou si vous les séparés par un retour à la ligne, c'est une question de goût.

Ainsi, pour indiquer la police, la couleur, et les marges pour tous les éléments de titre, vous pouvez procédez de la sorte :

h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

Si on compare le fait d'indiquer individuellement les propriétés pour chaque type d'élément, ceci nous fait gagner beaucoup d'espace.Vous pouvez alors indiquer séparément toutes les propriétés qui sont différentes pour certains de ces éléments, par exemple "font-size" :

h1 { font-size:2em; }
h2 { font-size:1.6em; }

Indiquez les styles de liens dans le bon ordre

En appliquant une CSS aux différents états d'un lien vous devez penser à l'ordre des règles. Dans la plupart des cas vous allez les indiquer dans cet ordre :link :visited :hover :active LVHA. L'ordre est affecté spécifiquement. Chaque sélecteur a une spécificité. Si deux sélecteurs sont appliqués au même élément, celui qui a une plus grande spécificité l'emporte.

p.toto { color:green; } /* Spécificité = 1.1 */
p { color:red, } /* Spécificité = 1 */

Tous les paragraphes qui auront une classe "toto" seront en vert et non pas en rouge. Les deux sélecteurs sont appliqués et les deux essayent de régler la couleur, donc le plus spécifique l'emporte. De même si nous avons ceci :

p.toto { color:green; } /* Specificité = 1.1   */
p { font-family:Courier; } /* Specificité = 1   */

Tous les paragraphes seront en "Courier", mais ceux qui auront la classe "toto" seront en Courier ET en vert.

Voyons comment les pseudos-classes sont elles affectées, ils ont tous la même importance et donc les styles suivant ont tous la même spécificité :

   a:link {color:blue;} /* specificité = 1.1 */
   a:active {color:red;} /* specificité = 1.1 */
   a:hover {color:magenta;} /* specificité = 1.1 */
   a:visited {color:purple;} /* specificité = 1.1 */

Tous peuvent s'appliquer à un hyperlien, et dans certains cas, plusieurs seront appliqués. Par exemple, un lien non visité peut être un lien de survol et actif en même temps puisque c'est un lien non visité. Puisque trois des règles ci-dessus s'appliquent à l'hyperlien, et que tous les sélecteurs ont la même spécificité, c'est le dernier sélecteur qui l'emporte. Par conséquent, le style "actif" n'apparaîtra jamais, parce qu'il sera toujours dépassé par le style de "lien de survol". Considérons maintenant un hyperlien qui a été visité. Il est toujours et pour toujours violet, parce que son style "visité" l'emporte sur tous les autres états y compris "actif" et de "survol".

Voici pourquoi l'ordre en CSS est :

a:link

a:visited

a:hover

a:active

Annuler le positionnement d'un flottant (propriété 'float')

Un problème très courant en CSS, est de trouver un moyen de régler le problème de dépassement du contenu d'une boîte en 'float' dans un conteneur. Un exemple typique de ce genre de problème, une image très haute avec la propriété 'float', dans une zone centrale de texte, si la longueur du texte n'est pas suffisante pour couvrir la hauteur de l'image, celle ci dépassera de sa boîte. Exemple

Pour résoudre ce problème, on rajoutait un élément (div, br ou hr) à la suite avec comme propriété 'clear:both'. Mais là où la feuille de style est censée alléger notre page HTML, nous l'alourdissons encore.
Voici donc une façon de régler le problème, il suffit de rajouter la propriété 'overflow:auto' à la boîte et nous obtenons ce résultat.

Il se peut que cette méthode ne convienne pas à votre design, à vous d'utiliser la méthode la plus adéquate.

Centrage horizontal

Voici une petite astuce pour centrer horizontalement un élément en CSS, vous devez spécifier la largeur et les marges horizontales de l'élément. Si votre page est contenu dans un élément de la sorte :

<div id="wrap">
<!-- Contenu de votre page -->
</div>

vous pouvez centrer votre design comme ceci :

#wrap {
width:800px; /* Taille de votre maquette */
margin:0 auto;
}

La largeur de la boîte '#wrap' est soustraite de la largeur disponible de la fenêtre, la différence est également répartie sur les marges gauche et droite.

Malheureusement Internet Explorer 5 pour PC ne comprend pas cette déclaration mais le bug qui lui fait appliquer la propriété 'text-align' aux éléments de type bloc peut être mis à contribution. Il faudra donc utiliser la déclaration suivante :

body {
text-align:center;
}
#wrap {
width:760px; /* Taille de votre maquette */
margin:0 auto;
text-align:left;
}

La première règle fait qu'IE5/Win centre tout ce qui se trouve dans le corps de la page, les autres navigateurs centreront uniquement le texte. Etant donné que la propriété text-align est transmise en héritage, tout le texte du document sera centré, ce n'est sûrement pas ce que vous souhaitez, donc la règle suivante va remettre l'alignement des textes à gauche à l'intérieur du conteneur "#wrap"

Importer et masquer des feuilles de styles

Une manière pratique de masquer les feuilles de styles aux anciens navigateurs et d'utiliser '@import'.

@import url("general.css");

Cependant la plupart du temps la feuille de style n'est pas masqué pour Internet Explorer. Il conviendra donc d'utiliser cette syntaxe :

@import "general.css";

de cette manière Internet Explorer ne pourra pas importer la feuille de style, on sauve quelques octets par la même occasion. Pour voir la manière dont est appliqué les règles par les navigateurs, suivre ce lien