How to check if css rule exists

Question

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

What is the best way to do this?

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

I would also like to keep dependencies to a minimum.

Is there an easy way to do this? Do I just need to create the appropriate elements and test the effects?

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

Answer 1

Here is what I got, what works. It is similar to the answers of @Smamatti and @ jfriend00, but more closely. I really want a way to check the rules directly, but 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(); }); 

Answer 2

I don’t know if this is an option for you, but if this is the one file you want to check, you can write your error message and switch the style to hide it in this file.

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

CSS file:

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

Answer 3

I am testing the correct CSS installation using javascript.

I have a CSS rule in my stylesheet that sets a specific id to position: absolute.

 #testObject {position: absolute;} 

Then I programmatically create a temporary div with visibility: hidden with this identifier and getting the computed style position. If it is not absolute , then the required CSS is not installed.

---

If you cannot put your rule in the stylesheet, you can define one or more rules that you think are representative of the stylesheet and are unlikely to change, and design a temporary object that should receive these rules and check for their existence in this way.

Or finally, you can try to list all the external style sheets and find the specific file name that is included.

The point here is that if you want to see if an external stylesheet is enabled, you need to choose something about this stylesheet that you can look for (a file name or some rule in it or some effect that it causes).

Answer 4

I would use a css selector similar to this from a jquery widget.

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

If you return the result, it means that there is a link element that has a href ending in "my-app.css"

Then use this function to check for a specific css property on the element you are in. I would suggest something specific for you styles, such as the width of the container, and not something like -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; } 

Like this

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

or

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

Answer 5

If you are concerned that you cannot edit other people's stylesheets, you can proxy them through your own stylesheets using import

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

This is enough if you just want to find out if your code is trying to load a stylesheet, but it won’t help if you need to know if someone else’s stylesheet has loaded correctly.