Make ASP.NET bundling specify media=screen for CSS bundle

Question

I\'m just trying out ASP.NET 4.5 bundling and minification, and ran into an issue.

I\'ve got around 10 css files, of which 2 were originally referenced in the layout

Answer 1

Another option to solve this issue, without compromising the debug ability, could be:

public static IHtmlString Render(string path, IDictionary htmlAttributes)
{
    var attributes = BuildHtmlStringFrom(htmlAttributes);

#if DEBUG
    var originalHtml = Styles.Render(path).ToHtmlString();
    string tagsWithAttributes = originalHtml.Replace("/>", attributes + "/>");
    return MvcHtmlString.Create(tagsWithAttributes);
#endif

    string tagWithAttribute = string.Format(
        "", 
        Styles.Url(path), attributes);

    return MvcHtmlString.Create(tagWithAttribute);
}

What I'm doing is just appending the given html attributes to the end of the tags (on debug mode) or to the end of the only link tag (when minification/bundling are enabled).

The usage in views:

@Bundles.Render("~/css/print", new { media = "print" })

The rest of the code:

public static IHtmlString Render(string path, object htmlAttributes)
{
    return Render(path, new RouteValueDictionary(htmlAttributes));
}

private static string BuildHtmlStringFrom(IEnumerable> htmlAttributes)
{
    var builder = new StringBuilder();

    foreach (var attribute in htmlAttributes)
    {
        builder.AppendFormat(" {0}=\"{1}\"", attribute.Key, attribute.Value);
    }

    return builder.ToString();
}

I've wrote a blog post about this subject: http://danielcorreia.net/blog/quick-start-to-mvc4-bundling/