cssblockingcss-import

Block page rendering for @import CSS

TLDR; skip to the problem section 👍

Background

We have a very large monolith legacy application. We are in the process of stripping functionality out into a new application.

These two applications have vastly different UI's built in vastly different architectures and technologies. As our users will be navigating freely between the two, currently, we need to unify the UI to some degree so the transition isn't so jarring.

It was decided to have a large CSS override style-sheet that we just load over the top of the legacy application (So we could spend more time focusing on the new app). This sheet, whilst massive, works.

Our legacy app has a root CSS file that is included on every page, regardless of how (some is classic ASP, some uses master pages, some is manually).

The problem

So we decided to use a @import tag in the root style sheet to pull in our re-style override.

Whilst we acknowledge that blocking rendering of the page is a horrible anti pattern we need this behavior to prevent flashing of the old UI, until the override sheet takes over.

We thought that CSS in the head will block rendering of the page until its loaded, however it doesn't appear to be waiting for the imported CSS. Is this expected behavior with regards to imports? Is there any way to make the user agent wait? Any information how how to achieve this would be very appreciated.

Thanks

Solution

  • There is no way to apply another CSS file synchronously to the CSS file it is embedded in. But as you already doing a lot of bodging in this project, here are some suggestions I can make:

    (But before that: All of those aren't really good, not to say best-practice, and have definitely some danger to it.)

    1. Hide the GUI in the critical section: Add a CSS rule in the root stylesheet, that hides the GUI, and another in the new stylesheet that overrides it and shows the GUI again.
    2. If you can add something to all HTML pages: Add a loading screen. Something like
      <div class="loading-screen" style="display:fixed;top:0;left:0;width:100vw;height:100vh;background-color:white;z-index:1000">Loading...</div>
      and hide it again with the new sytylesheet: .loading-screen { display: none; }
    3. All in one: Throw away the idea of using @import and write the content of your new stylesheet in the root stylesheet.

    The best practice would probably be to rework the hole site structure or at least rework/remove the old GUI style.