Почему браузер игнорирует импорт CSS по медиа-запросу и загружает таблицу стилей? - PullRequest
Новая
       3

Почему браузер игнорирует импорт CSS по медиа-запросу и загружает таблицу стилей?

6 голосов
/ 29 декабря 2011

У меня есть простой импорт таблицы стилей с условием медиа-запроса: 

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

Я предполагал, что браузер не будет использовать и даже не загружать таблицу стилей. Однако таблица стилей загружается (тестируется в Chrome). Поэтому я хочу спросить, есть ли простой способ с использованием чистого CSS, как сделать так, чтобы браузеры не охватывались медиа-запросами, чтобы они игнорировали и запрещали им загружать таблицу стилей.

Спасибо за любую помощь.

РЕДАКТИРОВАТЬ: я перефразирую свой вопрос. Можно ли с помощью CSS3 указать таблицу стилей, которая должна загружаться браузером в зависимости от условия медиа-запроса (ширина области просмотра)?

1 Ответ

2 голосов
/ 16 августа 2012

Так же, как уже упоминалось @ BoltClock и @ Wesley Murch , браузер загрузит CSS, даже если он не поддерживает или даже не собирается использовать его при этом. время, потому что он должен быть готов к тому времени, когда он сможет это сделать.

Так что, если вы действительно не хотите загружать файл CSS, пока что-то не произойдет, вы можете попытаться проверить, загружается ли страница, если определенные условия выполняются, и если да, то вы можете сделать " отложенная загрузка " и сохранение закомментированного кода ( элемент типа 8 , который в данном случае будет вашим тегом стиля ) внутри вновь созданного дочернего тега стиля, и это заставит браузер проверять вновь созданный контент и загрузит файл CSS для работы стиля.

Любой вопрос, с которым вы можете столкнуться, пытаясь реализовать его, не стесняйтесь задавать некоторые разъяснения, возможно, я смогу помочь вам с вашей проблемой.

UPDATE: Я уже проверил это, и ЭТО РАБОТАЕТ: D, так что вы можете использовать этот код для запуска, надеюсь, это поможет 

<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>

Примечание: Я не пробовал это для тега стиля, просто для изображений и тому подобного, но я уверен (я пробовал), что если вы прокомментируете свой тег стиля, браузер не загрузит файл CSS, так что, возможно, это способ иди, чтобы выполнить то, что вы хотите.

...