Assigning CSS relative to screen resolution 1

[1DMF]

is it possible to use CSS relative to the screen resolution.

or can this only be done with JavaScript?

I'd like to only apply some CSS if screen resolution is 1024 * 768 or higher, is there a way to do this with pure CSS?


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

I'd like to only apply some CSS if screen resolution is 1024 * 768 or higher, is there a way to do this with pure CSS?

You're stuck using javascript for this I'm afraid.....

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[1DMF]

hmm, then that stops my nice

<link rel="stylesheet" href="IMN.css" type="text/css" />

from working.

how do you make symantic, compliant code with JS to link in a specific stylesheet from an external source.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

Ummm.... it's not really related to this forum, but I'd probably do something like this:
[gray](VERY rough pseudocode)[/gray]

<script type="text/javascript">

//find window dimensions
dimensions = [i](code to find dimensions)[/i]

//apply pertinent stylesheet
if (dimensions == 800x600) {
   document.write('<link rel="stylesheet" href="IMN800x600.css" type="text/css" />');
}
else if (dimensions == 1024x768) {
   document.write('<link rel="stylesheet" href="IMN1024x768.css" type="text/css" />');
}
else {
   //whatever
}
</script>

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[1DMF]

ok, i'll pop over to the JS forum to follow on from this. thanks.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

If you follow kaht's approach, you should apply a basic stylesheet first, before you get to the JS, for people with JS switched off.

In fact, if I were to do this, I'd do something like

<link rel="stylesheet" href="IMN.css" type="text/css" />

<script type="text/javascript">
//find window dimensions
dimensions = (code to find dimensions)

//apply pertinent stylesheet
if (dimensions > 800x600) {
   document.write('<link rel="stylesheet" href="IMNbig.css" type="text/css" />');
}

</script>

where IMN.css contains the normal styling, based on lowest-common-denominator screens (800x600), and IMNbig.css just redefines those rules which need to be changed for the bigger screen size. It is perfectly acceptable to have multiple external stylesheets applying to the same (X)HTML document. If rules appear in multiple sheets for the same element, the browser will apply the one which appears latest.

Do remember, btw, that not everybody surfs with their browser maximised. One of the benefits of having a big monitor is that you can have several usably big windows open at once, so browsers might be 800x600 (or less) even when screens are much bigger.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd