22. srpna 2025Čeština

Hloubkový ponor do CSS jmenných prostorů pro stylování dokumentů XML, pokrývající syntaxi, aplikaci a osvědčené postupy pro webové vývojáře.

Pravidlo CSS Namespace: Precizní stylování XML

Kaskádové styly (CSS) se tradičně používají pro stylování dokumentů HTML. CSS však lze aplikovat i na dokumenty XML (Extensible Markup Language). Zde přicházejí na řadu jmenné prostory CSS, které poskytují mechanismus pro cílení na specifické prvky v rámci struktury XML na základě jejich přidruženého jmenného prostoru. Porozumění jmenným prostorům CSS je zásadní pro vývojáře pracující s XHTML, SVG, MathML a dalšími technologiemi založenými na XML.

Co jsou XML jmenné prostory?

XML jmenné prostory jsou způsob, jak se vyhnout kolizím názvů prvků při kombinování slovníků z různých zdrojů v rámci jednoho dokumentu XML. Jmenný prostor je identifikován pomocí Uniform Resource Identifier (URI), což je typicky URL. I když URI samotné nemusí odkazovat na platný zdroj, slouží jako jedinečný identifikátor jmenného prostoru. Představte si to jako způsob, jak vytvořit samostatný „svět“ v rámci vašeho dokumentu XML, kde jsou prvky jednoznačně identifikovány.

Zvažte dokument obsahující jak HTML, tak Scalable Vector Graphics (SVG). Jak HTML, tak SVG mají prvky s názvem <title>. Bez jmenných prostorů by prohlížeč nevěděl, na který prvek <title> má aplikovat styly.

Zde je příklad, jak se deklarují jmenné prostory v XML:


<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg">
  <head>
    <title>Dokument s jmennými prostory</title>
  </head>
  <body>
    <h1>Ahoj světe!</h1>
    <svg:svg width="100" height="100">
      <svg:circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg:svg>
  </body>
</html>

V tomto příkladu:

xmlns="http://www.w3.org/1999/xhtml" deklaruje výchozí jmenný prostor pro prvek <html> a všechny jeho potomky (pokud není přepsán). To znamená, že prvky jako <head>, <title>, <body> a <h1> patří do jmenného prostoru XHTML.
xmlns:svg="http://www.w3.org/2000/svg" deklaruje jmenný prostor s předponou „svg“ pro jmenný prostor SVG. Prvky jako <svg:svg> a <svg:circle> patří do jmenného prostoru SVG.

Jak fungují jmenné prostory CSS

Jmenné prostory CSS vám umožňují aplikovat styly na prvky na základě jejich jmenného prostoru. Toho se dosahuje pomocí pravidla @namespace ve vašem CSS. Pravidlo @namespace asociuje předponu jmenného prostoru se specifickým URI jmenného prostoru.

Základní syntaxe je:


@namespace prefix "namespace-uri";

Kde:

prefix je předpona jmenného prostoru, kterou chcete použít ve vašem CSS.
"namespace-uri" je URI, který identifikuje jmenný prostor.

Jakmile deklarujete předponu jmenného prostoru, můžete ji použít ve svých CSS selektorech k cílení na prvky patřící do tohoto jmenného prostoru.

Aplikace jmenných prostorů CSS: Praktické příklady

Příklad 1: Stylování prvků SVG

Řekněme, že chcete stylovat kruh SVG z předchozího příkladu. Můžete použít následující CSS:


@namespace svg "http://www.w3.org/2000/svg";

svg|circle {
  fill: red;
  stroke: blue;
  stroke-width: 5px;
}

V tomto CSS:

@namespace svg "http://www.w3.org/2000/svg"; deklaruje jmenný prostor SVG s předponou „svg“.
svg|circle je selektor kvalifikovaného názvu. Symbol svislé čáry (|) odděluje předponu jmenného prostoru od názvu prvku. Tento selektor cílí na všechny prvky <circle> ve jmenném prostoru SVG.

Tento CSS změní barvu výplně kruhu na červenou, barvu tahu na modrou a šířku tahu na 5 pixelů.

Příklad 2: Stylování prvků XHTML s výchozím jmenným prostorem

Pokud má dokument XML výchozí jmenný prostor (deklarovaný bez předpony na kořenovém prvku), můžete stále cílit na prvky v tomto jmenném prostoru pomocí CSS. Musíte definovat předponu jmenného prostoru a poté použít univerzální selektor (*) s předponou jmenného prostoru.

Zvažte strukturu XHTML z dřívějšího příkladu. Chcete-li stylovat prvek <h1>, můžete použít následující CSS:


@namespace xhtml "http://www.w3.org/1999/xhtml";

xhtml|h1 {
  color: green;
  font-size: 2em;
}

V tomto CSS:

@namespace xhtml "http://www.w3.org/1999/xhtml"; deklaruje jmenný prostor XHTML s předponou „xhtml“.
xhtml|h1 cílí na prvek <h1> ve jmenném prostoru XHTML.

Tento CSS změní barvu prvku <h1> na zelenou a jeho velikost písma na 2em.

Příklad 3: Použití více jmenných prostorů

Ve vašem CSS můžete definovat více jmenných prostorů pro stylování prvků z různých slovníků ve stejném dokumentu.

Zvažte dokument XML, který kombinuje XHTML a MathML:


<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:mathml="http://www.w3.org/1998/Math/MathML">
  <head>
    <title>Dokument s více jmennými prostory</title>
  </head>
  <body>
    <h1>Příklad MathML</h1>
    <mathml:math>
      <mathml:mrow>
        <mathml:mi>x</mathml:mi>
        <mathml:mo>+</mathml:mo>
        <mathml:mi>y</mathml:mi>
      </mathml:mrow>
    </mathml:math>
  </body>
