Tuesday, September 23, 2014

What if you just need an at symbol in a .cshtml page and you don't want to break into Razor syntax?

You may double up the at symbol to just have a single at symbol appear in the HTML that gets rendered. I mean to say that this Razor markup...

<style type="text/css" media="all">
   @@media (max-width: 1030px) {
      .Seller {
         background: url('@ViewBag.Seller.SmallLogoPath');
      }
   }
   @@media (min-width: 1030px) {
      .Seller {
         background: url('@ViewBag.Seller.LargeLogoPath');
      }
   }
</style>

 
 

...gives you this HTML markup:

<style type="text/css" media="all">
   @media (max-width: 1030px) {
      .Seller {
         background: url('http://example.com/Images/ebay-sm.png');
      }
   }
   @media (min-width: 1030px) {
      .Seller {
         background: url('http://example.com/Images/ebay-sm.png');
      }
   }
</style>

 
 

By the way, when you jam a media query into a style tag inside of HTML like this, the classes have to be nested in the query and not the other way around. Otherwise it will not work, or at least not in Google Chrome.

No comments:

Post a Comment