DNN Tips & Tricks #3: Conditional Stylesheets

Aug 25

Written by: Joe Brinkman
8/25/2008 12:57 AM  RssIcon

DNNTipsandTricks Anyone who has spent much time working with Cascading Style Sheets (CSS) has discovered that each browser has slightly different support for the various CSS versions.  To further complicate CSS usage, each browser has a different set of bugs and/or understanding of what a particular standard requires.  Internet Explorer is definitely the worst offender and the furthest from fully and faithfully supporting CSS 2.1.  While support has been steadily improving between versions, it is still not on par with other modern browsers.

Typically, designers use a number of different hacks to target CSS at specific browsers in order to work around the inconsistencies.  The process generally starts with a skin design which renders correctly in Firefox and then the designer adds hacks to get it to work in IE.  To make matters worse, Microsoft has made changes in each subsequent version of IE such that a hack that worked in IE5.5 will not necessarily work in IE7. [more]

The problem with using a hack is that it is not guaranteed to work with the next version of the browser.  Clearly this is not a great solution.  The solution that I have come to prefer is to use a separate stylesheet that specifically targets IE.  Starting in Internet Explorer 5.0, Microsoft added the ability to use conditional comments to show or hide content.  Conditional comments are currently ignored by every browser except IE on Windows.  This means that you cannot use this technique to target Opera or Safari or any other browser.

Conditional comments use the following format:


You can read more about implementing conditional comments on the following sites:

 

 

When working on the MinimalExtropy skin for DotNetNuke 4.9 we decided to use transparent PNG images for the design.  Transparent PNGs provide full alpha transparency which allows for more flexibility in the graphic design of the site.  You can easily layer gradients without unwanted artifacts.  Using transparent GIFs don’t allow this level of control over the design.  Unfortunately, Transparent PNGs are not supported in IE6 and IE5.5.  Since a large portion of the DotNetNuke community still use these browsers we needed a way to make the new design still look acceptable.

I researched a number of different transparent png hacks but found that in every case there were limitations.  All of the transparent PNG hacks relies on using JavaScript to swap out the PNG image and instead apply a transparency filter.  The downside of this approach is that there are several bugs in IE that affect the filter and that require the use of very specific HTML or server configuration.  For example, one of the most popular PNG fixes relies on the use of behaviors and an HTML component (HTC).  This hack was supposed to work without requiring modifications to your markup.  In practice, however, I found that it did not work as planned, mostly because of the known limitations (see bottom of page).

Given the unreliable nature of the PNG hack, I decided that the best solution was to use a stylesheet that was targeted at IE5.5 and 6.  This stylesheet used GIFs instead of PNGs.  I was forced to give up the drop shadow on the content area, but was otherwise able to keep the overall design, using exactly the same HTML.

The first version of the skin used the following conditional comment to include a custom stylesheet for IE5.5 and 6.


 

 

This works great.  However, there was one item which bugged me.  The team has worked very hard in DNN 5.0 to make the default installation XHTML compliant.  Given the current skinning engine, each skin only has control over the HTML within the body tag.  In IE6 (and IE5.5) the stylesheet reference would be added to the body of the page.  While this works, it is not compliant.  Rather than take a step backward I created a simple skin object that will render the conditional comment and the stylesheet link in the head section of the page where it belongs.

<dnn:STYLES runat="server" ID="StylesIE6" Name="IE6Minus" StyleSheet="ie6skin.css" Condition="lt IE 7" UseSkinPath="true"/>

Ultimately, this is just a temporary solution.  I believe the best solution is to define a standard mechanism within the skinning engine that allows skinners to provide stylesheets targeted at any browser – past, present or future.  This would allow the designers to be in complete control of how the page renders for each browser.  By defining a common root stylesheet and then overriding styles as needed for a specific browser, you can greatly decrease the complexity of the CSS and significantly reduce the development time.

13 comment(s) so far...


Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

Interesting article Joe, thanks. Will this skin object be available in DNN5?

By James on   9/7/2008 1:30 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

How can I get a copy of that skin object?

By Faust Gertz on   9/7/2008 5:33 PM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

The skin object will be available in both DNN 4.9 and DNN 5.0. We expect to release DNN 4.9 this week.

By jbrinkman on   9/8/2008 2:37 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

Thanks. Works great! Now if only I could add JavaScript the same way.

By Faust Gertz on   9/10/2008 4:01 PM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

Joe - I was just reviewing the 5 beta and found this skin object and my eyes bugged out of my head! My designers are going to LOVE you. Where should I have Jeff send flowers? Best, Ryan

By Ryan Morgan on   9/10/2008 5:31 PM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

@Ryan - As long as flowers are a euphemism for beer then you can just meet the team at the bar at OpenForce :). (PS. No bringing Schultes and Faustino. Those guys and beer lead to nothing but trouble)

By jbrinkman on   9/11/2008 2:31 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

@Ryan - You can get the official release of the skin object in DNN 4.9.0. We will be extending this in 5.0 to provide a lot more capability.

By jbrinkman on   9/11/2008 2:32 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

Joe - Erin already confirmed that Russ isn't going to Vegas. That was a pre-requisite to me being allowed to go after the Orlando trip :-). R

By Ryan Morgan on   9/14/2008 7:33 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

On this topic - if you're going to build in conditional logic to attach style sheets based upon browser and version, that would be a great functionality to extend to attach conditional JavaScript files as well as Faust's comment points out. R

By Ryan Morgan on   9/14/2008 7:42 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

I created a custom skin, and this control doesn't appear to be working. In the ie6skin file, I made a new style for 'body', and it doesn't appear to have changed anything. Any ideas?

By Chris Humphreys on   10/8/2008 5:38 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

Hi Guys, Is there are any thing specific that I need to give for Firefox and Safari. I am using DNN4.9.0 and used the following code: //for Fire fox //For safari Is there any thing else I need to change for using different css for different browser. Thanks a lot in advance!!!

By Phani on   11/13/2008 12:21 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

Hi Ryan, Thanks for the nice article. Btw I tried to use the same logic for Safari and Mozilla Firefox Browser with the following code with no success. Can you please help where am I going wrong. Please help its very urgent. Thanks Phani...

By Phani on   11/13/2008 1:18 AM
Gravatar

re: DNN Tips & Tricks #3: Conditional Stylesheets

Thanks! Really need this. Could you explain any functional purpose of the Name setting? Can't get this object to work for some reason.

By Michel Eckersley on   11/15/2008 9:02 AM
dummy