Le quotidien de l’intégrateur HTML est parfois ponctué de vide existentiel lorsqu’il s’agit de livrer des pages web compatibles avec la majorité des navigateurs dont la liste se divise grosso modo en deux groupes : ceux qui intègrent au mieux les standards recommandés par le W3C en matière de rendu CSS (Firefox, Safari, Opera et Konqueror, etc.) et les autres, principalement les versions 5 et 6 d’Internet Explorer.

Si le premier groupe nous donne satisfaction, il faut bien reconnaitre que le second reste scotché près du radiateur dès qu’on parle d’overflow, de min-height, de positionnement implicite avec right, bottom ou left ou encore d’interactivité avec :hover sur autre chose qu’une ancre a…

Bref, toutes ces petites choses très utiles au cours de l’intégration CSS qui manquent cruellement à Internet Explorer. Sans parler de la prise en charge inexistante de certains sélecteurs CSS qui seraient très pratique pour éviter de spécifier une classe chaque fois que l’on veut atteindre un élément en fonction de sa position dans le DOM.

Dans la suite de cet article nous verrons que la bibliothèque Javascript IE7 peut nous aider à travailler plus efficacement avec Internet Explorer pour faciliter la mise en œuvre de « composés » HTML / CSS cross-browser.

Est-ce vraiment nécessaire d’avoir un affichage identique quelque soit le navigateur ?

Dans le flux de production habituel, la production d’un site web passe par la conception d’une charte graphique dont il conviendra de découper et d’agencer les morceaux à coup de balises HTML et de déclarations CSS.

L’image servant de référence quasi-absolue, il devient très difficile de défendre auprès de son commanditaire le point de vue selon lequel la sacrosainte charte graphique puisse présenter des différences — même minimes — d’un navigateur à l’autre, fut-ce d’un pixel !

Pour parvenir à ses fins, l’intégrateur web dispose de deux armes : le code HTML qui — s’il suit une ligne sémantique de bon aloi — devrait garder la même structure d’un bout à l’autre du projet, et les CSS qui servent de variable d’ajustement jusqu’à la fin.

Reste à trouver une méthode de travail qui limite à la fois les différences de rendu et le nombre de lignes de code à produire :

• Les visionnaires conseillent de faire un site conforme aux standards en prenant un navigateur comme Firefox ou Opera comme référence pour le rendu CSS, et d’utiliser au maximum les possibilités offertes par…
  • les sélecteurs CSS,
  • la transparence PNG en 256 niveaux,
  • le calcul des largeurs minimales et maximales,
  • etc,
  …puis de faire au mieux pour les navigateurs non conformes. Cette approche, pour intéressante qu’elle soit, n’est pas possible dans un contexte commercial car seule une poignée de visiteurs verrait le site web dans toute sa splendeur, tandis que la majorité n’en aurait qu’une version dégradée, fut-ce gracieusement…
• Les réalistes proposent de n’utiliser que les propriétés disponibles sur la majorité des plate-formes, en prenant pour chaque fonctionnalité, le plus petit dénominateur commun en fonction du projet. Cette approche permet de concilier le respect des standards (même s’il ne s’agit pas des toutes dernières recommandations) avec un rendu uniforme des pages en contrepartie d’une éventuelle limitation des fantaisies graphiques souhaitées par le client. En effet, selon la maquette, le fait de ne pas pouvoir utiliser la transparence PNG, par exemple, peut avoir une incidence sur la rigidité de la structure HTML / CSS à cause des découpes d’images : on sera enclin à réunir plusieurs partie d’image en une seule, alors qu’avec la gestion de la transparence, il est sera plus souvent possible de « granulariser » les découpes.
• Une troisième approche réalistico-visionnaire que l’on retrouve parfois sous l’acronyme MOSe (Mozilla, Opera, Safari enhancement) mélange les deux premières approches en cherchant le plus petit dénominateur commun pour assurer une large compatibilité, puis en introduisant des améliorations visibles uniquement dans les navigateurs modernes. Cette dernière approche est celle qui offre une plus grande cohérence à vos pages web dans le temps, puisque qu’en suivant les recommandations au plus près, plus le temps passe et plus le souvenir des mauvais navigateurs s’estompe. (Ceci est à rapprocher de l’annonce de la nouvelle balise meta mise en place à l’occasion de la sortie prochaine d’IE8 qui réintroduirait dans l’écosystème du web un pis-aller dont on commençait à peine à se débarrasser : la détection du navigateur pour savoir s’il doit basculer en mode standard ou non. Voir ma petite note sur le sujet.)

