Le but de ce tutoriel est d’arriver à créer un fil d’ariane constitué d’images et qui s’adapte au contenu (technique des sliding-door ou portes-coulissantes).

Démonstration

Vous pouvez dès maintenant télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS.

Une version de démo est visible sur cette page : Démo : fil d’ariane avancé en css.

Explications

Pour réaliser notre fil d’ariane nous allons nous servir des balises html <ul> et <li> et nous allons y placer des images de fond.

L’important ici c’est de repérer les ensembles d’éléments. Ici il y en a trois :

• Le premier élément de la liste : l’image de fond est différente des autres
• Tous les éléments de la liste sauf le premier et le dernier : l’image de fond est identique à chaque fois
• Le dernier élément de la liste : ne contient pas de lien

Un petit schéma pour mieux comprendre la construction html de notre fil d’ariane :

Pour chaque élément de la liste il y a trois images. Puisque les « multiple-backgrounds » n’en sont encore qu’à leur début en CSS3, il faudra se contenter d’une seule image de fond par élément html. Il faut donc nécessairement 2 éléments html en plus du <li>. J’ai utilisé les balises <a> et <span>.

Puisque le dernier élément de la liste n’est pas cliquable, j’utiliserai deux balises <span> côte à côte.

Venons-en au cœur du problème à savoir le code…

Le code html

<div id="breadcrumb">
 <ul>
  <li class="first"><a href="#" title="Back to item1">item 1</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 2">item 2</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 3">item 3</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 4">item 4</a><span class="end"> </span></li>
  <li><span>item 5</span><span class="end"> </span></li>
 </ul>
</div><!-- /breadcrumb-->

Le code CSS

/*Largeur du div englobant*/
#breadcrumb{width:500px;}

/*Reset sur les éléments de la liste*/
#breadcrumb ul, #breadcrumb li {
list-style-type:none;
margin:0;
padding:0;
}  

/*Style de la liste*/  
#breadcrumb ul{
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
margin:10px auto;
padding:10px;
}  

/*Premier élément de la liste*/
#breadcrumb li.first {
background:url(../images/first-left.png) 0 0 no-repeat;
height:33px;
}

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}  

/*Style de élément central : a (pour tous les éléments sauf le dernier) et span(pour dernier élément de la liste)*/
#breadcrumb li a, #breadcrumb li span {
float:left;
background:url(../images/bg-gradient.jpg) 0 0 repeat-x;
height:33px;
margin:0;
padding:0 0 0 5px;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.02em;
}  

/*Style du span.end pour image de droite*/
#breadcrumb li span.end {
float:left;
background:url(../images/general-right.png) 0 0 no-repeat;
width:15px;
height:33px;
}

Quelques explications complémentaires…

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

Ce div englobant peut vous permettre d’éviter les soucis d’interprétation du modèle de boite par les différents navigateurs… Ainsi vous pouvez donner une largeur au div#breadcrumb et donner les valeurs de padding/margin à votre liste ul. Aucun de ces deux éléments ne couple width+margin+padding. En codant ainsi, vous ne rencontrerez aucune différence de rendu entre navigateurs.

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}

Ici on place l’image de fond située sur la partie gauche des <li> principaux. Pour ne pas que le contenu empiète sur l’image de fond, on donne un padding-left de la même largeur que l’image de fond soit 13px.

Pour centrer verticalement le contenu d’un élément de type « inline » on utilise la formule : height = line-height.

Compatibilité IE6…

J’ai volontairement utilisé des images transparentes en png pour cet exemple puisque les navigateurs sont maintenant capables de très bien gérer ce format. Cependant, le format png n’est pas pris en compte par IE6 et cet exemple ne fonctionnera donc pas vraiment sur ce navigateur.

Pour ceux qui sont pour le progrès, laissez tombez ce qui va suivre…

Pour ceux qui sont souhaitent encore optimiser leur contenu web pour les utilisateurs d’IE6, voici 3 solutions pour gérer correctement la transparence du format png sur ce navigateur :

Vous trouverez une solution qui fonctionne parfaitement en allant voir de ce côté : IE PNG Alpha Fix v2.0 Alpha 4.

Vous pouvez aussi utiliser des images en gif en plus de vos images png et faire en sorte qu’elles ne soient prisent en compte que pour IE6 grâce à la propriété : «!important». Je vous renvoie à l’article de Gopal Raju sur son blog ProductiveDreams : IE CSS hack without using any hacks!

