ASP.NET - CSS Media Queries in Razor Pages - How to embed @media syntax

ASP.NET - CSS Media Queries in Razor Pages - How to embed @media syntax

If you're working with ASP.NET MVC or ASP.NET Core using Razor pages and you want to put a CSS style within the page (CSS embed), you might stumble upon one of these following errors:

CS0103: The name 'media' does not exist in the current context.

CS0103: The name 'if' does not exist in the current context.

... And so on.

When something like that occurs, it probably means that you're using a CSS3 media query (or other CSS3 query related commands) such as this:

... ignoring the fact that @ is a reserved character in Razor .cshtml pages.

Luckily enough, the fix is very simple: you can escape that char by doubling it, i.e. using @@, which Razor will print as a standard single @.

That's it: happy media-querying!

 

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

One Comment on “ASP.NET - CSS Media Queries in Razor Pages - How to embed @media syntax”

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.