Centrer Jonathan

Un article publié par John Allsop. Seul le lien original fait référence.

Il y a plein d'endroits en ligne où vous pouvez apprendre à utiliser le microformat hCard pour baliser vos détails de contacts sur votre site (il y a même quelques ressources à la fin de l'article). Mais il n'y a pas encore eu beaucoup d'efforts produits pour utiliser les microformats avec CSS. Par conséquent dans ce fascicule de "24 ways", nous allons jeter simplement un oeil à cela  – comment les microformats aident à faire un stylisme fondé sur CSS plus simple et plus soigné.

Etant des structures riches et vraiment complexes, les hCards fournissent aux concepteurs un échafaudage sophistiqué pour les "styler". Un exemple récent que j'ai vu pour styler les hCards, jouant sur la métaphore de la carte de visite dans le business, a été réalisé par Andy Hume, sur http://thedredge.org/2005/06/using-hcards-in-your-blog/. Alors que son approche utilise des largeurs de cartes fixes, jetons un oeil à la façon dont nous pourrions styler une carte de visite à largeur variable pour nos hCards.

Prenons une hCard classique avec une adresse, un téléphone et des détails sur l'adresse e-mail

1. <div class="vcard">
2. <p class="fn org">Web Direction Nord 
3. <a href="http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://north.webdirections.org/contact/">
4. <img src="images/vcard-add.png" alt="icône téléchargement vcard"></a>
5. </p>
7. <div class="adr">
8. <p class="street-address"> 148 avenue Laperrière Avenue </p>
9. <p><span class="locality"> Ottawa </span> <abbr class="region" title="Ontario">ON</abbr> <span class="postal-code"> K1Z 7S8 </span></p>
10. <p class="country-name">Canada</p>
11. </div>
13. <div class="telecommunications">
14. <p class="tel">Téléphone/Fax: <span class="tel"><span class="type">Travail</span>: <span class="value">61 2 9365 5007</span></p>
15. <p class="email">Email : <a class="value" href="mailto:info@webdirections.org">info@webdirections.org</a></p>
16. </div>
17. </div>
18. Source: /code/styling-hcards-with-css/1.txt

