XML pro web aneb od teorie k praxi, 9.díl - XML a CSS

S kaskádovými styly se v dnešní době setkává téměř každý, kdo vytváří (X)HTML stránky. Stejně dobře, jako v (X)HTML, lze CSS používat i ve spojení s XML dokumenty. V tomto dílu se můžete seznámit s některými specifiky, které přinášení nasazení CSS s XML.

Přiřazení kaskádového stylu k XML dokumentu

Soubor obsahující styly pro XML dokument (nemusí se jednat jen o CSS, stejným způsob je možné přiřadit i např. XSLT stylesheet) lze asociovat pomocí speciální procesní instrukce xml-stylesheet. Tato procesní instrukce musí obsahovat minimálně 2 povinné atributy:

  • href obsahuje cestu k souboru stylu (URI)
  • type obsahuje MIME typ, v případě CSS je hodnota text/css

Atributy jsou tedy stejné, jako v případě elementu link v (X)HTML dokumentu. Deklarace procesní instrukce s kaskádovým stylem by mohla vypadat takto:

<?xml-stylesheet href="styles/hlavni_styl.css" type="text/css"?>

Procesní instrukce stylesheetu musí být uvedena na začátku XML dokumentu, bezprostředně po xml deklaraci. Stejně, jako u (X)HTML dokumentů, i v XML je možné asociovat více stylesheetů k jednomu XML dokumentu, ať už z důvodu úpravy obecnějšího stylesheetu specifičtějším, nebo za účelem použití různých výstupních formátů. Deklarace ale vždy musí být uvedeny na začátku dokumentu, ještě před kořenovým elementem.

Kromě výše uvedených povinných atributů je možné specifikovat i další atributy:

  • title název stylesheetu
  • media označení media, pro které je příslušný styl určen
  • charset znaková sada, např. ISO-8859-2
  • alternate nabývá hodnoty yes nebo no

S výjimkou atributu alternate zřejmě není potřeba dodávat žádný komentář. Atribut alternate nabývá výchozí hodnoty no - pokud specifikujeme jeho hodnotu yes, měli bychom dosáhnout stejného efektu, jako kdybychom v (X)HTML uvedli konstrukci <link rel="alternate stylesheet" ... >.

Použití kaskádových stylů s XML dokumentem

Kaskádové styly lze u XML dokumentů používat stejným způsobem, jako v (X)HTML. Největší rozdíl je v tom, že elementy v XML dokumentu nemají žádné výchozí nastavení pro zobrazení - žádný element se sám o sobě nechová jako blokový, nic není zvýrazněno nebo odsazeno. Tvůrce (X)HTML stránek si zvykne na výchozí nastavení pro zobrazování (X)HTML elementů jako na naprostou samozřejmost. V Mozille má výchozí nastavení zobrazení (X)HTML stránky podobu konkrétního stylesheetu - zběžným pohledem si lze udělat představu o tom, co všechno je již předem nastaveno, pokud se zobrazuje jen prostá (X)HTML stránka bez jakéhokoliv předepsaného stylu. Přidáváme-li další stylové předpisy, navazujeme tím na tuto výchozí stylovou deklaraci (tj. přidáváme další nová nastavení, nebo upravujeme ta výchozí).

Při zobrazování XML dokumentů v prohlížeči nemáme k dispozici (téměř) žádné výchozí nastavení. Veškerá definice vzhledu a formátování leží zcela na našem uvážení. Znamená to, že mimo jiné si jen obtížně vystačíme se základy CSS, které se v dnešní době již používají i ve spojení s konzervativnějším webdesignem (např. u tabulkových layoutů). Jinými slovy, máte-li dojem, že kaskádové styly = definice vlastností písma + odsazení, pak uspokojivého formátování XML dokumentu zřejmě nedosáhnete :).

Zebrubný přehled všech vlastností CSS není účelem tohoto článku - v dnešní době je možné (kromě specifikace na W3C a materiálů na zahraničních serverech) najít dostatek kvalitních článků a materiálů na českém webu (velice zevrubná Praktická příručka CSS od Petra Staníčka, nebo seriály o CSS a CSS2 na serveru Interval). Dnes se budeme zabývat některými specifickými příklady použití CSS ve spojení s XML dokumentem.

