async=true for css link tag

css, dom, html, javascript

Solution

I don't think that will work.

But We can do that using JS:

  var resource = document.createElement('link'); 
  resource.setAttribute("rel", "stylesheet");
  resource.setAttribute("href","path/to/cssfile.css");
  resource.setAttribute("type","text/css");      
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(resource);

I think That it'll achieve what you're trying to do.

If you don't want `javascript` have a look at: How to load CSS asynchronously without using JavaScript?

Hope it'll help.

Problem

In HTML5 script tags can be loaded async via `async=true` ``` <script src="index.js" type="text/javascript" async="true"></script> ``` Is there any equivalent for CSS resources? something like: ``` <link rel="stylesheet" type="text/css" async="true" href="style.css"> ``` The rationale is to make the browser to load the css, and cache it, for later requests, but let the rest of the process unblocking. On, say, a splash screen.

Original source

Related problems