Nous aurons utilisé une variation sur la technique désormais bien établie des “portes coulissantes”  (si vous créez une technique CSS, rappelez-vous qu'il est très important de lui donner un nom ou un acronyme facile à mémoriser, et des points de bonus si vous avez votre nom dedans !) de Douglas Bowman, améliorée par  Scott Schiller (voir http://www.schillmania.com/projects/dialog/,) qui nous donnera un design qui ressemble à cela :

La technique en bref pour produire ça, utilise les images d'arrière-plan sur quatre éléments, deux en haut et deux en bas pour ajouter chaque coin arrondi.

Nous allons faire que ce design soit “fluide” dans le sens où il s'agrandit et se diminue par rapport à la taille de la police affichée avec l'élément de texte. Ceci est parfois appelé comme un  “design piloté par em” (nous verrons cela dans un moment).

Pour voir comment cela peut fonctionner en pratique, voici le même design avec le texte “zoomé” pour qu'il grandisse en taille

et à nouveau le même design, quand nous zoomons la taille du texte qui se diminue

Ceci dit en passant, l'image hCard provient de Chris Messina. Vous pouvez la télécharger ici ainsi que d'autres icônes provenant du wiki dédié aux microformats.

Maintenant, avec CSS3, cette tâche complète serait bien plus facile, parce que nous ajoutons plusieurs images d'arrière-plan à un élément, et des images de bordure pour chaque bord de l'élément. Safari, en version 1.3 up, supporte vraiment plusieurs images d'arrière-plan, mais malheureusement, ce n'est pas supporté dans Firefox 1.5, ni même dans Firefox 2.0 (pour ne pas mentionner IE7. Hé ?). Aussi, est-ce probablement encore trop limité en support pour en faire usage à cette heure. Par conséquent, nous utiliserons à la place une technique qui n'engage seulement que du CSS2 et qui fonctionne parfaitement dans n'importe quel navigateur.

Très souvent, les développeurs ajoutent des éléments div ou span comme conteneurs pour ces images d'arrirère-plan. Et en fait, si vous visitez le site de Scott Shiller, c'est ce qu'il a fait là. Mais si c'était possible, nous n'ajouterions pas quelque HTML tout simplement à des fins de présentation, même si la présentation est produite via CSS. Ce que nous pouvons faire est utiliser autant que possible le HTML dont nous disposons déjà pour ajouter le style que nous désirons. Ceci peut prendre quelque pensée créative, mais une fois que vous avez capté l'idée de cette approche, cela devient un moyen plus naturel d'utiliser HTML comparé au fait d'ajouter simplement des divs et spans à volonté comme des crochets pour le style. Cette technique n'est naturellement pas toujours très simple et même parfois simplement impossible, exigeant que nous ajoutions juste un peu de HTML pour fournir les “crochets” pour la CSS.

Au travail

La première étape est d'ajouter une image d'arrière-plan à l'ensemble de l'élément vCard.

Nous faisons ça suffisamment large (par exemple 1000 pixels ou plus) et suffisamment haut de façon à ne pas nous soucier de la largeur du contenu. Quand la vCard grandit, cela ne débordera jamais de cette aire. Nous ne pouvons pas simplement répéter l'image, parce que le coin en haut et à gauche s'affichera quand l'image se répétera.

Nous ajoutons cela comme une image d'arrrère-plan de l'élément vCard en utilisant CSS.

Tant que nous sommes dessus, donnons au texte une fonte sans-serif, et quelque couleur pour qu'il puisse rester visible, et arrêtons la répétition de l'image.

1. .vcard {
2. background-image: url(images/vcardfill.png);
3. background-repeat: no-repeat;
4. color: #666;
5. font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
6. }
7. Source : /code/styling-hcards-with-css/2.txt

Ce qui dans un navigateur, affichera quelque chose comme ça

Prochaine étape : nous avons besoin d'ajouter le coin rond en haut et à droite de la hCard. En conservant notre objectif de ne pas ajouter de HTML, et ce à des fins de style, nous voulons utiliser la structure existante de la page à chaque fois que cela sera possible. Nous utiliserons dans ce cas le paragraphe de classe fn  et org, qui est le premier élément enfant de l'élément vcard .

1. <p class="fn org">Web Directions Conference Pty Ltd <img src="images/vcard-add.png" alt="download vcard icon"></p>
2. Source : /code/styling-hcards-with-css/3.txt

Voici notre CSS pour cet élément

1. .fn {
2. background-image: url(images/topright.png);
3. background-repeat: no-repeat;
4. background-position: top right;
5. padding-top: 2em;
6. font-weight: bold;
7. font-size: 1.1em;
8. }
9. Source: /code/styling-hcards-with-css/4.txt

Nous ne voulons pas le répéter, mais une fois de plus, nous avons spécifié une position d'arrière-plan pour l'image. Ceci fera que l'image d'arrière-plan démarrera à partir du haut, mais son bord droit sera situé sur le côté droit de l'élément. J'ai fait aussi en sorte que la taille de la fonte soit un peu plus grosse, et le weight en bold afin de la différencier du reste du texte dans la hCard.

Voici l'image que nous sommes en train d'ajouter en arrière-plan de cet élément.

En plaçant ainsi ces deux déclarations CSS ensemble, nous obtenons :

Nous avons spécifié un padding-top de 2em pour donner un peu d'espace entre le contenu de l'élément fn  et le bord de l'élément fn . Autrement, le sommet de l'image hCard serait mal contre la bordure. Pour voir ça en action, retirez juste la déclaration padding-top: 2em; et prévisualisez cela dans un navigateur.

Ainsi, avec simplement deux déclarations, nous sommes bien sur la voie. Nous n'avons même pas eu à rajouter quelque HTML à ce stade. Passons au bas de l'élément et ajoutons la bordure du bas (oui l'image d'arrière-plan qui nous servira en tant que bordure) .

A cette heure, quels élements allons-nous utiliser pour ajouter cette image d'arrière-plan ?

Bien, ici je dois admettre que je vais un peu tricher. Si vous regardez le HTML de la hCard, j'ai groupé les propriétés email et téléphone dans une div, avec une classe de telecommunications. Ce groupage n'est strictement pas du tout obligatoire pour notre hCard.

1. <div class="telecommunications">
2. <p class="tel">Téléphone/Fax: <span class="tel"><span class="type">Travail</span>:
3. <span class="value">61 2 9365 5007</span></p>
4. <p class="email">Email: <a class="value" href="mailto:info@webdirections.org">info@webdirections.org</a></p>
5. </div>
6. Source : /code/styling-hcards-with-css/5.txt

Maintenant, j'ai choisi ce nom de classe parce que c'est ce que la spécification vCard appelle pour ce groupe de propriétés. Et généralement, j'ai vraiment tendance, quand je balise du contenu, à grouper ensemble des éléments en utilisant des divs . Je trouve que cela rend la structure de page plus logique et plus lisible. Mais à strictement parler, ce n'est pas nécessaire, aussi vous pourrez considérer que c'est de la triche. Mais ma leçon en cela serait que si vous comptez ajouter du balisage, essayez de faire qu'il ait autant de sens que possible.

Comme vous l'aurez probablement deviné, nous allons désormais ajouter une partie de l'image de bordure du bas à cet élément. Nous allons ajouter cette image comme  background-image.

Une fois de plus, ce sera une image très large, comme celle en haut à gauche, de façon à ce qu'il n'y ait pas de problème sur la largeur que l'élément pourait avoir. L'image d'arrière-plan sera encore suffisamment large. Maintenant, nous devrons faire que cette image se tienne en bas à gauche de l'élément que nous lui attacherons, ainsi utiliserons-nous une position d'arrière-plan en bas à gauche (nous mettons la position horizontale avant la verticale). Voici notre déclaration CSS pour cela

1. .telecommunications {
2. background-image: url(images/bottom-left.png);
3. background-repeat: no-repeat;
4. background-position: left bottom;
5. margin-bottom: 2em;
6. }
7. Source : /code/styling-hcards-with-css/6.txt

Et c'est ce à quoi cela ressemblera :

Nous n'y sommes pas tout à fait mais bien sur la voie. Il est temps de passer à la pièce finale pour teminer le puzzle.

Bien, je l'admets, je pourrais avoir triché un peu plus dans cette étape. Mais comme à l'étape précédente, toute valide, et (je l'espère) avec une syntaxe tout à fait justifiable. Si nous regardons à nouveau le HTML, vous trouvez que notre adresse email est balisée comme ceci :

1. <p class="email">Email : <a class="value" href="mailto:info@webdirections.org">info@webdirections.org</a></p>
2. Source : /code/styling-hcards-with-css/7.txt

Généralement, dans hCard, la partie valeur de cette propriété n'est pas requise, et nous pourrions nous en passer avec :

1. <a class="email" href="mailto:info@webdirections.org">info@webdirections.org</a>
2. Source: /code/styling-hcards-with-css/8.txt

Le format que j'ai utilisé, avec le span de valeur de classe est néanmoins une syntaxe hCard parfaitement valide (hCard autorise plusieurs adresses email de différents types, ce qui est l'endroit où ceci devient généralement très pratique). Pourquoi suis-je allé sur tous ces problèmes ? Ok, lorsque cela m'est venu de styler la hCard, j'ai réalisé que j'avais besoin d'un élément de bloc pour attacher l'image d'arrière-plan au coin en haut et à droite. Généralement le dernier élément de bloc dans l'élément conteneur est le choix idéal (et parfois il est possible de prendre un élément dans la ligne, par exemple le lien ici, et d'utiliser CSS pour en faire un élément de bloc, et de l'attacher à cela, mais cela ne fonctionne vraiment pas avec ce design).

Par conséquent, si nous allons utiliser le paragraphe qui contient le lien email, nous avons besoin d'un moyen de le sélectionner exclusivement, ce qui signifie qu'avec CSS 2 au moins, nous ayons besoin d'un class ou id comme un crochet pour notre sélecteur CSS (dans CSS3 nous pourrions utiliser le sélecteur last-child qui sélectionne le dernier élément enfant d'un élément spécifié, mais à nouveau, en tant que dernier enfant ce n'est pas vraiment supporté, nous n'y faisons pas confiance ici.)

