Adding media="print" in CSS References in SharePoint 2013 Master Pages

In SharePoint 2013 with Design Manager, we can convert an .html file into a SharePoint 2013 master page. After the conversion, the HTML file and the master page are associated, so that when we edit and save the HTML file, the changes are synced to the associated master page.

Advantage of this approach is that we can focus on designing our site in HTML, CSS, and JavaScript, without having to know much about ASP.NET or the SharePoint specific markup. By using Design Manager to convert an HTML file into a SharePoint master page, it will add required elements, such as controls and content placeholders that are specific to SharePoint, which must be present on the page for SharePoint to correctly render that master page.

Even though it sounds easy, there will be some issues coming in the process. One of such issues I got is adding media="print" property to the CSS references.

In the HTML version of the master page we usually add CSS references as:

<link rel="stylesheet" href="styles/Pages.css" type="text/css" />

<link rel="stylesheet" href="styles/PageLayouts.css" type="text/css" />

<link rel="stylesheet" href="styles/Theme_1.css" type="text/css" id="CssRegistrationTheme" />

<link rel="stylesheet" href="styles/Print.css" type="text/css" media="print" />

In here I have added an id in the third link and media="print" property in the fourth link.

But in the conversion, CSS references will be generated as below in the .master version of the master page.

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/Pages.css %&gt;" runat="server" after="SharepointCssFile"/>

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/PageLayouts.css %&gt;" runat="server" after="SharepointCssFile"/>

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/Theme_1.css %&gt;" runat="server" after="SharepointCssFile"/>

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/Print.css %&gt;" runat="server" after="SharepointCssFile"/>

We can see that <link> tag is now converted to CssRegistration control. Also, all 4 links are generated in the same way and ID or the media property I added are not there anymore.

How to fix:

We can add the ms-design-css-conversion="no" property in CSS link references in which we don’t need Design Manager to do alterations.

So in my case, CSS references in .html file need to be:

<link rel="stylesheet" href="styles/Pages.css" type="text/css" />

<link rel="stylesheet" href="styles/PageLayouts.css" type="text/css" />

<link rel="stylesheet" href="styles/Theme_1.css" type="text/css" id="CssRegistrationTheme" ms-design-css-conversion="no" />

<link rel="stylesheet" href="styles/Print.css" type="text/css" media="print" ms-design-css-conversion="no" />

Then the generated CSS references in the .master page will be:

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/Pages.css %&gt;" runat="server" after="SharepointCssFile" />

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/PageLayouts.css %&gt;" runat="server" after="SharepointCssFile" />

<link rel="stylesheet" href="/_catalogs/masterpage/PRASAD/styles/Theme_1.css" type="text/css" id="CssRegistrationTheme" />

<link rel="stylesheet" href="/_catalogs/masterpage/PRASAD/styles/Print.css" type="text/css" media="print" />

Now the 3^rd and 4^th references are remain as <link> tags and only the href property value has been changed. The ID and media properties are there as well.