La troisième et dernière solution consiste à utiliser les filtres Alphaimageloader. Elle est à bannir si vous voulez passer la validation du W3C mais s’avère être tout à fait fonctionnelle. Pour plus d’infos à ce sujet je vous renvoie à l’article d’Alsacreations : Obtenir la transparence PNG avec Internet Explorer 6.

Conclusion

Cet article touche à sa fin ! N’hésitez pas à me faire des retours. J’ai essayé de trouver un moyen fonctionnel pour arriver à mes fins mais il y a peut-être mieux ?! Pour finir je vous donne les deux liens de téléchargement et de démonstration :

Télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS. Le contenu du zip est visible sur cette page : Démo : fil d’ariane avancé en css.

Après une inscription sur le site vous pourrez créer votre formulaire grâce à une interface très complète et intuitive. Un système de drag’n drop vous permet de déposer les éléments dont vous avez besoin à l’intérieur de votre page. Si la mise en page ne vous convient pas, vous pouvez à tout moment les déplacer avec la souris. TextArea, Radio button, Check-box, Dropdown menu, Upload button, Captcha, Rating system etc etc… Tout y est.

Vous avez la possibilité de changer le style général de votre formulaire en modifiant le background (couleurs, image de fond), la police etc… Le header et le footer sont également entièrement personnalisables (possibilité d’inclure une image notamment). Pour vous faire gagner du temps 6 templates sont proposés (Certains sont cependant difficilement utilisables…ex : post-it yellow).

Bien entendu, chaque élément du formulaire est paramétrable : taille des champs de saisie, nombre maximum de caractères, champs obligatoires ou non, options diverses… Jotform vous donne même la possibilité de placer des outils de paiement (payment tools) qui vont lier votre formulaire à votre compte (paypal ou autre) afin de proposer la vente d’objets dont vous pourrez paramétrer le contenu et les options. Une fois créé, vous pourrez prévisualiser votre travail, l’enregistrer (zip comprenant la page html, les images et les javascript) ou encore le partager.

Même si rien de vaut la création personnelle, il faut bien avouer que ce site facilite grandement la création de formulaires et constitue une solution très complète, simple d’utilisation et entièrement gratuite.

Voici à quoi ressemblent les 6 template proposés par JotForm. Le formulaire comprend tous les éléments qu’il est possible d’inclure :

Baby blue

Default style

Industrial Dark

Jot-Theme

Paper Grey

Post-it Yellow

Si vous êtes intéressés, voici l’adresse du site : http://jotform.com/

Tout est entièrement gratuit, téléchargeable en version pdf ou en png et assez bien foutu même si réussir à caser, sur un format A4, la quasi-totalité des balises html ou des propriétés css engendre parfois une densité d’information à la limite du compréhensible…mais passons.

Ca peut toujours être utile d’avoir dans un coin ce genre de petit récap non ?!

Un exemple pour comprendre d’où vient le problème…

Vous avez un beau site web que vous faite évoluer constamment. Vous êtes donc amené, entre autre, à modifier les css (pour modifier certaines images par exemple). Dans votre header, vous faites appel à une feuille de style externe qui se nomme « style.css » avec un petit bout de code sensiblement identique à celui-là :

<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />

Lorsque vous allez modifier cette feuille de style, vous n’allez pas l’enregistrer sous un nom différent et par la même occasion modifier son appel dans votre header. Vous aller faire vos modifs et enregistrer via « ctrl+s », tout simplement. Les modifications sont prises en compte, et vous n’avez pas eu à modifier l’appel à cette feuille de style dans votre header.

Lorsque vous allez recharger votre page dans votre navigateur, celui-ci va parcourir le code, s’arrêter sur le : href= »css/style.css » et là… oh oh oh ! Mais je connais cette feuille de style! Je l’ai affiché il y a quelques minutes et je l’ai même conservé en mémoire! Youpi, pas besoin de la recharger une seconde fois, j’utilise celle que j’ai déjà…Et là… Aïe aïe aïe c’est la cata. Vos modifications css ne sont plus prises en compte bouhhh ! Logique car le navigateur n’a pas cru utile de recharger votre feuille css modifiée pensant qu’elle ne l’était pas.

Le « cache », c’est quoi?

