Како да додадете стил на XML

Original: http://www.w3.org/Style/styling-XML.html
Преведено од: Bo Arsov

Имајте во предвид дека ова е превод на оригиналниот W3C документ и е во сопственост на W3C. Не преземаме никаква одговорност за грешки во копијата.

(Оваа страница користи CSS стилски листови)

Стил

Кој од нив да го користам?

надворешни

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"?>
... rest of document here...

Оваа процесирачка инструкција (ПИ) мора да дојде пред првата етикета на документот. 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 елемент кој дозволува стилските листови да бидат вметнати директно во 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> не е точен CSS, па изгледа дека е потребно дополнително правило за тоа дека идентификаторот на фрагментот користен во ПИ на стилскиот лист треба да посочува кон содржината на елементот, а не кон самиот елемент.
  3. Слично на тоа, не е дефинирано што се случува доколку има елементи-деца внатре во елементот кон кој се посочува. Дали стилскиот лист се состои од сета содржина на сите поврзани елементи? само од содржината на првиот елемент? или ова е грешка и дали е целиот елемент игнориран?
  4. Во горенаведениот пример, URL-ото посочуваше во самиот документ. Фактот што прелистувачот е воопшто способен да го гледа тоj URL, укажува на тоа дека тој знае како да парсира XML и најверојатно е способен да го најде наведениот стилски елемент. Од друга страна, разгледајте еден URL кој посочува кон фрагмент од надворешен документ. Со цел успешно да го преземе стилскиот лист, прелистувачот мора најпрво да го симне и парсира надворешниот документ и потоа да го извлече и парсира стилскиот лист. Но, атрибутот type го дава типот само на еден од двата и на тој начин прелистувачот не може да знае дали е во можност да го користи стилскиот лист. Дури не е ни дефинирано дали атрибутите type го даваат типот на надворешниот документ или на стилскиот лист вметнат во него.
  5. ПИ-та на стилскиот лист е најкорисна со „Генерички XML“ т.е со XML во формат кој прелистувачот не го знае. Благодарејќи на стилскиот лист, ќе може да прикаже барем нешто. Добро познати формати, како што се SVG, SMIL или XHTML имаат свои сопствени правила за рендерирање кои одат подалеку од тоа што стилскиот лист може да одреди. Но исто така има и други нешта кои еден прелистувач не ги знае во случај кога документот е како Генерички XML: поточно, не знае кои атрибути се атрибути на ID. Постои Препорака од W3C за атрибут наречен xml:id и доколку документот содржи атрибути со тоа име, најверојатно дека URL фрагментот посочува кон еден од нив. Но доколку нема такви атрибути, прелистувачот мора да проба други начини за да определи кои атрибути се ID. Доколку документот има DOCTYPE на почетокот и прелистувачот е во можност да го вчита DTD-то на кое е посочено, тоа DTD ќе го одреди атрибутот. Меѓутоа, прелистувачот можеби не е во можност да чита DTD или може да нема DOCTYPE.
  6. ID на фрагментот е само еден начин да се посочи кон некој елемент во документ. Друга Препорака од W3C ги дефинира XPointers за идентификување на елементи во документ без да има потреба од ID атрибути. Но, разбирањето на XPointers во моментов не е услов за прелистувачите кои користат ПИ за стилски листови и на тој начин не е јасно дали прелистувачот може да интерпретира XPointers доколку е во можност или пак треба да ги игнорира.

Инлајн стилови

HTML исто така дозволува стилските листови да бидат директно прикачени кон индивидуални елементи преку style атрибутот. Повеќето формати на документи базирани на XML нема да имаат таков атрибут, иако некои може да дозволат карактеристики (modules) од 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 (последно ажурирано: $Датум: 2010/03/03 23:06:24 $)