What is the best way to display a backup CSS while waiting for the main CSS to load?

Question

What is the best way to display a backup CSS while waiting for the main CSS to load?

I am currently experiencing a unique issue with Google Search Console.

It seems that the Mobile Usability test suite fails to load CSS roughly half of the time, resulting in errors in the report.

For reference, here is the affected page:

When the CSS file fails to load, the page appears like this:

While I investigate why Google is struggling to load the CSS, I am looking for a workaround to provide temporary CSS styles to use before the main CSS file loads, for example:

body { background: #040404; color: #e5e7eb; }

a { margin: 10px; display: inline-block; color: #2E8EFB; }

I can inline this CSS directly into the HTML, but it causes conflicts with the main CSS once it loads. Is there a way to clear the previous CSS once the new CSS is loaded?

html css

Answer 1

Answer №1

To ensure a safe replacement of temporary styles without accidentally removing other styles, place them in a cascade layer and utilize revert-layer to remove them. For example:

<style>
  @layer temporary {
    body { background: #040404; color: #e5e7eb; }
    a { margin: 10px; display: inline-block; color: #2E8EFB; }
  }
</style>

In a linked style sheet, add this code after the <style> element:

@layer temporary {
  body, a { all: revert-layer; }
}

<style>
  @layer temporary {
    body { background: #040404; color: #e5e7eb; }
    a { margin: 10px; display: inline-block; color: #2E8EFB; }
  }
</style>
<style>
  /* Not a temporary style - This should not be reverted by 
   * the linked style sheet 
   */
  body { background:green }
</style>
<link rel="stylesheet" href="data:text/css, 
  /* Data-url for demonstration purposes. Would actually be
   * in an external file
   */
  @layer temporary {
    body, a { all: revert-layer; }
  }
">
Hello World

Answer 2

To ensure a safe replacement of temporary styles without accidentally removing other styles, place them in a cascade layer and utilize revert-layer to remove them. For example:

<style>
  @layer temporary {
    body { background: #040404; color: #e5e7eb; }
    a { margin: 10px; display: inline-block; color: #2E8EFB; }
  }
</style>

In a linked style sheet, add this code after the <style> element:

@layer temporary {
  body, a { all: revert-layer; }
}

<style>
  @layer temporary {
    body { background: #040404; color: #e5e7eb; }
    a { margin: 10px; display: inline-block; color: #2E8EFB; }
  }
</style>
<style>
  /* Not a temporary style - This should not be reverted by 
   * the linked style sheet 
   */
  body { background:green }
</style>
<link rel="stylesheet" href="data:text/css, 
  /* Data-url for demonstration purposes. Would actually be
   * in an external file
   */
  @layer temporary {
    body, a { all: revert-layer; }
  }
">
Hello World

Answer 3

Answer №2

If you want to easily remove temporary styles, consider placing them in a <style> tag. However, if you prefer using inline style attributes, you can remove those styles by querying for the elements and setting style = "". For example, you can use

document.querySelector('body').style = ""

.

To remove these styles after your CSS has loaded, you can add an onload event listener directly to the <link> tag. I tested this method locally and it worked perfectly.

<head>
  <!-- -->
  <link
    rel="stylesheet"
    href="--your-intended-css--"
    onload="
      // if using a style tag, remove it from the DOM
      document.getElementById('temp-styles').remove();

      // if using inline styles, set each element's style to ''
      document.querySelector('body').style = '';
    "
  >
  
  <style id="temp-styles">
    body {
      background-color: red!important;
      font-size: 20rem!important;
    }
  </style>
</head>

<body style="background-color: blue!important;">
  <!-- -->

Answer 4

If you want to easily remove temporary styles, consider placing them in a <style> tag. However, if you prefer using inline style attributes, you can remove those styles by querying for the elements and setting style = "". For example, you can use

document.querySelector('body').style = ""

.

To remove these styles after your CSS has loaded, you can add an onload event listener directly to the <link> tag. I tested this method locally and it worked perfectly.

<head>
  <!-- -->
  <link
    rel="stylesheet"
    href="--your-intended-css--"
    onload="
      // if using a style tag, remove it from the DOM
      document.getElementById('temp-styles').remove();

      // if using inline styles, set each element's style to ''
      document.querySelector('body').style = '';
    "
  >
  
  <style id="temp-styles">
    body {
      background-color: red!important;
      font-size: 20rem!important;
    }
  </style>
</head>

<body style="background-color: blue!important;">
  <!-- -->

What is the best way to display a backup CSS while waiting for the main CSS to load?

Answer №1

Answer №2

Similar questions

Executing operations on checkboxes on a webpage without access to model files

Using jquery/offset to position a div causes it to float, but it does not take

Transferring HTML information to Flask

Solution for fixing the position of a div scrollbar under the browser scrollbar

Creating a custom HTML5 canvas with images from a JSON array

HTML5 Applications with Intel XDK

Issues with the Content Editable Functionality

What is the best way to adjust the footer width to match the sidebar using Bootstrap 5?

What is the process for combining AngularJS filters?

Dynamic item addition feature activated by button on contact form

What could be the reason why the .click function is not functioning as

bootstrap used for creating horizontal radio buttons

Troubleshooting Issue: Ionic 3 and Angular ngForm not transmitting data

Retrieve the value of the second child element in a table cell when clicking on it with Javascript

Mobile devices are not showing the fixed header correctly

Having difficulty retrieving precise HTML information for data scraping purposes

What is a solution to prevent style.css from being recognized as the Jekyll Page?

Craving assistance in coding permutations

Erase blob_over from the Wordpress menu hover effect

The dropdown UL element loses its opacity in Internet Explorer