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.
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:
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
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:
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 sheets 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.