阻止@import CSS的页面渲染

Question

TLDR；跳到问题部分?

背景

我们有一个非常庞大的整体式遗留应用程序。我们正在将功能剥离到新的应用程序中。

这两个应用程序具有以完全不同的体系结构和技术构建的完全不同的UI。当前，由于我们的用户将在两者之间自由导航，因此我们需要在某种程度上统一UI，以免过渡不那么麻烦。

决定有一个很大的CSS覆盖样式表，我们只需将其加载到旧版应用程序的顶部即可（因此，我们可以花更多时间专注于新应用程序）。此工作表虽然很大，但可以正常工作。

我们的旧版应用程序的每个页面都包含一个CSS根文件，无论使用哪种方式（有些是经典ASP，有些是使用母版页，有些是手动）。

问题

因此，我们决定在根样式表中使用@import标记来引入我们的重新样式替代。

尽管我们承认阻止页面的呈现是一种可怕的反模式，但我们需要这种行为来防止旧的UI闪烁，直到替换工作表接管为止。

我们认为头部的CSS会阻止页面的渲染，直到页面加载为止，但是它似乎没有在等待导入的CSS。这是关于进口的预期行为吗？有什么办法可以让用户代理等待？任何有关如何实现这一目标的信息将不胜感激。

谢谢

Answer 1

无法将另一个CSS文件同步应用于其嵌入的CSS文件。但是，由于您在此项目中已经做过许多bodging，因此，我可以提出一些建议：

（但在此之前：所有这些都不是很好，更不用说最佳实践了，肯定有危险）。

1. 在关键部分隐藏GUI：在根样式表中添加CSS规则，以隐藏该GUI，并在新样式表中添加另一条规则以替代该规则并再次显示该GUI。
2. 如果您可以在所有HTML页面中添加内容：：添加加载屏幕。像是
   <div class="loading-screen" style="display:fixed;top:0;left:0;width:100vw;height:100vh;background-color:white;z-index:1000">Loading...</div>
   并使用新的密码表再次将其隐藏：.loading-screen { display: none; }
3. 合而为一：：放弃使用@import的想法，并将新样式表的内容写到根样式表中。

最佳做法可能是重新加工孔位结构或至少重新加工/删除旧的GUI样式。