Як додати стиль до XML

(Ця сторінка використовує каскадні таблиці стилів CSS)

Цей документ є перекладом статті «How to add style to XML». Оригінальна версія документу знаходиться тільки на сайті W3C https://www.w3.org/Style/styling-XML
Цей переклад НЕ є офіційним документом W3C.
Всі Авторські Права Належать W3C.
Цей документ може містить помилки перекладу та похибки.
Автор: Скрипець Євген І., розробник проекту Speed Lab. Всі переклади автора: en, ru, uk
Локальна копія: https://www.indeep76.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
Сторінка створена 29 лютого 2000 (last update: $Date: 2007/07/26 16:43:24 $)