Question 261674 in Html Question posted in
Some basic documentation can be found here.

Html – How to provide a fallback CSS until the actual CSS is loaded?

The problem that I am facing is specific to Google Search Console.

What’s happening is that for whatever reason, their Mobile Usability test suite fails to load CSS about half the time. Resulting in the following errors in the report:

enter image description here

Here is the subject page: https://ray.run/blog/mastering-poms

Here is what it looks like when .css file is not loaded.

enter image description here

While I work to figure out why Google is failing to load the CSS, I would like to provide minimal CSS that’s used before the .css file is loaded, e.g.

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

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

I can inline this CSS in HTML. However, it then conflicts with the CSS once the actual CSS is loaded. Is there a technique to erase the old CSS once the new CSS has been loaded?

Tags:

2

Answers


  1. 0

    Try placing your temporary styles in a <style> tag—that will make it easier to remove (though if you really want to use inline style attributes, you can remove those styles by querying for the elements and setting style = "". E.g., document.querySelector('body').style = "").

    To perform those removals after your intended CSS has been loaded, try putting an onload event listener directly on the <link> tag. I just tried this out locally, and it worked fine.

    <head>
  <!-- -->
  <link
    rel="stylesheet"
    href="--your-intended-css--"
    onload="
      // if using style tag, simply remove it from 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;">
  <!-- -->
    Login or Signup to reply.
  2. 0

    Put your temporary styles in a cascade layer, and use revert-layer to remove them, that way you will safely replace all your temporary styles without risking inadvertently removing other styles. So in the style element:

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

    In the linked style sheet, placed 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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search