Bastien Soucasse
Bastien Soucasse

Reputation: 65

CSS preloading doesn't work except on Google Chrome

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

Answers (3)

Alfred Wallace
Alfred Wallace

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

jocar
jocar

Reputation: 21

tested and seems to work well in Firefox and Chrome removing in 4 places in script enter image description here

Upvotes: 0

John Valroma
John Valroma

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

Related Questions