259

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?

5
  • 3
    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
    Aug 11, 2011 at 14:22
  • 1
    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
    May 11, 2018 at 15:07
  • 8
    Another use case is rendering emails Oct 25, 2018 at 11:46
  • 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 @. 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
    May 21, 2021 at 22:26

3 Answers 3

611

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

2
  • 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.
    – Daut
    Nov 6, 2020 at 8:43
  • 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.
    – user789221
    Apr 24, 2023 at 17:28
42

Also remember to add a space after double @@:

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

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

4
  • 2
    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.
    – Anthony
    Aug 10, 2017 at 14:54
  • 2
    Even with the space, this did not work for me. Daut's answer with 2 different style elements did work though!
    – CPHPython
    Jun 6, 2019 at 14:39
  • worked without space Nov 4, 2022 at 18:26
  • @Dhruvil21_04 probably in the newer versions they have resolved this then. Nov 7, 2022 at 22:16
18

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>
}
2
  • As David stated: use double @@ symbols. That will escape @ symbol and render @media correctly on client side May 2, 2022 at 0:16
  • 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.
    – clamum
    May 9, 2023 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.