Help:TemplateStyles/zh

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



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

必須是 （）內容模型，模板名字空间内以 結尾的页面默认为此内容模型. 推薦的模式是把 的樣式儲存在子頁面，例如.

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

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



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

对于内联样式：


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

对于系统 页面：


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

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

降低访问和可维护性障碍有望在模板的可视化设计方式，更少的维护开销和更好的屏幕选项适应性（特别是现在构成维基百科网页浏览量的一半的移动设备）方面带来更多创新.



這安全嗎？
是的！模板样式包含一个成熟的CSS解析器，可以读取、重新序列化和转义所有代码，并删除与其白名单不匹配的CSS规则. 解析器足够精细以拒绝远程资源（例如背景图像）但允许本地解析器. CSS选择器被重写，因此它们不能引用文章内容之外的元素（目前暂不能避免通过取代文章的某些部分（例如通过绝对定位）来视觉修改文章内容之外的区域. 这与现状没有任何变化，因为维基文本和内联样式已经可以实现这一点. ）



哪些CSS規則是有效的？
目前，模板样式接受一个或多个主要浏览器支持的大多数CSS3属性（截至2017年初）. 除了简单的规则， 、 、 、 和 / 还支持at-rules（出于安全原因，font-face仅限于名称以 开头的字体）. 對於允許屬性的完整列表，請參見中StylePropertySanitizer程式碼的「$props」部分.

目前不支持非标准属性（包括供应商前缀）. 有关计划，请参见.



如何定位移动/桌面分辨率？
媒体查询允许您以移动分辨率和桌面分辨率定位元素. 一些建议使您的样式默认为移动友好，并在媒体查询中包装桌面样式. 注意，MediaWiki已标准化720px和1000px断点代表平板电脑和桌面.



如何定位特定皮肤？
MediaWiki提供了关于 和 元素的各种类，包括指示正在使用哪个外观的元素. 要实现这些，可以包含 或 元素以及所需的类的简单的选择器，然后加个空格（或CSS术语，后代组合子）.

通常此技术应用于设计一致性，而不是针对移动设备和桌面设备，因为所有外观都可用于移动和桌面分辨率. 参见#如何定位移动/桌面分辨率？.



如何在MediaWiki消息中使用模板样式？
为了阻止恶意用户篡改页面内容以外的文档部分，所有CSS规则都会在前面加上 CSS类的前缀. 如果您在页面内容以外使用了基于模板样式实现的模板（例如用在全站公告sitenotice），就需要手动提供该CSS类，即用类似 的代码包裹模板.



CSS样式覆盖是按照什么顺序？
哪个CSS规则生效，取决于优先级（Specificity）（粗略地说，就是选择器的复杂性，例如 比 更“具体）. 在具有相同优先级的情况下，文档中后面出现的CSS样式会覆盖前面的样式.

MediaWiki:Commons.css、其他网站脚本、用户脚本和小工具都加载到页面的部分. TemplateStyles的样式表加载在中，因此它们以相同的优先级覆盖站点/用户脚本和小工具规则，并且如果有两个TemplateStyles规则，则第二个覆盖第一个. （请注意，模板样式规则是经过重复数据删除的：如果在页面上多次引用相同的样式表，则仅在第一次插入时. 另请注意，“后面”与文档位置有关，而不是加载顺序. 通过使用JavaScript操作页面，小工具在页面完全加载后添加CSS. 有些人在用户执行某些操作（例如单击按钮）时按需添加. 然而，他们将它添加到head，因此body中同样具体的CSS规则优先于它. ）



Lua模組如何使用樣式
可以使用 从Lua模块调用模板样式.

示例代码如下：



提供了哪些反濫用工具？
将CSS存储在单独页面中的设计选择部分是为了简化与标准反滥用工具集的集成. 模板样式CSS页面有自己的内容模型（ ），因此可以使用 变量使用跟踪或控制对它们的更改.

CSS包含的跟踪方式与模板转换相同，因此您可以通过“”选项查看样式表的使用位置，查看“”下页面上使用的样式表（可能在编辑屏幕上， 取决于您使用的编辑器），并使用“”查看最近可能影响页面的更改.

模板样式还在HTML代码中保留标识信息; 要查找特定规则的来源，请查看页面源，并且封闭的标记将具有类似 ，其中123456是样式表的修订版ID（可以用Special:Diff查看）.



有關模板樣式的決定是如何做出的？
在评论请求中提出并接受了将CSS与模板包含在一起的想法. 技术细节固定在第二个评论请求和用户咨询中的工作流程详细信息中.



誰在維護模板樣式？
模板样式最初是的项目（之前是Coren作为志愿者的探索性工作），由Brad Jorsch（开发人员）、Chris Koerner（社区联络员）、Dan Garry（产品经理）、GergőTisza（开发人员）和Grace Gellerman（项目经理）组成. 此後，人員和責任轉移到其他地方了，目前的所有權，請參見維護人員頁面.



哪裡可以報告錯誤或請求功能？
请在Phabricator中的模板样式组件下的文件任务.



在哪裡可以看到實際效果？
你可以看一些策划的例子.

所有维基媒体网站都启用了此功能.



參閱

 * - 尤其是#Caveats部分.
 * Wikipedia:TemplateStyles — guideline page on English Wikipedia.