IE7.js : ce n’est pas de la magie, c’est de la technologie ! »

Articles sur le même sujet

• Menu HTML et CSS, sliding doors et item current en PHP
• Trucs et astuces CSS
• Quelques notes — Programme de formation HTML & CSS
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Frameworks CSS + Reset CSS : design from scratch

Pour ajouter un semblant d’interactivité aux pages web, il fallait auparavant chercher longtemps pour dénicher le bon bout de code Javascript cross-browsers qui va bien. Aujourd’hui, c’est le choix d’une librairie¹ Javascript adaptée à nos besoins qui prend du temps. Les prétendants sont nombreux et la qualité est au rendez-vous : Prototype accompagné de script.aculo.us, Mootools et le petit Moofx, Dojo, Yahoo! UI Library, jQuery avec Interface, etc. Whoa! quel chemin parcouru depuis la fin du 2^ème millénaire…

En suivant les conseils de blogueurs influents, j’ai installé jQuery. Cette librairie récente bénéficie d’une popularité grandissante et d’une documentation tout simplement exceptionnelle qui s’enrichit d’apports francophones, avec notamment une liste de diffusion spécialisée et des tutoriels avec des morceaux d’exemples dedans.

Le fait que Dotclear2 intègre jQuery, est un gage de qualité. Par ailleurs, lorsque la version 2 de Dotclear sera mise en production, je prédis qu’on trouvera de plus en plus de ressources sur jQuery en français, comme pour l’introduction de la biblithèque dans SPIP qui a donnée naissance à jquery.info :)

Les bases de chez base »

Articles sur le même sujet

• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Améliorations cosmétiques et ergonomiques sur ce blog
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Pour faire bonne impression sur les visiteurs, il suffit d’anticiper leurs besoins. Dans ce domaine, ce sont souvent les détails qui comptent le plus. Améliorer l’expérience utilisateur et adapter les fonctionnalités d’un site web en fonction des attentes de chacun permet de satisfaire : ceux qui veulent consulter un site web ergonomique offrant un contenu facilement accessible ; ceux qui veulent un design attractif ; et enfin, ceux qui veulent le grand jeu avec Ajax à tous les étages. Ce billet est ma traduction du dernier article d’Aaron Gustafson Ruining the user experience paru sur A List Apart le 27 mars dernier.

Ruiner l’expérience utilisateur

Pendant un récent voyage d’affaire à Seattle, j’ai passé deux soirées à déguster la cuisine locale. Je me suis régalé à chaque repas, mais je garde de l’un deux un souvenir bien plus marqué. Mais pourquoi ?

Les deux restaurants présentaient de nombreux points communs : les plats étaient alléchants et présentés avec goût ; l’atmosphère était sympathique et chaleureuse ; les menus offraient un large choix de plats tout deux à un prix raisonnable, et le personnel était aux petits soins. Alors qu’est-ce qui fait que le second restaurant m’a laissé un bien meilleur souvenir que le premier ?

Comme souvent dans la vie, ce sont les détails qui comptent le plus. Prenez un verre d’eau, par exemple. Un serveur négligent peut le servir glacé, ou pire encore, vous laisser mourir de soif avant de vous resservir. Alors qu’un serveur bienveillant s’assurera que le niveau de l’eau ne descendra jamais plus bas que la moitié du verre ; les meilleurs vous feront la surprise de trouver le verre que vous venez de finir, rempli à ras bord une nouvelle fois.

Pour nous les ergonomes du web, Il y a beaucoup à apprendre d’une chose aussi simple qu’un verre d’eau.

Qui est le client ?

