Debut Theme - If JavaScript is turned off, the stylesheet is not applied

Solved
Highlighted
Shopify Partner
20 2 3

I was playing around to see what my theme (Debut 17.6.1) would look like if JavaScript is disabled in the browser. All I got was the header and a white background where the body content should be.

Looking at theme.liquid, I see the following style rules in the head:

 

 

<style>
.main-content{opacity:0}.main-content .shopify-section{display:none}
</style>

 

 

 

Below these style rules is the following:

 

 

<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" type="text/css" media="print" onload="this.media='all';onLoadStylesheet()">
  

 

 

 

But if a customer has JavaScript disabled, then the media attribute won't be changed from "print" to "all" which means the browser won't apply the theme.css to the page. Inside theme.css are the rules that would change the opacity from 0 to 1:

 

 

.main-content {
  opacity: 1; }

.main-content .shopify-section {
  display: inherit; }

 

 

 

Isn't this a bit of an oversight on Shopify's part or am I missing something here?

 

0 Likes
Highlighted
Shopify Partner
20 2 3

This is an accepted solution.

I ended up adding the following underneath:

<noscript>
  <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" type="text/css" media="all">
</noscript>

 

0 Likes