This project is read-only.
The idea behind these helpers is that you have a site that uses media quires. You need to also support IE8 and below. But want to use the styles that are defined in your media quires in IE8 also. It is written on top of the asp.net 4.5 Web Optimization framework provided by Microsoft.

The key is that you use comments with a special key that comment out the media quires for IE8 and below. Here is an example.

/*EnableMediaQueryRemove
@media screen and (max-width: 500px)
{/**/

/*EnableMediaQueryRemove
}/**/
Now when its rending these out for modern browsers the library will remove /*EnableMediaQueryRemove so the output becomes.


@media screen and (max-width: 500px)
{/**/


}/**/

Getting Started

Getting it installed

  1. Download Sannel.Helpers.Web.Optimization
  2. Include the Reference in your web project.
  3. Edit your Web.config and Add this line into your web.config it goes in the controls section of pages.
    • <add assembly="Sannel.Helpers.Web.Optimization" namespace="Sannel.Web.Optimization" tagPrefix="webopt"/>

Setting up the files

For the ie8 and below style sheet we will add a normal StyleBundle into our BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
    bunldes.Add(new StyleBundle("~/Css/Site-ie8").Include("~/Css/global.css",
    "~/Css/min-width-450.css",
    "~/Css/min-width-600.css",
    "~/Css/min-width-800.css",
    "~/Css/min-width-900.css");
}
For modern browsers we will basically do the same thing only instead of StyleBundle we will will create the class MediaQueryStyleBundle that's in this library
public static void RegisterBundles(BundleCollection bundles)
{
    bunldes.Add(new StyleBundle("~/Css/Site-ie8").Include("~/Css/global.css",
    "~/Css/min-width-450.css",
    "~/Css/min-width-600.css",
    "~/Css/min-width-800.css",
    "~/Css/min-width-900.css");

    bunldes.Add(new MediaQueryStyleBundle("~/Css/Site").Include("~/Css/global.css",
    "~/Css/min-width-450.css",
    "~/Css/max-width-450.css",
    "~/Css/min-width-600.css",
    "~/Css/min-width-800.css",
    "~/Css/min-width-900.css");
}

Now if the optimization was always on we could just user the webopt:BundleReference to render our css links. But its not so instead were going to use MediaQueryBundleReference thats provided with this library. Below is an example of rendering the css links for these bundles using IE if comments.
<!--[if gt IE 8]><!-->
<webopt:MediaQueryBundleReference runat="server" path="~/Css/Site" />
<!--<![endif]-->							 
<!--[if lte IE 8]>	
<webopt:BundleReference runat="server" Path="~/Css/Site-ie8" />
<![endif]-->

The MediaQueryBundleReference control will output the links with .cssmq as the file extension when optimization is off. Then there is a handler that deals with .cssmq that is included in this library it. The Handler opens up the file and removes the /*EnableMediaQueryRemove and sends it to the output stream.

There are 2 configuration settings that can be added to the appSettings section of your Web.config
  • "Optimization.MediaQueryRemoveText" which defines the text to be removed from the css files it defaults to /*EnableMediaQueryRemove
  • "Optimization.MediaQueryHandlerFileExt" which defines the file extension that is used by the handler and MediaQueryBundleReference. Its default value is ".cssmq".

Last edited Apr 25, 2013 at 10:34 PM by sannelsoftware, version 3

Comments

No comments yet.