Razor Pages - CSS Isolation - styles for some HTML tags are not working

Question

Razor Pages - CSS Isolation - styles for some HTML tags are not working

5.4k Views Asked by Robur At 24 March 2022 at 19:03

I'm trying to style body, header and form tags in my ASP.NET Web App using Razor Pages, CSS Isolation. Styles created in scoped CSS file (_Layout.cshtml.css) for some HTML tags are not working. The same for other components files. Adding a class for those tags and style class selectors in scoped CSS file also doesn't work.

Code - a part of _Layout.cshtml:

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - RazorTest</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/css/_Layout.cshtml.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/RazorTest.styles.css" asp-append-version="true" />
</head>

<body>
  <header>
    <nav>
      <div>
        <img src="" alt="">
        <a href=""></a>
      </div>
    </nav>
  </header>
  <div class="container">
    <form action="">
      <input type="text">
    </form>
    <main role="main" class="pb-3">
      @RenderBody()
    </main>
  </div>

  <footer class="border-top footer text-muted">
    <div class="container">
      &copy; 2022 - RazorTest - <a asp-area="" asp-page="/Privacy">Privacy</a>
    </div>
  </footer>

_Layout.chstml.css:

body {
  background-color: #444;
}

header {
  border: 10px solid red;
}

form {
  border: 10px solid cyan;
}

input {
  border: 10px solid greenyellow;
}

nav {
  border: 10px solid blue;
}

div {
  border: 10px solid black;
}

main {
  border: 10px solid green;
}

img {
  width: 100px;
  height: 100px;
  border: 10px solid orange;
}

Let me show that on SS's: _Layout.cshtml and _Layout.cshtml.css files

Browser output

Everything works well when I move my CSS file to wwwroot/css directory and link it in _Layout.cshtml file. Styles for those tags also works when added to site.css file. Screenshots:

_Layout.cshtml and _Layout.cshtml.css files

Browser output

Why styles for some tags are not working when added in scoped CSS file?

Original Q&A

There are 4 best solutions below

**Yiyi You** · Answer 1 · 2022-03-25T02:39:16.473000

Why styles for some tags are not working when added in scoped CSS file?

Maybe iy is not enough tou take precedence.

You can try to use either specificity or the natural cascade to override the styling,so that it may be enough to take precedence.For example,you can change:

img {
  width: 100px;
  height: 100px;
  border: 10px solid orange;
}

to

body > div > img  {
    width: 100px;
      height: 100px;
      border: 10px solid orange;
}

And if you want to change the style which cannot use either specificity or the natural cascade,you can try to add the style into the view,for example:

<style>
  body {
    background-color: #444;
  }

</style>

**STETT** · Answer 2 · 2022-03-29T12:40:48.737000

I encountered similar behavior a few times when testing CSS isolation in ASP.NET 6 with Razor pages.

I noticed that not all HTML element receive a scope identifier and therefore are not affected by the scoped CSS file.

Here's a part of my final [PROJECT_NAME].styles.css file (included as link element in the page layout):

form[b-l6oslukat8] {
    background-color: orange;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

And here is related part of the final HTML file where the identifier (b-l6oslukat8) should be but isn't:

<section b-l6oslukat8="" class="full page">
    <form data-form-type="login">
        <input b-l6oslukat8 type="text" id="Username" name="Username">
        <input b-l6oslukat8 type="password" id="Password" name="Password">
    </form>
</section>

Looks like this is a case with your final HTML/CSS as well. It seems to me it's a bug in the implementation of CSS isolation in .NET 6.

**John Lee** · Answer 3 · 2022-08-25T19:52:39.657000

If you use .AddRazorRuntimeCompilation() for hot reload, try build without it. Beside the tag-helper issue mentioned above, it is a build step.

Just one thing to note, CSS isolation is a build step, so it doesn't work with Razor Runtime Compliation Beside tag-helper issue mentioned above, scoped css is build time

Faced the same issue and found this article.

**LeeC** · Answer 4 · 2023-05-12T23:40:08.120000

I just encountered this issue, twice, on my first attempt to use CSS isolation (a.k.a. scoped CSS) in Razor Pages. This issue affects my header element and an img element. I found this issue on GitHub:

https://github.com/dotnet/aspnetcore/issues/41507#issuecomment-1117287553

What's happening there is that a tag helper is acting over the img tag and that results in the tag not being treated as an HTML tag. CSS isolation only applies to HTML tags, so that's why it's not being applied in this case (since it's not just a tag).

CSS isolation only applies to HTML tags within the document, otherwise it would potentially break the isolation boundary of other tags or components.

We do have an issue opened on making possible for other components and tag helpers to opt-in into receiving the CSS scope from a call/use point, which would result in what you are looking for. I would suggest you upvote this issue instead dotnet/razor#7606

As a workaround, we would suggest you wrap the tag inside another element like a div, and update your CSS rule to account for it.

Note the proposed workaround in the last paragraph. I find the explanation to be unacceptable, because this affects a header element, which has no tag helper in Razor Pages.

https://www.learnrazorpages.com/razor-pages/tag-helpers/

[Edit] I reported this issue. https://github.com/dotnet/aspnetcore/issues/48225

Razor Pages - CSS Isolation - styles for some HTML tags are not working

There are 4 best solutions below

Related Questions in CSS

Related Questions in ASP.NET-CORE

Related Questions in RAZOR

Related Questions in HEADER

Related Questions in SCOPED

Trending Questions

Popular # Hahtags

Popular Questions