Как стать автором
Обновить
822.06
OTUS
Цифровые навыки от ведущих экспертов

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

Время на прочтение 4 мин
Количество просмотров 4.6K
Автор оригинала: Mike Brind

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

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

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

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

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

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

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

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

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

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

тогда как стиль на странице Privacy не затронут:

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

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

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

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

Сам файл бандла помещается в папку wwwroot, когда приложение публикуется.

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

Заключение

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


Материал подготовлен в рамках курса «C# ASP.NET Core разработчик».

Всех желающих приглашаем на demo-занятие «Развертывание ASP.NET Core приложений на Azure». На вебинаре мы рассмотрим, что из себя представляет облачная платформа Azure, а также проведем демо по развертыванию ASP.NET Core приложения с помощью Azure App Service. >> РЕГИСТРАЦИЯ

Теги:
Хабы:
+2
Комментарии 1
Комментарии Комментарии 1

Публикации

Информация

Сайт
otus.ru
Дата регистрации
Дата основания
Численность
101–200 человек
Местоположение
Россия
Представитель
OTUS