Help:TemplateStyles/cs

 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 (nějaká stránka) a obsah   bude analyzován jako CSS, vyčištěn a načten na stránky kde je použita značka  (přímo nebo použitím v šabloně, která se používá na stránce).

musí mít   content model, což je výchozí hodnota pro podstránky v oboru názvů Template, které končí s. Doporučený způsob použití je ukládat styly pro  pod podstránkou jako.

Pokud  postrádá předponu jmenného prostoru, použije se jako výchozí jmenný prostor šablony. Například  načte.

Tag 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 ) 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  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 :


 * Ú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í.
 * 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ř. ).

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,,  ,  ,   a  /  at-rules jsou také podporovány (s font-face omezeným na písma, jejichž název začíná  , z bezpečnostních důvodů). Úplný seznam povolených vlastností naleznete v částech "$props" kódu StylePropertySanitizer od.

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



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 720px a 1000px breakpointy, aby reprezentoval tablet a desktop.



Jak mohu cílit na konkrétní vzhledy?
MediaWiki poskytuje různé třídy prvků  a , 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  nebo   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?.



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



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ř.  je konkrétnější než  ). 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 stránky. TemplateStyles stylesheets are loaded in the, so they override site/user script and gadget rules with equal specificity, and in the case of two TemplateStyles rules, the second overrides the first. (Note though that TemplateStyles rules are deduplicated: if the same stylesheet is referenced multiple times on the page, it is only inserted the first time. Note also that "later" has to do with document position, not load order.  Gadgets add their CSS after the page has fully loaded, by manipulating the page with JavaScript; some add it on-demand when the user does some action such as clicking a button.  Nevertheless, they add it to the head, so equally-specific CSS rules in the body get precedence over it.)

How can Lua modules interact with styles?
TemplateStyles can be called from a Lua module using.

Example code is the following:

What anti-abuse features are provided?
The design choice to store CSS in separate pages was made in part to make integration with the standard anti-abuse toolset easy. TemplateStyles CSS pages have their own content model so changes to them can be tracked or controlled with, using the   variable.

CSS inclusion is tracked the same way as template transclusion, so you can see where a stylesheet is used via the "" option, see what stylesheets are used on a page under "" (and possibly on the edit screen, depending on what editor you use), and see what recent changes might be affecting a page using "".

TemplateStyles also leaves identifying information in the HTML code; to find out where a specific rule comes from, look at the page source, and the enclosing tag will have an attribute like , where 123456 is the revision ID of the stylesheet (viewable with Special:Diff, for example).

How were the decisions around TemplateStyles made?
The idea of including CSS with templates was proposed and accepted in a request for comments. Technical details were pinned down in a second RfC and workflow details in a user consultation.

Who is working on TemplateStyles?
TemplateStyles was originally a project of the (preceded by exploratory work Coren did as a volunteer), consisting of Brad Jorsch (developer), Bryan Davis (manager) and Gergő Tisza (developer) at the time. People and responsibilities have since moved around; see the maintainers page for current ownership.

Where do I report errors / ask for features?
Please file tasks under the TemplateStyles component in Phabricator.

Where can I see it in action?
You can look at some curated examples.

The feature is enabled on all Wikimedia sites.