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!

 

RELATED POSTS

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.

View all posts by Ryan