Preload CSS file not supported on Firefox and Safari Mac

css firefox safari preload
Afaf picture Afaf · Jul 26, 2017 · Viewed 11.8k times · Source

I added the attribute rel="preload" to all css links like this : 

   <link rel='preload' onload='this.rel="stylesheet"' as='style' 
id='reworldmedia-style-css'  href='style.css' type='text/css' media='all' 
/>

It works fine in Chrome but not in Safari or Firefox

Answer

Tom picture Tom · Dec 18, 2018

I found a possibly best solution is to load two files as below - browsers that support preload will use it as intended and those that don't (like Firefox) will only use the regular (2nd link). This solution doesn't require using the onload="this.rel='stylesheet'" since the style is used right after the preload:

<head>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>

What I also discovered is a hacky alternative to the above could be including "rel" twice, like:

<link href="style.css" rel="stylesheet" rel="preload" as="style">

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Targeting only Firefox with CSS

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: <!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be …

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More