Я использовал несколько библиотек (включая мой собственный) для динамической загрузки активов на основе медиа-запросов, которые я описал в файлах CSS. Например:
В CSS:
@media screen and (max-width: 480px) {
.foo {
display: none;
}
}
И, используя загрузчик ресурсов; require.js, modernizr.js и т.д. или используя window.matchMedia
и связанные с ним функции addListener()
:
if (function("screen and (max-width: 480px)")){
// Load several files
load(['mobile.js','mobile.css']);
}
Объявление их дважды неудобно/глупо, и, насколько я могу найти, все вспомогательные библиотеки JS и загрузчики ресурсов требуют повторения медиа-запросов, а не поиска их программно из JS/DOM.
Итак, я изучал возможность доступа к значениям программно с помощью document.stylesheets
, но я не уверен, что они доступны, и кажется, что очень мало документации, чтобы предположить, что они есть.
Самое длинное, что у меня есть, ищет CSSMediaRule
и используя console.dir(document.stylesheets)
среди других, чтобы изучить объект таблицы стилей.
Но никаких ссылок не делается (в пределах document.stylesheets
) на фактические правила медиа-запросов, используемые в CSS - только классы, которые будут применяться в результате медиа-запросов... Что я пытаюсь найти, программно, является:
"и (максимальная ширина: 480 пикселей)"
Есть ли способ доступа к таким запросам CSS через JavaScript/DOM?