@media media query and ASP.NET MVC razor syntax clash

css asp.net-mvc-3 razor media-queries

I've got a large site that runs in ASP.NET MVC using the Razor view engine.

I have a base stylesheet which contains all of the generic styling for the whole site. On occasion, however, I have page specific styles which in the <head> of the page - usually this is one or 2 lines.

I don't particularly like putting the CSS in <head> as its not strictly separation of concerns, but for one or two lines, that really is specific to that page, I prefer not have to attach another file and add to the bandwidth.

I've got an instance though where I would like to put a page specific media query into the <head>, but because a media query uses the @ symbol and brackets {} it's clashing with the razor syntax:

@section cphPageHead{
     <style>
        /* PAGE SPECIFIC CSS */
        ...

        @media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
            {
               ... }
            } 
    </style>
}

Is there a way I can get around this?

I still think that, css styles should be in the CSS file, especially for a "Large site" Linear css on the page is not the best practice. PS: My opinion

I agree with @AlexC, but for those curious about a valid use case, critical CSS loads faster inline than externally. It's a pretty handy trick for those sites that rely on a super fast first meaningful paint.

Another use case is rendering emails

For people who using a code analyzer tool like sonar double @ can be marked as a major bug by tool. If you have a chance to change or disable the rule it is ok otherwise you have to find another way to escape @.

When using @media with grid you may want the style sheet in the page because each page layout may be different, you just want to control THAT specific page and packing away the css into a file is over-engineering and just doesn't make sense. Keep code that goes together close together in this case. So any case where the css is ABSOLUTELY just for a single page it is best in that page. Otherwise ALWAYS in a seperate css file

David Makogon

use double @@ symbols. That will escape @ symbol and render @media correctly on client side

Using double @@ did not work for me. I had to use one @ with 2 different style elements! See my answer bellow, and maybe add it to this.

it's work to me. thanks

A-Sharabiani

Also remember to add a space after double @@:

 @@ media only screen and (max-width : 960px)

@@media with no space did not work for me.

Had a similar issue to this when using compressed CSS; I think the @@ was surrounded by text and so Razor struggled to interpret it. I opted to add the space before the @@. Thanks for the tip.

Even with the space, this did not work for me. Daut's answer with 2 different style elements did work though!

Daut

I realize this is old question, but this is the only solution that worked for me:

@section cphPageHead{
    <style type="text/css" media="screen and (max-width:959px)">
    </style>


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}

As David stated: use double @@ symbols. That will escape @ symbol and render @media correctly on client side

@media media query and ASP.NET MVC razor syntax clash

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US