Responsive design “CssRegistration does not have a public property named media”

Question

I'm currently implementing responsive design on an intranet site. I’ve added plain links in the master page based on min-width and max-width media properties. It works like a charm, but it didn’t when I tried to use CssRegistration. For some unknown reason, the CssRegistration doesn’t have a media property (that I’m aware of). Is there a way of overcoming this problem using CssRegistration instead of plain HTML-links?

<!-- Responsive CSS-files based on width -->
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 801px)" href="/Style%20Library/css/ResponsiveMaster.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 401px) and (max-width: 800px)" href="/Style%20Library/css/ResponsiveMasterPad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 400px)" href="/Style%20Library/css/ResponsiveMasterMobile.css" />

If I try, I get a well known screen:

Answer 1

As you say, there is no media attribute.

There are a couple of ways I can think of to handle this in SharePoint:

• Either use Device Channels to target different master pages to different devices
• Or, add all of your responsive CSS to one file, containing the @media wrappers. This will also be better since if you for example resize your browser window, you get the appropriate css as you go.
• A third way that comes to mind is using a combination of @media and @import tags in one CSS-file, loading in specific files with the @import into the @media attribute