Em Flash sizing

— Topic: css

Snazzy Scalability

Demo: example here (view source)

In the comments on my previous article about em image sizing, it was noted that while that method works just fine, it makes images somewhat jagged and pixelated when sizing text up or down. In the comments, it was mentioned that styling Flash dimensions in Ems with CSS is also possible. I took a look at the tutorial, which was in German, and came up with a little bit easier way of doing it, without the necessity of adding a class to the object tag, or specifying dimensions on a fall-back image:

<object type="application/x-shockwave-flash" data="seattle.swf">
	<param name="movie" value="seattle.swf" />
	<param name="menu" value="false" />
	<img src="seattle.jpg" alt="Seattle Skyline" />
</object>

So, this allows for some really lean mean XHTML code, which works in all browsers and is completely valid. The object tag can be styled directly, as can the image within it. Due to the great compression of Flash, the SWF file is only 53kb, whereas the image itself is 65kb. It defies logic, yet it somehow is a lighter download by using Flash than without. Here is the example CSS:

body {
	font-size: 62.5%;
}

img {
	height: 30em;
	width: 75em;
}

object {
	height: 30em;
	width: 75em;
}

That's pretty much all that's required. The rest of the text and CSS in the example are simply there to make the demonstration a bit more presentable. If this were being done on a larger scale site, you would of course want to use descendant selectors to specify exactly which images or objects you are referring to. I am not sure about the overall practicality, but I could see this having huge implications for sIFR being implimented more seamlessly.

Me, elsewhere