Prevent CSS from loading at all

Question

I've got a site where the platform that the HTML and CSS is built upon is on complete lock down. I get zero access to the application/server layer.

There are a few CSS files that get served by the platform and I've stripped them out with a little jquery

$(document).ready(function() {  
     $('link[rel=stylesheet][href*="UserGlobal"]').remove();
});

While this does work and prevents the "UserGlobal" stylesheet from having any impact on my page presentation it does still get loaded.

My question is, in the absence of access to the application layer/server side of things is there a way to prevent a CSS file from being delivered to the browser in the first place?

My gut tells me no - but I'd be interested in hearing if anyone has come across something similar and solved it.

Via php maybe... You'd need to parse the page, remove that stylesheet then resupply the page. JS is front end so it wouldn't work like that — clearshot66, Sep 13 '17 at 18:53
remove style sheet from html page and when you wish to include it use the following from the answer in this question https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript — David Lee, Sep 13 '17 at 18:58
@DavidLee I appreciate the response. If it was as simple as removing it from the HTML page I would have. I physically have no way of getting to the place that serves the file right now to tell it not to, which is the source of the issue. — HisPowerLevelIsOver9000, Sep 13 '17 at 18:59
@clearshot66 Would love to use PHP but in this scenario there is ZERO access to server side for anything at all... — HisPowerLevelIsOver9000, Sep 13 '17 at 19:00
@HisPowerLevelIsOver9000 If you are unable to edit the html page how are you able to add javascript? — David Lee, Sep 13 '17 at 19:00
@DavidLee it's a weird platform...imagine you had a wordpress site where the theme was already applied and you had no way of touching it. Sure you can add HTML content and include external JS/CSS but there is no way to get my hands on that predefined theme that encapsulates everything whether i like it or not — HisPowerLevelIsOver9000, Sep 13 '17 at 19:02
If you have no way of touching the html or using php there is NO way to remove a script/style sheet import. — clearshot66, Sep 13 '17 at 19:03
@clearshot66 thats what I suspected...was just hoping maybe I was overlooking that something that might be able to do it. Thanks for the time and responses! — HisPowerLevelIsOver9000, Sep 13 '17 at 19:04
Haven't tested this as I have never had this particular requirement, but I was able to locate this from google http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript/ — David Lee, Sep 13 '17 at 19:05
After looking into a few articles I think you need to disable to css style first? Try adding `$('link[href="UserGlobal.css"]').prop('disabled', true);` before you remove it. — David Lee, Sep 13 '17 at 19:09
@DavidLee While that will likely disable the stylesheet, it will not prevent the browser from loading it. — Raphael Rafatpanah, Sep 13 '17 at 20:35

score 1 · Answer 1 · answered Sep 13 '17 at 20:29

Using only JavaScript, there is no way to prevent a CSS file from being loaded by the browser if the CSS is already included (either with <link> or <style> tags) on the HTML page.

You'll need some way to alter the web server's HTTP Response (i.e. remove the CSS) if you want to prevent the browser from loading it.

score 0 · Answer 2 · answered Sep 13 '17 at 21:19

Well, it depends how much you're willing to get away from the normal way of doing things. If your primary concern is to avoid downloading unnecessary assets, you can dynamically inject <link>s into your page after determining whether or not you need a certain stylesheet. Here's a page that describes how to create <link>s using plain javascript and how to insert them into the DOM:

https://www.giftofspeed.com/defer-loading-css/

Also, keep in mind, you don't NEED document.ready() if it's occurring too late for you. Just as an example, this plain js snippet can be inserted anywhere into a page and will run immediately -- before the DOM is ready:

<script>    
  var links = document.getElementsByTagName("link");
  links[0].parentNode.removeChild(links[0]);
</script>

I've tested it, and it doesn't prevent the external CSS file from downloading, but it's unclear to me whether the downloaded file is actually being parsed and "loaded" into the browser. Nonetheless, the technique where you dynamcally inject <link>s should definitely work if you need to use it.

Note: You must use document.ready() with jquery, since jquery is often a separate file that needs to be loaded. Plain JS is native and snippets of it can be run at anytime you need it -- no waiting required. — Ringo, Sep 13 '17 at 21:25
that's not necessarily true. If you load load jQuery in the `` and run that script immediately afterwards, it would work before the `load` event fired. — Raphael Rafatpanah, Sep 13 '17 at 21:37

Prevent CSS from loading at all

2 Answers2