XMLге стилди кантип кошууга мүмкүн?

(This page uses CSS style sheets)

Стилдер

Кайсынысын колдонушу керек?

сырткы

CSS

ички

XSL

Бул документ «How to add style to XML» макаласынын котормосу. Бул котормо W3C официалдуу документи болуп санала албайт. Бардык автордук укуктар W3C таандык. Биздин котормолор - Автору: Hi tech Blog.

CSS2нин сунуш кылуу китебинде XMLдин жардамы менен CSSти кантип колдонуу керегин кыскача окуу куралы бар (мына § 2.2). CSS2 жазылып жатар убагында, официалдык, XMLде жазылган, стилдин спецификациясы даяр болгон эмес. Ошол окуу куралында ушундай мааниси болушу керек. Байкагыла, андан кийинки мисалылар CSSте, колдонулган, бирок анын көпчүлүк учурунда алардын стилдин эрежесин XSLде жазууга мүмкүн.

Сырткы стилдердин таблицасы

Tip: бул мисалыны силердин браузериңизде сынап көрүңүз

HTML сырткы стилдердин таблицасын байлап койуу үчүн link деп аталган кызматын урунат, бирок ушундай кызматын, XMLде түзүлгөн ар кандай формат, аткар албайт. Эгерде керектүү элемент жок болсо, сиз сырткы стилдин таблицасын xml-stylesheet деп аталган иштетүү инструкциянын жардамы менен ушундай мааниде кошуп аласынар:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... rest of document here...

Ушул иштетүү инструкциялар (ИИ) документтин биринчи тегтин алдында жүрүшү керек. 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>

Булар жөнуүндөгү толук информациясын “Стилдердин таблицасын XML документке кошуу деген сунуш кылуу” китебинде карагыла.

Ички стилдердин таблицалары.

Tip: бул мисалыны силердин браузериңизде сынап көрүңүз

HTMLде, тышкы файлсыз стилдердин таблицасын 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 атрибуту ар кандай аттар менен аталат; кээдеки форматтарда ылайыктуу атрибуту булушу мүмкүн эмес.)

Чечилбеген кыйынчылыктар

“XML документине стилдердин таблицаларын байлануу” WC3 сунуш кылуу китебинде, ички стилдердин таблицаларын мисалыларын сунуш кылбайт, бирок 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 атрибут экенин билбейт. Атрибуттар үчүн xml:id деген сунуш кылуу китеби бар. Ошондуктан, эгерде документте ушундай аты менен атрибуттары бар болсо, мүмкүн URL фрагменти бирөөсүнө көрсөтөт. Бирок эгер андай атрибуттар жок болсо, браузер, кайсы атрибут ID экенин билдирүүгө, ар кандай ыктарын сынап көрүшү керек. Эгер документте DOCTYPE үстү жагында болсо анан браузер, алга көрсоткөн, DTDны калыбына келтирип алса, ал DTD атрибутту табып алат. Бирок браузерде DOCTYPE жок болушу мүмкүн, же болсо DTDни окуй албай калышы мүмкүн.
  6. Фрагменттин идентификатору – жалгыз гана бир ык, документтеги элементке көрсөтүү. Башка WC3 сунуш кылуулар XPointersти, ID атрибутсуз документтеги элементтерди табууга, белгилешет. Бирок, бүгүнкү XPointers’тин түшүнүүсу, ИИ стилдердин таблицасын колдонгон браузерлердин шарты эмес, ошондуктан түшүнүксүз, браузер XPointersти башкача иштетип алалабы, эгерде аларды тоотпой алалышса.

Сиздирилген стилдер

HTML стилдерди, өзгөчө элементтерге, style attribute жардамы менен тик кошууга уруксат кылат. Документтин көпчүлүк форматтарда, XMLде түптөлгөн, ушундай атрибуту жок, бирок документтин ичинде колдонууга, кээдеки форматтар HTMLдин касиеттерин (модульдарын) уруксат берүүгө мүмкүн.

Класстардын атриубуттары

Tip: бул мисалыны силердин браузериңизде сынап көрүңүз

Силерге HTMLде элементтердин подкласстарын жасоого, class attribute мүмкүндүк берет, бирок ал дагы XML базадагы көпчүлүк форматтарда жок. Албетте, силерге, class атрибутунан сырткары да, каалаган атрибутта жасалган, элементтерди тандаганга CSS жардам берет, бирок синтаксис кичине ызгайлуу болот.

Мисалы. Эгерде, 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-l-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: 2008/11/04 19:51:54 $)