Taming Definition Lists, or Generated Content in IE

[Jimmy Cerra]

I recently came up with a cool little stylesheet [1] for definition
lists. There is a small demostration for the impatient [2]. I hope
this helps someone.

Here's how I did it. Definition lists are usually styled something
like:

] Term
] A tab of white space followed by the definition
] By
] Marcus Tullius Cicero
] L. Ipsum
] James Cerra
] Created
] Circa 45 BC
] Issued
] December 24, 2003

And so on. However, I wanted to style my definition list as [2]:

] Term: A tab of white space followed by the definition
] By: Marcus Tullius Cicero, L. Ipsum, James Cerra
] Created: Circa 45 BC
] Issued: December 24, 2003

These lists are displayed inline, with generated content added (i.e.
": " or ", " between multiple dd elements). This was relatively
simple to do for Mozilla or Opera with the following four blocks:

] dt, dd {
] display: inline;
] margin: 0;
] padding: 0;
] }
]
] dd + dt:before {
] content: "\000A";
] white-space: pre;
] }
]
] dt:after {
] content: ": ";
] white-space: pre;
] }
]
] dd + dd:before {
] content: ", ";
] }

However, Internet Explorer doesn't support CSS 2.1 generated content,
the "+" selector, or ":before" and ":after" pseudo-classes. I solved
this problem by using Microsoft's dynamic styles. I created a "dummy"
property and added a dynamic style which does something after the
element is first loaded (otherwise, it would be applied over and over,
until the browser crashed). Here's a simple example:

] -ie556-content: expression(
] this.parsed ? 0 : (aJavaScriptFunction(this), this.parsed=1)
] );

That will execute a JavaScript function on the element being styled
(referenced by the keyword, 'this') when it is first loaded. To add
the generated content in the specific contexts, I used another
conditional operator [3] with the DOM (W3C, Level 1) and a propitery
Microsoft function called "insertAdjacentText". You call it against
the object being modified [4]. It takes two arguments: The first is
a string that specifies where to place the new text ("beforeBegin",
"afterBegin", "beforeEnd", or "afterEnd"). The second argument is the
string to add.

Here's a practical example. The following is equivelent to the last
rule in my origional CSS (sorry about line breaks):

] dd {
] -ie556-content: expression(
] this.parsed ? 0 : (
] (previousSibling.nodeName == nodeName ?
insertAdjacentText("afterBegin",", ") : 0),
] this.parsed=1
] )
] );
] }

Here are my three content-generation CSS rules added translated as two
rules for IE:

] dt {
] -ie556-content: expression(
] this.parsed ? 0 : (
] (previousSibling ? insertAdjacentText("afterBegin","\\u000A") :
0),
] insertAdjacentText("beforeEnd",": "),
] this.parsed=1
] )
] );
] }
]
] dd {
] -ie556-content: expression(
] this.parsed ? 0 : (
] (previousSibling.nodeName == nodeName ?
insertAdjacentText("afterBegin",", ") : 0),
] this.parsed=1
] )
] );
] }
Check out my source for an easier to read version [1], [2]. I hope
that gives someone some ideas for their own stylesheets.

--
Jimmy Cerra

[1] http://www.pitt.edu/~jfcst24/2004/04/05/test.css

[2] http://www.pitt.edu/~jfcst24/2004/04/05/testx.html

[3] The the confused, a conditional operator in JavaScript takes the
form: "test ? doneIfTrue : doneIfNotTrue".

[4] i.e. The "this" object, but that's already the default scope, so
it is unnecessary to be added.