Menu
I have a web page using Twitter Bootstrap. It works well in Chrome, Firefox, and Safari. However, when I try to view it in Edge on Windows 10, I get a bunch of 403 errors saying it failed to load a slew of .less files from the Bootstrap CDN. Why are .less files being requested if the browser can't do anything with them? I am not using LESS at all, just plain CSS3, which is rendering just fine. How do I make this stop?
265
The simple answer is that anything you add to a website will slow it down. Bootstrap contains large css files which all need to be downloaded to the users' device, potentially slowing down the initial page views.
It is important to state that all Bootstrap plugins can be used purely through the markup API, without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using plugins.
We can check Bootstrap-specific method is available or not. Syntax: var bootstrap = (typeof $(). "Bootstrap-specific method" == 'function');
The main purpose of map file is used to link the css source code to less source code in the chrome dev tool. As we used to do . If we inspect the element in the chrome dev tool. you can see the source code of css. But if include the map file in the page with bootstrap css file.
The good news is this won't be affecting regular users of the site. The bad news is this is also happening in Chrome to some extent, it's just that the network tab in Chrome isn't reporting the 403 errors.
In the CSS file that you link to there is a line at the bottom of the file:
/*# sourceMappingURL=bootstrap.min.css.map */ This is the source maps and gives links to all the source files used to generate the minified CSS that is in your browser.
In the bootstrap instance the CDN is pointing to files that do not exist such as http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/scaffolding.less
The source map file will only be downloaded if you have source maps enabled and your dev tools open. Edge defaults source maps on and as far as I can tell there is no way to switch them off (but remember this will only happen when the dev tools are open, I have confirmed this behaviour using Fiddler), so when you press f12 then it's going to try and fetch the source mapped files. Chrome works slightly differently, it will download the source map but then will not attempt to download the .less file until you navigate to the source file.
If one of the .less files is returning a 403 Forbidden response Edge reports this in the network tab. Chrome dosen't.
If you use http debugger such as Fiddler you will see that Chrome does indeed request the files and also gets a 403 response, however, it doesn't report it on the network tab. When using Fiddler to get past the https issue I changed the CSS file to point to the non https URL. e.g: http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
The fix for this issue is to fix the files that are 403'ing in the source map. I have raised an issue on the bootstrap maxcdn GitHub repro: https://github.com/MaxCDN/bootstrap-cdn/issues/629
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