Blokové zobrazení elementu (display: block)

Pokud se pokusíme zobrazit XML dokument v prohlížeči bez stylového předpisu (resp. s prázdným stylesheetem, neboť IE a v dnešní době i Mozilla zobrazují prostý XML dokument přehledně formátovaný a odsazený pro snažší orientaci), uvidíme pouze textový obsah všech elementů v podobě neformátovaného kusu textu. Aby se element choval jako blokový (stručně řečeno, aby jeho obsah začínal na nové řádce a další text po jeho skončení byl také odsazen na další řádku), je nutné nastavit vlastnost display u příslušného elementu na hodnotu block. Zkusme si to demonstrovat na konkrétní ukázce. Podívejte se na následující příklad XML dokumentu a CSS stylu:

<?xml version=`1.0`?>
<?xml-stylesheet href="style_1.css" type="text/css"?>
<art>
 <heading>Nejaky nadpis</heading>
 <para>Text prvniho odstavce.</para>
 <para>Text druheho odstavce.</para>
 <para>Text tretiho odstavce.</para>
</art>

heading, para {
 margin: 10px 0;
 padding: 0 10px;
 border: 1px solid red;
}
heading {
 display: block;
 border-color: blue;
}

Elementům heading a para jsme nadefinovali hranici (border)a vnější a vnitřní odsazení (margin a padding) pro větší názornost. Element heading pak má být zobrazován jako blokový. Rozdíl v zobrazení je zřejmě vcelku jasný [ukázka].

Zobrazení elementu jako položky seznamu (display: list-item)

Část XML dokumentu může za pomoci kaskádového stylu nabývat i podoby seznamu s odrážkami. Takové formátování nám pomůže docílit opět vlastnost display a její hodnota list-item. Příkladem může být následující XML dokument:

<?xml version="1.0"?>
<?xml-stylesheet href="usertab.css" type="text/css" media="screen"?>
<usertab>
 <user>
  <num>1.</num>
  <nickname>Alien</nickname>
  <password>vetrelec</password>
  <reg-date>11.6.2002</reg-date>
 </user>
 <user>
  <num>2.</num>
  <nickname>Pancho</nickname>
  <password>xx16d5</password>
  <reg-date>15.6.2002</reg-date>
 </user>
</usertab>

Naším cílem bude vypsání seznamu všech položek (num, nickname, password a reg-date) týkajících se každého jednotlivého uživatele (user) ve formě položek seznamu [ukázka]. Kaskádový styl bude mít následující podobu:

usertab, user {
 display : block;
}
user {
 border-bottom : 3px solid Red;
 padding-left : 10px;
 width : 250px;
 list-style-type : square;
 list-style-position : inside;
}
num, nickname, password, reg-date {
 display : list-item;
}
nickname {
 font-size : 125%;
 font-weight : bold;
}
password {
 font-family : "Courier New", Courier, monospace;
 background-color : #F5F5F5;
}

Elementy usertab a user jsou určeny jako blokové. Element user se chová jako kontejner pro položky seznamu (element ul nebo ol v (X)HTML) - za pozornost stojí vlastnosti list-style-position a list-style-type, které blíže specifikují odsazení a typ odrážek seznamu. Pomocí vlastnosti list-style-type lze dosáhnout podoby číslovaného seznamu, např. nastavením hodnoty této vlastnosti na decimal.

Zobrazení dat v tabelárním tvaru

Často v XML dokumentu uchováváme strukturovaná data, jejichž zobrazení nejlépe odpovídá tabulka. I pomocí kaskádových stylů aplikovaných přímo na XML dokument lze v moderních prohlížečích "vykouzlit" tabelární zobrazení. Stačí použít příslušné hodnoty vlastnosti display, které nám umožňují zobrazit element jako tabulku (display: table), řadu tabulky (display: table-row), či buňku tabulky ( display: table-cell). Bohužel, tyto velice užitečné hodnoty vlastnosti display nepodporuje Microsoft Internet Explorer ani ve sve posledni verzi 6, takže pro zobrazení tabulky v XML pomocí CSS je nutné použít Mozillu nebo Operu.

