Wikimore

Poznámka: Úpravou této stránky souhlasíte s uvolněním vašeho příspěvku pod licencí CC0. Více informací získáte na stránce nápovědy veřejné domény.

TemplateStyles umožňuje komplexní behaviorální a estetické stylování šablon pomocí odkazovaných externích souborů CSS, které jsou samy o sobě wiki stránkami. Je třeba poznamenat, že možnost vytvářet/upravovat soubory CSS je zahrnuta ve výchozích oprávněních pro automaticky potvrzené uživatele, a proto nevyžaduje zapojení někoho s oprávněními správce rozhraní.

Jak to funguje?

Editoři mohou na stránku přidat <templatestyles src="[některou stránku]" /> a obsah odkazované stránky bude analyzován jako CSS, vyčištěn a načten na stránky, kde je použit tag ‎<templatestyles> (buď přímo, nebo začleněno šablonou používanou na stránce).

[nějaká stránka] musí mít model sanitized-css (Vyčištěné CSS) content model, což je výchozí nastavení pro podstránky v oboru názvů šablon, které končí na .css. Doporučený způsob použití je ukládat styly pro Template:Foo na podstránku šablony, na kterou mají největší vliv, například Template:Foo/styles.css. Pokud [some page] postrádá předponu jmenného prostoru, použije se jako výchozí jmenný prostor šablony. Například <templatestyles src="Foo/styles.css" /> načte Template:Foo/styles.css.

Značka ‎<templatestyles> by měla být umístěna před stylizovaným obsahem, ideálně v horní části šablony nebo co nejblíže k ní, aby se zabránilo potenciálnímu záblesku nestylovaného obsahu, pokud se stránka stane zpočátku viditelnou, i když je stále jen částečně vykreslena.

Jaké problémy řeší?

TemplateStyles umožňuje editorům přidružit pravidla stylů ke konkrétním stránkám, poskytuje plnou sílu šablon stylů CSS při filtrování nebezpečných konstrukcí a podle očekávání pracuje s nástroji pro náhled a ladění (např. TemplateSandbox ).

Snížení bariér přístupu a údržby snad povede k větším inovacím ve způsobu vizuálního návrhu šablon, menším nákladům na údržbu a lepší přizpůsobivosti různým možnostem zobrazení (zejména u mobilních zařízení, která tvoří více než polovinu zobrazení stránek Wikipedie již od března 2016).

Tradičně existovaly dva způsoby stylování šablon (nebo jakéhokoli jiného obsahu) na stránkách MediaWiki, přičemž ani jeden z následujících přístupů nefungoval zvlášť dobře:

Používání inline stylů (tj. surového HTML kódu s přidanými atributy, jako je style="margin: 10px;")
Používání určitých speciálních systémových zpráv, jako například MediaWiki:Common.css

Pro inline styling

Neexistuje žádné oddělení obsahu a prezentace. V případech, kdy obsah nepochází ze šablony (např. tabulky v článcích), povede to k wikitextu článku, který je pro většinu editorů nesrozumitelný.
Vzhledem k tomu, že styly jsou smíchány s wikitextem, zvýraznění syntaxe a další formy podpory úprav CSS jsou obtížné nebo nemožné.
Styly se musí opakovat pro každý prvek HTML, na který se vztahují, což má za následek spoustu kopírování a vkládání a kódu, který je obtížné číst a udržovat.
Atributy stylu jsou omezeny na podmnožinu CSS. A co je nejdůležitější, pravidla @media potřebná pro citlivý vývoj nefungují, takže není možné vytvořit šablony, které by dobře fungovaly na široké škále velikostí obrazovky. Kromě toho mají inline styly přednost před šablonami stylů CSS, takže přizpůsobení pro uživatele, vzhled nebo zařízení je obtížnější.

Pro systémové stránky (MediaWiki:*.css)

Úpravy jsou omezeny na administrátory rozhraní , což je hlavní překážkou účasti.
Omezení úprav nelze zrušit, protože neexistuje způsob, jak omezit, jaká pravidla CSS lze použít, a některá z nich by mohla být zneužita ke sledování IP adres čtenářů nebo dokonce ke spouštění skriptů v některých starších prohlížečích.
Změny nelze testovat bez předchozího uložení. T112474
Všechny šablony stylů musí být načteny na všech stránkách (ať už stránku skutečně používají nebo ne), což plýtvá šířkou pásma a ztěžuje pravidla stylu ladění.

Je to bezpečné?