Quand vous êtes serveur dans un restaurant, vous savez que les gens viennent avec certains besoins et, parfois même, avec quelques attentes. Souvent, le verre d’eau est le « premier contact » avec le client. S’il est rempli rapidement, vous marquez un point, mais ce n’est que le début. En effet, certaines personnes boivent plus vite que d’autres et demandent à être resservies plus souvent. Certains clients ne boiront pas avant d’avoir les plats devant eux. D’autres encore ne toucheront pas à leur bouteille d’eau… ou demanderont peut-être un peu de thé glacé, ou encore autre chose. Au départ, vous ne pouvez vraiment pas savoir à qui vous avez à faire. Et lorsqu’il s’agit d’une table de 4, 6 ou même 10 personnes il vaut mieux s’être préparé à l’avance…

Sur le web, c’est la même chose. Nous faisons de beaux sites qui (nous l’espérons) font une excellente première impression, mais nous devons nous assurer que chaque point d’interactivité renforce cet avis favorable tout au long de la navigation, sinon nous risquons de dilapider le peu de crédit acquis au départ. Ce type de pensée à donné naissance au concept d’amélioration progressive

Sur le web, nous ne savons rien à propos de la personne qui vient visiter notre site. Nous ne connaissons pas le navigateur utilisé. Nous ignorons si le serveur est interrogé depuis un téléphone portable. Nous ne savons pas si le clavier est préféré à la souris. Nous ne savons pas si Javascript (ou même CSS) est activé. Nous ne savons pas si la page doit être imprimée. Nous ne savons pas si l’utilisateur consulte le site à l’aide d’un lecteur d’écran. Nous ne savons vraiment rien…

Alors, que fait-on quand on ne sait rien ? On an-ti-ci-pe.

En tant que développeurs, nous devons pouvoir satisfaire les besoins de nos clients. Et si nous sommes assez pointus, nous pouvons régler leurs problèmes sans qu’ils ne se rendent compte de notre intervention.

Une douche froide ?

Lala.com est un site bâti autour d’une communauté de gens qui aiment la musique. Le système facilite l’échange de CD dans toute la communauté par la poste.

Je ne dirais pas que leur site web est attractif, mais il est utilisable… sauf si Javascript est désactivé.

Vous apprécierez le fait qu’il y a un message indiquant un Chargement en cours alors que rien ne se charge.

Pour régler le problème (la copie d’écran ci-dessus a été prise entre le moment où j’ai commencé à me servir du site comme exemple de ce qu’il ne fallait pas faire et la finalisation de l’article), tout ce qu’ils ont été capable de faire, c’est de ressortir ce vieux message au parfum entêtant datant de la dernière guerre des navigateurs.

Le problème ici n’est pas que le site utilise Javascript, mais qu’il ne fonctionne pas sans. La raison ? Et bien, apparemment, les concepteurs se font plaisir en Ajax-isant tout le contenu. Dans leur précipitation, ils ont entassés tous les trucs du web 2.0 sous le capot et se sont aliénés une bonne partie des utilisateurs du web 1.0, et une part importante du marché des appareils mobiles. Et ils ne sont pas les seuls.

Pensez à ceci : vous êtes un utilisateur de Lala.com, vous êtes proche d’un magasin de disque et vous vous arrêtez sur l’album des Fatals Picards ["Arcade Fire" dans la version originale, NdT]. Vous n’avez pas réalisé qu’il était sorti et voulez l’ajouter à votre liste de souhaits avant de l’oublier. Si votre téléphone mobile ne supporte pas Javascript (ou si vous l’avez désactivé pour réduire le temps/coût de chargement), vous allez vous retrouver devant un écran qui vous donne des informations pertinentes sur Lala, suivies malheureusement du message indiquant que Javascript est nécessaire pour utiliser le site.

Vous ne pouvez pas accéder à votre liste de souhaits ou à quoi que ça soit d’autre, d’ailleurs. Même le champs de recherche (en bas de la page) ne fonctionne pas. Pour une application de type intranet, cela peut être acceptable, mais pour un site web grand public, c’est un désastre.

Réfléchissez avant de servir

Nous avons déjà établi qu’en tant que développeur web nous sommes généralement dans le brouillard quant aux desiderata de nos utilisateurs. Le mieux que nous puissions faire est d’anticiper ce que pourrait être leurs besoins et s’assurer qu’ils sont pris en compte à tout les niveaux pour apporter la meilleure expérience possible. C’est là que l’amélioration progressive entre en scène. Nous devons penser aux besoins des différents types d’utilisateurs et leur apporter une réponse.