Ainsi, la dernière pire des choses que nous pourrions faire serait de prendre un élément existant et d'y ajouter quelque syntaxe ayant raisonnablement du sens. C'est pourquoi nous avons donné au paragraphe une classe email, et à l'adresse email une classe value. Ce qui me rappelle un petit moment dans Hamlet

The lady doth protest too much, methinks

OK, revenons à la CSS.

Nous ajoutons l'image du coin en bas à droite, en la positionnant dans le bas à droite de l'élément, et en nous assurant qu'elle ne se répète pas. Nous y ajoutons aussi quelque padding en bas, pour équilibrer le padding que nous avons ajouté en haut de la hCard.

1. p.email {
2. background-image: url(images/bottom-right.png);
3. background-position: right bottom;
4. background-repeat: no-repeat;
5. padding-bottom: 2em;
6. }
7. Source : /code/styling-hcards-with-css/9.txt

Ce qui va faire que notre hCard ressemble à ça :

Il nous reste simplement à nettoyer un peu.

Commençons à partir du haut. Nous laisserons flotter l'image de téléchargement vers la droite comme ceci :

1. .vcard img {
2. float: right;
3. padding-right: 1em;
4. margin-top: -1em
5. }
6. Source : /code/styling-hcards-with-css/10.txt

Regardez comment nous n'avons pas ajouté une classe pour styler l'image, nous avons utilisé le fait que l'image soit un descendant de l'élément vcard  et un sélecteur descendant. Dans mon expérience, le puissant sélecteur descendant très largement supporté est l'un des aspects les plus sous-utilisés de CSS. Si vous ne l'utilisez pas fréquemment, étudiez le plus en détail.

Nous avons ajouté quelque espace à droite de l'image et hissé un peu plus près du haut de la hCard comme ceci :

Nous voulons aussi ajouter quelque espace blanc entre le bord de la hCard et le texte. Nous ajouterions généralement du padding à gauche de l'élément conteneur, (dans ce cas l'élément vcard ) mais ceci briserait notre coin en bas à gauche comme ceci

C'est parce que l'élément div que nous avons ajouté à cette image d'arrière-plan en bas à gauche serait déplacé par le padding sur son élément conteneur.

Aussi, au lieu de cela, nous ajoutons une marge gauche à tous les paragraphes dans la hCard

1. .vcard p {
2. margin-left: 1em;
3. }
4. Source : /code/styling-hcards-with-css/11.txt

(Il y a à nouveau le sélecteur descendant - c'est le couteau de l'armée suisse en CSS)

Désormais, nous n'avons pas encore produit la largeur de la hCard, une fonction de la taille du texte qui est dedans  (ou “pilotage em” comme nous l'avons décrit plus avant). Nous faisons cela en donnant à la hCard une largeur qui est spécifiée en unité em. Ici nous installerons une largeur 'width' de disons 28em, ce qui rend la hCard approximativement aussi large que 28 caractères (à strictement parler 28 fois la taille de la lettre capitale M).

Ainsi la déclaration pour notre élément contenant la vcard devient

1. .vcard {
2. background-image: url(images/vcardfill.png);
3. background-repeat: no-repeat;
4. color: #666;
5. font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
6. width: 28em;
7. }
8. Source : /code/styling-hcards-with-css/12.txt

et maintenant notre élément ressemblera à cela :

Nous avons presque entièrement utilisé le HTML existant à partir de notre hCard originale (en ajoutant juste un peu de HTML et en essayant autant que possible de conserver un sens à ce balisage supplémentaire) et juste 6 déclarations CSS.

Bonus pour les Vacances  – une vCard téléchargeable

Avez-vous remarqué cette section du HTML

1. <a href="http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://north.webdirections.org/contact/">
2. <img src="images/vcard-add.png" alt="icone téléchargement vcard"></a>
3. Source : /code/styling-hcards-with-css/13.txt

Qu'y a t'il avec cet url si étrange ?

1. <a href="http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://north.webdirections.org/contact/">
2. Source : /code/styling-hcards-with-css/14.txt

Si vous cliquez le lien, X2V, un très beau service web de Brian Suda, saisit la page à l'URL, et s'il trouve une hCard, il la convertit en une vCard, et selon la façon dont votre système est installé, il la télécharge automatiquement et l'ajoute à votre carnet d'adresses (Mac OS X) ou vous avertit si vous préféreriez sauvegarder la vCard et l'ajouter à n'importe quelle application gestionnaire par défaut de vos vCards sur votre système.

Ce que fait X2V est de saisir le véritable HTML de votre hCard, et grâce à la magie de XSLT, le convertit en une vCard. Ainsi, en balisant simplement les détails de contacts en utilisant hCard, et en ajoutant un lien comme ceci, vous obtenez une vCard automatiquement téléchargeable – et si vous changez vos détails de contact, et mettez à jour la hCard, il n'y aura pas de fichier vCard à mettre à jour.

Technorati dispose aussi d'un service similaire sur http://technorati.com/contact que vous pourriez vouloir utiliser si vous voulez vous attendre à tout type de chargement. Ils peuvent se permettre d'offrir plus de bande passante que Brian !

Si vous voulez jouer avec le HTML et la CSS pour ce design, le code et les images peuvent être téléchargés.

En espérant que vous ayez apprécié. Si oui, vous pourriez aimer regarder mon blog dédié aux microformats, ou avancer vers Web Directions North, où je parlerai avec Dan Cederholmn et Tantek Çelik dans une session de 2 heures concentrée uniquement sur les microformats. Et gardez un oeil sur la sortie de mon livre sur les microformats, à partir duquel cet article a été adapté. Il sortira au printemps 2007.

En vous souhaitant une fin d'année joyeuse et festive, tous mes voeux pour 2007

John

Quelques liens hCard

• L'entrée hCard sur microformats.org (fr)
• Le hCard Creator
• L'anti-sèche hCard
• Les FAQ hCard (fr)
• Idées pour publier des hCards  (fr)

• Microfomatique – un blog traitant des microformats
• Web Directions North – présentation d'une session de deux heures dédiée aux microformats