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

Question

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 — AlexC
– AlexC, Commented Aug 11, 2011 at 14:22
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. — John Pavek
– John Pavek, Commented May 11, 2018 at 15:07
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 @. — ümit Altuntaş
– ümit Altuntaş, Commented Oct 24, 2020 at 18:46
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 — M H
– M H, Commented May 21, 2021 at 22:26

David Makogon · Accepted Answer · 2018-03-06 17:32:23Z

638

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

edited Mar 6, 2018 at 17:32

David Makogon

71k22 gold badges145 silver badges204 bronze badges

answered Aug 11, 2011 at 14:20

archil

39.6k7 gold badges69 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daut Over a year ago

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.

user789221 Over a year ago

Thanks for this. I really wish people would not give their opinions unless asked and just answer the question as asked. I'm sure you have valid reasons for doing this and they should respect that.

Cardi DeMonaco Jr Over a year ago

Using double @@ works, BUT it appears that it will not. VS syntax turns the first @ symbol white and the second one blue, with a squiggly under the blue one saying "Unrecognized '@' block type.", but works!

A-Sharabiani · Accepted Answer · 2017-07-31 21:54:03Z

48

Also remember to add a space after double @@:

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

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

answered Jul 31, 2017 at 21:54

A-Sharabiani

19.6k22 gold badges129 silver badges140 bronze badges

4 Comments

Anthony Over a year ago

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.

CPHPython Over a year ago

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

Dhruvil21_04 Over a year ago

worked without space

A-Sharabiani Over a year ago

@Dhruvil21_04 probably in the newer versions they have resolved this then.

Daut · Accepted Answer · 2018-09-25 14:15:15Z

20

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>
}

answered Sep 25, 2018 at 14:15

Daut

2,6851 gold badge23 silver badges33 bronze badges

2 Comments

Ahmed Suror Over a year ago

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

clamum Over a year ago

This was the only one that worked for me too. I just needed a single <style> section, but the point of declaring the media attribute in the <style> tag itself instead of within the CSS stands. The double @ symbol did not work.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related