This article is cross-posted from my personal blog.
One of the issues that every DotNetNuke skin designer faces is how to design skins for multiple browsers. Often, getting a skin to work in Firefox, Chrome, Safari and Opera is pretty straightforward and doesn’t require much tweaking. Unfortunately, the same cannot be said of Internet Explorer. Making your skin work with IE6, 7 and 8 along with all the other browsers can be a bit of a nightmare.
I previously addressed this issue in DotNetNuke Tips and Tricks #3: Conditional StyleSheets. In that post, I created a skin object that allows you to conditionally add a stylesheet to the skin based on a condition defined by the designer. This skin object was subsequently added to the core framework and is currently being used by many designers. In fact, Artisteer uses it in all the DotNetNuke skins that their software generates.
Recently, I found a method that I like better than using conditional stylesheets. One of the downsides to conditional stylesheets is that you end up causing stylesheet bloat. Conditional stylesheets add round trips to the server which we should be trying to minimize. Conditional stylesheets also require you to maintain multiple stylesheets which can be a little painful. If you make a change in your main stylesheet, you will need to find the corresponding section in your IE specific stylesheets and potentially make changes to them as well. From a maintenance and development perspective, this is far from optimal.
Tags: DotNetNuke,Tips and Tricks,Skinning,Stylesheets
[Read the rest of this article...]