Javascript: MutationObserver / обнаружение глобальных изменений правил таблицы стилей

Question

Последние несколько дней я застрял, пытаясь найти способ обнаружить / вызвать глобальное событие изменения CSS. Да, глобальный (т.е. не тот, который установлен самим элементом (например, style="background:red;"), но задан в отдельном файле .css).

Я пытался использовать MutationObserver (как мой ловец событий / экземпляр), но этот экземпляр, похоже, не отвечает моим требованиям. Вместо этого наиболее логичным способом (насколько мне известно) было бы сохранение всех CSS-правил (целевого файла) и установка интервала, который будет проверять наличие обновлений (сравнивать сохраненный список) каждые x секунд. Но, конечно, это не будет такой хорошей практикой, поскольку это пустая трата памяти.

Какие-либо предложения? Они были бы оценены много!

Answer 1

Я нашел эту функцию очень полезной. Но я не уверен, что это сработает так, как вы этого хотите.

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

Возвращает одно правило, например: body{color:red;}

document.styleSheets[0].cssRules[0].cssText;

или это вернет все прикрепленные таблицы стилей.

var allCSS = 
    [].slice.call(document.styleSheets)
    .reduce(function (prev, styleSheet) {
        if (styleSheet.cssRules) {
            return prev +
                [].slice.call(styleSheet.cssRules)
                    .reduce(function (prev, cssRule) {
                        return prev + cssRule.cssText;
                    }, '');
        } else {
            return prev;
        }
    }, '');