Archive for October, 2008

Whilst there was me thinking the IE team were going to be sticking rigidly to 2.1 compliance and nothing else, it was announced on the IE Blog that a number of proprietary and level 3 properties are going to be implemented yet again on an experimental basis (using the -ms- prefix).

Most of the level 3 properties deal specifically with text layout (layout-grid, line-grid, line-break, word-wrap), but they’ve also prefixed some non text layout-specific properties including background-position-x & background-position-y and overflow-x & overflow-y.

One thing I was surprised to see was the amount of proprietary properties that they are continuing to support; in case you’re not already familiar with the functionality of these properties, I’d thought I’d come up with a brief intro for each of the most interesting properties (full property list):-

• -ms-interpolation-mode – Introduced in IE7, this property deals with smooth image scaling; this gives the author the ability to de-scale large images using CSS, without losing definition. The two keyword values that can be used are nearest-neighbor (using nearest neighbor interpolation mode) and bicubic (using high-quality bicubic interpolation mode). MSDN page
• -ms-filter – Probably the most used property on the list as it is currently the only way to emulate opacity in versions of IE. NOTE: MS have recognised that the former syntax used to emulate opacity was illegal, so they have no re-written the value.
• -ms-accelerator – As far as I’m aware, this is a brand new extension for IE8 and there is currently no specification from MS on it’s function.
• -ms-behaviour – This property allows a script to be attached to the element to which it is applied; the script that is specified in the property is saved as an HTC file (HTML Component). I’d hazard a guess that the most common purpose of this property is getting semi-transparency in PNGs working in IE5+. MSDN page
• -ms-scrollbar-* – This set of properties has been with us since IE5 and the property name is pretty self-explanitory; they’re used to control the colour of the browser window scrollbars.
• -ms-text-underline-position – Supported since IE6, this property sets the position of the underline that is set through the text-decoration property.
• -ms-zoom – sets the maginfication scale of an element.

Some of you may already be aware that IE6 has a limitation of reading only up to 30 external stylesheet declarations (when using either the style element, link element or @import rule). This figure may seem ridiculously high, and you might be thinking that an author with that many individual declarations doesn’t have a clue about organization, but this is what out-of-the-box Drupal serves you (Drupal.org related post).If you’re working on a fairly large Drupal site which employs a number of different modules, then you may well experience this problem. The issue is that many Drupal modules that have any kind of theming side of them include their own (sometimes very hacky) stylesheets; so when one of these modules is installed, Drupal adds a link to this stylesheet by means of a style element declaration – yes thats right, one for every module.

I’m currently working on a large-scale Drupal site which includes a large number of modules, each with their own styleshee. As already mentioned, IE6 (and below) ignore any stylesheet declarations (using style or link elements) after 30 instances. Add to this the numberous non-module stylesheets (Drupal core & IE-specific) and you’re well on your to reaching IE6s limit.

So, what are the solutions?

Aggregate & Compress CSS within Drupal

Drupal recognises the issue of an additional HTTP request required for each module stylesheet. Fortunately this feature gets around the IE6 issue by aggregating all module and core stylesheets into one instance for each stylesheet media type defined. You can access this feature by logging in as an Admin and going to Site Configuration > Performance

However this method caches CSS too, which means it’s far from ideal whilst theming development is taking place.

Unsetting stylesheets within template.php and using @import

You can disable any module stylesheets from being included by unsetting them from within template.php. First get the stylesheet array by using $css = drupal_add_css() and then go ahead and unset all stylesheets (which will then all be linked to from within just one). Your snippet will look something like this:-

# get array of stylesheets
$css = drupal_add_css();
unset($css['all']['module']['modules/system/system.css']);
unset($css['all']['module']['modules/system/defaults.css']);
unset($css['print']['theme']['themes/mytheme/print.css']);

Now you would go ahead and use the @import rule to import your stylesheets through one of your theme-level stylesheets. The issue however, still exists that if you have more than 30 being imported within a single document, stylesheets that are <30 will be ignored. To only workaround is to create a new stylesheet in this case, specifically for importing the remaining stylesheets.