Help:TemplateStyles/zh

模板樣式是一個工具，可以實現對於模板的複雜樣式而无需使用管理員權限.

工作原理
編輯者添加 到一個頁面，然後 的內容將被解析為CSS，它被清洁并載入到使用了这个 標籤的頁面（直接使用或是通过模板嵌入）.

必須是 （）內容模型，預設是在模板名字空間並且以 結尾. 推薦的模式是把 的樣式儲存在子頁面，例如.

如果 缺少了命名空間前缀，那就會預設為模板命名空間. 因此，舉例來說， 將會載入.

標籤應該被放置在使用樣式的內容前面，例如在模板的最上方. 這是為了避免頁面載入時只有部分被渲染而發生無樣式內容閃爍的可能性.

這解決了什麼問題？
传统上，有两种方式来设置模板（或任何其他内容）：使用内联样式（即使用HTML代码并添加类似 等属性）或者使用某些特殊系统消息如MediaWiki:Common.css. 这些方法都不能很好地发挥作用.

对于内联样式：


 * 内容和演示文稿没有分离. 如果内容不是来自模板（例如文章中的表格），那将导致文章wikitext对于大多数编辑者来说是难以理解的.
 * 由于样式与wiki文本混合，语法突出显示和其他形式的CSS编辑支持很难或不可能.
 * 必须为它们应用的每个HTML元素重复样式，这会导致大量的复制粘贴和难以阅读和维护的代码.
 * 样式属性仅限于CSS的子集. 最重要的是，响应式设计所需的 规则不起作用，因此不可能制作出适用于各种屏幕尺寸的模板. 此外，内联样式优先于CSS样式表，因此用户7皮肤或设备特定的自定义变得更加困难.

对于系统 页面：


 * 编辑仅限于管理员，这是参与的主要障碍.
 * 无法解除编辑限制，因为无法限制可以使用的CSS规则，其中一些可能会被滥用来跟踪读者的IP地址甚至在某些旧版浏览器中执行脚本.
 * 如果不首先保存，则无法进行更改（）.
 * 所有样式表必须加载到所有页面上（无论它们是否实际使用页面），这会浪费带宽并使调试样式规则更难.

模板样式允许编辑者将样式规则与特定页面相关联，在过滤危险结构时提供CSS样式表的全部功能，并按预期使用预览/调试工具（如模板沙盒）.

Lowering the access and maintainability barrier will hopefully result in more innovation in the way templates are visually designed, less maintenance overhead, and better adaptability to screen options (especially mobile devices which by now constitute half of Wikipedia pageviews).

這安全嗎？
Yes! TemplateStyles includes a full-fledged CSS parser that reads, re-serializes and escapes all code and removes CSS rules which do not match its whitelist. The parser is sufficiently fine-grained to reject remote resources (such as background images) but allow local ones. CSS selectors are rewritten so that they cannot refer to elements outside article content. (Visually modifying areas outside article content by displacing parts of the article, e.g. via absolute positioning, is not prevented at this time. This is no change from the status quo, as such a thing was already possible with wikitext and inline styles.)

哪些CSS規則是有效的？
Currently, TemplateStyles accepts most CSS3 properties supported by one or more major browser (as of early 2017). Beyond simple rules,,  ,  ,   and  /  at-rules are also supported (with font-face restricted to fonts whose name starts with  , for security reasons).

Non-standard properties (including vendor prefixes) are not currently supported. See T162379 for plans.

How can I target mobile/desktop resolutions?
Media queries allow you to target elements at mobile resolution and desktop resolution. Some advise making your styles mobile friendly by default and wrapping desktop styles within the media query. Note, MediaWiki has standardised on 720px and 1000px breakpoints to represent tablet and desktop.

How can I target specific skins?
MediaWiki provides various classes on the  and   elements, including one that indicates which skin is in use. These can be targeted by including a simple selector for the  or   element including the needed classes, followed by a space (or in CSS terms, the descendant combinator).

Generally, this technique should be used for design consistency, rather than targeting mobile and desktop as all skins can be used in both mobile and desktop resolutions. See also #How can I target mobile/desktop resolutions?.

In which order do CSS styles override?
Which CSS rule takes effect is controlled by specificity (roughly, the complexity of the selector - e.g.  is more specific than  ). In case of equal specificity, CSS styles that come later in the document override earlier styles.

Mediawiki:Commons.css, other site scripts, user scripts and gadgets are loaded in the  section of the page. 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.)

提供了哪些反濫用工具？
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 AbuseFilter, using the   variable.

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

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

有關模板樣式的決定是如何做出的？
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.

誰在維護模板樣式？
TemplateStyles was originally a project of the Wikimedia Reading Infrastructure team (preceded by exploratory work Coren did as a volunteer), then people moved around. It is now maintained by an ad hoc WMF team consisting of Brad Jorsch (developer), Chris Koerner (community liaison), Dan Garry (product manager), Gergő Tisza (developer) and Grace Gellerman (project manager).

哪裡可以報告錯誤或請求功能？
Please file tasks under the TemplateStyles component in Phabricator.

在哪裡可以看到實際效果？
You can look at some curated examples.

The feature is enabled on all Wikimedia sites.

Calling from a Lua module
TemplateStyles can be called from a Lua module using.

Example code is the following:

參見

 * Extension:TemplateStyles, especially the #Caveats section.