1. Niveau 1 : pas de fioriture

   Certains utilisateurs veulent seulement accéder au contenu. Ils peuvent surfer depuis un appareil mobile, chercher à imprimer quelques informations, ou utiliser toutes sortes de périphériques d’assistance pour naviguer. Ils peuvent même avoir désactivé l’affichage des images. En gardant un marquage propre et bien-ordonné et en respectant la sémantique associée aux balises HTML, vous répondrez aux besoins de ces utilisateurs qui veulent consommer léger et afficher les pages rapidement, sans chichi.

2. Niveau 2 : faites joli

   D’autres, aiment les belles vitrines (ou une tranche de citron). Pour eux, concevez un design graphique visuellement attractif. Vous pouvez même ajouter quelques fioritures visuelles (ou un peu de Flash) et ils seront contents. Aussi longtemps qu’il n’y a pas de confusion entre les éléments de décoration et le contenu de la page, que vous avez réalisé tout vos tests sur les navigateurs (ou que vous fournissez quelques styles basiques pour les médias alternatifs), ça devrait le faire.

3. Niveau 3 : c’est la fête !

   D’autres encore, veulent le grand jeu. Pour ceux-là, vous pouvez faire sauter le bouchon et créer une merveilleuse application web 2.0 avec fondu-enchainé, widget en veux-tu en-voilà, et Ajax en abondance. Gardez toutefois à l’esprit, que ces niveaux ne sont pas toujours aussi clairement identifiables. Un palier intermédiaire entre les niveaux 1 et 2 sera peut-être nécessaire pour donner à Netscape 4.x et IE5/Mac quelques styles typographiques spécifiques. Ou vous pouvez avoir envie d’offrir des raffinements Javascript selon les navigateurs, ou encore injecter un peu de crème au nougat entre les niveaux 2 et 3…

Passer inaperçu

Une fois que vous avez décidé des niveaux à prendre en compte, vous pouvez construire votre site.

Commencez par le contenu. Quelquefois, les webdesigners et les développeurs oublient que les gens viennent surtout pour ça. Travaillez-le avec amour sans noyer vos visiteurs sous les informations. N’empilez pas les blocs comme pour un buffet. La production du contenu demande toujours beaucoup de travail. Mettez-le en valeur.

Lorsque le contenu est balisé, il est temps d’établir le look and feel du site. Concevez un design adapté à vos utilisateurs en utilisant pour chaque niveau les différentes techniques à votre disposition : cachez certains fichiers CSS aux navigateurs les plus anciens et donnez des styles spécifiques à ceux qui demandent un peu plus d’attention. Les commentaires conditionnels sont réellement vos amis pour la vie en la matière. Mais n’oubliez pas les vieilles recettes comme les règles @import et les combinaisons pour les médias spécifiques qui permettent d’offrir sélectivement un parfum différent pour les navigateurs collés au radiateur du fond de la classe.

Vérifiez la présentation de votre contenu à l’impression et son affichage sur les périphériques mobiles. A ce propos, envisagez-vous une mise en pages spécifique ou seulement un traitement basique en terme de couleur ou de typographie ? Quel sort réservez-vous aux images et aux formulaires ? Essayez d’anticiper les fonctionnalités qu’un utilisateur mobile voudrait, et ôtez le superflu ! Si vous utilisez la pseudo-classe :hover sur un lien, n’oubliez pas de considérer également la pseudo-classe :focus, et les utilisateurs de claviers ou d’appareils mobiles vous remercieront.

Lorsque le design est validé, ajoutez quelques étincelles avec une pincée de Javascript non-intrusif. Vous connaissez déjà les méthodes de détection pour savoir si un script peut fonctionner sur tel navigateur ? Considérez aussi comment vos scripts peuvent interférer avec les interactions communes aux navigateurs telles que « bookmarker » un lien ou utiliser le bouton retour. Et n’oubliez pas l’interdépendance qui peut exister entre des scripts différents : votre site deviendrait-il inutilisable si un script fonctionnait et pas un autre ?

