And here I was naive enough, coming back to web dev after a brief academic hiatus, to believe that the browsers had converged enough to think the design horrors of 2000 were over. No such.

If there's one thing I'd like to see implemented, it's this text-shadow CSS property that the w3c proposed quite some time ago. Here's a page at w3c with "Readable White Text" using the property. Below, I'll include the code that should do the same thing.

This should have a shadow. Without Safari, though, you're likely not seeing it -- or you're from THE FUTURE.


*sigh* Just for fun, here's what you should be seeing, taken from Safari on Windows:


A little bigger now for effect...



That's really a pretty nice effect.

Mozilla had a bug filed for its lack of support in 1999. With any luck, it appears it may have, within this weekend, finally gotten a patch. I tried the nightly build (2008042004) on my Mac, however, and no dice.

Here's the best workaround I can find for IE.

This should have a shadow. But only on IE, regardless of whether you're from THE FUTURE or not. Unless it's STEVE BALLMER'S FUTURE, where every browser is IE.



Not only does it stink visually, it inexplicably seems to require a style value for height. Here's a picture for the IE challenged.



And the code. Note the difference between using "text-shadow" and the "Direction" and "Strength" jive for the IE "filter".

<!-- w3c's Way (Safari only right now) -->
<center>
<div style="background-color:blue;padding:10px;width:70%;text-align:left">
<h3 style="color:white; text-shadow: black 0.1em 0.1em 0.2em;">
This should have a shadow. Without Safari, though, you're likely not seeing it
-- or you're from THE FUTURE.
</h3>
</div>
</center>

<!-- Microsoft's Way (IE only right now, and likely forever) -->
<center>
<div style="background-color:blue;padding:10px;width:70%;text-align:left">
<h3 style="color:white;height:100px;filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=225, Strength=4)">
This should have a shadow. But only on IE, regardless of whether you're from
THE FUTURE or not. Unless it's STEVE BALLMER'S FUTURE, where every browser is IE.
</h3>
</div>
</center>


EDIT: Some play in the search for a solution.
Better yet, works towards a possible patch for Firefox, with a test build.

Labels: , ,