Alternative Stylesheets for Different Browsers

February 22, 2009

On a site I’ve been working on recently various Css
Hacks
are used to ensure that the site is displayed consistently on all
browsers. However, as more and more browsers are released the css files
just got messier and harder to maintain. Moving the ‘hacks’ into their
own file and selectively including them would make life a lot easier.
The usual way to achieve this is using conditional
comments. This is only
supported in IE, but as most of our css hacks were around IE this was
acceptable.

The problem with this however, is that the site was using ASP.Net
Themes, and that automatically adds the relevant stylesheets to the page
for you - meaning that you have no way of selectively choosing the
correct stylesheets! (Incidentally, I’d love to be proved wrong about
this so please let me know if I’m missing something!).

I decided to write a more flexible theming system instead. The plan was
to load all the stylesheets in a certain directory and add them to the
pages automatically in the same way ASP.Net themes do. But it would
also support convention-based subdirectories containing the ‘hacks’ for
the different browsers. The structure would be something like this:

Any css files in the Theme1 directory would always be included, but
css files in the IE directory would only be included if the user was
using IE. The convention for the names of the folder is to match the
Browser property of the
HttpBrowserCapabilities
class (accessible from Request.Browser). I ended up also allowing
further sub-directories so that different browser versions could have
different stylesheets.

If you need a stylesheet for a specific version of a browser, you just
create a folder with the version number as its name. e.g. To have a
stylesheet specifically for FireFox v2, create a folder called ‘2’ in
the FireFox folder. If you want a stylesheet for IE versions 6 and
below, you can place it in a folder called ‘6-‘. Likewise, if you want
a stylesheet for versions 7 and up, you should place it in a folder
called ‘7+’. In the future I may extend this convention to allow things
like ‘1-3’ and ‘4-7’ so that ranges of versions can be included.

I have uploaded this theming engine
here. To use the
engine you must register the StylesheetManager control on your
webforms/masterpage like so:

The only property you need to set is the location of the root directory
of your theme. When the control renders it will figure out which
stylesheets are required based on the user’s browser and write out
<link /> tags for each one.

When running in release mode, instead of linking to n stylesheets, the
control will link to an HttpHandler instead which will merge the css
files into one and write them directly into the response. To get this
working you need to include this handler in your web.config:

Note that the handler will cache the css to avoid multiple disk accesses
on each request. Currently this is cached for a hard-coded time of 1
hour. Depending on your circumstances you may wish to change this to
use a configuration value instead.

Feel free to use this theming engine if it meets your needs and please
let me know if you have any improvements. Note that the uploaded
version doesn’t contain things like error handling, logging, etc and the
http handler it uses hard-coded. These are all things you will probably
want to modify before using in anger.