Using CSS3 in Drupal and Internet Explorer - Module or Code

knooq-howto.png

There are so many great new features in CSS3 that developers are itching to start using it. However, there is the issue of cross browser compatibility as usual, an issue with Internet Explorer (IE) in particular.

So, web designers tend to look for a fix to the compatibility issue. Where CSS3 is concerned, we can generally fall back on Javascript/jQuery or a condiional statement in the HTML Document, which directs browsers such as Internet Explorer (IE) to use another CSS Stylesheet.

New CSS3 Properties

Two of the new features of CSS3 are the border-radius and the box-shadow properties, which allow the designer to add curved edges and shading/shadows to boxes or square elements. Unfortunatley, they don't work in many versions of IE.

One of the workarounds in IE for compatibility is to use CSS image sprites that replace border-radius curved corners and shadows with an image of a curved corner with shadow. Obviously this is not easy to set up when compared to the relatively straghtforward use of CSS3 code. You also need to source or design the graphics for the image sprite.

CSS3PIE - A Solution

There is a great solution to the problem of IE Browser Compatibility when using CSS3 mark-up. We were so impressed with it that we thought we'd write a blog article about it. It comes in the form of CSS3 PIE an elegant and effective workaround for CSS3 in IE.

CSS3PIE uses HTML Components or "HTCs" to render the equivalent of CSS3 properties within Microsoft IE. An HTC is a file that contains scripts and a set of HTC specific elements (such as events, properties and objects etc.). These files use a script to wrap certain functionality, or behaviour, into a component that can then be used to transform standard HTML elements into dynamic HTML elements.

CSSPIE uses these "behaviours" in HTC components to look for CSS3 properties, then parse it in IE which in turn renders the CSS3 property within the HTML page. It might sound a bit complicated, however the developers over at CSS3PIE have made it extremely easy to implement.

Not all CSS3 properties are included, but the ones that are, just happen to be the most utilitarian in our view, and they help do away with the alternative solutions of lengthy javascript files and/or CSS image Sprites (for IE compatibility only).

Just a point to note, CSS Image Sprites are a great way to group images together and improve page load speed, however they are time consuming and best used for larger images as opposed to rounded corners and shadows.

Using CSS3PIE - An Example

To use CSS3PIE, download the code from their website and place it in a folder such as the libraries folder within your Drupal installation. It's then a simple task to tag each CSS class or ID in your style-sheet that have CSS3 properties assigned to them already. The following is and example of a HTML element that has the border-radius and box-shadow properties. We just add the 'behavior' (spelt without a 'u') tag line behavior: url(/sites/all/libraries/PIE/PIE.htc); to the CSS for this element, as follows:

#drupal-css-id-or-class
    {
    border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
    box-shadow: -2px 5px 10px 5px #e1dfdd;
        -moz-box-shadow: -2px 5px 10px 5px #e1dfdd;
        -webkit-box-shadow: -2px 5px 10px 5px #e1dfdd;
    "behavior: url(/sites/all/libraries/PIE/PIE.htc);"
    }

Note that the tag line points to the folder where you installed the HTC code. Repeat this step for all classes and ID's within your style-sheet that use CSS3 properties. Then update your server files and clear your cache.

Drupal Module

There is a Drupal Module for CSS3PIE which is a handy implementation of the CSS3PIE code, and thanks to its developers, is very straightforward to use.

After you have installed the Drupal module in the customary manner, and downloaded the CSS3PIE code to your libraries folder, you'll enter the CSS3 classes and ID into a list within your Drupal interface under /admin/build/themes/css3pie, rather than editing the style-sheet as shown above. That's it really, the module comes with clear installation instructions. Whether you use the module or edit the style-sheets directly is a matter of preference.

The advantage of including the 'behavior' lines in your CSS stylesheet is that should you change the name of a class or ID, you won't then forget to update the corresponding class or ID under the module settings. The advantage of using the module is, if you write other Drupal Modules, you can hook into the CSS3Pie module for you own purposes

Related Information

Our Blog article on using CSS in Drupal Design shows how to add and change CSS style-sheets in your Drupal theme.

We welcome your comments, feedback and questions

Home Blogs knooq.com's blog