Styjun

Folder comparison

Fuse symbol on toroidal transformer

Some numbers are more equivalent than others

Can we have a perfect cadence in a minor key?

Should I install hardwood flooring or cabinets first?

Is Asuka Langley-Soryu disgusted by Shinji?

Proving a function is onto where f(x)=|x|.

Should spaces be used when writing foreign names in katakana?

How to decide convergence of Integrals

Why do IPv6 unique local addresses have to have a /48 prefix?

Can a significant change in incentives void an employment contract?

Should I stop contributing to retirement accounts?

Can someone explain how this makes sense electrically?

When quoting, must I also copy hyphens used to divide words that continue on the next line?

Why does Async/Await work properly when the loop is inside the async function and not the other way around?

Can the Supreme Court overturn an impeachment?

Engineer refusing to file/disclose patents

Can somebody explain Brexit in a few child-proof sentences?

How should I respond when I lied about my education and the company finds out through background check?

Varistor? Purpose and principle

Drawing a topological "handle" with Tikz

Why did the HMS Bounty go back to a time when whales are already rare?

Is camera lens focus an exact point or a range?

Two-sided logarithm inequality

loading conditional stylesheet using link media attribute failed

Are LINKed stylesheets out of the specified media even loaded?Specific media queries for target mobile (first), tablet & desktop@media queries, Max-device-width and desktop browsersElement link is missing required attribute propertymedia screen and min-width 600px not workinghtaccess redirect in subdomainAre LINKed stylesheets out of the specified media even loaded?Difference Between HTML LINK Media and CSS Media QueriesCannot display HTML stringMedia Queries to load resource?CSS Media Queries regarding max-width property to make 1024px size for Tablet and Desktop

0

i want to load/fetch style-mw-1024.css file when the device or browser is in width less than 1024.

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/style-mw-1024.css" />

But even when load in desktop greater than 1024 width, in network i am able to see style-mw-1024.css file is fetched.

How to prevent that file gets loaded in greater than 1024 width so that it loads only on media attribute conditions ?

html css media-queries

share|improve this question

edited Mar 21 at 13:46

BoltClock♦

527k13011681204

asked Mar 21 at 13:41

ArunArun

104115

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  It is always loaded, only applied when your media query is met (what would happen if someone resized their screen up and down if it was not always loaded - it would have to keep reloading it everytime you went in and out of the query). Why not just put the media queries at the end of your main stylesheet? One less http request so speed up your page. If you only want it to download when your media query is met, then you will need to dynamically load it with js, wouldn't recommend this though as you will get FOUC
  
  – Pete
  Mar 21 at 13:42
  
  

  
  
  
  

add a comment | 

0

i want to load/fetch style-mw-1024.css file when the device or browser is in width less than 1024.

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/style-mw-1024.css" />

But even when load in desktop greater than 1024 width, in network i am able to see style-mw-1024.css file is fetched.

How to prevent that file gets loaded in greater than 1024 width so that it loads only on media attribute conditions ?

html css media-queries

share|improve this question

edited Mar 21 at 13:46

BoltClock♦

527k13011681204

asked Mar 21 at 13:41

ArunArun

104115

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  It is always loaded, only applied when your media query is met (what would happen if someone resized their screen up and down if it was not always loaded - it would have to keep reloading it everytime you went in and out of the query). Why not just put the media queries at the end of your main stylesheet? One less http request so speed up your page. If you only want it to download when your media query is met, then you will need to dynamically load it with js, wouldn't recommend this though as you will get FOUC
  
  – Pete
  Mar 21 at 13:42
  
  

  
  
  
  

add a comment | 

i want to load/fetch style-mw-1024.css file when the device or browser is in width less than 1024.

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/style-mw-1024.css" />

But even when load in desktop greater than 1024 width, in network i am able to see style-mw-1024.css file is fetched.

How to prevent that file gets loaded in greater than 1024 width so that it loads only on media attribute conditions ?

html css media-queries

share|improve this question

edited Mar 21 at 13:46

BoltClock♦

527k13011681204

asked Mar 21 at 13:41

ArunArun

104115

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/style-mw-1024.css" />

share|improve this question

edited Mar 21 at 13:46

BoltClock♦

527k13011681204

asked Mar 21 at 13:41

ArunArun

104115

share|improve this question

edited Mar 21 at 13:46

BoltClock♦

527k13011681204

asked Mar 21 at 13:41

ArunArun

104115

edited Mar 21 at 13:46

BoltClock♦

527k13011681204

edited Mar 21 at 13:46

BoltClock♦

527k13011681204

asked Mar 21 at 13:41

ArunArun

104115

