Le carnet web de florence

Comme promis lors de la mise à jour, voici le premier billet d'une série à propos de celle-ci. Pour commencer, parlons un peu du nouveau thème.

Ce thème, nommé 2, filyb street, est basé sur un détail de l'image Berlin - Potsdamer Platz - um 1900 (domaine public). D'ailleurs, si vous cherchez des images sous licence libre ou dans le domaine public, pensez à Wikimedia Commons. Les couleurs ont été choisies pour donner un aspect chaleureux et estival (mais certes pas inspiré par la grisaille de l'été 2007). Les petits icônes dont le site est parsemé proviennent du formidable set Silk de famfamfam (licence CC-BY 2.5), ou du projet Pidgin (GPL 2).

Le thème est à structure liquide, ce qui signifie qu'il devrait s'adapter à n'importe quelle taille de fenêtre, ou taille de police. La résolution minimale pour que ça reste lisible est en 800x600, même si une résolution supérieure apporte un meilleur confort de lecture.

Le site est conforme aux recommandations du W3C telles que le XHTMl 1.0 strict et les feuilles de styles CSS 2. Ainsi, le contenu est strictement séparé de la mise en page, afin qu'il soit accessible indépendamment du matériel et des logiciels utilisés.

Ce site web peut donc être consulté dans un navigateur texte (tel que ELinks ou Lynx), ou dans des navigateurs graphiques, de façon complète pour les navigateurs dits modernes (Mozilla Firefox, Konqueror, Epiphany, Safari ou Opera) et de façon plus sobre dans les navigateurs obsolètes tels que Microsoft Internet Explorer 6 ou Windows Internet Explorer 7. Voici un aperçu de l'affichage du site dans divers navigateurs, assorti de commentaires :

• Mozilla Firefox 2.0.0.6 (Moteur d'affichage : Gecko 1.8.1.6) : aucun problème, affichage optimal.
• Epiphany 2.18.1 (Moteur d'affichage : Gecko 1.8) : aucun problème, affichage optimal.
• Konqueror 3.5.7 (Moteur d'affichage : KHTML) : Konqueror pose problème pour les guillemets des citations, et possède un bug dans la gestion de la propriété CSS content. Ce dernier bug a été contourné, et l'affichage ne pose donc problème que pour les citations. Pour plus de détails, voir plus bas.
• Opera 9.23 (Moteur d'affichage : Presto) : le seul soucis d'Opera est un léger cafouillage au niveau des citations imbriquées à 3 niveaux (voir plus bas). Le reste ne pose aucun problème.
• Microsoft Internet Explorer 6 (Moteur d'affichage : Trident) : la mise en page est correcte, le contenu est bien affiché, mais de nombreux détails ne sont pas présents (les guillemets des citations, les icônes décorant les liens, les informations sur la langue d'un lien). Mieux vaut utiliser un navigateur plus performant. (La capture d'écran ci-contre ne montre pas l'affichage réel de Microsoft Internet Explorer 6, il manque certaines images comme celle du coin en haut à gauche. C'est dû à mon installation de Microsoft Internet Explorer sous WINE.
• Windows Internet Explorer 7 (Moteur d'affichage : Trident) : idem que Microsoft Internet Explorer 6, les progrès du logiciel sont très peu visibles sur mon site.

Au cours de la réalisation de ce thème, j'ai trouvé deux problèmes dans certains navigateurs modernes (je ne parlerai pas des autres, ils sont obsolètes, changez-en). Voici quelques détails :

La propriété CSS content

J'utilise cette propriété pour afficher des images ou texte autour de certains liens, pour spécifier un de leurs particularité, comme le fait qu'ils pointent vers une adresse mail, ou qu'ils sont des liens externes. J'ai donc écrit ce code dans ma feuille de style :

a[href^="http"]:after {content:"\0000a0"url(img/external.png);}
a[href*="filyb.info"]:after {content:"";}

La première ligne ajoute une image de lien externe après un lien commençant par http (ce qui exclu les liens relatifs). Mais pour que cette image soit placée uniquement sur les liens externes, il faut aussi l'enlever sur les liens commençant par http://filyb.info. J'ai donc mis un contenu vide (content:"") à la place de l'image.

Le problème est que Konqueror 3.5.7 affiche un rectangle style caractère absent de la police dans ce dernier cas. Une solution est de remplacer content:"" par content:none. Ça marche... mais uniquement dans Konqueror. Cette propriété est ignorée par Mozilla Firefox. D'après la recommandation CSS 2, le comportement correct est celui de Mozilla Firefox (la recommandation ne parle pas de la valeur none pour content, cependant le validateur CSS l'accepte.

La solution : utiliser les deux. Ça donne : {content:""; content:none}. Cela fonctionne parfaitement dans Mozilla Firefox, Konqueror et Opera. Dans Internet Explorer 6 et 7, il n'y a rien d'affiché, le problème ne se pose pas.

Les styles de citations et les citations imbriquées

Il existe deux types de guillemets pour les citations imbriquées. Les guillemets de premier niveau (français : « et », anglais : “ et ”) et de second niveau (français : “ et ”, anglais : ` et ´). Pour que les balises <q> les utilisent, il faut utiliser les styles suivants :

q:lang(en) {quotes : "“" "”" "`" "´";}
q:lang(fr) {quotes : "«\0000a0" "\0000a0»" "“" "”";}
q:before{content : open-quote;}
q:after{content : close-quote;}

Le \0000a0 correspond à une espace insécable en unicode.

Ces styles fonctionnent parfaitement sous Mozilla Firefox.

Opera 9.21 a un léger soucis dans le cas où il y a trois niveaux de citations imbriqués, comme dans les citations que vous venez de lire. Opera style correctement la citation de premier niveau, mais ferme celle de second niveau à la balise d'ouverture de celle de troisième niveau, affiche le caractère double-quote (") à la fermeture de celle de troisième niveau, et ferme correctement celle de second niveau.

Konqueror 3.5.7... échoue lamentablement. Il affiche avant les guillemets ouvrant et fermant de premier niveau le caractère Â, et affiche n'importe quoi pour les guillemets de second niveau. Je n'ai pas trouvé de parade.

Les Internet Explorer... n'affichent rien. Pas de marque de citation. Je ne vais pas chercher plus loin, changez de navigateur.

Voilà pour cette première partie. Nous allons ensuite attaquer un gros morceau : les microformats.