Currently, Fusion implements IE-specific fixes and conditional styles by automatically parsing the child theme for an appropriately named CSS file (e.g. ie6-fixes.css) and using drupal_add_css() and its 'browsers' option to output the traditional IE-specific comment including the link to the CSS file, such as:

<!--[if IE 8]>  <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/fusion/fusion_core/css/ie8-fixes.css" />  <![endif]-->

Pros to the existing approach:

  1. "ie*-fixes" files are automatically added - no extra configuration for users
  2. follows widely-used conventions; is based on an expected solution
  3. does not involve CSS "hacks" that create invalid code

Cons for the existing approach:

  1. Separates IE-specific styles from the styles they are overriding - difficult to read and troubleshoot/maintain
  2. Requires overhead in template.php for Fusion core
  3. Requires additional HTTP requests for ie-specific stylesheets
  4. Must be manually updated every time a new version of IE is released

My proposed solution is to take the "No Conditional Styles OR CSS Hacks" approach to ie-specific styling proposed by Paul Irish here: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-ne...

This solution involves using the same IE-specific commenting convention to add a class to the <html> tag that indicates which browser is currently being used.

For example:

<!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->

This is particularly appealing now that Drupal 7 includes a html.tpl.php file - so that sub-themes of Fusion do not have to touch this code.

The result of implementing this approach would mean that conditional styles can now be applied directly in a theme's main CSS file, along side the non-browser-specific styles they are modifying:

div.some-block {
  background: #fff url(transparent-background.png) repeat-x 0 0;
 }

.ie6 div.some-block {
  background-image: url('ie6-alternate-background.gif');
}

Pros of the suggested approach:

  1. Keeps browser-specific styling in close context to original styles - Much easier to read and troubleshoot
  2. Still no additional configuration,
  3. plus users do not have to create new files and name them correctly to ensure they are automatically included
  4. Reduces overhead in template.php
  5. Reduces HTTP requests and other small performance improvements
  6. does not involve CSS "hacks" that create invalid code

Cons of the suggested approach:

  1. Still requires manual updating for every release of IE
  2. Will present a learning curve for some users
    • although there are module-based solutions if those users wish to retain the existing approach
  3. Potential for unforseen/untested incompatibilities

The attached patch file includes the following changes:

  • Addition to html.tpl.php to create browser-specific classes on <html> tag
  • Migration of ie-specific styles into the appropriate general stylesheet
  • Removal of now-obsolete ie*-fixes.css stylesheets
  • Removal of ie-specific logic from template.php
  • Also included a "no-js" class on <html> and the corresponding JS to remove that class if JS is, in fact, present
CommentFileSizeAuthor
fusion-core-improved-conditional-styles.patch35.82 KBsheena_d

Comments

sheena_d’s picture

sheena_d commented
Assigned: sheena_d » aquariumtap

assigned to aquariumtap for review.

Peter Bowey’s picture

Peter Bowey commented

Great idea!

I have used the method myself with Fusion 6.x.
The old [current] CSS methods for Fusion do not aggregate well!
(CSS aggregation is ignored for Fusion Stylesheets)

aquariumtap’s picture

aquariumtap commented
Status: Needs review » Reviewed & tested by the community

I discussed this with @sheena_d over IRC, but the summary of it is I agree this is a great idea. Going to do a couple more small tests, but this looks good to me!

This change will require a corresponding one in the Accelerator grid generator. I'll create a separate ticket for that.

sheena_d’s picture

sheena_d commented

It will also require some updates to documentation. I'll open a ticket for that once the changes are committed.

Peter Bowey’s picture

Peter Bowey commented

@sheena_d
@aquariumtap

I fully endorse this 'new' concept, it will be a great
blessing to see it implemented.

Facts: I almost died of code 'shock' when I found how
Fusion dealt with CSS conditionals [it was so old style].

Thanks for the creative growth on this!

aquariumtap’s picture

aquariumtap commented
Status: Reviewed & tested by the community » Closed (fixed)

Committed to dev branch. Thanks @sheena_d!

dshults’s picture

dshults commented

Another added benefit is nesting the .ie8 or .ie9 classes in an SCSS file so that one nested rule controls all IE fixes for the specific browser. Thanks for the post.

  • Commit a9624fa on master, 7.x-2.x by aquariumtap: 
    Issue #1328806 - adopts "No Conditional Styles OR CSS Hacks" approach to...