javascript - Hiding the source CSS code

Question

Hello recently i have seen sites ,that hides their source css when viewed their source! How is this exactly possible.. I assume some javascript may do the trick. this is a piece of code that i found on Google.

<script type="text/javascript" src="css.js"></script>

var cssFile = document.createElement('link');
cssFile.type = 'text/css';
cssFile.rel = 'stylesheet';
cssFile.href = '/test.css';
cssFile.media = 'screen';
cssFile.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssFile); 

So is this code going to hide my css or will fake the users the origin of css..?

Answer 1

So is this code going to hide my css

No

or will fake the users the origin of css..?

No

---

It will make it very slightly harder to spot using View Source… but I haven't see anyone use that as the first approach to examine how a page works for years. DOM inspector tools will show the generated <link> element, and will show the styles applying to any given element along with a link to the stylesheet file they appear in. Network monitoring software (including that which is built into Firebug, Chrome Developer Tools, etc, etc) will show the HTTP requests and responses for the stylesheets too.

---

What it will do, is delay any loading of the CSS until the JS has run. That is all.

This may be so that some CSS is only used in browsers which have JS enabled (the CSS might hide some content which is then only revealed via JS interactions, so the author wants it to default to being visible if it can't later be revealed with JS).

This may be so that the content loads first and gets styled later (as a hack to give content loading performance priority over content styling).