3

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

Improve this question
2
  • 2
    What do you mean "won't work"? Also, why are you changing the rel value? What are you actually trying to do? Commented May 10, 2019 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 and this is working on their Google Chrome but on Mozilla Firefox: the CSS is applied only on Chrome. Commented May 10, 2019 at 11:40

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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.
I don't care about the <a> rel attribute, I care about the CSS preloading, I know about the <a> rel attribute already and I am using it just fine.
What is the website Ma
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
It's as far as I can go hopefully some one else could give you better help and advice
|
0

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.