All geek questions in one place

Why does the browser ignore CSS import on media request and load the stylesheet?

I have this simple import of a stylesheet with a media query condition:

<style>@import url(/red.css) (min-width:400px) and (max-width:599px);</style>

I assumed that the browser would not use or even load the stylesheet. However, the stylesheet is loading (checked in Chrome). So I want to ask if there is a simple pure-CSS way how to make browsers not cover the media request to ignore and prevent the loading of the stylesheet.

Thanks for any help.

EDIT: I will re-formulate my question. Can I use CSS3 to specify a stylesheet that should be loaded by the browser depending on the conditions of the media request (viewport width)?

+6
source share
1 answer

As already mentioned by @BoltClock and @Wesley Murch , the browser will load CSS even if it cannot support or even not use it at that time, because it needs to be prepared by the time it can do it.

So, if you really do not want to load the CSS file until something happens, you can try to check when the page loads, if certain conditions are met, and if so, then you can do "lazy loading" and save the commented code (element of type 8, which in this case will be the tag tag ) inside the newly created child element of the style tag, and this will cause the browser to check the newly created content and load the CSS file for the style to work.

Any question that you may encounter when trying to implement it, do not hesitate to ask for any clarifications, maybe I can help you with your problem.

UPDATE: I already tested it, and IT WORKS: D, so you can use this code to run, hoping it helps

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TEST CODE</title> <script type="text/javascript"> function test(){ var elems = document.body.childNodes; alert(elems); for (var i = 0, il = elems.length; i < il; i++) { var el = elems[i]; alert(el.nodeType); if (el.nodeType == 8) { var style = document.createElement('style'); style.innerHTML = el.nodeValue; document.getElementById("css").appendChild(style); break; } } } </script > <style id="css"> </style> </head> <body onload="test()"> < !--@import url(red.css) (min-width:400px) and (max-width:599px);--> </body> </html>

Note: I have not tried this in a style tag, just in images and similar materials, but I am sure (I tried) that if you comment on your style tag, the browser does not load the CSS file, so maybe this is the way to go to accomplish what you want.

+2
source

Source: https://habr.com/ru/post/904689/

More articles:


All Articles