Forum Moderators: open
I know it can be done via javascript to generate the CSS linking line with a css file filename based on the screen resoultion...but then what happens is everytim the document is loaded via BACK/FORWARD browser butotons...there is a pause while the screen/document loads....unlike normal documents that display instatly the 2nd+ time they are displayed (due to cacheing).
cAched, yes JS is cached, but when page loads there is a delay (showing the backdrop) when JS is used to select the CSS (via writing a LINK tag)
Long answer: It is not possible to load a different CSS depending on screen resolution without the "delay". The page has no clue what your resolution is until the body has begun to load.
Put this script in the <head> of your document:
<script type="text/javascript">
winWidth=document.all?document.body.clientWidth:window.innerWidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;
alert("WIDTH: "+winWidth+"\nHEIGHT: "+winHeight);
</script>
Now, take that same script and put it in the <body>...
The CSS will therefore have to adjust the layout... You cannot do this in the <head> section...
There is a solution (IE only) that would work, sort of. However, it's a pain to update the script.
For example:
<style type="text/css">
body {
background: expression(document.body.clientWidth>800?"yellow":"blue");
}
</style>
Try that in your browser. Test it at 800×600 and 1024×768...
If you just want to change a single rule something like that would work. But if you want to load a completely different CSS, depending on the resolution, then you're in for a headache :)
Could not really undertand the meaning of the LONG answer ....?
complicted answer, yes... But im using CSS external files...and not JAVASCRIPT Style sheets. ... SO i cannot put ANY mathematical expression in them right?
