sIFR3: controlling a and a:hover styles inside replaced through CSS rather than JS

Question

For graceful degrading and minimal coding for the sIFR feature on my websites I would want to define styles in CSS as much as possible. Here's what I do:

• Define a H3 tag to be replaced by sIFR3.

• H3 comes in varying colors by CSS depending on it's container, say:

body.blue-txt h3{ color: #009CDA; }
body.white-txt h3{ color: #FFFFFF; }
body.yellow-txt h3{ color: #FFFF00; }
body.etc....

• H3 might contain an anchor (I'm aware of semantical issues, but that's just how it is at this moment... sorry)

With setting:

sIFR.useStyleCheck = true;

I thought sIFR3 would show replaced normal H3 text with correct color from my CSS-stylesheet. So far, so good: I can tweak e.g. blue text in sifr-config.js by using the css-parameter for sIFR.replace():

sIFR.replace(futura, {
  selector: 'body.blue-txt h3',
  css: 'a {color: #009CDA; }, a:hover { color: #009CDA; text-decoration: underline; }'
});

But that would have to be coded for every single text-color in my sIFR replacements in both JS and CSS. So I would want to make the sIFR.useStyleCheck setting just respect the CSS in sifr-config.css like:

body.blue-txt h3{ color: #009CDA; }
body.blue-txt h3 a{ color: #009CDA; }
body.blue-txt h3 a:hover{ color: #009CDA; text-decoration: underline; }

Only this doesn't seem to work ... the link text keeps popping up as #0000FF and the hover is not underlined. Is this just Not A Feature (Yet), or am I doing something wrong?

Answer 1

It looks like this branch of v2.0 is what you need.

http://webdesign.maratz.com/lab/multi_color_sifr/

Another possibility is FLIR - image replacement

http://facelift.mawhorter.net/example-pages/facelift/facelift-links.html

Answer 2

If I may suggest, why not use @font-face? Most people have upgraded to Firefox 3+ by now, and WebKit browsers (Safari, Chrome, etc) have had it implemented for awhile, and even IE5.5+ supports @font-face. This would solve your :hover issue and would be more semantic and logical as well as much faster, but even better no Flash! ;)

But truthfully, @font-face would be the best way to go unless you are specifically targeting < IE 5.5, Firefox 2-1, or older WebKit. In all likelihood, you should hit over 90% of your desktop browser based visitors with your custom fonts.

Answer 3

useStyleCheck has no effect on the color in the Flash movie. You need to specify all styles (except for font size) in the sIFR.replace() arguments.

Now, you can use the modifyCss callback to update the applied CSS based on the current style of the element being replaced. You do need to program this yourself though.