asked Mar 21 at 13:41

ArunArun

104115

2 Answers
2

active

oldest

votes

1

You cannot do that with the media attribute in markup. From my answer to another question:

A browser can't assume that it will never match a media query, so it has to load the stylesheet in case it ever does match the media query and has to use the stylesheet as a result. This eliminates any network latency associated with lazy-loading that would cause a problem similar to FOUC, where the content doesn't look right for a fraction of a second (or, if the connection gets really spotty, several seconds) as the browser waits for the stylesheet to be loaded before it can be used.

You can work around this by moving the media query to a JavaScript window.matchMedia() call and adding the stylesheet to your page when the media query is matched, but this means the stylesheet will require JavaScript to work.

share|improve this answer

edited Mar 21 at 13:55

answered Mar 21 at 13:46

BoltClock♦BoltClock

527k13011681204

add a comment | 

1

Implement a declarative fetch request on the rel="" attribute with a value of preload. Read Mozilla docs for a detailed explanation.

share|improve this answer

answered Mar 21 at 14:33

Mister MoodyMister Moody

60110

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55281772%2floading-conditional-stylesheet-using-link-media-attribute-failed%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You cannot do that with the media attribute in markup. From my answer to another question:

A browser can't assume that it will never match a media query, so it has to load the stylesheet in case it ever does match the media query and has to use the stylesheet as a result. This eliminates any network latency associated with lazy-loading that would cause a problem similar to FOUC, where the content doesn't look right for a fraction of a second (or, if the connection gets really spotty, several seconds) as the browser waits for the stylesheet to be loaded before it can be used.

You can work around this by moving the media query to a JavaScript window.matchMedia() call and adding the stylesheet to your page when the media query is matched, but this means the stylesheet will require JavaScript to work.

share|improve this answer

edited Mar 21 at 13:55

answered Mar 21 at 13:46

BoltClock♦BoltClock

527k13011681204

add a comment | 

1

You cannot do that with the media attribute in markup. From my answer to another question:

A browser can't assume that it will never match a media query, so it has to load the stylesheet in case it ever does match the media query and has to use the stylesheet as a result. This eliminates any network latency associated with lazy-loading that would cause a problem similar to FOUC, where the content doesn't look right for a fraction of a second (or, if the connection gets really spotty, several seconds) as the browser waits for the stylesheet to be loaded before it can be used.

You can work around this by moving the media query to a JavaScript window.matchMedia() call and adding the stylesheet to your page when the media query is matched, but this means the stylesheet will require JavaScript to work.

share|improve this answer

edited Mar 21 at 13:55

answered Mar 21 at 13:46

BoltClock♦BoltClock

527k13011681204

add a comment | 

You cannot do that with the media attribute in markup. From my answer to another question:

A browser can't assume that it will never match a media query, so it has to load the stylesheet in case it ever does match the media query and has to use the stylesheet as a result. This eliminates any network latency associated with lazy-loading that would cause a problem similar to FOUC, where the content doesn't look right for a fraction of a second (or, if the connection gets really spotty, several seconds) as the browser waits for the stylesheet to be loaded before it can be used.

You can work around this by moving the media query to a JavaScript window.matchMedia() call and adding the stylesheet to your page when the media query is matched, but this means the stylesheet will require JavaScript to work.

share|improve this answer

edited Mar 21 at 13:55

answered Mar 21 at 13:46

BoltClock♦BoltClock

527k13011681204

share|improve this answer

edited Mar 21 at 13:55

answered Mar 21 at 13:46

BoltClock♦BoltClock

527k13011681204

answered Mar 21 at 13:46

BoltClock♦BoltClock

527k13011681204

answered Mar 21 at 13:46

BoltClock♦BoltClock

527k13011681204

1

Implement a declarative fetch request on the rel="" attribute with a value of preload. Read Mozilla docs for a detailed explanation.

share|improve this answer

answered Mar 21 at 14:33

Mister MoodyMister Moody

60110

add a comment | 

1

Implement a declarative fetch request on the rel="" attribute with a value of preload. Read Mozilla docs for a detailed explanation.

share|improve this answer

answered Mar 21 at 14:33

Mister MoodyMister Moody

60110

add a comment | 

Implement a declarative fetch request on the rel="" attribute with a value of preload. Read Mozilla docs for a detailed explanation.

share|improve this answer

answered Mar 21 at 14:33

Mister MoodyMister Moody

60110

share|improve this answer

answered Mar 21 at 14:33

Mister MoodyMister Moody

60110

answered Mar 21 at 14:33

Mister MoodyMister Moody

60110

answered Mar 21 at 14:33

Mister MoodyMister Moody

60110