Рекомендация CSS2 содержит краткое руководство по использованию CSS с XML (см. § 2.2). На момент написания CSS2 официальная спецификация связывания таблиц стилей с документами XML не была готова. Вот то, что руководство должно было бы содержать. Заметьте, что все примеры используют CSS, но в большинстве случаев стилевые правила можно также записать в XSL.

Внешние таблицы стилей

Совет: проверьте это в своем браузере.

В HTML есть элемент link для связывания с внешними таблицами стилей, но не каждый основанный на XML формат будет иметь такой элемент. Если подходящего элемента нет, вы можете присоединить внешние таблицы стилей средствами инструкции обработки xml-stylesheet:

<?xml-stylesheet href="my-style.css" type="text/css"?>
…остальная часть документа…

Эта инструкция обработки должна размещаться до первого тега в документе. type="text/css" не обязательно, но это поможет браузеру: если он не поддерживает CSS, он будет знать, что загружать этот файл не нужно.

Как и в случае, с элементами link в HTML, инструкций xml-stylesheet может быть несколько, и они могут иметь атрибуты для обозначения типа, устройства отображения и заголовка.

Вот более развернутый пример. Предположим, у нас есть три таблицы стилей: одна, устанавливающая основные типы отображения каждого элемента (inline, block, list-item и так далее), и две другие, задающие цвета и отступы. Две последние являются альтернативами друг другу, и читатель документа может выбирать, какую использовать. Кроме случая, когда документ печатается — тогда нам требуется использовать последний стиль. Вот основная таблица стилей:

/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Вот один из альтернативных стилей, modern.css:

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

А вот — другой, classic.css:

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

Документ XML с подключенными тремя стилями выглядит примерно так:

<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
  title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Для подробностей смотрите Рекомендацию W3C «Связывание таблиц стилей с документами XML».

Встроенные таблицы стилей

Совет: проверьте это в своем браузере.

В HTML есть атрибут style, позволяющий таблицам стилей включаться в файл напрямую, без необходимости во внешнем файле. В некоторых случаях это проще, особенно если таблица стилей создана специально для данного документа.

Большинство основанных на XML форматов не имеют подобного элемента, но схожая инструкция обработки, которая ссылается на внешнюю таблицу стилей, может также использоваться для указания на встроенные в сам документ стили. На февраль 2006 года с этим еще есть технические проблемы, и не существует формальной спецификации. Пример:

<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  …
</ARTICLE>

В этом случае атрибут type="text/css" должен присутствовать, иначе браузеру (или другой программе) придется строить предположения о языке таблиц стилей. Инструкция xml-stylesheet теперь указывает не на внешнюю таблицу стилей, а на элемент самого документа. Элемент определен атрибутом id, который передается как цель ссылки. (В зависимости от конкретного формата XML, атрибут id может называться как-то иначе; в некоторых форматах подходящего атрибута может не быть вообще.)

Открытые проблемы

Рекомендация W3C «Связывание таблиц стилей с документами XML» не определяет случай встроенных таблиц стилей, хотя разрешение частичных URL, начинающихся с #, кажется приемлемым обобщением. К этому моменту, началу 2006 года, еще могут быть нерешенные проблемы, и опубликованной спецификации нет:

  1. Так как встроенная таблица стилей не загружается отдельно с сервера, сервер не может указать браузеру, что за формат у нее. Значит, в этом случае необходим атрибут type. Не определено, что произойдет, если атрибут опущен: будет ли таблица стилей проигнорирована? Будет ли она считаться CSS? Если ли какой-то алгоритм определения языка?
  2. В большинстве XML-форматов частичный идентификатор задает полный элемент, а не содержимое элемента. Но таблица стилей, которая начинается с <ARTICLE>, не является верным кодом CSS, так что требуется особое правило, по которому частичный идентификатор в стилевой инструкции обработки указывает на содержимое элемента, а не на сам элемент.
  3. Аналогично, не определено, что произойдет, если у целевого элемента есть дочерние узлы. Будет ли таблица стилей состоять из всего содержимого всех присоединенных элементов? …содержимого только первого элемента? …или это ошибка, и весь элемент нужно игнорировать?
  4. В примере выше URL указывает на сам документ. Предположим, что URL указывает на фрагмент внешнего документа. Чтобы удачно получить таблицу стилей, браузер сначала должен загрузить и обработать внешний документ, а потом извлечь и обработать таблицу стилей. Но атрибут type указывает только один из двух типов, поэтому браузер не может знать, может ли он использовать таблицу стилей. Не определено даже, указывают ли атрибуты type на тип внешнего документа, либо встроенной в него таблицы стилей.
  5. Инструкция обработки таблиц стилей больше полезна с общим XML (Generic XML), то есть с разметкой не известного браузеру формата. Благодаря таблицам стилей, возможно по крайней мере что-то отображать. Известные форматы, такие как SVG, SMIL или XHTML, имеют свои правила обработки, которые выходят за рамки того, что могут определять стили. Но есть другие вещи, которые браузер также не знает, если документ обрабатывается как общий XML: в частности, он не знает, какие атрибуты являются идентификаторами. Есть Рекомендация W3C для атрибутов, названная xml:id, и если документ содержит атрибуты с таким именем, то, вероятнее всего, частичные URL указывают на один из них. Но если таких атрибутов нет, браузер должен попытаться другими средствами определить, какие атрибуты являются ID. Если документ имеет в начале DOCTYPE, и браузер способен получить DTD, на который он указывает, этот DTD будет указывать атрибут. Но браузеры могут не быть способными читать DTD, или может не быть DOCTYPE.
  6. Идентификатор фрагмента — лишь один способ указать на элемент документа. Другая рекомендация W3C предлагает использовать XPointer. Но понимание этой технологии сейчас не требуется от браузеров, использующих инструкцию обработки таблиц стилей, так что не ясно, могут ли браузеры понять XPointer, или они могут или должны игнорировать это.

Встроенные стили

HTML также позволяет применять стили напрямую к отдельным элементам при помощи атрибута style. Большинство XML-форматов не имеют такого атрибута, хотя некоторые могут позволять использовать возможности HTML (модули) в документе.

Атрибуты классов

Совет: проверьте это в своем браузере.

Атрибут class, позволяющий создавать субклассы элементов в HTML, также не доступен в основных форматах, основанных на XML. Конечно, CSS позволяет вам выбирать элементы, опираясь на любой атрибут, не только на class, но синтаксис менее удобен.

Вот пример. Если есть атрибут class, и формат документа определяет, что он работает как в HTML, можно использовать нотацию с точкой. (Конкретно этот пример не работает, потому что <doc> — не тот формат, который браузер примет за нечто, поддерживающее class.)

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Some text… </p>
  <p class="note">A note… </p>
</doc>

Если документ не определяет, что class создает субкласс, вам нужно использовать более длинные селекторы с «[ ]»:

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Some text… </p>
  <p class="note">A note… </p>
</doc>

Если нет и атрибута class, но есть что-то, что можно использовать, селекторы атрибутов «[ ]» также применимы:

Совет: проверьте это в своем браузере.

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Some text… </p>
  <p warning="yes">A note… </p>
</doc>