CSS Isolation in Razor Pages
CSS isolation first appeared in .NET 5 for Blazor components. It will now be available in Razor Pages (and MVC views) in .NET 6, due to be released this November. Below is a quick overview of how CSS isolation works in Razor Pages and what problems it should address.
First, let’s look at the problem that CSS isolation is designed to solve. When creating a web application, you usually add CSS styles to the global style sheet, which is referenced in the main. This way, the declarations in the style sheet are available to all pages using the styles, whether they really need them or not. As the application develops, new styles will be added for specific sections or pages. For example, you might want to change the default font for a page, and you add a new CSS selector to your stylesheet that you will use on target elements only on that page, and update the target element class attributes accordingly. The global style sheet is growing more and more. As a reminder, your main style management tool is Ctrl + F. Over time, you forget which style declarations are in use and which can be safely removed.
Well, we’ve always had the ability to create page-specific style sheets and use Razor sections to embed them in a page-by-page layout. And this works fine for itself, but requires us to remember to define a section and add the appropriate HTML to include the stylesheet. This also means that an additional HTTP call will be required for each such stylesheet until they are cached by the browser – unless you bundle these stylesheets. CSS isolation in Razor Pages essentially removes the dependency on sections and adds bundling right away.
So how does CSS isolation work? This feature will be included in Razor Pages by default, so there is no need to add additional packages or configure any services or middleware. All you have to do is place the stylesheet in the Pages folder next to the page for which it is intended. You just need to follow a certain naming convention, which is the file name of the Razor page plus the extension .css at the end.
In my case, I only want to affect the font of the
elements on the main page of the site – the file Index.cshtmlso I add a file called Index.cshtml.css to the folder where it resides, and Visual Studio helpfully groups and nests it into existing Razor page files:
The content of the file sets the font for the selector to the new one that ships with VS 2022 (or your default monospace font):
p {
font-family: 'Cascadia Mono', monospace;
}All stylesheets must be registered and this one is no different, except that its link is in the format name_of_application.styles.css… In my case, the project is called CssIsolationDemoso I use the operator nameofpassing the application’s namespace into it. The link is in the layout file, just like other links to global style sheets:
<link rel="stylesheet" href="https://habr.com/ru/company/otus/blog/585390/@(nameof(CssIsolationDemo)).styles.css" />When I launch the application, I see that the font of the paragraph on the master page is styled appropriately:
whereas the styling on the Privacy page is unaffected:
So how does it work? Well, if we take a look at the rendered source code of the master page, we can see that in each element generated by the template Index.cshtml, an additional attribute was introduced:
This attribute is used as part of the selector in the CSS file that was generated from the link we added to the layout file (https: // localhost: 5001 / CssIsolationDemo.styles.css):
If you want to add a CSS file that affects another page Index.cshtml in your application, just add it to the folder where the target Index file is located:
The content of several isolated CSS files is automatically bundled. You can observe that a new attribute value is generated for each page:
The bundle file itself is placed in the folder wwwroot, when the app is published.
It should be noted that CSS isolation is a build step, so it doesn’t work with Razor Runtime Compliation, andthere seems to be no hope of changing this in the foreseeable future… Therefore, if you find that this feature is not working for you, as a first troubleshooting step, it is worth making sure that you do not enable compilation of the Razor files at runtime.
Conclusion
For SPA frameworks like Angular, React, and Vuejs, support for the ability to apply CSS to individual components is not new, and Blazor in the latest version of .NET has followed this trend to keep up. It’s nice that this feature will be added to Razor Pages (and MVC if you still want to generate HTML this way) starting with .NET 6.
Material prepared as part of the course “C # ASP.NET Core Developer”.
We invite everyone to a demo lesson “Deploying ASP.NET Core Applications to Azure”… At the webinar, we will look at what the Azure cloud platform is, as well as conduct a demo on how to deploy an ASP.NET Core application using the Azure App Service. >> REGISTRATION
