阻止@import CSS导致页面渲染的问题

Question

简述：请跳过到问题部分

背景

我们有一个非常大的旧应用程序。我们正在将功能剥离出来创建一个新的应用程序。

这两个应用程序具有截然不同的UI，采用不同的架构和技术构建。由于用户将在两者之间自由导航，因此我们需要在一定程度上统一UI，以使过渡不那么突兀。

决定使用一个大型CSS覆盖样式表，将其加载到旧应用程序的顶部（这样我们可以更多地关注新应用程序）。尽管这个样式表非常庞大，但它有效。

我们的旧应用程序有一个根CSS文件，无论如何（某些是经典ASP，某些使用主控页，某些是手动的），都会在每个页面中包含。

问题

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

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

我们认为，在head中使用CSS会阻止页面呈现，直到其加载完成，但它似乎没有等待导入的CSS。这种行为是否符合预期？有没有办法让用户代理等待？如何实现这一点的任何信息将不胜感激。

谢谢

- ste2425

---

所以您希望在“重新样式覆盖”CSS文件加载完成之前阻止渲染，是这样吗？ - JakeParis

有趣的是，为了使 @import 起作用，它必须在 CSS 文件的顶部，因此要在瀑布流中首先出现。但是您正在使用覆盖操作，这实际上是否起作用呢？ - JakeParis

@JakeParis @import 样式表可能在瀑布流中位于顶部，但是每个异步加载的样式表都会重新渲染CSS。等待重新渲染还是不等待是浏览器的决定，无法关闭或同步。您只能通过使用JS（例如XHR）同时加载和应用它们或按所需顺序加载它们来加载它们，但我不建议对基本样式表这样做。 - Niklas E.

@JakeParis 别忘了最伟大的补救工具：“！important” - 但我理解你的意思。@ste2425，你确定是由于CSS异步加载引起的吗？还是后来通过JS应用的类别在新样式中使用，或者类似这样的东西。 - Niklas E.

@JakeParis和Niklas，我们希望在导入的覆盖样式表加载完成之前阻止渲染，以便在页面呈现时立即呈现新的UI。可惜没有涉及Js类或任何东西，已经检查了这方面的事情。 - ste2425

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样式。

- Niklas E.

---

感谢您的输入。遗留应用程序非常庞大，需要数年时间才能在新应用程序中替换功能。重构结构或更改根CSS，很遗憾，不是一个选项。而且，由于旧代码库无法挽救，这将是一种浪费时间。由于需要进行大量更改，因此选项2不可行。重新样式需要可切换，这也使选项3变得困难。 然而，选项1可能会有所作为。我会调查并回复您。 - ste2425