January 3, 2020 by Dani

Want to conditionally load CSS for responsive layout

I'm trying to use CSS as so:

<link rel="stylesheet" media="screen and (max-width: 991.98px)" href="/files/mobile_css/daniweb.css" type="text/css">
<link rel="stylesheet" media="screen and (min-width: 992px)" href="/files/css/daniweb.css" type="text/css">

I want to load one CSS file for our mobile layout and a different one for our desktop layout. The problem is the web browser always downloads both files, which completely eliminates the performance advantages of having a more lightweight mobile CSS.

What I'm thinking of doing is using a <link rel> to download all of the CSS that's common between mobile and desktop. Then, conditionally, via javascript, injecting CSS via @import (I guess?) to load the additional CSS that the desktop requires. Pretty obnoxious, no? Is there a better way? And why aren't web browsers smarter here?

The Scale, Speed, and Spend of Low Code: Benefits and Challenges of Low-Code Platforms
No categories
Editor's Note: The following is an article written for and published in DZone's 2024 Trend Report, Low-Code Development: Elevating the Engineering Experience With Low and No Code. The relevance of low-code development is growing as businesses see... […]
Empowering Citizen Developers With Low- and No-Code Tools: Changing Developer Workflows and Empowering Non-Technical Employees to Build Apps
No categories
Editor's Note: The following is an article written for and published in DZone's 2024 Trend Report, Low-Code Development: Elevating the Engineering Experience With Low and No Code. The rise of low-code and no-code (LCNC) platforms has sparked a de... […]
PostgreSQL BiDirectional Replication
No categories
As you can understand from my previous blogs I am really into PostgreSQL. Previously we ran Debezium in Embedded mode. Behind the scenes, Debezium consumes the changes that were committed to the transaction log. This happens by utilizing the logical de... […]
Twenty Things Every Java Software Architect Should Know
No categories
As the software development landscape continues to evolve at a rapid pace, Java stands out as a foundational language that drives a multitude of applications on a global scale. In 2024, the role of a Java software architect has assumed unprecedented si... […]
How To Plan a (Successful) MuleSoft VPN Migration (Part II)
No categories
In this second post, we'll be reviewing more topics that you should take into consideration if you're planning a VPN migration. If you missed the first part, you can start from there. […]