Resolution based CSS Selector for ASP.Net

7/7/2008

Usually when you create a style for a website you make sure that it shows well at multiple resolutions, multiple browsers, etc. However sometimes, there's nothing you can do to force certain things onto a 640x480 display. For instance, my website stays rather static in the middle of the screen and is optimized for 1024x768 resolution on up. I'm rather lazy so I'm not going to go and make it look fantastic for 800x600 or 640x480 displays, plus very few programmers use those resolutions today (and that's really the only group of people that would bother coming here) so the pay off would be small. Most people are making websites for the average person though and need to worry about such things. So what do we do?

Well there are actually two cases that we need to worry about:

  1. People using mobile devices (Blackberry, etc.)
  2. People using a regular web browser.

The first instance is rather easy to detect. Simply use the Request.Browser.IsMobileDevice to determine if it is a mobile device that is making the request and set the theme/CSS appropriately for those instances. The second instance is a bit trickier. We have Request.Browser.ScreenPixelsWidth and ScreenPixelsHeight, but I've never been able to have it give me accurate information. So that leaves us with javascript to find out the information:

   1: if(screen.width==800)
   2: {
   3:       document.getElementsByTagName("link")[0].href="800CSSFile.css";
   4: }

OK, so it's actually quite easy to find out the information. So you can simply go in and add something like that to each file, or you can add the control that I've created below:

ResolutionCSSChangerExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.ResolutionCSSChanger
  11: {
  12:     [Designer(typeof(ResolutionCSSChangerDesigner))]
  13:     [ClientScriptResource("AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior", "AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class ResolutionCSSChangerExtender : ExtenderControlBase
  16:     {
  17:         // TODO: Add your property accessors here.
  18:         //
  19:         [ExtenderControlProperty]
  20:         [DefaultValue("")]
  21:         public string CSSFiles
  22:         {
  23:             get
  24:             {
  25:                 return GetPropertyValue("CSSFiles", "");
  26:             }
  27:             set
  28:             {
  29:                 SetPropertyValue("CSSFiles", value);
  30:             }
  31:         }
  32:  
  33:         [ExtenderControlProperty]
  34:         [DefaultValue("")]
  35:         public string ScreenWidths
  36:         {
  37:             get
  38:             {
  39:                 return GetPropertyValue("ScreenWidths", "");
  40:             }
  41:             set
  42:             {
  43:                 SetPropertyValue("ScreenWidths", value);
  44:             }
  45:         }
  46:     }
  47: }

ResolutionCSSChangerBehavior.js

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.ResolutionCSSChanger
  11: {
  12:     [Designer(typeof(ResolutionCSSChangerDesigner))]
  13:     [ClientScriptResource("AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior", "AJAXControls.ResolutionCSSChanger.ResolutionCSSChangerBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class ResolutionCSSChangerExtender : ExtenderControlBase
  16:     {
  17:         // TODO: Add your property accessors here.
  18:         //
  19:         [ExtenderControlProperty]
  20:         [DefaultValue("")]
  21:         public string CSSFiles
  22:         {
  23:             get
  24:             {
  25:                 return GetPropertyValue("CSSFiles", "");
  26:             }
  27:             set
  28:             {
  29:                 SetPropertyValue("CSSFiles", value);
  30:             }
  31:         }
  32:  
  33:         [ExtenderControlProperty]
  34:         [DefaultValue("")]
  35:         public string ScreenWidths
  36:         {
  37:             get
  38:             {
  39:                 return GetPropertyValue("ScreenWidths", "");
  40:             }
  41:             set
  42:             {
  43:                 SetPropertyValue("ScreenWidths", value);
  44:             }
  45:         }
  46:     }
  47: }

All you need to do is call it with a list of screen widths you're interested in and a list of CSS files separated by commas and it will do the rest. That's it, really nothing to it. Anyway, download the code, give it a try, and happy coding.



Comments