Si vous créez un widget ou autre interface de contrôle, générez le marquage additionnel quand avez déterminé qu’il est prêt à être utilisé, et que tout le reste fonctionne encore. Et si vous séparez les CSS liées à votre widget de votre code Javascript comme un bon petit soldat des standards, assurez-vous que les styles ne sont pas actifs tant que le script n’a pas indiqué que le widget peut être utilisé. Une bonne pratique est d’utiliser l’échange de classe (cf. Table 1) :

Au final, si vous envisagez d’utiliser Ajax, faites-le avec discernement : il n’est pas nécessaire de charger l’ensemble de la page via des appels asynchrones qui finissent par devenir une barrière entre l’utilisateur et votre contenu. Paradoxalement, cela peut entraîner une augmentation de la charge serveur, rendre votre contenu invisible pour les moteurs de recherche, et rendre votre site inutilisable pour quiconque utilise un lecteur d’écran ou un mobile.

Ne me faites pas dire ce que je n’ai pas dit, Ajax a sa place, mais il est important de savoir laquelle, et plus encore, de savoir où elle n’est pas.

Conclusion

Anticipez les besoins de l’utilisateur avec précaution et occupez-vous d’eux en vous faisant remarquer le moins possible. C’est la clé pour laisser une première bonne impression. Comme avec un verre d’eau, vos utilisateurs ne devraient jamais avoir à réclamer pour être servi.

Crédits et remerciements

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l’auteur se soient glissées : je vous conseille vivement de lire l’article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l’article. D’ailleurs, ce billet reste en version bêta quelques temps ;)

Merci à Véro pour son coup de main quand j’étais « Lost in translation » ;)

Note du 24/05/07 : Merci à Goulven pour sa relecture et les améliorations qu’il a apportées à cette traduction.

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• Framework JQuery pour écrire du Javascript non-intrusif
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Trucs et astuces CSS
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

Ce mini tutoriel propose une technique simple pour afficher un effet de survol sur un bouton en permutant une image en background associée à un lien et faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Le tout avec une pincée de HTML, une bonne dose de CSS et un soupçon de PHP.

Le code HTML

Le menu est constitué d’une liste non-ordonnée ul où chaque lien a contenu dans l’élément li est transformé en bloc display: block afin de recevoir une image de fond qui contient les deux états du bouton. Cette image possède une largeur de 100px pour une hauteur de 50px. Les vingt-cinq premiers pixels de hauteur sont réservés à l’état « inactif », tandis que les vingt-cinq pixels restants feront le bonheur de la pseudo-classe :hover.

Si vous ne connaissez pas cette technique, n’ayez pas PêUR ! Vous trouverez des exemples d’images en portes coulissantes sur cet excellent blog consacré au HTML et aux CSS ;)

Qu’y a-t-il au menu ?

Il s’agit d’une simple liste qui contient les liens auxquels j’ai associé un id (ici en gras) nécessaire pour l’application des styles CSS abordés plus bas.

<div id="menu">
  <ul>
    <li><a id="accueil" href="index.php">Accueil</a></li>
    <li><a id="page1" href="page1.php">page1</a></li>
    <li><a id="page2" href="page2.php">page2</a></li>
  </ul>
</div>

La feuille de style CSS pour le menu

En ce qui concerne la feuille de style pour le menu, la seule chose à retenir, c’est le décalage de -25px pour l’état :hover qui affiche la partie de l’image réservée pour le survol. C’est ce même décalage qui permettra par la suite de signaler la rubrique en cours lorsque le bouton en question sera cliqué.

/* Style général du menu */
#menu {
     margin: 0;
     padding: 0;
}
#menu ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
#menu ul li {
     float: left;
 }


/* Style global des liens */
a#index,
a#page1,
a#page2 {
     display: block;
     width: 100px;
     height: 25px;
}

/* Style particulier pour le background des liens
avec pour chacun : l'état inactif et actif */
a#index {
     background: url(images/bt_index.png) 0 0 no-repeat;
}
a#index:hover {
     background: url(images/bt_index.png) 0 -25px no-repeat;
}
a#page1 {
     background: url(images/bt_page1.png) 0 0 no-repeat;
}
a#page1:hover {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
a#page2 {
     background: url(images/bt_page2.png) 0 0 no-repeat;
}
a#page2:hover {
     background: url(images/bt_page2 .png) 0 -25px no-repeat;
}

La petite fonction php qui va bien

