Nápověda:TemplateStyles

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 je nástroj umožňující komplexní stylování šablon bez oprávnění 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> (přímo nebo použitím v šabloně, která se používá na stránce).

[some page] musí mít sanitized-css (Vyčištěné CSS) content model, což je výchozí hodnota pro podstránky v oboru názvů Template, které končí s .css. Doporučený způsob použití je ukládat styly pro Template:Foo pod podstránkou jako 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.

Tag ‎<templatestyles> by měl být umístěn před obsahem, který je stylizován, např. v horní části šablony, abyste se vyhnuli potenciálnímu flash nestylovaného obsahu, pokud je stránka částečně vykreslena při načítání.

Jaké problémy řeší?

Tradičně existují dva způsoby stylování šablon (nebo jakéhokoli jiného obsahu): pomocí vložených stylů (tj. pomocí kódu HTML a přidáním atributů jako style="margin: 10px") nebo pomocí pomocí určitých speciálních systémových zpráv, jako je MediaWiki:Common.css . Ani jeden z těchto přístupů nefunguje příliš dobře.

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í (úkol 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í.

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éry přístupu a udržovatelnosti snad povede k větší inovaci ve způsobu, jakým jsou šablony vizuálně navrženy, menší režii údržby a lepší přizpůsobitelnosti možnostem obrazovky (zejména mobilním zařízením, která nyní tvoří polovinu zobrazení stránek Wikipedie).

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ů.)

Jaká pravidla CSS jsou uznávána?

V současné době TemplateStyles přijímá většinu vlastností CSS3 podporovaných jedním nebo více hlavními prohlížeči (od začátku roku 2017). Kromě jednoduchých pravidel, @media, @page, @supports, @keyframe a @font- face/@font-feature-values at-rules jsou také podporovány (s font-face omezeným na písma, jejichž název začíná TemplateStyles, z bezpečnostních důvodů) . Úplný seznam povolených vlastností naleznete v částech "$props" kódu StylePropertySanitizer od css-sanitizer .

Nestandardní vlastnosti (včetně předpon dodavatele) nejsou v současné době podporovány. Plány najdete na stránce úkol T162379.

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 to green for Vector only */
body.skin-vector .foo { color: green; }

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

/* Make that border green in Vector */
html.client-nojs body.skin-vector .foo { border-color: green; }

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

/* These do not work! 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:Commons.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í Rozšíření: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 v uživatelské konzultaci.

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.