7

I've following css files for a hobby project:

  • normalize.css
  • main.css
  • viewports.css
  • bigFile.css

Now normalize.css , main.css & viewports.css are the 3 files that are loaded on every page visit throughout the website. However bigFile.css contains a lots of css styles that are used in internal pages of the website. For now I'm loading these files inside homepage index.html like this :

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>

I've merged viewports.css inside main.css and current file size is good. I cannot merge bigFile.css since then the size of main.css will be large and browser will wait to render it. Also note I'll be using github pages which sets expire headers to almost like 10 minutes , thus making caching state bad for me. And assume user is most likely navigate to next page.

Is there any way I could load bigfile.css after the page has loaded successfully so that it saves some time for next page loads. I don't mind using js solution till it has a gracefull fallback on non-js sites (like not loading them till user actually navigates to next page). Also I'm not a big fan of jquery for such a small task. Thanks!

Abhinav Gauniyal
  • 5,568
  • 5
  • 40
  • 82
  • If i understood correctly, you want `big.css` not to be blocking. Try to place this: `` inside of the `` instead of the `` (assuming your code delivered is placed here) – Nico O Jun 10 '15 at 09:47
  • http://stackoverflow.com/questions/4847313/dynamically-add-css-to-page-via-javascript – Lain Jun 10 '15 at 09:48
  • @NicoO is that allowed? placing links in body that are intended inside head? and in all browsers? – Abhinav Gauniyal Jun 10 '15 at 10:01
  • [It is, when you set the `itemprop` property](https://html.spec.whatwg.org/multipage/semantics.html#the-link-element) in my comment before i did not intended to use `property` but `itemprop`. – Nico O Jun 10 '15 at 10:11
  • @NicoO then it says `A link element must have either a rel attribute or an itemprop attribute, but not both.` & rel specifies the css part I guess. – Abhinav Gauniyal Jun 10 '15 at 10:16

1 Answers1

7

You can execute a function after page has loaded and put below code inside that function :

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://example.com/big.css');
}
else {
  var styles = "@import url('http://example.com/big.css');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

P.S. Do not forget to call the function only when the page load event completed otherwise same performance issue will be there.

joy d
  • 398
  • 1
  • 11
  • 4
    1. what is role of CDATA here. 2. `document.createStyleSheet` is for IE? 3. can you explain `@import` , dosen't link contains href? & `escape(styles)` part. – Abhinav Gauniyal Jun 10 '15 at 09:56
  • 2
    4. also what might be a cross browser js event for page load? 5. will it load this css file if I've included it in next page inside head? or in other words , does it resides in cache or not. – Abhinav Gauniyal Jun 10 '15 at 10:00
  • 1
    CDATA : http://stackoverflow.com/questions/66837/when-is-a-cdata-section-necessary-within-a-script-tag createStyleSheet : https://msdn.microsoft.com/en-us/library/ms531194(v=vs.85).aspx I guess you can figure out what is import and escape and their usage. Page load event : http://stackoverflow.com/questions/1795089/how-can-i-detect-dom-ready-and-add-a-class-without-jquery/1795167#1795167 – joy d Jun 10 '15 at 10:04
  • 1
    I know about `@import` and I'm asking how is it different from contructing `newSS` with `href = someurl` and then appending , rather than importing all css and then using `data:text/css` and escaping it. Thanks :) – Abhinav Gauniyal Jun 10 '15 at 10:09
  • 1
    From : http://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import. So I think, you can just use simple way of including also like you suggested. – joy d Jun 10 '15 at 10:27