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.

Notes

[1] Je suis preneur d'une traduction de ce terme :)

[2] On peut aussi utiliser la combinaison <Ctrl> + molete de la souris