</html>

Chcete-li stylovat jak prvek <h1> (XHTML), tak prvek <math> (MathML), můžete použít následující CSS:


@namespace xhtml "http://www.w3.org/1999/xhtml";
@namespace mathml "http://www.w3.org/1998/Math/MathML";

xhtml|h1 {
  color: blue;
}

mathml|math {
  font-size: 1.5em;
}

Tento CSS bude stylovat prvek <h1> modře a zvětší velikost písma prvku <math>.

Kompatibilita prohlížečů

Podpora jmenných prostorů CSS je obecně dobrá ve všech moderních prohlížečích. Starší prohlížeče však mohou mít omezenou nebo žádnou podporu. Je důležité otestovat váš CSS s různými prohlížeči, abyste zajistili kompatibilitu.

Zde je obecný přehled podpory prohlížečů:

Chrome: Plná podpora
Firefox: Plná podpora
Safari: Plná podpora
Edge: Plná podpora
Internet Explorer: Omezená podpora (IE9+ s některými zvláštnostmi)

Pro starší verze programu Internet Explorer možná budete muset použít podmíněné komentáře nebo alternativní techniky stylování.

Osvědčené postupy pro používání jmenných prostorů CSS

Deklarujte jmenné prostory v horní části CSS: Tím se vaše CSS stane čitelnějším a udržitelnějším.
Používejte smysluplné předpony: Zvolte předpony, které jasně označují přidružený jmenný prostor (např. „svg“ pro SVG, „xhtml“ pro XHTML).
Buďte důslední při používání předpon: Jakmile jste vybrali předponu pro jmenný prostor, používejte ji důsledně v celém CSS.
Testujte v různých prohlížečích: Ujistěte se, že vaše CSS funguje podle očekávání ve všech cílových prohlížečích.
Zvažte použití resetu CSS: Resetování stylů může pomoci zajistit konzistentní stylování napříč různými prohlížeči, zejména při práci s dokumenty XML.
Použijte kvalifikované názvy (předpona|prvek) pro všechny prvky s jmenným prostorem: Přestože některé prohlížeče mohou umožnit stylování prvků ve výchozím jmenném prostoru bez předpony, je nejlepší praxí vždy používat kvalifikované názvy pro jasnost a konzistenci.

Univerzální selektor jmenného prostoru

Univerzální selektor jmenného prostoru, reprezentovaný jednou hvězdičkou (*), lze použít k cílení na prvky bez ohledu na jejich jmenný prostor. To může být užitečné v určitých situacích, ale mělo by se používat opatrně, protože může také vést k nezamýšlenému stylování.

Například *|h1 by cílil na jakýkoli prvek <h1>, bez ohledu na jeho jmenný prostor.

Použití jmenného prostoru `default`

CSS Level 4 zavádí klíčové slovo `default` pro určení výchozího jmenného prostoru. To umožňuje stručnější stylování při práci s dokumenty, kde je primární jmenný prostor výchozí.

Syntaxe:


@namespace default "http://www.w3.org/1999/xhtml";

default|h1 {
 color: red;
}

Podpora tohoto prvku v prohlížečích se však stále vyvíjí.

Alternativní přístupy ke stylování

Zatímco jmenné prostory CSS jsou doporučeným způsobem stylování dokumentů XML, existují alternativní přístupy, které můžete zvážit, zejména pokud potřebujete podporovat starší prohlížeče nebo máte složité požadavky na stylování.

JavaScript: Můžete použít JavaScript k dynamickému přidávání nebo úpravě stylů na základě jmenného prostoru prvků. To poskytuje větší flexibilitu, ale může to být také složitější.
XSLT: Extensible Stylesheet Language Transformations (XSLT) lze použít k transformaci dokumentů XML do HTML nebo jiných formátů, což vám umožní stylovat transformovaný výstup pomocí standardního CSS.

Běžné úskalí

Zapomenutí deklarovat jmenný prostor: Pokud nedeklarujete jmenný prostor pomocí @namespace, vaše pravidla CSS nebudou aplikována na zamýšlené prvky.
Použití nesprávných URI jmenného prostoru: Ujistěte se, že pro každý slovník používáte správné URI jmenného prostoru.
Zaměňování předpon jmenného prostoru: Používejte různé předpony pro různé jmenné prostory, abyste se vyhnuli záměně.
Ignorování kompatibility prohlížeče: Otestujte svůj CSS v různých prohlížečích, abyste se ujistili, že funguje podle očekávání.
Příliš specifické selektory: Vyhněte se používání příliš specifických selektorů, které mohou ztížit údržbu vašeho CSS.

Závěr

Jmenné prostory CSS poskytují výkonný a flexibilní způsob stylování dokumentů XML. Tím, že porozumíte tomu, jak jmenné prostory fungují a jak je používat ve vašem CSS, můžete vytvářet dobře strukturované a udržovatelné stylové listy pro složité aplikace založené na XML. I když je kompatibilita prohlížečů obecně dobrá, je důležité otestovat vaše CSS v různých prohlížečích, abyste zajistili konzistentní uživatelskou zkušenost. Dodržováním osvědčených postupů a vyhýbáním se běžným úskalím můžete využít sílu jmenných prostorů CSS k vytváření vizuálně atraktivních a funkčních webových aplikací založených na XML.

Nezapomeňte udržovat své CSS organizované, používat smysluplné předpony a vždy důkladně testovat svůj kód. Se solidním porozuměním jmenným prostorům CSS se můžete s důvěrou pustit do jakékoli výzvy stylování XML.