sIFR3: controlling a and a:hover styles inside replaced through CSS rather than JS
- by sneeuwitje
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.etc...
H3 might contain an anchor (I'm aware of semantical issues, but that's just how it is ... sorry)
With setting
sIFR.useStyleCheck = true;
sIFR3 will show replaced normal H3 text with correct color, but when it contains a link, it shows the Flash default #0000FF ....
All fine;
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 doing something wrong?
