...

View Full Version : Loading relevant external CSS file as per resolution..... HOW?



shivboy
04-09-2003, 08:13 PM
Hi,

i want that a separate CSS file be used for different types of resolution. i am building pages for 2 resolutions only - 800x600 and 1024x768. how do i do it using DOM? Any help is appreciated.

Thanx,
shivboy

brothercake
04-09-2003, 08:22 PM
With respect - this is insane; don't do it.


But your choice - you can use the screen.width and screen.height properties and that will tell you the screen resolution; then you create the applicable stylesheet <link> - either document.write or do it in the DOM.

shivboy
04-09-2003, 08:26 PM
hi brothercake,

why do u call that insane? i didn't get u on that. could u tell me how to link up those files using DOM? i'll be really grateful.


thanx,
shivboy

brothercake
04-09-2003, 08:36 PM
Something like this


var screenw = screen.width;

var sheet = '800.css';
if(screenw > 800) { sheet = '1024.css'; }

var linkEle = document.createElement("link");
linkEle.setAttribute("rel","stylesheet");
linkEle.setAttribute("type","text/css");
linkEle.setAttribute("media","screen");
linkEle.setAttribute("href",sheet);

document.getElementsByTagName("head")[0].appendChild(linkEle);

I called it insane for several reasons - what if someone visits your site with a lower or much higer screen res? or a non-standard res? what if they use a browser which doesn't report any screen dimensions at all.

And even told - you're giving yourself a maintenance headache - you'll have two stylesheets to maintain instead of one. And for what - so you can tweak the layout for the sake of two specific screen resolutions? Why not just build a flexible layout?

shivboy
04-09-2003, 08:52 PM
hey brothercake,

thanx a lot man for the code and swift and helpful replies. but, what do u mean by a flexible layout? can u elucidate that a bit please? how wud u suggest to go about it?

thanx again,
shivboy

liorean
04-09-2003, 09:02 PM
Try to code something that looks good when you have the window maximised and your screen resolution set to something high. Then you set your screen resolution to 600x800 and look at the site when it takes about half the screen. Try to get your site to look good in both and breaking in no size, and you'll have a flexible design. The trick is mostly to not rely on certain widths but let the browser decide how much space each element should take. Don't use too large images unless they can be cut without harming the design. Use relative font sizes instead of absolute. And don't try to get it to look pixel perfect in all browsers at all resolutions. Instead try to make all the glitches so small that they don't really harm the design.

shivboy
04-09-2003, 09:13 PM
hi brothercake,

so what u r trying to suggest here is to go for %-based values rather than specific pixel based values, right? and position should also be relative rather absolute. am i right?

thanx,

shivboy

brothercake
04-10-2003, 12:07 AM
Percentages are good; you can also use "em" which is an absolute unit but it scales relative to view text size.

You can actually use absolute positioning if you want - in % and/or em units - and you'll still have a flexible layout.

But as liorean said, remember you won't get your design to look exactly the same for everyone.

Vladdy
04-10-2003, 01:31 AM
Originally posted by brothercake
With respect - this is insane; don't do it.

With all due respect, I think this is a valid approach.
Here is my implementation (http://www.klproductions.com/home.html) (still working on content). The script checks the width of the browser window (not the screen width !!!) and loads one of the three stylesheets (more to come) one for <600px browser width; one for >1200px width and one for in-between. The page still allows user to select one of the available stylesheets which will be remembered for the subsequent visits.
All page graphical elements are backgrounds of block elements, so they can be changed with the stylesheet.

Still think it's insane
:thumbsup:

brothercake
04-10-2003, 07:16 PM
Originally posted by Vladdy
Still think it's insane
:thumbsup:
Wow ... that's excellent. :thumbsup:

But what shivboy originally asked for was to select stylesheets based on screen resolution; I still think that's a bad idea, as much as anything else because it presumes a visitor is using a maximized window; dunno about anyone else but I never surf in maximized windows.

But either way ... I'll doff my cap on this occasion - I did jump to conclusions without thinking outside the box :o

Vladdy
04-10-2003, 11:22 PM
I agree that it is insane to design for a specific screen resolution, as very few browse with browser maximised.

liorean
04-10-2003, 11:35 PM
In fact, most people use maximised windows when they surf. Most of the computer users actually don't know about multitasking, and maximise all their windows all the time.

Technical savvy persons such as web designers seldom surf with their browser maximised, though.

brothercake
04-10-2003, 11:56 PM
Originally posted by liorean
In fact, most people use maximised windows when they surf.
Really? Do you know of any research findings to support that, or on surfing / computer-use habits in general?

liorean
04-11-2003, 12:02 AM
We performed one at our school including 1200 persons in the age range 25-60. Only about 130 used multiple programs as once about 90 of them used to place programs side-by-side. All were volunteers (they got a T-shirt and some money for participating), but they came out of a randomly selected group of about 4 000 individuals. 13% used Mac, 3% used DOS/Win3.1, one used linux. (Did this in 1999.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum