fastclemmy.com

Happy CSS and merry XHTML à tous ! Prochain(s) post(s) l'année prochaine !

#divers

De liens en liens

# 16-12-2003

C'est Znarf qui signale un phénomène nouveau qui s'étend à toute vitesse dans la blogosphère anglophone. Linkslogs, blogmarks et autres désignent tous une même tendance : mettre à disposition des visiteurs de son site les quelques dernières adresses Internet que le blogueur a glané au cours de son surf quotidien.

Cette nouveauté, -qui risque sans doute de devenir sous peu aussi commun que les fils RSS, pingbacks, trackbacks dans tous les weblogs- prend racine dans l'expérience de la navigation Internet qu'ont les blogueurs. Cliquant de lien en lien, découvrant sans cesse de nouvelles adresses passionnantes, ils les consignent soigneusement soit pour nourrir leur blog soit pour référence ultérieure. Personnellement, je stocke sur mon bureau toutes ces adresses dans un fichier sobrement intitulé "links.txt" avec une date et une très courte description composée de mots-clés pour une recherche rapide.

En parallèle des articles traditionnels du weblog sont donc ainsi apparus ces blogmarks (pour reprendre le terme de Simon Willison), venant encore enrichir l'expérience du lecteur. Kottke va plus loin dans la démarche en l'intégrant complètement dans son blog et en créant un fil RSS dédié. Du simple effet de mode on verrait donc émerger une évolution majeure des blogs qui viendrait instaurer un double niveau de publication : l'info brute avec les liens et les analyses dans les articles traditionnels.

Pour ma part je suis circonspect.

Ce système de linkslog rencontre les mêmes limites que les articles de blogs : péremption de l'information, difficultés d'archivage, de recherche, etc. De plus, dans leur forme actuelle, les liens sont orphelins, livrés pour eux-mêmes, sans aucun élément pour les rattacher à d'autres ou à une réflexion plus large. C'est pourquoi sur fastclemmy.com, j'ai préféré privilégier l'aspect thématique des liens en les regroupant par sujet à partir de ma base brute contenue dans "links.txt".

La blogosphère est une galaxie de sites divers, ma vision du weblog s'oriente de plus en plus vers une division par univers de sujets. Reste à savoir comment matérialiser concrètement ce concept.

#liens

Un titre en image

# 12-12-2003

Article original du 07.08.03 - Dans la logique de la conception de pages web en xhtml/css, on essaye autant que faire se peut de limiter les images au strict minimum. Cela est particulièrement vrai pour les titres : il est souvent possible de les styler en CSS pour économiser une image. Seulement cette approche a ses limites et il est vrai que graphiquement un titre en image est toujours plus agréable à l'oeil.

Pour concilier les deux approches, j'en suis venu naturellement à chercher une astuce qui s'est avérée par la suite être la même que celle proposée par Douglas Bowman de StopDesign. En gros le titre est placé dans un élément <h1>, le texte à l'intérieur (contenu dans un <span>) est caché en mettant sa propriété display à none et l'image est en fait un background de l'élément <h1>

Mais deux autres designers ont pensé à une autre méthode basée sur la propriété overflow : Seamus P. H. Leahy et Stuart Langridge. David Shea a d'ailleurs réalisé un article intéressant sur le sujet dans Digital Web.

Mise à jour du 12.12.03 - On ne compte plus les articles sur le sujet : une version mise à jour pour supporter IE5 Mac, une version qui marche en désactivant les images de son navigateur, dernièrement une autre et des articles récapitulatifs sur le sujet.

On l'aura compris la solution idéale n'existe pas. En effet, soit les méthodes échouent sur les navigateurs en désactivant les images, soit sur quelques navigateurs spécifiques et dans tous les cas le code à mettre en oeuvre est assez indigeste. J'en viens donc personnellement à la conclusion qu'il y a simplement une amélioration à faire au niveau des recommandations CSS. Admettons par exemple que l'on considère ces images faisant office de titre comme un type particulier d'images d'arrière-plan. Pour coder le titre, on utiliserait simplement sans autre marquage superflu.

<h1>Mon titre</h1>

Du côté des CSS, là encore on jouerait la carte de la simplicité en ajoutant une propriété qui mettrait l'image au premier plan : background-z-index

h1 { background-image:url(monTitreEnImage.gif); background-repeat:no-repeat; background-z-index:1; height:45px; }

Ainsi, pour les navigateurs texte ou pour Google la page afficherait "Mon titre", les navigateurs supportant les images afficheraient "monTitreEnImage.gif" qui cacherait le texte en-dessous permettant ainsi aux personnes ayant désactivé les images de comprendre le titre. Voilà enfin une solution simple, accessible à tous, sans code superflu. Ne reste plus qu'à la proposer au W3C et que les navigateurs l'incorporent vite ! ;-)

#xhtmlCSS

Vite fait bien fait

# 10-12-2003

Maintenant que vous êtes sûr que votre site est complètement valide, il est peut-être temps de remettre le nez dans le code pour l'optimiser un peu. Voici quelques conseils pour faire le ménage de printemps (puisque *hum* c'est la saison) dans votre HTML et votre CSS.

A réserver aux codeurs avertis bien sûr.

Raccourcis déclaratifs

Il existe plusieurs moyens de déclarer une couleur dans un fichier CSS. Prenons par exemple la couleur blanche : white, #ffffff et #fff sont équivalents. La dernière façon de procéder révèle qu'on peut économiser des doublons hexadécimaux en mettant une seule fois la valeur, de même la couleur rouge sang #ff0000 pourra s'écrire #f00.

Les propriétés d'arrière-plan peuvent également bénéficier d'une cure d'amaigrissement :

p {background-image:url(../images/fond.gif); background-color:#ccc; background-position:50% 50%; background-repeat : no-repeat; background-attachment: fixed; }

devient ainsi

p {background: url(images/fond.gif) #ccc 50% no-repeat fixed }

Idem pour les bordures, les marges et le padding :

margin: 8px 2px 1px 4px;

Cette ligne de CSS fixe l'épaisseur des marges dans le sens des aiguilles d'une montre (haut, droite, bas, gauche).

Le regroupement de propriétés

Au fur et à mesure de l'écriture de votre fichier CSS, vous allez rapidement avoir des propriétés en commun. A la fin du projet il est temps d'y rejeter un oeil et d'optimiser le tout. Comment faire ? C'est très simple :

div#menu { margin-left:5px; background-color:#ccc; } div.onglet { background-color:#ccc; } div#menuVertical { background-color:#ccc; padding-right:3em; border-top:1px solid black; }

devient ainsi

div.onglet, div#menu, div#menuVertical { background-color:#ccc; } div#menu { margin-left:5px; } div#menuVertical { padding-right:3em; border-top:1px solid black; }

On déclare les propriétés communes aux différents styles, puis on déclare ce qui les différencie.

Optimisation HTML : les bienfaits du ciblage CSS

Quand on débute en XHTML/CSS, on a tendance à user et abuser des <div> et autres <span> pour pouvoir les styler dans son fichier CSS. Par exemple, on peut écrire pour un en-tête de site :

<div id="enTete"><h1>Mon titre de site</h1></div>

En fait, ici le <div> n'a aucune valeur ajoutée, aucun sens. On peut donc le supprimer sans regret et cibler le texte "Mon titre de site" en stylant le <h1> dans le fichier CSS. L'exemple est trivial, mais cette philosophie d'ensemble s'applique à de nombreux cas.

Pour en savoir plus, consultez les liens suivants :
Introduction to CSS shorthand properties
CSS Shorthands, part I
Writing efficient CSS

#xhtmlCSS