XML 文書に対するスタイルシートは、 XSL (FO + XSLT) によって実現されるべきですが、ここでは CSS だけを考えます。
contents
セレクタの要素名、属性名などを小文字にする事以外は今までと変わらない。ただし、 style 内でのコメント・アウトは、完全に無視され得、全く働かないかもしれない。
コメントアウトをどうしても用いなければならないような場合は、外部スタイルシートを用いなければならない。
外部スタイルシートの場合も HTML 4 に従うが、その導入方法に変化がある。XML 文書にスタイルシートを適用するための xml-stylesheet 処理命令 (Processing Instruction, PI) が、それに代わる。
link 要素と、それに対応する xml-stylesheet 処理命令
<link rel="stylesheet" href="atomic.css" type="text/css" /> <?xml-stylesheet href="atomic.css" type="text/css"?>
HTML として解釈される場合に備えて、 link 要素も併せて記述しておく。空要素である link 要素の末尾が /> となっていることに注意しよう。
xml-stylesheet 処理命令は、 XML 文書のプロローグ部分にしか記述できない。 DTD 宣言の直後が良いだろう。
<?xml version="1.0" encoding="ISO-2022-JP"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml-stylesheet href="atomic.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>XHTMLとは何だろうか</title>
<meta http-equiv="Content-type"
content='text/html; charset="ISO-2022-JP"' />
<link rel="stylesheet" href="atomic.css" type="text/css" />
</head>
<body>
<p>Hello World!</p>
</body>
</html>
復習すると、まず XML 宣言から始まり、次に、 XML 文書型宣言が続く。それに続くのが、 xml-stylesheet 処理命令。これに、 html 要素の開始タグが続き、ここで 名前空間が指定されている。
xml-stylesheet 処理命令 (PI) では、 XSL (Extensible StyleSheet Language) を指定すべきでしょうが、ここでは CSS を用います。 XML 文書として解釈された時に、 HTML 文書と同様の表示を求めれば、 XSL Transformations (XSLT) を利用する必要が有ります。
HTML 4 では、複数の外部スタイルシートを一つの文書に関連付けられる用になっていたが、 XHTML 1.0 でも全く同様である。
そのため、まずは HTML の復習から始めよう。
HMTL 4 で指定できるスタイルシートには、複数の固定スタイルシート (persistent style sheets) と、複数の代替スタイルシート (alternate style sheets) が有る。代替スタイルシートのうちで一つを優先スタイルシート (preferred style sheet) に指定できる。
著者による優先スタイルシートと、代替スタイルシートを、閲覧者は選択出来ることになっている；
固定スタイルシート；
<link rel="stylesheet" href="atomic.css" type="text/css" />
優先スタイルシート；
<link rel="stylesheet"
title="cool" href="cool.css" type="text/css" />
代替スタイルシート；
<link rel="alternate stylesheet"
title="cool" href="acoustic.css" type="text/css" />
HTML 4 での外部スタイルシートの link 要素の例だが、 XHTML の為にタグの末尾が /> にした。
rel 属性の値が stylesheet で、 title 属性は指定しない。rel 属性の値が stylesheet で、 title 属性を指定する。rel 属性の値が alternate stylesheet で、 title 属性を指定する。閲覧者が、外部スタイルシートを選ばなければ、 UA は「固定スタイルシートと優先スタイルシート」を同時に適用する。複数のスタイルシート間で矛盾が起こった時は、 CSS のカスケード順位で解決される。
上の例ではスタイルシートの名前が cool のみで、且つ代替スタイルシートは優先スタイルシートを含めて二つだけだったが、複数の代替スタイルシートを一つの名前でグループ化し、且つそういったグループを複数指定する事が出来る。
複数の alternate style sheets の例；
<link rel="alternate stylesheet"
title="compact" href="small-base.css" type="text/css" />
<link rel="alternate stylesheet"
title="compact" href="small-extras.css" type="text/css" />
<link rel="alternate stylesheet"
title="big print" href="bigprint.css" type="text/css" />
<link rel="stylesheet" href="common.css" type="text/css" />
閲覧者が、スタイルとして、 "compact" を選択すると、 UA は最初の二つのスタイルシートと、最後の固定スタイルシートの三つを適用するよう求められている。
また、出力メディアに応じて、スタイルシートを変更する事も可能だ。
<link rel="stylesheet"
media="aural" href="corporate-aural.css" type="text/css" />
<link rel="stylesheet"
media="screen" href="corporate-screen.css" type="text/css" />
<link rel="stylesheet"
media="print" href="corporate-print.css" type="text/css" />
<link rel="stylesheet" href="techreport.css" type="text/css" />
上から順番に、音声、スクリーン、印刷出力に対応する。最後の出力メディアが指定されていないものは、全ての出力メディアに適用される。
XHTML では、 XML 文書用の xml-stylesheet 処理命令と、 HTML 用の link 要素を併用する。
XML での xml-stylesheet 処理命令では、代替スタイルシートの指定に、 alternate 擬似属性を用いる。 HTML での rel="alternate stylesheet" は、 XML での alternate="yes" が対応する。
<link rel="alternate stylesheet"
title="compact" href="small-block.css" type="text/css" />
<?xml-stylesheet alternate="yes"
title="compact" href="small-block.css" type="text/css"?>
<link rel="alternate stylesheet"
title="compact" href="small-inline.css" type="text/css" />
<?xml-stylesheet alternate="yes"
title="compact" href="small-inline.css" type="text/css"?>
<link rel="alternate stylesheet"
title="medium" href="medium.css" type="text/css" />
<?xml-stylesheet alternate="yes"
title="medium" href="medium.css" type="text/css"?>
<link rel="stylesheet" href="atomic.css" type="text/css" />
<?xml-stylesheet href="atomic.css" type="text/css"?>
xml-stylesheet 宣言において、 media 擬似属性や、charset 擬似属性の働きも、 link 要素の場合に従う。例外は、先に紹介した alternate 擬似属性の場合に限る。
| SEO | [PR] !uO z[y[WJ Cu | ||
