0

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.

Improve this question
11
  • 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 Commented Sep 13, 2017 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 stackoverflow.com/questions/574944/… Commented Sep 13, 2017 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. Commented Sep 13, 2017 at 18:59
  • @clearshot66 Would love to use PHP but in this scenario there is ZERO access to server side for anything at all... Commented Sep 13, 2017 at 19:00
  • @HisPowerLevelIsOver9000 If you are unable to edit the html page how are you able to add javascript? Commented Sep 13, 2017 at 19:00

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

3 Comments

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.
that's not necessarily true. If you load load jQuery in the <head> and run that script immediately afterwards, it would work before the load event fired.
I guess that's true, yes

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.