Conditionally loading CSS or any resource using media queries
Unless you’re using something like Tailwind CSS, the stylesheet files are one of the most expensive resources that your application is loading.
Preface
Essentially, you would use the <link> element to link to your website’s stylesheets. Here’s an example.
<link href="/styles/app.css" rel="stylesheet">
As you can tell, the <link> element accepts a few of the attributes here. Mainly the href attribute is used to provide the path to the stylesheet that the document intends to load and the rel attribute is used to denote the “relationship” between the element and the containing document.
Here, in this case, the rel is “stylesheet” which means the resource specified will be treated as a stylesheet by the document.
Now, this works perfectly fine but consider a scenario where down the road, your application grew significantly and at this point, you want to segregate this “monolith” stylesheet into smaller chunks. For instance, you would divide the stylesheet into mobile.css and tablet.css to place the device-specific CSS in there and load them like so.
<link href="/styles/app.css" rel="stylesheet">
<link href="/styles/mobile.css" rel="stylesheet">
<link href="/styles/tablet.css" rel="stylesheet">
Okay so, we segregated the CSS to device-specific chunks and now we only want to load these stylesheets based on the device the application is being loaded. How do you do it? Well, that’s where another attribute called media comes into the picture.
The media attribute
The <link> element also accepts a media attribute. The purpose of this attribute is to add some sort of condition to the loading of the stylesheet by providing a media type or query to it.
So, for instance, if we only want to load the /styles/mobile.css and /styles/tablet.css files on their respective viewports, here’s how we can do it.
<link href="/styles/app.css" rel="stylesheet">
<link
href="/styles/mobile.css"
rel="stylesheet"
media="screen and (max-width: 640px)"
>
<link
href="/styles/tablet.css"
rel="stylesheet"
media="screen and (max-width: 879px)"
>
Now, the resources will then only be loaded if the media condition is true. As you can tell, this can improve the performance of your app significantly since the browser will only load the stylesheets based on the matched conditions instead of loading everything all at once.
Loading printer-specific CSS
If you have styles that target special devices such as printers, you can load the respective stylesheet file for that using the media attribute like so.
<link
href="/styles/print.css"
rel="stylesheet"
media="print"
>
Loading CSS based on dark/light mode
If your application has got a dark mode and there are dark mode specific stylesheets, you can control that using the media elements as well.
<link href="/styles/app.css" rel="stylesheet">
<link
href="/styles/dark.css"
rel="stylesheet"
media="(prefers-color-scheme: dark)"
>
As you can tell, in this case, we can use the prefers-color-scheme media feature to conditionally load /styles/dark.css when the dark mode is enabled.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
