Using javascript to load up a seperate css file

Hi all,

Is it possible for javascript to load up a seperate css file if the screen resolution of the user is set too 800 by 600 or 1200 by 600 etc…?

Can that be done if so how?


The ‘proper’ way to do this would be to use CSS3 media queries, but browser support for those is still very bad. As far as I know, only Opera has decent support for them, although Safari has partial support (and perhaps Chrome?). I don’t know if the latest Firefox supports media queries, but IE doesn’t.

@media all and (max-width:800px) {
  /* alternative style */

so that will do the trick is there another way of doing it with ie and others that dont?

Perhaps it would be better if you explain why you think this is necessary exactly?

I loathe it when javascript re sizes my window because I always have many windows open and move them around so that I can work on multiple applications easily. I never use any applications maximised and I would take issue with a browser window that suddenly resized to something different when I resized the browsers window to where I like it as it would upset the content that I was displaying.

In fact I have never seen this done well or to my satisfaction:)

However you can find some information here if you must go down that route.

Sorry but I’m not going to help you do it in JavaScript for two reasons… firstly, this is the Accessibility / Usability forum… and forming a dependency on scripting for your layout to appear as it should is a very clear violation of those, secondly this is a VERY poor justification for scripting to achieve such an effect (10% of ALL web users have NO JavaScript available so your site will break for 1 in 10 people). The only way you SHOULD do it is through CSS3 Media Queries (device-width and device-height). However this is not widely supported and you will find some browsers cannot take advantage of it. Perhaps rather than require separate stylesheets for various resolutions or a mechanism to detect it (which I assume you are only considering desktop ones, not mobile devices - an ever growing amount of Internet traffic - I’ve heard numbers of anything up to 10%), perhaps you might consider having a design that’s not fixed width and follows a more liquid or fluid layout mechanism. :slight_smile:

CSS Media Queries:

okay thanks

Another point is that screen resolution has nothing whatever to do with the way a web page needs to look. The relevant dimensions are those of the browser viewport and not those of the screen.

ill be glad to explain basically i am wanting to have the layout to be re-sized if the users screen is smaller than 1000 by 700 as that is what my client wants it.

I would advise your client against this, what a client wants isn’t always best and it is up to you to educate them.

Media queries would be the way forward here but these are still largely unsupported…

That doesn’t really give us enough to work with.:slight_smile:

If you have a three column layout that is 1000px wide what do you want it to be when it is less than 1000px? A 3 column layout but smaller!

Or do you want the dimensions of each column to be changed and all the content within re-organised? You can’t answer my question with a one line answer. We need more detailed information about your layout and it’s structure. How you want it to shrink and what happens to the content within when it’s a smaller size. There isn’t a one size fits all answer that we can give I’m afraid and it does depend on what you already have in place.

The easiest way to cater for different browser widths is to design the site within min and max constraints from the start so that it grows and shrinks with the browser window accordingly. Don’t set pixel widths but set fluid widths but also set min and max constraints to hold it together nicely.

You should be looking for an “elastic” site rather than a fixed one.