<?php
function currentPage($strPage) {
  if (strstr($_SERVER['PHP_SELF'], $strPage)) {
     echo 'class="current_' . $strPage. '" ';
  } else {
     echo '';
  }
}
?>

Ensuite la fonction echo() affiche une classe CSS composée de la concaténation du terme current_ et de la chaîne $strPage. Si le terme $strPage n’existe pas dans l’URL, la fonction renvoit une chaine vide…

Le menu HTML avec l’appel de la fonction

<div id="menu">
     <ul>
         <li><a <?php currentPage('index') ?>id="accueil" href="index.php" >Accueil</a></li>
         <li><a <?php currentPage('page1') ?>id="page1" href="page1.php" >page1</a></li>
         <li><a <?php currentPage('page2') ?>id="page2" href="page2.php" >page2</a></li>
     </ul>
</div>

Le menu HTML après un clic sur le deuxième lien

<div id="menu">
     <ul>
         <li><a id="accueil" href="index.php">Accueil</a></li>
         <li><a class="current_page1" id="page1" href="page1.php" >page1</a></li>
         <li><a id="page2" href="page2.php">page2</a></li>
     </ul>
</div>

La touche finale avec les liens current

/* Styles particuliers issus de la fonction PHP pour les liens en cours */
#menu a.current_index {
     background: url(images/bt_accueil.png) 0 -25px no-repeat;
}
#menu a.current_page1 {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
#menu a.current_page2 {
     background: url(images/bt_page2.png) 0 -25px no-repeat;
}

Conclusion

Pas de quoi faire le kakou, c’est certain ;) mais cette petite fonction PHP remplit bien son office. J’avoue que cette petite merveille de strstr() y est pour beaucoup. Après quelques recherches sur PHP, je me rends compte que ce langage possède un nombre extraordinaire de fonctions pour traiter les chaines de caractères qu’on dirait du perl !

Si de votre côté vous avez des petites fonctions PHP ou Javascript liées aux CSS qui prennent la poussière au fond d’un dossier, n’hésitez pas à leur donner une seconde vie en en faisant profiter les autres :)

Stay tuned and mind the gap!

Note du 10/11/2007 : Afin d’éviter d’éventuels soucis de cascade CSS dues à la priorité des ID sur les classes, j’ai modifié les styles comme suit : #menu ul li a#index {…} est remplacé par a#index {…} (ce qui est largement suffisant) et je laisse #menu a.current_index {…} de manière à ce que le poids de la classe .current_index {…} soit plus important que a#index {…}.

Voici un exemple très moche mais fonctionnel pour illustrer ce tutoriel. Téléchargez le fichier zip de l’exemple.

Articles sur le même sujet

• Trucs et astuces CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Menu à onglets avec javascript et css
• CSS et portes coulissantes pour un effet de zoom :hover
• Améliorations cosmétiques et ergonomiques sur ce blog

Réaliser un effet de zoom sur une image nécessite généralement deux versions d’un même visuel : la première à 100%, et la deuxième à taille réduite. Les événements onmouseover et onmouseout pilotent traditionnellement le changement de source de l’image pour gérer la permutation.

Image survolée avec deux images

En Javascript

 <img src="img1.gif" border="0" width="30" height="20" onmouseover="this.src='img2.gif'" onmouseout="this.src="img1.gif">

En CSS

Une deuxième solution consiste à utiliser CSS pour piloter cette permutation à l’aide de la pseudo-classe :hover appliquée une ancre de préférence pour pallier les insuffisances d’Internet Explorer en matière de rendu CSS. On obtient quelque chose comme :

a.img1, a.img2 {
    display: block;
    width: 30px;
    height: 20px;
}
a.img1 { background: url(img1Out.gif) no-repeat; }
a.img1:hover { background: url(img1Over.gif) no-repeat; }

Ce lien vide peut gêner. Pour en faire un plat utile, je vous propose d’utiliser une technique inspirée de Fahrner Image Replacement (FIR). Il s’agit simplement d’indenter le texte pour le faire disparaitre de la fenêtre du navigateur :

a.img1, a.img2 {
    text-indent: -9999;
}


<a class="img1" title="Description de mon image">Texte du lien</a>

Ainsi, pas de lien vide et un peu de grain à moudre pour les moteurs de recherche ;)

Preload des images avec Javascript

Ces deux premiers exemples simples à mettre en œuvre souffrent d’un léger défaut : les images destinées au survol de la souris mettent parfois du temps pour apparaitre. Pour régler ce problème, il suffit de déclarer vos images via Javascript pour les charger dans le cache du navigateur :

 <script type="text/javascript">
<!--
    img1         = new Image(30,20)
    img1.src    = "img1.gif"
    img2         = new Image(30,20)
    img2.src    = "img2.gif"
 //-->
</script>

Avec CSS et une seule image

Voyons maintenant comment faire avec une seule image et quelques déclarations dans une feuille de style CSS pour obtenir le même résultat.

J’ai repris le principe qui consiste à utiliser une image contenant les deux états d’un visuel. On l’utilise souvent pour faire les états on/off d’un bouton. Ici, la vignette réduite laissera la place à l’image agrandie au passage de la souris.

Précisez ensuite pour l’état :hover la position adéquate : top left ou bottom right selon la construction de l’image.

.foot a {
    background: url(pix/foot_boy.jpg) no-repeat top left;
}
.foot a:hover {
    background: url(pix/foot_boy.jpg) no-repeat bottom right;
}

Des défauts ?

Cette technique nécessite de nombreuses manipulations sous Photoshop pour préparer les images (comptez 30 secondes par image env.), mais Benoît me souffle dans l’oreillette qu’avec la librairie php GD on peut automatiser la procédure…

La démo !

Comme toujours, j’ai privilégié la démo au détriment du blabla. Affichez-donc la source de effet de zoom en css pour en savoir plus ;)

Vous trouverez des explications complémentaires concernant Javascript sur le site aidejavascript.

Télécharger le fichier .html ou .php et les images

Linkographie. Portes coulissantes :

D’autres applications pour les portes coulissantes

http://pompage.net/pompe/portescoulissantes/

Excellente traduction d’un article de Douglas Bowman par Samuel Latchman sur la technique des portes coulissantes appliquées à la navigation par onglets

http://www.ultra-fluide.com/ressources/css/menu-onglets.htm

Si vous préférez une autre approche du même article, voici la traduction de Xavier Boully

http://www.alistapart.com/articles/slidingdoors/

Et pour quelques octets de plus, voici l’original !

Articles sur le même sujet

• Menu HTML et CSS, sliding doors et item current en PHP
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Quelques notes — Programme de formation HTML & CSS
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Design CSS liquide (ou fluide) encadré d'images répétées… sans table

Cette page regroupe des trucs & astuces CSS que j’ajoute régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complets, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser ;)

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

• La feuille blanche
• Raccourci pratique pour les bordures CSS
• Transparence
• Commentaires conditionnels d’IE vs hacks CSS
• Barre de défilement et décalage d’une page centrée
• Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
• Centrer un bloc horizontalement dans la fenêtre du navigateur
• Modifier les caractéristiques des liens avec LoVe HAte

La feuille blanche

Document XHTML pour partir de bonnes bases :

<!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" />
            <meta http-equiv="Content-Language" content="fr" />
            <title>Un titre explicite contenant les mots-clés de la page</title>
            <link rel="icon" type="image/png" href="favicon.png" />
            <script type="text/javascript" src="/js/jquery.js"></script>
            <link media="screen" rel="stylesheet" type="text/css" href="/style.css" />
            <!--[if lt IE 7]>
                <script type="text/javascript" src="/js/ie7/IE7.js"></script>
            <![endif]-->
            <!--[if IE]>
             <link rel="stylesheet" type="text/css" href="/ie.css" />
            <![endif]-->
        </head>
        <body>
       </body>
</html>

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

• Remise des marges à zéro avec le sélecteur universel
• Reset CSS Reloaded
• INITIAL
• YUI Reset CSS
• undohtml.css

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

<!--[if IE]>
    <style type="text/css">
        @import "/style/pour_ie.css";
    </style>
<![endif]-->

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }

Articles sur le même sujet

• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Exercice de style CSS et HTML : table vs div
• Menu HTML et CSS, sliding doors et item current en PHP
• Opacité CSS et effet de trame avec GIF/PNG transparent
• IE6 — Gérer la transparence du format PNG 24 bits