Изоляция CSS в Razor Pages

Изоляция CSS была введена в .NET 5 для компонентов Blazor. Теперь это касается Razor Pages (и представлений MVC) в .NET 6, который должен быть выпущен в ноябре этого года. Вот краткий обзор того, как изоляция CSS работает в Razor Pages, и проблемы, для решения которых она предназначена.

Во-первых, давайте посмотрим на проблему, которую изоляция CSS призвана смягчить. При создании веб-приложения вы, как правило, размещаете стили CSS в глобальной таблице стилей, ссылка на которую содержится в основном файле макета. Таким образом, объявления в таблице стилей доступны для всех страниц, использующих стили, независимо от того, нужны они им на самом деле или нет. По мере развития приложения будут добавляться новые стили, относящиеся к определенным разделам или даже страницам. Например, вы можете изменить шрифт по умолчанию для одной страницы, чтобы добавить в свою таблицу стилей новый селектор CSS, который можно использовать только для целевых элементов на этой странице, и соответствующим образом обновить атрибуты класса целевых элементов. Ваша глобальная таблица стилей растет и растет. Ваш основной инструмент управления стилемCtrl + F. Со временем вы забываете, какие объявления стилей используются на самом деле, а какие можно безопасно удалить.

Теперь всегда можно было создавать таблицы стилей для конкретных страниц и использовать функцию разделов Razor для внедрения их в макет на постраничной основе. Это работает нормально, но требует, чтобы вы не забыли определить раздел и добавить соответствующий HTML, чтобы включить таблицу стилей. Это также означает, что существует дополнительный HTTP-вызов для каждой таблицы стилей, специфичной для страницы, до тех пор, пока они не будут кэшированы браузером, если только вы не настроите объединение стилей для вашей страницы. Изоляция CSS в Razor Pages в основном устраняет зависимость от разделов и включает бесплатное связывание.

Так как же работает изоляция CSS? Эта функция будет включена по умолчанию в Razor Pages, поэтому нет необходимости добавлять дополнительные пакеты или настраивать какие-либо службы или промежуточное ПО. Все, что вам нужно сделать, это поместить таблицу стилей в папку Pages рядом со страницей, на которую она предназначена. Вам просто нужно следовать определенному соглашению об именах, которое представляет собой имя файла страницы Razor с .css в конце.

В моем случае я хочу повлиять только на шрифт для <p>элементов на домашней странице веб-сайта — файле Index.cshtml , поэтому я добавляю файл с именем Index.cshtml.css в папку, где находится файл, а Visual Studio услужливо группирует и вкладывает его в существующие файлы страниц Razor:

Содержимое файла устанавливает шрифт для селектора на новый, который поставляется с VS 2022 (или ваш моноширинный шрифт по умолчанию):

p {
    font-family: 'Cascadia Mono', monospace;
}

На все таблицы стилей нужно ссылаться, и эта ничем не отличается, за исключением того, что ссылка находится в формате name_of_application.styles.css. В моем случае имя проекта — CssIsolationDemo , поэтому я использую nameofоператор, передавая пространство имен приложения. Ссылка на ссылку находится в файле макета, как и другие ссылки на глобальные таблицы стилей. Я также использую ~/функцию, которую Razor преобразует в абсолютный путь к корневой веб-папке или wwwroot :

<link rel="stylesheet" href="~/@(nameof(CssIsolationDemo)).styles.css" />

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

тогда как стиль на странице конфиденциальности не затрагивается:

Итак, как это работает? Что ж, если мы посмотрим на визуализированный исходный код домашней страницы, мы увидим, что в каждый элемент, сгенерированный шаблоном Index.cshtml , был введен дополнительный атрибут :

Этот атрибут используется как часть селектора в сгенерированном файле CSS и обслуживается ссылкой, которую мы добавили в файл макета ( https://localhost:5001/CssIsolationDemo.styles.css):

Если вы хотите добавить файл CSS, который влияет на другую страницу Index.cshtml в приложении, просто добавьте его в папку, где находится целевой файл индекса:

Содержимое нескольких изолированных файлов CSS автоматически объединяется. Вы можете видеть, что для каждой страницы генерируется другое значение атрибута:

Сам связанный файл помещается в папку wwwroot при публикации приложения.

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

Резюме

Фреймворки SPA, такие как Angular, React и Vuejs, некоторое время поддерживали возможность охвата CSS отдельными компонентами, и Blazor пришлось прыгнуть на борт в последнем выпуске .NET, чтобы не отставать. Приятно, что это добавляется в Razor Pages (и MVC, если вы все еще хотите генерировать HTML таким образом) начиная с .NET 6.