Luke
Luke

Reputation: 597

How to link a conditional style sheet without access to the head

I am working in an enterprise CMS (Autonomy/Interwoven Teamsite) that does not give me direct access to the head of a page. I can only link style sheets and add external js files. Normally I would add a conditional comment to link an ie6/ie7 stylesheet. In some searching I've found a way to target ie with conditional commenting inside js and specific ie versions based on the jscript version

in js:

/*@cc_on
    document.createStyleSheet("/css/all_ie_fixes.css");
    /*@if (@_jscript_version = 5.6)
        document.createStyleSheet("/css/ie_6.css");
    /*@end
@*/

This seems like an ugly hack. Any suggestions?

Upvotes: 0

Views: 757

Answers (4)

samg
samg

Reputation: 3526

It's frowned on by some people but there are css hacks that target IE, and don't require conditional comments.

For example only IE6 will read this style:

* html p {color:red;}

IE6 is too stupid to read this one:

html>body p {color:red;}

A quick google search turns up many others: http://www.webdevout.net/css-hacks#in_css-selectors

Upvotes: 1

Ben Regenspan
Ben Regenspan

Reputation: 10548

There's probably no non-ugly way to do this. That said, using the user-agent detection provided by a library like YUI (relevant YUI doc) will arguably result in slightly clearer and more explicit code than the above hack. Something like:

if (YAHOO.env.ua.ie >= 6 && YAHOO.env.ua.ie < 7)
{
        document.createStyleSheet("/css/ie_6.css");
}

Ugly, yes. But it's pretty clear what the intent is.

Upvotes: 1

eozzy
eozzy

Reputation: 68650

Try Conditional CSS:

// Conditional block example  

[if IE] @import('ie.css'); 

Upvotes: 1

nickf
nickf

Reputation: 546005

If you're doing anything at all with IE6, then your code will be full of ugly hacks. Future maintainers of your code will know this and sympathise, rather than curse your name. If it works, then go with it.

Upvotes: 0

Related Questions