@ import CSS的阻止页面渲染

Question

TLDR;跳到问题部分

背景

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

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

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

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

问题

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

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

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

谢谢

Answer 1

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

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

1. 在关键部分隐藏GUI：

在根样式表中添加CSS规则，以隐藏GUI，在新样式表中添加另一个CSS规则以覆盖该规则并再次显示GUI。

如果您可以向所有HTML页面添加内容：

添加加载屏幕。就像是<div class="loading-screen" style="display:fixed;top:0;left:0;width:100vw;height:100vh;background-color:white;z-index:1000">Loading...</div>并使用新的sytylesheet将其再次隐藏：.loading-screen { display: none; }

全部合为一体：

放弃使用@import的想法，并将新样式表的内容写到根样式表中。最佳实践可能是重新加工孔位结构或至少重新加工/去除旧的GUI样式。