CSS preloading doesn't work except on Google Chrome

Question

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).

What do you mean "won't work"? Also, why are you changing the rel value? What are you actually trying to do? — Etheryte, May 10 '19 at 11:36
The CSS is not applied when I say "won't work". I am trying to optimize the speed of the website by preloading files such as this CSS. So I've tried to follow [Google's web development documentation](https://web.dev/defer-non-critical-css) and this is working on their Google Chrome but on Mozilla Firefox: the CSS is applied only on Chrome. — Bastien Soucasse, May 10 '19 at 11:40

score 1 · Answer 1 · answered May 10 '19 at 11:38

1

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

answered May 10 '19 at 11:38

John Valroma

21
2

I've just tried this but I have no error about it, the only errors I have are the missing src attributes for images because I use lazyload. – Bastien Soucasse May 10 '19 at 11:43
I don't care about the rel attribute, I care about the CSS preloading, I know about the rel attribute already and I am using it just fine. – Bastien Soucasse May 10 '19 at 11:54
What is the website Ma – John Valroma May 10 '19 at 12:03
2

Hi You have a Inline script block between the external css file and another resource chrome ignores it Firefox does not It could help to put in another css in subdomain rather than linking from main site to subdomain If it was my site I would rewrite scrip – John Valroma May 10 '19 at 12:48
It's as far as I can go hopefully some one else could give you better help and advice – John Valroma May 10 '19 at 12:59
Thank you for your help, I will have to focus on your answer and try and I will send my resume here. – Bastien Soucasse May 10 '19 at 13:02
It's the – John Valroma May 10 '19 at 13:51

score 0 · Answer 2 · answered May 10 '19 at 14:20

0

tested and seems to work well in Firefox and Chrome removing in 4 places in script

answered May 10 '19 at 14:20

jocar

21
5

score 0 · Answer 3 · answered Nov 27 '19 at 20:34

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.

CSS preloading doesn't work except on Google Chrome

3 Answers3