Ano! TemplateStyles obsahuje plnohodnotný analyzátor CSS , který čte, znovu serializuje a escapuje veškerý kód a odstraňuje pravidla CSS, která nerozpoznává. Analyzátor je dostatečně jemný, aby odmítal vzdálené zdroje (jako jsou obrázky na pozadí), ale umožňoval místní. Selektory CSS jsou přepsány tak, aby nemohly odkazovat na prvky mimo obsah článku. (Vizuální úpravě oblastí mimo obsah článku přemístěním částí článku, např. absolutním umístěním, se v současné době nebrání. Nejedná se o žádnou změnu současného stavu, protože taková věc již byla možná u wikitextu a inline stylů.)

Povolené vlastnosti a pravidla CSS

Od 5. 3. 2025 TemplateStyles akceptuje nejméně 331 CSS vlastností a aliasů, včetně drtivé většiny těch, které se nejčastěji používají na moderním internetu s oficiální podporou jednoho nebo více hlavních webových prohlížečů. Kromě jednoduchých pravidel jsou podporována i pravidla s koncovkou @media, @page, @supports, @keyframe, @font-face/@font-feature-values (z bezpečnostních důvodů je font-face omezen na fonty, jejichž název začíná na TemplateStyles).

Deklarace vlastností CSS povolené parametrem css-sanitizer ^[a]^[b]^[c]

Poznámka: Každá vlastnost je propojena se zdrojem dokumentace o jejím použití, nicméně typické ikony externích odkazů byly potlačeny, aby se zabránilo zakrytí odkazů na poznámky pod čarou, které se podobně zobrazují v horním indexu.

Poznámky:

↑ This list is current as of changeset ffe10a21512f to the css-sanitizer source code repository, authored at 5. 3. 2025, 20:34.
↑ The authoritative reference for these properties will always be the source code for the css-sanitizer library, specifically the src/Sanitizer/StylePropertySanitizer.php file. When reviewing it, a simple method for bringing them into greater focus is to perform a full text search of the contents for the string $props.
↑ Non-standard properties—including those with vendor prefixes, except for the vendor-prefixed -*-user-select group—have never been recognized by this extension and continue to be automatically rejected, as of ledna 2024; see T162379: Decide which non-standard CSS properties to support in TemplateStyles for notice of any progress on a resolution to this issue.
↑ The modern block-ellipsis property is present in the extension source code only by its original name, block-overflow (Line 676 at changeset ffe10a21512f). Though the property was renamed during drafting by the W3C-CSSWG in srpna 2018 and is now only a legacy alias, until the extension is updated only the original property name is accepted as valid.
1 2 3 4 5 6 7 8 The page-break-* properties from CSS2 were deprecated by the W3C-CSSWG in září 2018 and persist only as legacy shorthands for the break-* replacement properties from the CSS3 Fragmentation module. They are subject to removal in the future and users are strenuously encouraged to replace all uses of the older properties explicitly, paying attention to the fact that not all values have a 1:1 equivalent mapping with the replacements' values. Several popular user agents have already demonstrated flawed and inconsistent behavior when the legacy shorthands are present on a page.
↑ The clip property was deprecated by the W3C-CSSWG in července 2018, and official guidance was added to use the clip-path property in its place; it is subject to removal at any time due to definition conflicts with other properties.
↑ The legacy name alias grid-column-gap is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, column-gap, had been used.
↑ The modern continue property, which is accepted by this extension, must always be used in place of the older region-fragment property, which it never accepted as valid. The W3C-CSSWG describes 'continue' as generalizing the older property ahead of replacing it altogether, but care must be taken during the conversion as different values must be defined to achieve identical behaviors between the two.
↑ The modern font-width property is present in the extension source code only by its original name, font-stretch (Line 543 at changeset ffe10a21512f). Though the original name was deprecated by the W3C-CSSWG in ledna 2024 and remains only as a legacy alias, until the extension is updated only the original property name is accepted as valid.
↑ The legacy name alias grid-gap is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, gap, had been used.
↑ The non-standard property, word-wrap, is also accepted as valid by this extension and is directly aliased to the official property overflow-wrap.
↑ The legacy name alias grid-row-gap is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, row-gap, had been used.
1 2 Though the creation of the text-align-all property as a constituent value of the text-align shorthand by the W3C-CSSWG took place in prosince 2018, supporting implementations did not begin appearing until 2025 and, as of the most recent official guidance on březen 24, 2025, the recommendation to eschew the new property and continue to use the shorthand remains in effect.

Jak mohu cílit na rozlišení pro mobilní zařízení/počítače?

Dotazy na média vám umožňují cílit na prvky v rozlišení pro mobilní zařízení a v rozlišení pro počítače. Někteří doporučují, aby byly vaše styly ve výchozím nastavení vhodné pro mobily a styly pro stolní počítače byly zabaleny do mediálního dotazu. Gerrit se standardizoval na 640px a 1120px breakpointy, aby reprezentoval tablet a desktop.

