18

In ASP.NET MVC4 application, style bundle is created using

    bundles.Add(new StyleBundle("~/css/pos.css")
        .Include("~/css/mypos.css"));

and rendered in view as

@Styles.Render("~/css/pos.css")

Generated output in debug mode is

  <link href="/myapp/css/mypos.css" rel="stylesheet"/>

How to add media attribute to output so that style is used for screen

  <link href="/myapp/css/mypos.css" media="screen" rel="stylesheet"/>

or for print

<link href="/myapp/css/mypos.css" media="print" rel="stylesheet"/>

Or is there better way to to this, can media specified in css file or other solution ? jquery and jquery-ui are used.

hutchonoid
  • 32,982
  • 15
  • 99
  • 104
Andrus
  • 26,339
  • 60
  • 204
  • 378
  • Does this address the problem? http://stackoverflow.com/questions/12042248/make-asp-net-bundling-specify-media-screen-for-css-bundle/13733832#13733832 – Tim M. Nov 16 '13 at 22:43
  • Yes it looks like solution. It requires to add additional code. Is this best solution which allows not to minify in debug mode? Other option would to add @ media directive to css files but my css file already contains @ media – Andrus Nov 16 '13 at 22:52
  • Normally don't post external links, but a fairly complete solution to your problem can be found here http://danielcorreia.net/blog/quick-start-to-mvc4-bundling/ – Mike Beeler Nov 16 '13 at 20:56

2 Answers2

13

Within your Razor page you would add the following:

<link href="@Styles.Url("~/css/pos.css")" rel="stylesheet" type="text/css" media="print" />
hutchonoid
  • 32,982
  • 15
  • 99
  • 104
  • This minifies also in debug mode. How to minify only in production mode? Is code from http://stackoverflow.com/questions/12042248/make-asp-net-bundling-specify-media-screen-for-css-bundle/ and from link from Mike Beeler answer which contains same code only solution? It uses #if DEBUG to detect debug mode. – Andrus Nov 16 '13 at 22:48
  • I've never noticed that before, I thought it was only in release mode. – hutchonoid Nov 16 '13 at 22:54
  • I tried, it minifies in debug mode also. MS program manager comment in SO answer in my comment confirms this. Is long code from links in my comment only solution to prevent minizication on debugging? printing css files are long and contain @screen directive (maybe this is bug) so embedding all of them with `@media print { }` seems not possible. – Andrus Nov 17 '13 at 11:09
  • Seems a shame, must admit the print styles I have used in the past have been very short. I'm interested to see how you resolve it. I'm adding it as a favourite. – hutchonoid Nov 17 '13 at 14:20
  • I marked Mikes answer as answer since it probably solves the issue. Currently it is ok for me too to use minified styles in debugging so I'm using your answer. If styles needs to be examined in browser debugger I will try Mikes solution. – Andrus Nov 17 '13 at 14:39
  • After installing Visual Studio 2013 Web Express, this link gives 404 error in both debug and release modes. How to fix this ? If same solution is running in Visual Studio 2012 Express, css files are retrieved correctly. – Andrus Nov 18 '13 at 15:56
0

Late to the party, but nonetheless: There is a method

Styles.RenderFormat(string tagFormat, params string[] paths)

This is used internally by the normal Styles.Render call. For the format, you can simply use

"<link href=\"{0}\" rel=\"stylesheet\" media=\"print\" />"

or whichever other attributes you wish to add.

Christoph Herold
  • 1,799
  • 13
  • 18