Способ включить или отключить медиа-запрос в браузерах, который также работает в Safari

Question

Если у вас есть несколько медиазапросов на странице, вы можете установить conditionText правила, чтобы включить или отключить правило:

// enables a rule
document.styleSheets[2].rules[0].conditionText= "(min-width: 0px)";

// disables a rule
document.styleSheets[2].rules[0].conditionText= "(min-width: 99999px)";

Это работает во всех основных браузерах, за исключением, как я только что выяснил,для сафари.

Есть ли другой способ включить или отключить правило медиа-запроса?

Примечание. Использование приведенного выше кода включает и отключает медиазапрос, говоря: «Если браузер имеет ширину не менее 0 пикселей, то включите этот запрос» и «Если браузер не имеет ширину 99999 пикселей, не включайте эти стили»,Я не смог найти свойство включения или отключения.

Answer 1

Это похоже на работу.Необходимо провести еще несколько тестов:

var inclusionQuery = "(min-width: 0px)";
var exclusionQuery = "noDeviceIsEverNamedThis and (min-width: 99999px)";

function enableMediaQuery(rule) {

    try {
        rule.media.mediaText = inclusionQuery;
    }
    catch(error) {
        rule.conditionText = inclusionQuery;
    }
}

function disableMediaQuery(rule) {

    try {
        rule.media.mediaText = exclusionQuery;
    }
    catch(error) {
        rule.conditionText = exclusionQuery;
    }
}

Добавлено исключение несуществующего устройства из @ DavidThomas.

В более ранних тестах mediaText или связанное свойство было только для чтения, но, похоже, оно в Safari.,Обновлю ответ.