Pro příklad použijeme stejný XML dokument, jako v předchozím případě. Element usertab by se měl chovat jako element table v (X)HTML, element user je ideální kandidát na funkci řady tabulky (tr v (X)HTML) a elementy num, nickname, password a reg-date budou buňkami tabulky (td) [ukázka]. A zde je příklad příslušného kaskádového stylu:

usertab {
 display : table;
 border-collapse: collapse;
 margin : 10px;
}
user {
 display : table-row-group;
}
num, nickname, password, reg-date {
 display : table-cell;
 border : 1px solid gray;
 padding : 1px 3px;
}
num {
 background-color: yellow;
}

"Sofistikované" selektory

V normě CSS 2 byly přidány selektory, které možná najdou širší uplatnění spíše ve spojení s XML, než se starým dobrým (X)HTML. Bohužel opět musím upozornit na fakt, že v Internet Exploreru žádný z nich zatím využít nelze - pro pokročilé nasazení kaskádových stylů se výrazně lépe hodí Mozilla, nebo Opera. Které selektory to tedy jsou?

  • Selektor dítěte (A > B) - vybere všechny elementy B, které jsou dítětem A (pozor, neplést se selektorem potomka A B, který lze použít i v IE)
  • Selektor následujícího sourozence (A + B) - vybere všechny elementy B, které přímo následují po elementu A
  • Selektor s výskytem atributu (A[atr]) - vybere všechny elementy A, které mají definován atribut jménem atr, bez ohledu na jeho hodnotu
  • Selektor s hodnotou atributu (A[atr=value]) - vybere všechny elementy A, které mají atribut atr nastaven na hodnotu value
  • Selektor s hodnotou v atributu (A[atr~=value]) - vybere všechny elementy A, jejichž atribut atr obsahuje (mezi jinými) i slovo value. Používá se u atributů, jejichž hodnotu tvoří seznam slov oddělený mezerou (těm, kteří pozorně sledovali předchozí díly seriálu stačí říci, že se jedná o typ atributu NMTOKENS nebo IDREFS...)
  • Selektor pro jazykové varianty (A[atr|=value]) - vybere všechny elementy A, jejichž atribut atr má hodnotu začínající výrazem value spojeným s dalšími výrazy pomocí pomlčky. Tento selektor je primárně určen pro atribut xml:lang, o kterém již byla řeč v předchozích dílech. Umožňuje vybrat kód jazyka bez ohledu na případný subkód.

Prozkoumání možností, které nám tyto selektory ve spojení s XML přinášejí, již ponechám na vás. Příště se tématem opět vrátíme mírně zpět, abychom prozkoumali další způsoby symbiózy XML a (X)HTML.

Diskuze (6) Další článek: GeForce FX zdrojem posměchu

Témata článku: Software, Programování, Item, HTML, Předchozí odstavec, Element, Displej, XML, CSS, Password, Cell, Teorie, Block, Code, Zběžný pohled


Určitě si přečtěte

Podívejte se, co se stane, když dron DJI Phantom narazí do křídla letadla

Podívejte se, co se stane, když dron DJI Phantom narazí do křídla letadla

** Co se může stát, když relativně maličký dron narazí do křídla letadla? ** Tuto otázku zodpověděli odborníci laboratorním pokusem ** Kvadrokoptéra způsobila významné poškození křídla

Karel Kilián | 19

Vylaďte si Wi-Fi: Podívejte se, jaká pásma máte doma volná a kam signál nedosáhne

Vylaďte si Wi-Fi: Podívejte se, jaká pásma máte doma volná a kam signál nedosáhne

** Prozkoumejte, jaké pásmo je pro vaši síť nejlepší ** Díky heat mapě snadno poznáte, kde to bude se signálem horší ** Vše zvládnete i z mobilního telefonu

Vladislav Kluska | 27


Aktuální číslo časopisu Computer

Jak vytvořit a spravovat vlastní web

Velký test herních klávesnic a DVB-T2 tunerů

Vše o formátu RAW

Vybíráme nejlepší základní desku