Как проверить, существует ли правило CSS

Question

Мне нужно проверить, существует ли правило CSS, потому что я хочу выдать несколько предупреждений, если файл CSS не включен.

Каков наилучший способ сделать это?

Я мог бы отфильтровать через window.document.styleSheets.cssRules, но я не уверен, насколько это кросс-браузер (плюс я замечаю, что при переполнении стека объект является нулевым для styleSheet[0]).

Я также хотел бы свести к минимуму зависимости.

Есть ли прямой способ сделать это? Нужно ли создавать соответствующие элементы и тестировать эффекты?

Редактировать: Если нет, то какие кросс-браузерные проблемы проверки window.document.styleSheets?

Answer 1

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

<span class="include_error">Error: CSS was not included!</span>

CSS-файл:

.include_error {
    display: none;
    visibility: hidden;
}

Answer 2

Я проверяю правильность установки CSS с использованием JavaScript.

В моей таблице стилей есть правило CSS, которое устанавливает конкретный идентификатор в положение: абсолютное.

#testObject {position: absolute;}

Затем я программно создаю временный div с видимостью: скрытый с этим идентификатором, и получаю вычисленную позицию стиля. Если это не absolute, то нужный CSS не установлен.

---

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

Или, наконец, вы можете попробовать перечислить все внешние таблицы стилей и найти конкретное имя файла, которое включено.

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

Answer 3

Я бы использовал селектор CSS, как это из вашего виджета jquery.

$('link[href$="my-app.css"]')

Если вы получите результат обратно, это означает, что есть элемент ссылки, имеющий ссылку, заканчивающуюся на «my-app.css»

Далее используйте эту функцию для проверки определенного CSSсвойство элемента, от которого вы зависите.Я бы предложил что-то специфическое для вас, например, ширину контейнера, а не случайное, например -9999 zindex

var getStyle = function(el, styleProp) {
    var x = !!el.nodeType ? el : document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
    return y;
}

Как это

getStyle($('#stats-container')[0], "width") 

или

getStyle("stats-container", "width")

Answer 4

Вот то, что я получил, это работает. Это похоже на ответы @Smamatti и @ jfriend00, но более конкретизировано. Мне бы очень хотелось, чтобы был способ проверить правила напрямую, ну да ладно.

CSS:

.my-css-loaded-marker { 
  z-index: -98256; /*just a random number*/
}

JS:

$(function () { //Must run on jq ready or $('body') might not exist

    var dummyElement = $('<p>')
                  .hide().css({height: 0, width: 0})
                  .addClass("my-css-loaded-marker")
                  .appendTo("body");  //Works without this on firefox for some reason

    if (dummyElement.css("z-index") != -98256 && console && console.error) {
        console.error("Could not find my-app.css styles. Application requires my-app.css to be loaded in order to function properly");
    }
    dummyElement.remove();
});

Answer 5

Если вас беспокоит невозможность редактирования таблиц стилей других людей, вы можете проксировать их через собственную таблицу стилей, используя import

@import url('http://his-stylesheet.css');
.hideErrorMessage{ ... }

Этого достаточно, если вы просто хотите узнать, пытается ли ваш код загрузить таблицу стилей, но это не поможет, если вам нужно знать, правильно ли загружалась внешняя таблица стилей.