jQuery Tips: Switch style sheet by browser width

In these days of mobile friendliness and responsive design, our websites have to actively change the way they present themselves depending on the width of the visitor’s browser. While a website can offer a widescreen view on a desktop screen, it will have to be vertically oriented on a mobile phone screen. In this tutorial, […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

In these days of mobile friendliness and responsive design, our websites have to actively change the way they present themselves depending on the width of the visitor’s browser. While a website can offer a widescreen view on a desktop screen, it will have to be vertically oriented on a mobile phone screen. In this tutorial, we’ll explore how you can use jQuery to load a different style sheet with CSS rules that apply to the current browser width.

There are various ways to do responsive design: it can be done in pure CSS using media queries, or it can be done through JavaScript. In this article we’ll show three JavaScript approaches.

First, we’ll write a function that finds the width of the browser and calls toggleWideScreen  (to be defined), which will receive a value of true  if the browser is equal or more than 960 pixels:

We’ll call getBrowserWidth  immediately after the page is loaded, and also whenever the browser window is resized. To do so, we add the following code just before the closing </body>  tag:

We can now define the toggleWideScreen  function, and we’ll show three ways to do so.

1. Changing the body element class

By changing the class of the body element, we can cause all elements within the body to use different CSS rules, as long as we prefix all those CSS rules with the class on the body element. That is, we could have a style sheet like this:

Normally, the elements with the .photo  class will be 300px wide, but if the class of the body element is set to large , then they’ll be 960px wide. Here’s how we can use jQuery to set a class on the body element (removing any class that it has first):

If your style sheets do not contain many browser width-specific rules, this solution may be sufficient.

2. Change the link to a style sheet

Another approach to changing the appearance of your web page depending on the width of the browser is by switching the style sheet file that it uses. The style sheets in your web page should be referenced like this:

Notice that this <link>  element has an ID of #css  so that we can refer to it. We can now actually use jQuery to point this link to another file depending on the browser width:

Changing the href  attribute of the <link>  element will cause the browser to fetch a new style sheet file from the server. The new style will be applied as soon as the style sheet is loaded. Depending on how long loading takes, it might take a few moments for the new CSS rules to be applied. It’s a good idea to place all rules that depend on browser width in two separate style sheets (for example, wide.css and narrow.css), while keeping all unchanging rules in a separate sheet which is always loaded.

3. Enabling style sheets  as needed

The disadvantage of the previous approach is a delay caused by the browser fetching a new style sheet from the server. Although this delay only happens the first time a style sheet is loaded, after which  remains in the cache, it would be better to preload the style sheets that we need. This can be done by adding a <link>  element for each style sheet, but setting the inactive one to disabled.

You can load all the style sheet you need like this:

By default, this code loads both the wide and narrow style sheets, but the sheet with rules for small screens is disabled and marked as an alternate stylesheet. You can use jQuery to add and remove the disable attribute as necessary:

Switching from wide to narrow view and back now takes no time at all, since the required style sheets are already loaded when the page is first loaded.

Save

Save

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">