Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Assuming your primary external or inline stylesheet is loaded before the script, you can use this:</p> <pre><code>if (document.styleSheets.length){} // stylesheets are disabled </code></pre> <p><a href="https://developer.mozilla.org/en-US/docs/DOM/document.styleSheets" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/DOM/document.styleSheets</a></p> <p>It's IE5+ compatible too as per: <a href="http://www.jr.pl/www.quirksmode.org/dom/w3c_css.html" rel="nofollow noreferrer">http://www.jr.pl/www.quirksmode.org/dom/w3c_css.html</a></p> <p>The caveat is that, if styles are turned off after the window has loaded (which only causes a browser repaint), the document.styleSheets object won't change on the fly. Additionally, as noted in the comments below, this will not work for Firefox when using the View -> Page Style -> No Style feature, for which styles are still loaded, just not applied to the view.</p> <p>To detect the initial state across browsers, or changes on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize" rel="nofollow noreferrer">window.onresize</a>, it can be done with a <a href="https://stackoverflow.com/a/167541/1647538">style reset</a> on the body, with the following code placed <em>after</em> <code>&lt;body&gt;</code> or in a DOMContentLoaded event:</p> <pre><code>if (document.body.clientWidth !== document.documentElement.clientWidth) { // Styles are disabled or not applied } </code></pre> <p>This works if you use <code>body { margin: 0; }</code> in your stylesheets (with no particular custom width), because it makes the <code>body</code> element the same width as <code>documentElement</code> (a.k.a. the <code>&lt;hmtl&gt;</code> element) while styles are active.</p> <p>When styles are turned off or disabled, the <code>body.clientWidth</code> will revert to the browser's default body width, which always has a margin (<a href="http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm" rel="nofollow noreferrer">8px by default in CSS 2.1 major browsers</a> ) and therefore different from <code>documentElement.clientWidth</code>.</p> <p>Should your site design use a specific margin other than 8px for the body, here is an alternative option:</p> <pre><code>if (document.body.clientWidth === document.documentElement.clientWidth-16) { // user styles are disabled or not applied (IE8+ default browser style applies) } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload