@media media query et clash de syntaxe de rasoir ASP.NET MVC

214

J'ai un grand site qui s'exécute dans ASP.NET MVC en utilisant le moteur de vue Razor.

J'ai une feuille de style de base qui contient tous les styles génériques pour l'ensemble du site. À l'occasion, cependant, j'ai des styles spécifiques à la page qui dans <head>la page - généralement c'est une ou 2 lignes.

Je n'aime pas particulièrement mettre le CSS dans <head>sa séparation pas strictement des préoccupations, mais pour une ou deux lignes, qui est vraiment spécifique à cette page, je préfère ne pas avoir à joindre un autre fichier et à ajouter à la bande passante.

J'ai cependant une instance où j'aimerais mettre une requête multimédia spécifique à une page dans le <head>, mais parce qu'une requête multimédia utilise le symbole @ et les crochets {}, elle est en conflit avec la syntaxe du rasoir:

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

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

Existe-t-il un moyen de contourner cela?

css asp.net-mvc-3 razor media-queries Renifleur
la source
3
Je pense toujours que, css stylesdevrait être dans le fichier CSS, en particulier pour un CSS "Large site" linéaire sur la page n'est pas la meilleure pratique. PS: Mon avis
AlexC
Je suis d'accord avec @AlexC, mais pour ceux qui sont curieux d'un cas d'utilisation valide, le CSS critique se charge plus rapidement en ligne qu'en externe. C'est une astuce très pratique pour les sites qui s'appuient sur une première peinture très rapide et significative.
John Pavek
3
Un autre cas d'utilisation est le rendu des e
Jan Zahradník

Réponses:

477

utilisez des symboles @@@ doubles. Cela échappera au symbole @ et rendra @media correctement du côté client

archil
la source
27

Pensez également à ajouter un espace après le double @@:

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

@@media sans espace ne fonctionnait pas pour moi.

A-Sharabiani
la source
2
Avait un problème similaire à celui-ci lors de l'utilisation de CSS compressé; Je pense que le @@ était entouré de texte et donc Razor a eu du mal à l'interpréter. J'ai choisi d'ajouter l'espace avant le @@. Merci pour le conseil.
Anthony
1
Même avec l'espace, cela n'a pas fonctionné pour moi. La réponse de Daut avec 2 styleéléments différents a bien fonctionné!
CPHPython
7

Je me rends compte que c'est une vieille question, mais c'est la seule solution qui a fonctionné pour moi:

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


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