-1

I need to call different style sheets for different resolutions only for IE8, as it's not compatible with media queries.

steveax
  • 17,527
  • 6
  • 44
  • 59
Ahmed
  • 7
  • 1
  • 3

3 Answers3

0

Try using http://www.quirksmode.org/css/condcom.html

mawcsco
  • 624
  • 6
  • 18
  • This deals with the conditional css, but not with the different resolutions. It needs to be a combination of – Yisela May 29 '12 at 21:28
  • Ahmed's original question said nothing about different resolutions. In fact, the original question was "Call a different css style sheet only for ie8 with java script JavaScript (media queries not supported)" conditional CSS works fine to answer the original question. – mawcsco May 30 '12 at 13:30
  • Original: "call different css only for ie8 on different resolution without media queries" – Yisela May 30 '12 at 20:37
0

Edit 2: I messed this answer up by getting it mixed up with another question but all should be well now. Sorry OP.

Instead of having separate stylesheets for each resolution, combine them and have javascript place a class on the Body so that the right style rules for a resolution are applied. e.g.,:

IE8Styles.css

.mystyle { /* Common Styles */ }
body.res800x600 .mystyle { ... }
body.res1024x768 .mystyle { ... }

Page.html

<script>
setTimeout(fixResolutionStyles, 200)

function fixResolutionStyles() {
    var windowWidth = document.body.offsetWidth
    var bodyClass = ""
    if(windowWidth > 1600){
        bodyClass = '1600x900'
    } else if (windowWidth > 1024) {
        bodyClass = '1024x786'
    }
    document.body['class'] = "res" + bodyClass
    setTimeout(fixResolutionStyles, 200)
}
</script>
sparebytes
  • 12,546
  • 3
  • 21
  • 32
  • 1
    [CSS classes must begin with an underscore, dash or letter](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names) to be valid. – steveax May 29 '12 at 21:55
  • Right, but a selector for a class begins with a period. Where is my mistake? – sparebytes May 29 '12 at 21:59
  • Durr, I see it :( ok will fix – sparebytes May 29 '12 at 22:01
  • Class names that begin with numbers (the 'dot' is really just [shorthand notation for `div[class~=value]`](http://www.w3.org/TR/CSS2/selector.html#class-html) and doesn't count as part of the name) are not valid. – steveax May 29 '12 at 22:03
0

Since you are expressly asking "with javascript" I won't advocate the use of conditional comments.
That leaves conditional compilation:

/*@cc_on@if(@_jscript_version == 5.8)
document.getElementById("id-of-your-style-tag").styleSheet.addImport("/path/style.css");
@end@*/
Knu
  • 14,806
  • 5
  • 56
  • 89