3

TLDR；跳到问题部分

背景

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

这两个应用程序在完全不同的架构和技术中构建了截然不同的 UI。由于我们的用户将在两者之间自由导航，目前，我们需要在某种程度上统一 UI，这样过渡就不会那么刺耳。

决定有一个大的 CSS 覆盖样式表，我们只需在旧应用程序的顶部加载它（这样我们就可以花更多时间专注于新应用程序）。这张纸虽然很大，但很有效。

我们的旧版应用程序有一个根 CSS 文件，它包含在每个页面上，不管如何（有些是经典的 ASP，有些使用母版页，有些是手动的）。

问题

所以我们决定在根样式表中使用@import 标签来引入我们的重新样式覆盖。

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

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

谢谢

4

1 回答 1

1

无法将另一个 CSS 文件同步应用到它所嵌入的 CSS 文件中。但是由于您已经在这个项目中做了很多工作，所以我可以提出一些建议：

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

  1. 在关键部分隐藏 GUI：在根样式表中添加一个隐藏 GUI 的 CSS 规则，并在新样式表中添加另一个覆盖它并再次显示 GUI 的 CSS 规则。
  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 样式。

于 2020-06-05T13:14:39.037 回答