CSS Spoiler tag

[Rosalind]

Is there any way to blur text so indicate it's a spoiler, using CSS, that will display the same across major browsers?
This is what I'm using:

.spoiler {
display: inline-block;
text-decoration: none;
color: transparent;
text-shadow: 0px 0px 5px #000000;
}
.spoiler:hover{
text-shadow: 0px 0px 0px #000000;
}

It looks right in FF, but in IE and on my mobile phone all I get is blank white spaces, which only displays the text on highlighting.

What I'm not sure is if CSS is the right solution. It ought to be, but it's just so inconsistent in its implementation.

[lucy24]

The first thing that jumped out at me was {color: transparent;}. In CSS2 this wasn't allowed (only backgrounds could be transparent) even though it works in most browsers and is fine in 3. See what happens if you comment-out this line.

The second thing to jump out was :hover. Techically this group of pseudo-classes only work with interactive elements-- things like <a> that do something when you click on them. This doesn't seem to have changed between 2 and 3. What kind of element will the "spoiler" class be attached to?

Of course there's the javascript option, but then you lose the users with scripting turned off.

:: detour to w3c ::

Oh joy, CSS3 has added a "currentColor" keyword. This will be a big help. (Sorry. Nothing to do with your question, but had to spread the word. Now, if only someone could find the single page that links to all current CSS3 drafts...)

[drhowarddrfine]

Microsoft only added text-shadow starting with IE10. IE is always years behind any other browser.

[Rosalind]

Thanks Lucy and Dr Howard. I'm thinking of putting it in a <span>. I tried the anchor tag and commenting out the [color: transparent], but no joy on both counts.

I guess that leaves Javascript, or detecting the browser and serving up something different according to what's being used. Either way, yuck.