Jak mohu cílit na konkrétní vzhledy?

MediaWiki poskytuje různé třídy prvků html a body, včetně jednoho, označujícího, který vzhled se používá. Na ty lze cílit vložením jednoduchého selektoru pro element html nebo body včetně potřebných tříd, za nimiž následuje mezera (nebo v CSS termínech, následný kombinátor).

Obecně by tato technika měla být použita pro konzistenci návrhu, spíše než zacílení na mobilní zařízení a počítače, protože všechny vzhledy lze použít v rozlišení pro mobilní zařízení i počítače. Viz také #Jak mohu cílit na rozlišení pro mobily/počítače?.

/* Elements with class 'foo' will have red text in all skins. */
.foo { color: red; }

/* Override that element's color to green for the Vector skin only. */
body.skin-vector .foo { color: green; }

/* Add a red border if the browser doesn't have JavaScript enabled. */
html.client-nojs .foo { border: 1px solid red; }

/* Declare that same border as green for the Vector skin. */
html.client-nojs body.skin-vector .foo { border-color: green; }

/* This does not work; the 'body' element must be selected! */
.skin-vector .foo { background: orange; }

/* These do not work, either; the descendant combinator must be used. */
body.skin-vector > .foo { background: orange; }
body.skin-vector ~ .foo { background: orange; }
html.client-nojs > body.skin-vector .foo { background: orange; }

Jak mohu používat styly ve zprávách MediaWiki?

Aby se uživateli se zlými úmysly zabránilo v tom, aby si pohrál s částmi dokumentu mimo oblast hlavního obsahu, všechna pravidla CSS automaticky dostanou předponu třídy CSS mw-parser-output. Pokud používáte šablonu založenou na TemplateStyles mimo oblast obsahu (např. v upozornění na webu ), musíte tuto třídu poskytnout sami tím, že šablonu zabalíte do něčeho jako <div class="mw-parser-output">…</div>.

V jakém pořadí mají CSS styly přednost?

Které pravidlo CSS vstoupí v platnost, je řízeno specifičnost (přibližně složitost selektoru – např. div.foo { margin: 10px } je konkrétnější než .foo { margin: 5px }). V případě stejné specifičnosti mají styly CSS, které jsou v dokumentu uvedeny později, přednost před dřívějšími styly.

MediaWiki:Common.css, další skripty webu, uživatelské skripty a miniaplikace jsou načteny v sekci ‎<head> stránky. Šablony stylů TemplateStyles se načítají do ‎<body>, takže přepisují pravidla skriptů a gadgetů webu/uživatele se stejnou specifitou, a v případě dvou pravidel TemplateStyles druhé přepíše první. (Všimněte si však, že pravidla TemplateStyles jsou deduplikována: pokud se na stejnou šablonu stylů odkazuje vícekrát na stránce, vloží se pouze poprvé.

Všimněte si také, že "later" (později) souvisí s polohou dokumentu, nikoli s pořadím načtení. Gadgety přidávají své CSS po úplném načtení stránky manipulací se stránkou pomocí JavaScriptu; někteří jej přidávají na vyžádání, když uživatel provede nějakou akci, jako je kliknutí na tlačítko. Přesto jej přidávají do hlavičky, takže před ním mají přednost stejně specifická pravidla CSS v těle.)

Jak mohou moduly Lua komunikovat se styly?

TemplateStyles lze volat z modulu Lua pomocí frame:extensionTag.

Příklad kódu je následující:

local p = {};

function p.templateStyle( frame, src )
    return frame:extensionTag( 'templatestyles', '', { src = src } );
end

return p;

Jaké funkce proti zneužití jsou k dispozici?

Volba designu pro ukládání CSS na samostatné stránky byla provedena částečně proto, aby byla integrace se standardní sadou nástrojů proti zneužití snadná. Stránky TemplateStyles CSS mají svůj vlastní model obsahu (sanitized-css), takže jejich změny lze sledovat nebo ovládat pomocí Extension:AbuseFilter pomocí proměnné new_content_model.

Zahrnutí CSS se sleduje stejným způsobem jako transkluze šablony, takže můžete vidět, kde se šablona stylů používá, pomocí možnosti "Odkazuje sem", podívejte se, jaké šablony stylů se používají na stránce pod „Informace o stránce“ (a případně na obrazovce úprav, v závislosti na v jakém editoru používáte) a pomocí "Související změny" se podívejte, jaké nedávné změny mohou ovlivnit stránku.

