Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Sebastian Dammark 583 posts 1407 karma points
    Mar 03, 2017 @ 10:52
    Sebastian Dammark
    0

    Razor error when using embedded stylesheets containing @media and -webkit

    Due to some google optimizations I'm embedding some of my CSS in my templates.

    But the view engine isn't all that happy about it (look at the attached screenshot)

    "-" is not valid at the start of a code block.  Only identifiers, keywords, comments, "(" and "{" are valid.

    What can I do about it ?

    enter image description here

    Copy Link
  • Mike Masey 39 posts 253 karma points MVP 6x c-trib
    Mar 03, 2017 @ 10:59
    Mike Masey
    0

    Have you tried escaping the @ for the media query?

    e.g. <style>@@media screen and (min-width: 64.0625em) {.grid { -webkit-box-orient:vertical;}}</style>

    Copy Link
  • Sebastian Dammark 583 posts 1407 karma points
    Mar 03, 2017 @ 11:16
    Sebastian Dammark
    0

    Yes, and that works fine. But then it complains about "-" which I expect to be the vendor prefixes like, -webkit, in the beginning of a code block. Even though it's not a code block

    Copy Link
  • Mike Masey 39 posts 253 karma points MVP 6x c-trib
    Mar 03, 2017 @ 11:26
    Mike Masey
    0

    Very strange, I've been trying to replicate it but i'm not having any luck. Are you able to create a simple version of the issue? Maybe there is something else going on that's causing the issue.

    Copy Link
  • Steven Harland 78 posts 518 karma points c-trib
    Mar 03, 2017 @ 11:30
    Steven Harland
    101

    Hi Sebastian,

    Perhaps you could move the CSS into its own file and render it out like this:

    <style>@Html.Raw(System.IO.File.ReadAllText(Server.MapPath("~/css/inline.css")))</style>

    Steven

    Copy Link
  • Sebastian Dammark 583 posts 1407 karma points
    Mar 03, 2017 @ 11:49
    Sebastian Dammark
    0

    Hey Steven,

    That did the trick. Good workaround, that doesn't require me to modify the CSS after minification.

    Thanks.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft