How to check if a css rule exists


Tags: javascript,css,dom,cross-browser

Problem :

I need to check if a CSS rule exists because I want to issue some warnings if a CSS file is not included.

What is the best way of doing this?

I could filter through window.document.styleSheets.cssRules, but I'm not sure how cross-browser this is (plus I notice on Stack Overflow that object is null for styleSheet[0]).

I would also like to keep dependencies to a minimum.

Is there a straightforward way to do this? Do I just have to create matching elements and test the effects?

Edit: If not, what are the cross-browser concerns of checking window.document.styleSheets?



Solution :

Here is what I got that works. It's similar to the answers by @Smamatti and @jfriend00 but more fleshed out. I really wish there was a way to test for rules directly but oh well.

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();
});

    CSS Howto..

    Fullpage.js: How to add css class “active” to slide anchor

    jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)

    How to use jquery .css in a javascript variable

    How to change the opacity of image on hover using css

    How do I (by default) style different types of labels differently?

    How to add a centered div that fades-in from the top over my content?

    How to change the navbar position? CSS & HTML

    How to tell what in CSS files that is not used? [duplicate]

    Do I need to use float:clear to have content show where I want it to show?

    How does google do the barrel roll?

    How do I get a fixed positioned footer, fixed width right column, left column for the rest using CSS lay-out?

    How to submit data to another file as it is

    How to create a wrapper with different angles in CSS

    How to adjust height of the div base on contents? [duplicate]

    How to call a javascript function with a css button? [closed]

    How do you apply a fading overlay to an image in CSS?

    Show div when hover another div using only css

    How can I reduce ons-list-item height?

    How to use variable in CSS? [duplicate]

    Shows a dropdown element with jQuery

    Show a
  • line like is hovered
  • Javascript (shopping cart) showing up under other content?

    How to have video faded when paused - HTML

    How to apply css transformations on HTML elements using jQuery?

    How do I set two values for IE's `filter` property?

    How i can remove gap between Menu Box

    CSS selectors: how to make element hovering change wrapper's style

    CSS: How to get rid of scroll (except when there's additional content)?

    Shadow DOM: how to apply CSS style only if the host element is ?

    How do I get the height to the full page height?