TemplateStyles také ponechává identifikační informace v kódu HTML. Chcete-li zjistit, odkud konkrétní pravidlo pochází, podívejte se na zdroj stránky a ohraničující značka ‎<style> bude mít atribut jako data-mw-deduplicate="TemplateStyles:r123456", kde 123456 je revize ID šablony stylů (lze zobrazit například pomocí Special:Diff).

Jak byla učiněna rozhodnutí ohledně TemplateStyles?

Myšlenka zahrnout CSS se šablonami byla navržena a přijata v žádosti o komentáře. Technické podrobnosti byly uvedeny v druhém RfC a podrobnosti o pracovním postupu byly rozšířeny prostřednictvím uživatelské konzultace.

Kdo pracuje na TemplateStyles?

TemplateStyles byl původně projekt Wikimedia Reading Infrastructure team (předcházela mu průzkumná práce Corena jako dobrovolníka), skládající se z Brad Jorsch (vývojář), Bryan Davis (manažer) a Gergő Tisza (vývojář) v té době. Lidé a odpovědnosti se od té doby přestěhovaly; aktuální vlastnictví naleznete na stránce správců.

Kde nahlásím chyby/požádám o funkce?

Prosím, souborové úlohy pod komponentou TemplateStyles ve Phabricatoru.

Kde to můžu vidět v akci?

Můžete se podívat na některé kurátorské příklady.

Tato funkce je povolena na všech stránkách Wikimedie.

Související odkazy

Extension:TemplateStyles – zejména sekce #Caveats.
Wikipedia:TemplateStyles – stránka s pokyny na anglické Wikipedii.

Category:Help/cs

[current-asof-1] This list is current as of changeset ffe10a21512f to the css-sanitizer source code repository, authored at 5. 3. 2025, 20:34.

[truth-source-2] The authoritative reference for these properties will always be the source code for the css-sanitizer library, specifically the src/Sanitizer/StylePropertySanitizer.php file. When reviewing it, a simple method for bringing them into greater focus is to perform a full text search of the contents for the string $props.

[vendor-prefixes-3] Non-standard properties—including those with vendor prefixes, except for the vendor-prefixed -*-user-select group—have never been recognized by this extension and continue to be automatically rejected, as of ledna 2024; see T162379: Decide which non-standard CSS properties to support in TemplateStyles for notice of any progress on a resolution to this issue.

[block-ellipsis-4] The modern block-ellipsis property is present in the extension source code only by its original name, block-overflow (Line 676 at changeset ffe10a21512f). Though the property was renamed during drafting by the W3C-CSSWG in srpna 2018 and is now only a legacy alias, until the extension is updated only the original property name is accepted as valid.

[page-break-5] 1 2 3 4 5 6 7 8 The page-break-* properties from CSS2 were deprecated by the W3C-CSSWG in září 2018 and persist only as legacy shorthands for the break-* replacement properties from the CSS3 Fragmentation module. They are subject to removal in the future and users are strenuously encouraged to replace all uses of the older properties explicitly, paying attention to the fact that not all values have a 1:1 equivalent mapping with the replacements' values. Several popular user agents have already demonstrated flawed and inconsistent behavior when the legacy shorthands are present on a page.

[clip-6] The clip property was deprecated by the W3C-CSSWG in července 2018, and official guidance was added to use the clip-path property in its place; it is subject to removal at any time due to definition conflicts with other properties.

[grid-column-gap-7] The legacy name alias grid-column-gap is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, column-gap, had been used.

[region-fragment-8] The modern continue property, which is accepted by this extension, must always be used in place of the older region-fragment property, which it never accepted as valid. The W3C-CSSWG describes 'continue' as generalizing the older property ahead of replacing it altogether, but care must be taken during the conversion as different values must be defined to achieve identical behaviors between the two.

[font-width-9] The modern font-width property is present in the extension source code only by its original name, font-stretch (Line 543 at changeset ffe10a21512f). Though the original name was deprecated by the W3C-CSSWG in ledna 2024 and remains only as a legacy alias, until the extension is updated only the original property name is accepted as valid.

[grid-gap-10] The legacy name alias grid-gap is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, gap, had been used.

[word-wrap-11] The non-standard property, word-wrap, is also accepted as valid by this extension and is directly aliased to the official property overflow-wrap.

[grid-row-gap-12] The legacy name alias grid-row-gap is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, row-gap, had been used.

[text-align-all-13] 1 2 Though the creation of the text-align-all property as a constituent value of the text-align shorthand by the W3C-CSSWG took place in prosince 2018, supporting implementations did not begin appearing until 2025 and, as of the most recent official guidance on březen 24, 2025, the recommendation to eschew the new property and continue to use the shorthand remains in effect.

[a]

[b]

[c]

[d]

[e]

[f]

[g]

[h]

[i]

[j]

[k]

[l]

[m]