CSS depending Screen Resolution ?

[chrbar]

Hello,

It's possible to set a different CSS sheet depending of screen resolution?

Thanks,
Chris

[Nile]

Yes, it is. I think thats what the % is for.

[chrbar]

Thanks Nile, but my question was not about CSS value (%).
I would like to know how to select/apply automatically a different CSS SHEET (a full sheet, not just a value) to a Web page, depending of screen resolution... could be via JavaScript?

[Nile]

I don't really get what you want still.
You can get the screen hight and width like this[js]:

var h = (screen.height);
var w = (screen.width);
document.write(h + w);

[molendijk]

Hello,

It's possible to set a different CSS sheet depending of screen resolution?
Thanks,
Chris

You probably mean something like this:

<script type="text/javascript">
if(screen.height>600) {
document.write('<style type="text/css">');
document.write('.demo {font-family:comic sans ms;text-decoration:none;background-color:transparent;font-size:12px;}');
document.write('body{margin-top:30px;}');
document.write('</style>');
} 
</script>

Arie Molendijk

[Nile]

Why do you have numerous document types when you can put them all in one function?

[djr33]

chrbar, what Molendijk posted is what you want, or some variation. However, just using percentage based layouts is best. Someone can change the size of the window, or they can have a strange shape. Mostly, though, you just simply can't account for all sizes: mobile? really large? widescreen?

As a random note, I'm running widescreen 1440x900 right now. What resolution will that get?

The idea makes sense, but only use it with caution because it will probably cause more problems than it solves.

If you do something like this, then I'd suggest basing it very roughly on the size and maybe have a small and a large version. But, really, it makes sense to just design your site with percentage based layouts and sliding parts, with backgrounds, etc, so it all fits.

[molendijk]

...But, really, it makes sense to just design your site with percentage based layouts and sliding parts, with backgrounds, etc, so it all fits.

I agree. But sometimes you may want a fixed pixel-height/-width indeed for your text when using a certain screen resolution.
----
Arie.

[boogyman]

I agree. But sometimes you may want a fixed pixel-height/-width indeed for your text when using a certain screen resolution.
----
Arie.

the only time I could see you wanting a fixed height / width is if you wanted to limit the maximum or minimum screen resolution values, in which case you could use a css property inside your body tag

body {
    width: 100%;
    min-width: 770px; /* For 800x600 screen resolution */
    height: 100%;
    min-height: 570px; /* For 800x600 screen resolution */
    overflow: auto; /* Adds scrollbar if necessary */
}

this would allow the developer to limit the minimum or maximum screen width and height, however it is important to note, min-width and min-height CSS1 properties are not supported by IE6 and below. (Go Figure)

[Medyman]

I've actually done this on a current site I'm working on.

Reason?
While, the general principal of using CSS percentages for all layout is something I wholeheartedly agree with, there are some situations that warrant a different approach.

The site I'm working is for an online literary magazine. So, there's a lot of content that needs to be presented. My goal was to best capatilize on screen space to show different types of content in different interactions. Plus, I like the hidden gems in web design. I always try to add a little something that isn't obvious (nor essential) but once you find it, it's kind of cool.

Back to my first point...fluid design is always the first choice. In fact, if you're not changing the layout, I urge you to go that route. But if, like I did, you're changing the actual layout and want to give a different experience to folks with a different resolution, then this approach will work (it has for me, at least).

How to?
I used Cameron Adams' (The Man in Blue) technique -- found here.