Articles

[CSS (Cascading Style Sheets) and XSLT: Hints & Tips]

CSS (Cascading Style Sheets) and XSLT (Extensible Stylesheet Language Transformations) are the perfect combination to separate your web content from your layout(s).

Over the time I will cover here some nice features, regardless if you use CSS alone or in combination with XSLT.

+++ IE 5 / IE 6 and even IE 7 box model bug

Ok, the 'real' box model bug is in IE 5 but can be observed in IE 6 and IE 7 only when in 'Quirks Mode'. The reason for that is backward compatibility.
I have set up a very plain page that concentrates on the box model of W3C and Windows IE.
This LINK brings you to that page and feel free to examine the source and play around with the DOCTYPE and how to bring IE in quirks mode or standard mode.
Cheers,
Frank

+++ Redundant style attributes: using styles in XML files and setting default values for XML-Tags in your XSLT templates

Using redundant attributes in a style means: each one overrides the previous setting. See sample with the attribute 'width'.
Helpful when you want to set a default value in a XSLT style sheet and want to retain the flexibility that someone may override the default value in a content xml file. E.g. you have an XML file with a line like the following:

	
<pic src="../img/pic.gif" style="width:100px; width:400px; height:40px" alt="n/a" /> 

Assumption: <pic> is your XML-Tag that should be transformed to a HTML <img> TAG by a XSLT template. In this case I have width redundant and the image will be rendered with a width of 400px! Not 100px.
I know that wouldn't make sense, but it should demonstrate that the last value counts.
Now something with more sense built-in, assume you have following XSLT Style sheet:

In this case you get "border:0px; display: block" etc. as DEFAULT VALUES but you may deliver them freshly with the PIC element style. Even if you would provide a width value in your template, the width: 400px statement from the first example would prevail, since it is the last one! So this knowledge helps to keep your xml files lean by defining default values and only in case they don't meet your requirements you would override them.

+++ Inheriting from multiple CSS classes

Cool or dangerous?

<div class="GeneralLookStyle SpecificAddOnA SpecificCharacteristicZ">
	blahblah
</div>

You can combine several classes (separated by a blank) for an element which introduces a type of multiple inheritance. This is a practical and efficient way to build the final style by adding up 'modules'. The risk it bears is that your entire style building process is somehow more complicated to understand for somebody doing the maintenance for you.
What can happen? The guy who does the maintenance of the site has to modify the look of a certain element. So he/she checks which CSS classes are involved and knows that he/she has to add the 'new' attribute somehow, somewhere. But where? You can't just modify one of the already involved classes unless you have a full understanding where else they might be inherited. Without this understanding you may add the new attribute somewhere else where it was not intended to be. Conclusion: Quick shots are problematic regarding maintenance. You either take the time to understand the entire class model or you just add a new css style and add it to the list of style classes already used for the element. Doing the latter over a longer period of time makes the CSS file a mess.
Adding up classes to build a final style is a powerful & cool feature. Developers who build a site from scratch will love it. The maintenance crew won't unless you maintain parallel a good documentation for the CSS file.
Otherwise it can be annoying to find out which style overrides and supersedes which one.