Блокировать рендеринг страницы для @import CSS

Question

TL; DR; перейти к разделу проблем

Задний план

У нас есть очень большое унаследованное монолитное приложение. Мы находимся в процессе выделения функций в новое приложение.

Эти два приложения имеют совершенно разные пользовательские интерфейсы, построенные на совершенно разных архитектурах и технологиях. Поскольку наши пользователи будут свободно перемещаться между ними, в настоящее время нам необходимо до некоторой степени унифицировать пользовательский интерфейс, чтобы переход не был таким резким.

Было решено создать большую таблицу стилей переопределения CSS, которую мы просто загружаем поверх устаревшего приложения (чтобы мы могли уделять больше времени новому приложению). Этот лист, хоть и массивный, работает.

В нашем устаревшем приложении есть корневой файл CSS, который включается на каждую страницу независимо от того, каким образом (некоторые из них являются классическими ASP, некоторые используют главные страницы, некоторые - вручную).

Проблема

Поэтому мы решили использовать тег @import в корневой таблице стилей, чтобы задействовать наше переопределение стиля.

Хотя мы признаем, что блокировка отрисовки страницы - это ужасный антипаттерн, нам нужно это поведение, чтобы предотвратить мигание старого пользовательского интерфейса, пока не вступит в действие лист переопределения.

Мы думали, что CSS в заголовке будет блокировать рендеринг страницы до ее загрузки, однако, похоже, он не ждет импортированного CSS. Это ожидаемое поведение в отношении импорта? Есть ли способ заставить пользовательский агент ждать? Любая информация о том, как этого добиться, будет очень признательна.

Благодарность

Answer 1

Невозможно синхронно применить другой файл CSS к файлу CSS, в который он встроен. Но, поскольку вы уже много работаете в этом проекте, вот несколько советов, которые я могу сделать:

(Но перед этим: все это не совсем хорошо, если не сказать передовой опыт, и определенно несет в себе некоторую опасность.)

1. Скройте графический интерфейс в критическом разделе: добавьте правило 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 и запишите содержимое вашей новой таблицы стилей в корневую таблицу стилей.

Лучшей практикой, вероятно, было бы переделать структуру сайта дыры или, по крайней мере, переделать / удалить старый стиль графического интерфейса.