Another type of stylesheet are Cascading Style Sheets (CSS) [11] that allow authors and users to attach font and spacing information to structured documents such HTML and XML documents. By separating the presentation style of the documents from their content, CSS simplifies Web authoring and site maintenance. Although it is not an XML technology per se, it bears some resemblance with XSL. Sharing the same name often brings some confusion between them so we think it is useful to give an example of what type of compact form can be achieved with a CSS. We will then compare this tool with what has be done with XSLT and XSL-FO.
As we said in the previous section, CSS and XSL-FO share some concepts and terminology about formatting. Both use a nested box modeling approach and many formatting properties sharing the same name. A CSS is set of formatting rules that can be defined at the level of the tag itself, the document or even of a web site. A rule defines if the information within the tag should be displayed as a block starting a new line or if it should be inserted in-line; we have seen a similar distinction in XSL-FO. The rule can further define the formatting attributes (fonts and color), the padding, the margins and the borders around the information within this tag; again the same terminology can be found in XSL-FO.
The formatting to be applied on an element depends on whether an element corresponds to
the selector of a rule. Selectors can depend on the name of the element, its class (the
value of the class
or id
attribute), its position in the document
(e.g. whether is a child or sibling of other elements). It is also possible to check the
value of its attributes. It is also possible to have a different formatting if the user
clicks or hover the mouse on an element or if it is a link that has been visited; see [57] for more details. There is a very limited way of generating some
content either before or after the output of the content of the tag, see Example 5.11.
Compared with XSLT, the formatting that can be obtained with CSS is relatively limited because it is not possible to compute new information or to change the order of the elements in the file. So the information given in the tags and attributes can only be used for labelling the text nodes and cannot have any informational content that can appear in the output. This is the case in HTML files in which tags are only used for formatting. The only effective control that can be achieved with CSS is the selective display the information either by leaving some space or by removing it completely from the display. This is quite rudimentary compared with what can be done with XSLT. But when CSS are combined with Javascript, it is possible to build interactive displays such as tooltips or have some parts that appear or disappear when the user clicks on certain parts of the display. It is also possible to add some content before or after the text content of the element, but this is a bit awkward and no computation of this new information is possible. But is must be remembered that CSS are designed as a declarative formalism for separating formating information from content and not for creating new information. One way of dynamically creating new content in a web page is the use of the AJAX technologies, discussed in Chapter 10, that allow the modification of the underlying document structure.
Example 5.11. [compact.css
] Cascading Style Sheet for displaying the content of the cellar book in a
web page
The last 25 lines of the file are not shown as they are similar to the two last ones displayed here (the name of the tag is given as content).
1 * {display:block; position:relative; margin-left: 20px; 5 border-color:black; border-left-style: solid; border-left-width: thin; border-top-style: solid; border-top-width: thin; 10 padding-left: 2mm; padding-bottom: 1mm; } *:before {
15 font-weight: bold; color:green; } cellar-book:before {content:"cellar-book ";}
20 wine-catalog:before {content:"wine-catalog ";} wine:before {content:"wine code="attr(code);}
properties:before {content:"properties ";} color:before {content:"color ";} ...
25
|
Rule for any element: it is displayed as a block relatively placed at 20
pixels to the left of its enclosing block; the borders and padding are the
same as for |
|
All generated text that will appear before a tag will be in bold green. |
|
As there is no way of accessing the name of the current tag, a specific rule must defined for each type of tag to insert its name in front of its content. |
|
The |
|
25 lines that follow the same pattern as the two previous ones:
tag-name
|
Figure 5.6. CSS formatting of Example 2.2 with the stylesheet of Example 5.11
Two excerpts of the display in a web browser of the cellar book using the CSS stylesheet. The nested box display is to be compared with the one shown in Figure 5.4. The parts in bold (green if seen in color) are generated content.