Reputation: 65
I am trying to preload CSS, it's working fine on Chrome but not on Firefox (nor Edge) and I can't find a solution anywhere.
I tested on Google Chrome 74.0.3729.131 and on Firefox 66.0.5 (and on Edge 41.16299.1004.0).
This is working fine everywhere.
<link rel="stylesheet" href="/style.css" media="all" type="text/css" />
But this won't work except on Chrome.
<link rel="preload" href="/style.css" as="style" media="all" type="text/css" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="/style.css" media="all" type="text/css" /></noscript>
I see the CSS is charged but not loaded so the javascript function won't work (and I want to find a real cause and solution instead of bypassing the problem using the onerror javascript event).
Upvotes: 3
Views: 5779
Reputation: 1984
Per this solution, you need to declare the style using two lines, the 2nd line being a fallback for Firefox (2nd line):
<link rel="preload" href="/style.css" as="style" />
<link rel="stylesheet" href="/style.css" />
It is documented that preload
is not supported on Firefox.
Upvotes: 0
Reputation: 21
tested and seems to work well in Firefox and Chrome removing in 4 places in script
Upvotes: 0
Reputation: 21
Had a problem with Chrome Firefox last year the web browsers have different software interpretation of the script on the doc I had to rewrite script Put your website through w3c val you could find an answer https://validator.w3.org
JohnC
Upvotes: 1