Je viens de décrire succinctement le fonctionnement du « cache » du navigateur. Cette « mémoire » sert simplement à gagner du temps pour afficher une page qui a été chargée précédemment. Lors du premier affichage d’une page (html, php etc…), le browser va stocker toutes les données en mémoire. Ainsi, les feuilles de style, Javascript, images et autres, sont mis en « cache ». Lorsque vous allez afficher une seconde fois la page, un peu plus tard, le navigateur va parcourir la page et comparer toutes les données à celles qu’il possède déjà en mémoire. Si les noms et chemins des données à charger sont identiques, il considère qu’aucun changement n’a été effectué sur ces fichiers et va donc utiliser ceux qu’il possède déjà en mémoire.

Des solutions?

Pour pallier à ce petit souci il existe plusieurs solutions. L’une d’elle, très utile consiste à faire CTRL+F5, autrement dit : Vidage du cache du navigateur et rechargement de la page. Par ce biais, vous obligez donc le browser à tout recharger.

L’inconvénient de cette méthode est que tout le monde ne la connait pas et qu’elle requiert une action de l’utilisateur… D’autre part, si vous n’avez modifié qu’un ou deux fichiers, c’est dommage de tout recharger. L’idéal serait de recharger uniquement les fichiers ayant subi des modifications…

J’ai une petite astuce bien utile qui vous dispense de cette première solution très lourde… Le but étant de forcer le navigateur à charger certains fichiers qu’il a déjà en mémoire, nous allons simplement utiliser une variable (peu importe le nom…) que nous allons affecter uniquement aux fichiers et données modifiés. Eux seuls seront rechargés par le browser…

Méthode

Pour utiliser une variable on utilise cette syntaxe : ?variable=x. Avec variable=le nom de votre variable et x=la valeur de votre variable. Vous avez déjà surement vu ce type de syntaxe dans les urls mais vous pouvez tout à fait l’utiliser dans n’importe quel nom de fichier.

Un exemple avec notre fichier « style.css », remplaçons :

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

Par :

<link rel="stylesheet" href="css/style.css?refresh=0" type="text/css" media="screen" />

Ici, nous avons simplement indiqué au navigateur que la feuille de style « style.css » est accompagnée d’une variable qui s’appelle « refresh » est qui a pour valeur « 0″. Après toute modification de cette feuille de style, remplacez le 0 par 1, puis par 2(pour une modification supplémentaire) etc… puis enregistrez votre page (html, php etc…)

Lorsque le navigateur va parcourir votre page, il va simplement voir que la valeur de la variable « refresh » a changé et va donc automatiquement recharger le fichier « style.css » sans utiliser celui qui se trouve en cache.

Bien entendu, vous pouvez utilisez cette petite astuce pour n’importe quel type de fichier appelé dans votre page. Vous pouvez également l’utiliser sur autant de fichiers que vous le souhaitez.

Remarque

Le cache du navigateur étant utilisé pour gagner du temps lors de l’affichage d’une page déjà chargée précédemment, utiliser l’astuce de la variable à outrance revient à supprimer la fonction de cache et donc augmenter le temps de chargement de la page… Tout à un coût…

Clean CSS vous permet de formater et d’optimiser vos css selon de nombreux critères… Et croyez-moi, vous pourrez gagner pas mal de poids, surtout si vous êtes de ceux qui – a è r e n t – les css, histoire d’y voir un peu plus clair dans des pages atteignant facilement plusieurs milliers de lignes…

Comment ça marche ?

1. Vous uploadez votre feuille de style
2. Vous procédez aux réglages :)

Une première liste à choix multiples vous permet de choisir la méthode de compression souhaitée : « le plus compact / très compact / normal / peu compact / sur mesure ». Les feignants pourront s’arrêter là.

Pour ceux qui veulent un peu plus de précision, afin d’affiner votre choix, d’autres options sont proposées :

Tri des selecteurs ; fusion des propriétés(les classes ou id ayant les mêmes propriétés css sont mises ensemble) ; compression de la propriété « font-weight » (un chiffre remplacera la chaine de caractères : ex : « font-weight:bold » > « font-weght:300″) etc etc…

Clean css est un outil gratuit, simple d’utilisation, traduit en Français pour les paresseux, et d’une redoutable efficacité (on vous donne même le pourcentage de compression après formatage de vos css).

Un outil à tester absolument