Prendre un Café

Désolé pour le titre, j'ai plus d'imagination pour titrer les billets en vrac...

• Un petit séquenceur musical en ligne complètement addictif (Flash requis).
• Le site officiel de Spore, un des jeux les plus prometteurs du moment, est bien marrant (Flash requis).
• Google Maps|Local s'étend à l'Europe côté cartographie routière, itinéraires et services de proximité : c'est assez réussi. Bon, les pages jaunes ont encore quelques beaux jours devant elles pour ce qui est des recherches de pizzerias.
• Tab Mix Plus, une de mes extensions préférées pour Firefox, en fait toujours plus dans sa dernière mouture. Le top : on peut sauvegarder les nombreux réglages effectués dans un fichier de configuration.
• Des fois, la science, c'est vraiment beau.
• IE7 beta 2 disponible au téléchargement. Un miracle est-il encore possible ? J'en doûte. Edit : de nouveaux problèmes s'annoncent...
• Signer une pétition contre la licence globale (source) ne dispense pas de respecter la licence Creative Commons
• Edit : J'oubliais : hahahahaha (via mEga).
• Edit : Wow ! (via Scoopeo)

PS : ça devient vraiment n'importe quoi ces billets. Promis, bientôt je me recentre.

Aujourd'hui, jour du CSS Naked Day, ce site est à poil tout nu. Paf.

Remarque : A quand une journée sans javascript, qu'on rigole un coup ?

Edit du lendemain : Rhabillé.

Comme vous l'avez sans doûte remarqué si vous n'utilisez pas un agrégateur pour lire ces quelques lignes, je suis en train de procéder au redesign de ce blog. J'en avais vraiment marre du gris. Donc j'ai mis de la couleur partout.

C'est pas fini, j'ose même pas imaginer ce que ça donne sous IE, mais j'ai l'impression que c'est un bon début. En tout cas, que je suis sur la bonne voie.

Comme d'hab, commentaires et suggestions sont les bienvenues

Peut-être cette astuce est-elle archi connue, mais je ne l'ai jamais vue auparavant.

Peut-être avez-vous déjà voulu réaliser un modèle de mise en page scalable ^[1] en CSS contenant des animations Flash. Et peut-être avez-vous pesté contre l'impossibilité apparente de gérer en valeurs relatives la taille desdits objets, puisque les attributs width et height d'une balise <object> sont par définition exprimées en pixels, la largeur et la hauteur restant alors desespéremment fixes lors de l'augmentation de la taille du texte et des éléments de mise en page...

Pour remédier à ce problème, ma solution réside dans l'application de valeurs proportionnelles (exprimées en em) à l'objet Flash via CSS.

Prenons par exemple ce code XHTML affichant une animation Flash de 320px par 240px:

<object id="swf_banner" type="application/x-shockwave-flash" data="swf/ban_home.swf" width="320" height="240">
	<param name="movie" value="swf/ban_home.swf" />
	<img id="img_banner" src="swf/alt/ban_home.jpg" alt="banner" />
</object>

En appliquant les règles CSS suivantes au corps du document et à l'objet, la taille de ce dernier devient fluide !

body {
	font-size: 100%; /* Autorise le redimensionnement de texte pour MSIE */
}
html > body {
	font-size: 16px; /* Pour les autres navigateurs */
}
#swf_banner {
	width: 20em;
	height: 15em;
}

Et voila, en jouant des combinaisons de touches <Ctrl> + "+" et <Ctrl> + "-" dans Firefox ^[2], votre objet flash est maintenant redimensionné à l'échelle, au même titre que le reste des éléments du document dont les dimensions sont exprimées en valeurs proportionnelles.

Conversion des valeurs px en em

Mais - allez-vous me dire - comment convertir mes valeurs de taille d'objet Flash, exprimées en pixels, en valeurs proportionnelles (em) ? Pour cela, il existe une astuce consistant à définir une taille par défaut de la police de caractère du document courant, et de lui appliquer un ratio multiplicateur pour en obtenir les valeurs proportionnelles correspondantes.

Dans notre exemple, l'objet Flash fait 320 par 240 pixels. Fixons la taille de police par défaut de notre document à 16px.

body {
	font-size: 100%; /* Autorise le redimensionnement de texte pour MSIE */
}
html > body {
	font-size: 16px; /* Pour les autres navigateurs */
}

Pour calculer la hauteur de notre objet Flash en em, on effectue une simple opération :

<taille_en_pixels_du_flash> / <taille_de_police_du_body_en_pixels> = <valeur_en_em>

Soit pour la largeur :

320 / 16 = 20em

Et pour la hauteur :

240 / 16 = 15em

Note : MSIE ne permet pas par défaut le redimensionnement de police ; il faut pour cela utiliser un subterfuge, sous cette forme :

body {
	font-size: 100%; /* Autorise le redimensionnement de texte pour MSIE */
}

Opera quand à lui propose en natif le zoom à l'échelle, quelles que soient les métriques utilisées.

Pour finir, voila un exemple concret.