In Chapter 12, I demonstrated the various options available to structure and style tables. In this chapter, I discuss how CSS can be combined with XML to style XML documents. This chapter covers the following:
What XML is
How to create an XML document structure suitable for presentation
The XML declaration
The CSS
displaypropertyDisplaying block-level boxes with XML and CSS
Displaying inline-level boxes with XML and CSS
Recreating the structure, layout, and behavior of HTML tables using XML and CSS
XML is a robust and flexible markup language. Its uses extend to desktop applications such as spreadsheets and music jukebox software. It is also used heavily on the Internet for a plethora of applications. Many people see XML as the web language of tomorrow, one that will eventually replace HTML as the mainstream markup language of choice for building websites. In the following sections, you look further into XML.
Note
In this chapter I assume that you have a basic familiarity with XHTML. If you'd like to learn more about XHTML, try Beginning Web Programming with HTML, XHTML, and CSS by Jon Duckett (Wrox Press, 2004). For more information about XML, try Beginning XML, Third Edition, by David Hunter et al. (Wrox Press, 2004).
XML documents have many uses. For example, an XML document can be used to store data (like a database) because in an XML document you invent the tags and attributes. You have the advantage of creating tags in an XML document that describe the data they contain. Because you have the freedom to create elements and attributes as you wish, the data contained in the document can be organized much more efficiently and semantically than by using HTML alone. Your ability to invent elements and attributes makes using XML advantageous in another way: It creates a document structure that makes sense to both humans and computers. Placing a recipe between <recipe> tags makes much more sense than using the various elements of HTML and XHTML. Placing a recipe between <recipe> tags also makes it easier for a web developer to design a search that looks for pages that contain only recipes. He or she can also share or transport those recipes to a variety of applications, such as spreadsheet programs and word processors, or by syndication to thousands or even millions of websites worldwide. XML's most impressive benefit is that it can be used for a variety of applications, not just for display on a web page.
The use of XML to syndicate data is typically called Really Simple Syndication (RSS), a specification that uses the XML language to describe syndicated data. RSS is in use today by thousands (perhaps even millions) of websites, and this is just one of the many uses of XML.
XML can also be used to present data on the web as an HTML or XHTML document does. This isn't, however, the most common use of XML; in fact, the world's most popular browser, Internet Explorer 6, offers only mediocre support for XML display using CSS. Mozilla, Opera, and Safari, in contrast, have excellent support for the CSS required to display an XML document, and the examples in this chapter display very well if viewed in one of these browsers. Note that CSS is not the only solution in the works for displaying XML in a browser. Another solution is the Extensible Stylesheet Language (XSL), a stylesheet language designed specifically for XML.
XSL isn't a replacement for CSS in XML documents; XSL is a more complicated style-sheet language that uses XML syntax. XSL is capable of much more than CSS. For instance, XSL is capable of completely transforming documents. Both languages have advantages for particular tasks and may both be utilized to present XML documents.
For the sake of staying on topic and simplicity, I cover styling XML using only CSS with what's available in today's browsers.
XML most closely resembles HTML; however, the angle bracket is about the only thing the two languages have in common. Let's take a look at XML document structure.
XML must be well formed; all elements must have both an opening and a closing tag, and all attribute values must be enclosed with quotations. All elements must be properly nested, that is, you can't have
<recipe><ingredient></recipex/ingredient>, it must be<recipe> <ingredient></ingredient></recipe>.XML documents can contain only one root element.
XML is case-sensitive.
Figure 14-1a is a brief example of an XML document.
When you view this in a browser, IE 6 and Firefox display a tree of the XML source code as shown in Figure 14-1b. Safari doesn't show the source elements; it just shows the data.
XML is said to be well formed when the document contains an XML declaration—the <?xml version="1.0"?> in this example—and all tags have both an opening and closing tag, any attributes in the document are all enclosed in quotes, and only one root element exists. In this example, the root element is <page>. I cover the XML declaration in more detail later in this chapter. As with XHTML, you can use the shortcut syntax to close a tag, as shown in the <cover/> element in this example.
Note
The XML declaration is technically optional, but experts agree that it is considered best practice to include it. The reasoning behind this is outside of the scope of this book; just keep in mind that it's better to have it.
Next, an XML document can only contain one root element. The root element in this example is the <page> element; in HTML and XHTML the root element is the <html> element. Therefore, the following is not a valid XML document because it contains two root elements.
If an XML document is not well formed, the browser refuses to display it and instead displays some error text indicating what went awry. This error text is depicted in Figure 14-2b.
You can use this error text to correct the document, after which the browser displays the XML document tree like that shown in Figure 14-1.
Finally, XML is case-sensitive. So <PAGE> and <page> are two different tags in XML.
As you've just seen here, XML's markup structure can describe the data it contains. This is a benefit of XML, but not a requirement. In the following section, I discuss creating an XML schema that you can use to structure the data contained in an XML document.
The term schema refers to the structure and naming of XML elements that work together to produce a well-formed XML document. In this context, you are going to define your own XML elements, so having a schema means that you are going to decide on what element names and attributes that you will use in your XML document. Typically your XML schema reflects the data that you want in your XML document. If your XML document is a recipe, you want to define the different elements that will be included to describe recipe data, and that naming convention will be your schema. For example, you might opt to create an element named <measurement> that includes all measurement data, and you might define an element named <ingredient> that includes ingredient data. These and all the other elements that you create come together to make up your schema.
Some requirements that you have to consider are the following:
Defining a page structure that resembles tabular data or list data, such as HTML/XHTML
<table>, <tr>, and<td>elements and list elements such as<ul>and<li>.Determining which elements are block-level elements (like the
<div>element in HTML/XHTML) and which are inline-level elements (like<span>).
This schema business really isn't difficult. Take a look at how the "My Favorite Records" example from Chapter 12 is written as an XML document.
<favorites>
<title>
Table: My favorite records.
</title>
<cols>
<album/>
<artist/>
<released/>
</cols>
<headings>
<record>
<album> album </album>
<artist> artist </artist>
<released> released </released>
</record>
</headings>
<records>
<record>
<album> Rubber Soul </album>
<artist> The Beatles </artist>
<released> 1965 </released>
</record>
<record>
<album> Brown Eyed Girl </album>
<artist> Van Morrison </artist>
<released> 1967 </released>
</record>
<record>
<album> Mellon Collie and the Infinite Sadness </album>
<artist> The Smashing Pumpkins </artist>
<released> 1995 </released>
</record>
</records>
<footers>
<record>
<album> album </album>
<artist> artist </artist>
<released> released </released>
</record>
</footers>
</favorites>This is the entire XML document. In this version of the document, the XML tags that structure the data also describe the data contained in the document. Instead of the <table> element, there is the <favorites> element; instead of the <caption> element, the <title> element is used. Instead of the <colgroup> element, the <cols> element is used to group the columns, and the columns themselves are named for what type of columns they are: <album/>, <artist/>, and <released/> instead of <col />. <headings> replaces the <thead> element, and <record> replaces the <tr> element. <album>, <artist>, and <released> are used here as cells, replacing the <th> and <td> elements. You can use the same names for the cells as for columns here because CSS offers options to distinguish between the two. Likewise, the rest of the table elements in Chapter 12 in the "My Favorite Records" example are also represented here with an XML counterpart. Finally, unlike the example in Chapter 12, the XML document here is complete—you don't add <html> or <body> elements. However, before the XML version of the "My Favorite Records" example is complete, it needs two more things: an XML declaration and an XML stylesheet declaration, both of which I add later in this chapter.
Now that you've seen an example of converting an HTML document to an XML document, the following Try It Out presents the Spicy Thai Peanut Sauce recipe that you saw in Chapter 12. Here the recipe is reformatted as an XML document.
Now that the Spicy Thai Peanut Sauce recipe has a viable XML document structure, let's continue the discussion. In the next section I discuss the XML declaration.
Most XML documents contain an XML declaration. If one is included, it's the very first tag in the document, and it looks like this:
<?xml version="l.0"?>
This declaration announces which version of XML is contained in the document. This is not very complicated, and it isn't required. In an XML document, it simply says, "Hey, I'm an XML document!" When an XML document encounters a browser or any other type of application that is able to read XML documents, the browser or application doesn't have to guess what kind of document is being presented. I say encounter in this context because, as I discussed earlier, an XML document is not restricted to web browsers.
An XML declaration can contain three attributes, two of which are optional. These are called pseudo-attributes because they resemble markup attributes. The first attribute is the version attribute (see the previous example). This denotes which version of the XML specification is being referenced. Currently, two versions, 1.0 and 1.1 exist. Version 1.1 was only recently made a candidate recommendation by the W3C. As a candidate recommendation (and not a standard), Version 1.1 is still shiny and new, meaning it isn't yet widely available. For the purpose of this discussion I'll stick with 1.0. Which version I use is moot, because the differences between the two versions do not affect the basic syntactical presentation of XML documents in the examples of this chapter. The features in the XML 1.1 specification affect more complicated uses of XML that are beyond this immediate discussion.
The next attribute is an optional encoding attribute:
<?xml version="l.0" encoding="ISO-8859-l"?>
The encoding attribute tells the parser (the program interpreting the XML) about the characters contained in the document, that is to say, the data contained in the document. The value "ISO-8859-1" refers to characters common to the Americas and Western Europe. Actually, it's part of an International Standard. The letters ISO stand for International Standards Organization; the numbers refer to the ISO document. This can also go by the much simpler name of "LATIN-1", as in the following:
<?xml version="l.0" encoding="LATIN-1"?>
The inclusion of the
encodingattribute is very important because the default encoding value is not"LATIN-1"but an even smaller set of characters. You must include the proper encoding type in order to have all characters correctly translated to their proper display equivalents.
The third attribute is the standalone attribute, which looks like this:
<?xml version="l.0" encoding="LATIN-1" standalone="yes"?>
The standalone attribute has to do with the inclusion of a Document Type Definition (discussed briefly in Chapter 7). Document Type Definition (DTDs) may also be included in XML documents, but they require the DTD to be custom written because the elements of an XML document can be invented. Creating a Document Type Declaration is beyond the scope of this book, so for the purpose of this discussion the standalone attribute with a value of "yes" tells the browser that no Document Type Declaration is accompanying the XML document.
Note
An XML declaration should always be included in XML documents because it helps both humans and the computer program that is interpreting the XML to determine what kind of XML appears in the document.
The pseudo-attributes of an XML declaration must also appear in a particular order: The first attribute must always be the version attribute, followed by the optional encoding attribute, followed by the optional standalone attribute.
The syntax for including a style sheet in an XML document closely resembles a cross between the XML declaration itself and the <link> tag in HTML/XHTML:
<?xml-stylesheet type="text/css" href="test.css"?>
Like the <link> element in an HTML or XHTML document, this references the external style sheet, which styles the XML document. The XML stylesheet declaration must appear after the XML declaration. The declaration must appear first in the document and before the document markup itself. By including a style sheet, you gain access to the full range of CSS properties and values in an XML document, just as you gain access in an HTML or XHTML document.
Now that you are familiar with the XML declaration and the stylesheet declaration, you can append the syntax to the My Favorite Records example shown in Figure 14-3a.
This results in the output depicted in Figure 14-3b.
I'll be using the My Favorite Records example again later in the chapter, but for now just put it aside.
Because the stylesheet declaration has been added, even though no actual style sheet is created, the text is run together. You can now include style sheet rules in the external CSS file to format the text of the XML document.
You've just seen what including both the XML declaration and the XML stylesheet declaration does to an XML document. In the following Try It Out, you'll update the Spicy Thai Peanut Sauce recipe presented in Example 14-1 so that it has an XML declaration and a reference to an XML style sheet.
Try It Out: Adding an XML Declaration and Style Declaration
Example 14-2. The steps below add an XML declaration and style sheet reference to the Spicy Thai Peanut Sauce recipe document.
Open
Example_14-1.xmland add the following modifications:<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml-stylesheet type="text/css" href="Example_14-2.css"?> <page> <recipe>Save this file as
Example_14-2.xmlCreate a blank style sheet and save it as
Example_14-2. css. This results in the output depicted in Figure 14-4.
How It Works
By referencing a style sheet, you have taken the first step for applying style to an XML document. Now when you view the XML document in a browser, it no longer appears with the tree structure of the XML source code, as it would if you had not specified a style sheet. At this point the document isn't very pretty — it is displayed as one long string of text. This is why the CSS display property is essential. It explains to the browser how to display each tag contained in the XML document.
In the XML declaration, you've also included an encoding; here you've used the encoding type, UTF-8, which covers the fraction and the "e" with acute accent characters used in the source file. Without the UTF-8 encoding, your browser may not display these characters properly, since typically, browsers default to UTF-7, which is a small subset of characters. UTF-8 is similar to the LATIN-1 encoding that you saw earlier in this section, but it includes thousands of characters more.
Displaying XML documents with CSS requires heavy use of the CSS display property, a property that has the capability of defining an element's behavior when it is rendered in a browser. The following table shows the display property and its possible values.
Property | Value |
|---|---|
display | inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none |
The display property can have one of 17 different values (as of CSS 2.1). IE 6 and IE 7 are behind the times in terms of supporting the full list of display value possibilities. Firefox, Opera, and Safari have fantastic support of the CSS 2 display values. Opera, in this case, supports the full set of possible display property values, and Firefox supports most of the possible values, but not all. In the coming sections, I look at each possible value individually, what display mode each triggers when applied to an XML element, and what elements with the same rendering behavior are found in HTML and XHTML.
The display: inline; declaration emulates elements like <span>; that means it causes the target element to behave like an inline-level element, enabling it to appear in the flow of text. In an XML document, it might be necessary to emphasize a word or phrase in the context of the text. This is done by assigning the element a display: inline; declaration in the CSS style sheet. The XML document in Figure 14-5a and the style sheet demonstrate how inline elements are displayed in XML.
In the CSS style sheet (Figure 14-5b) the <wood> element can be defined to have whatever emphasis you deem appropriate.
Now the browser has explicit instructions for displaying any <wood> elements appearing in XML documents. The effects of this are depicted in Figure 14-5c.
After looking over the first bit of code in the previous section, naturally I'll bet your next question is, "What about the <tonguetwister> element?" The answer is that you can give the browser a variety of explicit instructions for how to display this element. For this example, you can make the <tonguetwister> element a block-level element with the display: block; declaration. The XML is shown again in Figure 14-6a.
The CSS in Figure 14-6b is included in the XML document.
This results in the output depicted in Figure 14-6c.
Just as in HTML/XHTML, block-level element default behaviors still apply: The output will automatically span the entire window unless told to do differently, because its default width value is auto. With this declaration, the <tonguetwister> element emulates the behavior of the <html> element found in HTML and XHTML because it is the root element of the document. This is why you see the lightyellow background taking up the whole screen. In fact it's the same thing as writing:
<html>
How much <span>wood</span> would a <span>wood</span>chuck chuck
if a <span>wood</span>chuck could chuck <span>wood</span>?
A <span>wood</span>chuck would chuck all the <span>wood</span> a
<span>wood</span>chuck could chuck if a <span>wood</span>chuck
could chuck <span>wood</span>.
</html>The display: list-item; declaration causes an element to appear with a default bullet character next to it, as is the case with the <li> element in HTML and XHTML. When combined with the list-style-type property or list-style-image properties (see Chapter 9), the list can be numbered, bulleted, or have a custom image applied. Consider the snip of XML in Figure 14-7a.
When combined with the right CSS (Figure 14-7b), this is transformed into a list.
This results in the output shown in Figure 14-7c.
This is the same as writing the following in HTML/XHTML:
<ul>
<li>Rubber Soul</li>
<li>Sgt. Pepper's Lonely Heart's Club Band</li>
<li>Revolver</li>
</ul>The <list> element is made into a block-level element to emulate the behavior of a <ul> HTML element. It's also given some margin on the left side to indent the list. Next, the list-style: disc; declaration makes the list into a bulleted list. The <item> element is told to be a list-item with the display: list-item; declaration. Without the list-style: disc; declaration, the list still appears with bullets because a bulleted list is the default behavior of the display: list-item; declaration.
Creating numbered lists is a more difficult undertaking in XML documents than it is in HTML given current browser limitations. Applying a simple list-style-type: decimal; declaration should produce a numbered list, and it does so if you're viewing the output in Safari, Opera, or IE 6. However, a bug in Firefox prevents it from producing a numbered list. When viewed in Firefox, the list appears with all zeros, as seen in Figure 14-8b.
Figure 14-8a shows the required CSS to generate numbered lists.
When applied to the same XML as seen in Figure 14-7a, you get the results depicted in Figure 14-8b.
This is the same as writing the following in HTML/XHTML:
<ol>
<li>Rubber Soul</li>
<li>Sgt. Pepper's Lonely Heart's Club Band</li>
<li>Revolver</li>
</ol>
Using the display and list-style properties allows for emulation of the HTML <ol> element.
Now that you have some idea of what is involved with using the display property to dictate the behavior of XML elements, the following Try It Out example continues the Spicy Thai Peanut Sauce recipe with the addition of some style sheet rules.
Try It Out: Applying inline, block, and list Styles
Example 14-3. Follow these steps to apply display property values to the Spicy Thai Peanut Sauce recipe.
Enter the following CSS into your text editor:
page { display: block; width: 100%; height: 100%; background: #fff url('fruit_veg_web.jpg') no-repeat fixed center center; } recipe { display: block; font-family: monospace; padding: 10px; margin: 10px; /* Moz proprietary opacity property */ -moz-opacity: 0.7;/* Microsoft proprietary filter property */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* CSS 3 opacity property */ opacity: 0.7; background: url('cross_hatch.jpg') repeat; } directions, suggestions { display: block; font-size: 130%; } directions { list-style-type: disc; } direction { display: list-item; } really { display: inline; font-weight: bold; }Save the file as
Example_14-3. css.Modify
Example_14-2.xmlto reference the new CSS file:<?xml version="l.0" encoding="UTF-8" standalone="yes"?> <?xml-stylesheet type="text/css" href="Example_14-3.css"?> <page> <recipe>Save the result as
Example_14-3.xml. This results in the output depicted in Figure 14-9.
How It Works
As you can see after viewing the output in a browser, after you add just a few XML declarations to the XML document, the recipe is beginning to take shape. At this point, the example looks similar when viewed in IE 6, Safari, or Firefox. IE 6 has a bug that prevents the display of the background image; you can overcome this by adding the width: 100%; and height: 100%; declarations to the <page> element. The recipe renders best in Safari, Opera, and Firefox, which display the document as intended.
Let's go through the example line by line:
page {
display: block;
width: 100%;
height: 100%;
background: #fff url('fruit_veg_web.jpg') no-repeat fixed center center;
}The <page> element is intended to emulate the <html> element in HTML/XHTML. This is defined as a block-level element, and it is given a background image, as it was in Example 12-1 from Chapter 12.
Next is the <recipe> element, which contains all the ingredients and other information for the Spicy Thai Peanut Sauce recipe:
recipe {
display: block;
font-family: monospace;
padding: 10px;
margin: 10px;
/* Moz proprietary opacity property */
-moz-opacity: 0.7;
/* Microsoft proprietary filter property */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
/* CSS 3 opacity property */
opacity: 0.7;
background: url('cross_hatch.jpg') repeat;
}Once more, the element is made into a block-level element with the display: block; declaration. Here, the same properties are applied to the <recipe> element as were applied to the <body> element in Chapter 12 in Example 12-1. They include the semitransparent effect. In IE 6, you can see that Microsoft's proprietary filter property does not work with XML documents.
Next are the <directions> and <suggestions> elements:
directions, suggestions {
display: block;
font-size: 130%;
}Each of these is made into a block-level element. The <directions> element emulates the HTML/ XHTML <ul> element, and the <suggestions> element emulates a plain <div> or <p> element. Because the <directions> element emulates a <ul> element, it is given a list-style-type declaration:
directions {
list-style-type: disc;
}Next, the list items are styled:
direction {
display: list-item;
}The display: list-item; declaration lets the <direction> element emulate a <li> element. Finally, each <really> element is told to be an inline-level element with the display: inline; declaration:
really {
display: inline;
font-weight: bold;
}Here the <really> element is bold for emphasis.
The display property gives an element its behavior, and block-level elements such as <html>, <body>, <div>, and <ul> can be emulated using the display: block; declaration. Inline-level elements such as <a>, <span>, <em>, <strong> can be emulated using the display: inline; declaration. List elements (<li>) can be emulated using the display: list-item; declaration. You now need to style only the table containing the recipe's ingredients. This part of the styling is also taken care of using the display property and the table display values.
The table set of display values enables you to emulate HTML tables. With these tools, it's possible to fully recreate the behavior of an HTML table using XML elements. The following table shows the display value and the table element that it emulates.
Display Declaration | Emulated Element |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Unfortunately neither IE 6 nor IE 7 supports the table display keywords presented in the preceding table, and currently there is no workaround for the lack of this support, other than to use the values that these browsers do support, such as
inline, block, list-item, andinline-block.
Each table keyword for the display property has an XHTML/HTML element counterpart. Look at each value individually and how each is applied to an XML document.
The following example uses My Favorite Records XML that you see in Figure 14-10a.
The <favorites> element emulates an HTML/XHTML <table> element when the CSS in Figure 14-10b is applied.
This is done with the display: table; declaration. The <favorites> element now behaves just like the <table> element found in HTML/XHTML. As I did in Chapter 12, I've also added some other declarations so that the My Favorite Records example here renders identically to the example that you saw in Chapter 12. Additionally as in HTML/XHTML, other display properties can be applied, such as the border: 1px solid black; declaration and width: 100%; that I've added to the rule. So far, you get the results seen in Figure 14-10c.
Just as was the case with display: table;, the caption can be displayed with the display: table-caption; declaration. In the XML source for My Favorite Records, the caption is the <title> element. I could have just as easily called it <caption>, as it is in XHTML/HTML. However, I have chosen to take advantage of XML's capability that allows me to invent any tag name I like. The CSS in Figure 14-11a is applied to the XML in Figure 14-10a.
The <title> element is made to behave like a table caption and now has behavior that is identical to the <caption> element found in HTML/XHTML. Figure 14-11b shows the results so far.
Table columns are styled next. In XML, styling is accomplished in the same way as with the table columns example presented earlier in this chapter, except that the elements have to be told they are columns. The CSS in Figure 14-12 is applied to the My Favorite Records XML in Figure 14-10a.
The display: table-column-group; declaration causes the <cols> element to emulate the <colgroup> element found in XHTML/HTML; it is used to group the columns. The individual columns are displayed in the same way as the <col /> element in XHTML/HTML with the display: table-column; declaration, which results in no change in the output.
Figure 14-13a shows the remaining declarations required to create the My Favorite Records table.
The CSS in Figure 14-13a is applied to the XML that you saw in Figure 14-10a to get the output in Figure 14-13b.
The <tbody> element found in HTML and XHTML is emulated with the CSS declaration display: table-row-group;, and again this element doesn't offer any changes in presentation other than further distinction in the structure of the document. This rule makes the <records> element emulate the <tbody> element.
records {
display: table-row-group;
}Now that you've distinguished the different groupings of table data, the next step is to make table rows. This is done with the display: table-row; declaration. Here, the purpose is mimicking the behavior of the <tr> element:
record {
display: table-row;
}Table cells are styled with the display: table-cell; declaration to obtain the behavior of the <td> element:
artist,
album,
released {
display: table-cell;
padding: 5px;
border: 1px solid rgb(200, 200, 200);
}The next element in the My Favorite Records example is the <footers> element. Here, my intention is to emulate the <tfoot> element. As was the case with the <tbody> element, this offers no change in presentation, but places further distinctions in the structure of the document:
headings {
display: table-header-group;
}
footers {
display: table-footer-group;
}
headings artist,
headings album,
headings released,
footers artist,
footers album,
footers released {
background: lightyellow;
text-align: center;
font-weight: bold;
}The remaining styles contribute further to giving the XML version of My Favorite Records the same look and feel as the XHTML version.
Now that you have some idea of how tables are styled in XML, you can apply the information to an example with more real-world merit and pizzazz. The following Try It Out continues building on the Spicy Thai Peanut Sauce recipe presented in earlier examples and applies the table set of display values.
Try It Out: Styling XML Tables
Example 14-4. With these steps, you apply table style formatting to the Spicy Thai Peanut Sauce recipe.
Open
Example_14-3. cssand modify the CSS document to reflect the following highlighted changes:page { display: block; background: #fff url('fruit_veg_web.jpg') no-repeat fixed center center; width: 100%; height: 100%; } recipe { display: block; font-family: monospace; padding: 10px; margin: 10px; /* Moz proprietary opacity property */ -moz-opacity: 0.7; /* Microsoft proprietary filter property */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* CSS 3 opacity property */ opacity: 0.7; background: url('cross_hatch.jpg') repeat; } ingredients { display: table; width: 100%; margin-bottom: 5px; table-layout: fixed;border-collapse: collapse; } title { display: table-caption; text-align: left; margin-bottom: 5px; text-transform: lowercase; font-size: 160%; padding: 5px; letter-spacing: 10px; font-weight: bold; } columns { display: table-column-group; } columns * { display: table-column; } headings { display: table-header-group; } ingredientsbody { display: table-row-group; } heading, ingredient { display: table-row; } heading * { font-weight: bold; font-size: 150%; color: black; text-align: center; } heading *, ingredient * { display: table-cell; padding: 5px; text-transform: lowercase; } ingredient * { font-size: 130%; } directions, suggestions { display: block; font-size: 130%; } directions { margin: 17px 0 15px 0; padding: 0 0 0 45px; list-style-type: disc; } suggestions { margin: 22px 0 32px 0; padding: 0 5px 0 10px; } direction {display: list-item; margin-left: 30px; padding-left: 30px; } really { display: inline; font-weight: bold; }Save the file as
Example_14-4. css.Modify
Example_14-3.xmlto point to the new CSS document and save asExample_14-4.xml. This results in the output depicted in Figure 14-14.
How It Works
Here, you applied several rules to style the table portion of the Spicy Thai Peanut Sauce recipe:
ingredients {
display: table;
width: 100%;
margin-bottom: 5px;
table-layout: fixed;
border-collapse: collapse;
}The <ingredients> element is made into a table here with the display: table; declaration. This essentially makes the <ingredients> element behave the same as the <table> element found in HTML/XHTML. The table display properties that I discussed in Chapter 12 are now available to apply additional formatting. I removed spacing between the cells contained in the table with the border-collapse: collapse; declaration. Next, the <title> element is made into the table caption with the display: table-caption; declaration. This makes the <title> element in this document the same as the <caption> element I discussed in Chapter 12:
title {
display: table-caption;
text-align: left;
margin-bottom: 5px;
text-transform: lowercase;
font-size: 160%;
padding: 5px;
letter-spacing: 10px;
font-weight: bold;
}The <title> element contains the recipe's title and several styles that are applied to format the text. Next, the column-grouping element <columns> is given its behavior via the display: table-column-group; declaration. The columns are given their behavior via the display: table-column; declaration:
columns {
display: table-column-group;
}
columns * {
display: table-column;
}At this point in the design, I have chosen to not take advantage of column styling, but I hold these elements in reserve for possible future enhancements to the document. In a real-world application it's perfectly fine to omit elements that have no effect on the document's final presentation; I have included this here simply to demonstrate its possibility.
As for the table headings, the <thead> element is emulated in this document with the <headings> element, and this element is given its style via the display: table-header-group; declaration:
headings {
display: table-header-group;
}The <tbody> element is also represented with the <instructionsbody> element, and this is given its style using the display: table-row-group; declaration:
ingredientsbody {
display: table-row-group;
}So far, nothing other than the <ingredients> and <title> elements contributes to the actual presentation of the document.
Next, table rows are given their behavior:
heading, ingredient {
display: table-row;
}Unlike the columns, heading groupings, and row groupings, table rows are very important for the structure of the document. These keep the cells in their places.
Next the cells in the heading are styled with a bold font, centering, black text, and 150% font size, which, in this case, is 50% larger than the browser's default font size:
heading * {
font-weight: bold;
font-size: 150%;
color: black;
text-align: center;
}The cells inside the <heading> element are selected using two selectors, the descendant selector and the universal selector. The descendant selector is the space between the type selector, heading, and the universal selector, which selects all descendants of the <heading> element. In this example, that is the <quantity> element, the <measurement> element, the <product> element, and the <instructions> element: All these are descendants of the <heading> element. The universal selector is the asterisk. As you learned in Chapter 3, using the universal selector by itself selects all elements. Here the principal is the same. I want to select all children of the <heading> element without calling them by name, so I use heading * as the selector. This selects all the children without having to type each element's name. The cells contained in the <heading> element haven't been made into cells yet. That is handled by the next rule:
heading *, ingredient * {
display: table-cell;
padding: 5px;
text-transform: lowercase;
}Here again I've chosen the universal and descendant combination of selectors, which provides me with flexibility should I chose to add additional elements to the recipe in the future. Here I am selecting the children of the <heading> element, as I did for the last rule, and the children of the <ingredient> element, which selects all remaining cells in the table. The cells of the table's body that actually contain the ingredients are styled with the next rule:
ingredient * {
font-size: 130%;
}The last additions to the style sheet are put in place so that the XML version of the Spicy Thai Peanut Sauce recipe is a pixel-for-pixel perfect emulation of its HTML cousin:
directions {
margin: 17px 0 15px 0;
padding: 0 0 0 45px;
list-style-type: disc;
}
suggestions {
margin: 22px 0 32px 0;
padding: 0 5px 0 10px;
}
direction {
display: list-item;
margin-left: 30px;
padding-left: 30px;
}The padding and margin values here were determined using trial and error, switching back and forth between the document presented in Example 12-5 and this example, Example 14-4.
I have chosen not to cover other display values at this time because browser support for these is incredibly marginal. Opera and Safari 1.2 do support the remaining display values: run-in, inline-block, and inline-table. IE also supports the value inline-block.
I also want to mention that, although I chose to use XML as the vehicle for demonstrating the various display values covered in this chapter, their use is not limited to XML. For clarity in presenting the material, I felt XML was the cleanest and most intuitive approach. It is perfectly acceptable to use the display property and its various values in (X)HTML documents. These values can be applied, conceivably, to any element. For instance:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>table display in XHTML</title>
<style type="text/css">
html {
display: table;
border-spacing: 5px;
}
body {
display: table-row;
}
div {
display: table-cell;
padding: 5px;
border: thin solid black;}
</style>
</head>
<body>
<div> table cell </div>
<div> table cell </div>
</body>
</html>This results in the output shown in Figure 14-15.
Using an HTML document, I have essentially recreated the behavior of tables using as little extra HTML code as is possible. This is a perfectly acceptable use of the display property. And I might also add an acceptable use of table-based layouts.
XML is a flexible, robust markup language with multiple applications. CSS provides powerful control over how an XML document is presented. CSS can emulate any type of HTML/XHTML element. XML declarations provide the browser with important information about the XML document, including the XML version and the encoding. This, in turn, provides information about the characters contained in the document. The display property can be used to create block-level and inline-level boxes as well as the various elements used in tables. In this chapter you learned the following:
What XML is and some of its uses
How to create an XML schema, and the document structure necessary to emulate HTML tables, block-level, inline-level, and list elements
What the XML declaration and the pseudo-attributes inside of it mean
How to style an XML document
How to create block-level boxes like the
<div>element in HTML/XHTMLHow to create inline-level boxes like the
<span>element in HTML/XHTMLHow to style lists in XML
How to style tables in XML
What happens when you load an XML document into a browser that doesn't strictly conform to XML structural requirements?
What are the three pseudo-attributes used in the XML declaration? (Hint: The declaration is the
<?xml version="1.0"?>bit.)What is the syntax that you would use to include CSS in an XML document?
Name the keywords of the
displayproperty that have the best browser support.Name all of the keywords of the
displayproperty used to emulate (X)HTML table elements (including all optional elements) and their (X)HTML element equivalent. (Hint:display: table;=<table>)Can the
displayproperty be used on (X)HTML elements?Which browsers do not support the table keyword values of the
displayproperty?Which browser displays zeros instead of numbers when making a numbered list in XML?