Как добавить стиль к XML

(Эта страничка использует каскадные таблицы стилей CSS)

Данный документ является переводом статьи "How to add style to XML".
Оригинальная версия документа существует только на сайте W3C http://www.w3.org/Style/styling-XML
Данный перевод НЕ является официальным документом W3C.
Все Авторские Права Принадлежат W3C.
Данный документ может содержать ошибки перевода и опечатки.
Автор перевода: Евгений Скрипец, который работает над проектом XML. Все переводы автора: en, ru, uk
Локальная версия: http://www.dp76.com/Style/styling-XML.html

Стили

Какой использовать?

Внешний

CSS

Встроенный

XSL

Рекомендации по 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, он знает, что ему не придется загружать этот файл.

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

Вот развернутый пример. Давайте представим, что у нас есть три таблицы стилей: основная, которая устанавливает базовый тип дисплея каждого элемента (в линию, блоком, листом и т.д.) и две другие, каждая из которых устанавливает цвет и поля. Две последних являются альтернативой друг другу, и читатель документа может выбирать, какую из них использовать. За исключением случая, когда документ печатается. Тогда мы хотим использовать только последний стиль. Вот основная таблица стилей:

/* 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, который позволяет встраивать таблицу стилей непосредственно в файл HTML без необходимости наличия внешнего файла. В некоторых случаях так проще, особенно, когда таблица стилей является очень специфической для конкретного документа.

Большинство форматов, основанных на 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> является не правильной, так можно сделать вывод, что требуется какое-то дополнительное правило, согласно которому идентификатор, используемый в таблице стилей ИО, обращался бы к содержимому элемента, а не к самому элементу.
  3. Также не определено, что происходит, если внутри элемента есть дочерние элементы, к которым он обращается. Состоит ли таблица стилей из концентрированного содержимого всех элементов? из содержимого только первого элемента? или, может, это является ошибкой и весь элемент игнорируется?
  4. В примере выше URL обращался к самому документу. Факт того, что браузер вообще может смотреть на этот URL, показывает, что он знает, как анализировать XML и, возможно, способен найти номинальную таблицу стилей. Но сейчас представьте URL, который указывает на фрагмент внешнего документа. Для того, чтобы успешно восстановить таблицу стилей, браузер должен скачать и проанализировать наружный документ и затем извлечь и проанализировать таблицу стилей. Но атрибут type дает только один из двух типов, и поэтому браузер не может знать, можно ли использовать таблицу стилей. Не определено даже, задается ли атрибут type типу внешнего документа или таблице стилей, встроенной в него.
  5. Таблица стилей ИО в основном используется с “Generic XML,” то есть в формате, который браузер не знает. Благодаря таблице стилей он сможет, по меньшей мере, что-то отобразить. Известные форматы, такие как SVG, SMIL или XHTML, имеют свои собственные правила для отображения, которые выходят за рамки возможностей таблицы стилей. Но есть другие вещи, которые браузер также не знает, когда обрабатывает документ, как Generic XML: в частности, он не знает, какие атрибуты являются атрибутами ID. Для атрибутов есть Рекомендации W3C под названием xml:id, и если документ содержит атрибуты под таким названием, скорей всего, что фрагмент URL укажет на один из них. Но если таких атрибутов нет, браузер должен попробовать другие способы для определения того, какие атрибуты являются ID. Если документ имеет DOCTYPE сверху и браузер может восстановить DTD, указывающий на него, этот DTD определит атрибут. Но браузер может не справиться с чтением DTD или может отсутствовать DOCTYPE.
  6. Идентификатор фрагмента - единственный способ указать на элемент в документе. Другие Рекомендации W3C определяют XPointers для идентификации элементов в документе без необходимости наличия атрибутов ID. Но понимание XPointers сегодня не является требованием браузеров, использующих таблицу стилей PI и поэтому не ясно, может ли браузер интерпретировать XPointers, если они могут или должны их игнорировать.

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

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>
Bert Bos
Created 29 February 2000 (last update: $Date: 2007/07/26 16:43:24 $)