Journal du Net > Développeurs > Contributions > Votre astuce CSS ?

Vous manipulez le langage CSS au quotidien pour concevoir des pages Web ? Vous avez certainement une astuce à partager ! Cet espace est pour vous.

Participez

Toutes vos images en CSS

Laurent Tuffraud , Saint Maurice le 13 septembre 2007

Quel est en 3 lignes l'objectif de votre astuce ?

Centraliser la gestion des images en CSS pour changer le look de votre site en 1 clic images comprises.

Décrivez votre astuce en détail. N'hésitez-pas à inclure des portions de codes.

1. Créez une image transparente 1x1 pixel en Gif.
2. Dans votre CSS désignez un identifiant (id) ici MonImage dont vous donnez les valeurs de largeur, hauteur, chemin, niveau d'empilement, position etc...

Exemple :

#MonImage{
background-image:url(images/monimage.jpg);
z-index:auto;
white-space:nowrap;
background-position:right;
background-repeat:no-repeat;
width:90px;
height:30px;
margin-right:0px;
float:right;
etc…
}

3. Dans votre code HTML remplacez votre image par le GIF transparent et remplacez l’image par le code suivant :

Votre image transparente va alors prendre la taille et la référence image définie dans la CSS. L'image est désormais manipulable depuis la CSS.

4 . Dupliquez votre CSS et changez les url des images, créez un bouton dans votre page HTML plus un Javascript afin de charger dynamiquement cette nouvelle CSS.

Le tour est joué, avec un clic vous changez l'ensemble de votre site, couleur, images, positions etc...

Remarque : pour utiliser cette astuce CSS sous IE5 à 6 avec des images PNG transparentes, vous devez rajouter quelques instructions à votre CSS (voir exemple plus bas), dont un hack sous la forme d'un fichier HTC, dont je ne suis pas l'auteur.

Plus de détail sur ce fichier HTC :
(c) 2004-2005 Angus Turnbull
http://www.twinhelix.com
This is licensed under the CC-GNU LGPL, version 2.1 or later.

Mon ajout dans la CSS pour la prise en compte de fichiers PNG transparents:

img#MonImage{ /* Rajout de la référence à la balise IMG*/

background-image:none; /* Indispensable pour activer le filtre de Microsoft*/
background-image:url(images/monimage.png); /* Indispensable pour visualiser dans les autres navigateur + indication de référence image pour IE 5+*/

behavior:url(hackIE.htc); /* Url de mon fichier HTC qui applique le Hack*/

z-index:auto;
white-space:nowrap;
background-position:right;
background-repeat:no-repeat;
width:90px;
height:30px;
margin-right:0px;
float:right;
etc…
}

J'ai testé ce hack sur IE 6 et plusieurs autres navigateurs et OS sans problème.

Signaler un abus