Help:模板樣式
 |
注意：当您编辑本页面时，即同意以CC0协议授权您的贡献。您可以在公有领域帮助页面找到更多信息。 | |
TemplateStyles（模板样式）通过使用引用的外部CSS文件（这些文件本身就是wiki页面）来实现模板的复杂行为和美学样式。 值得注意的是，创建/修改CSS文件的能力包含在自动确认用户的默认权限中，因此不需要具有界面管理员权限的人员参与。
工作原理
編輯者添加<templatestyles src="[某页面]" />到一個頁面，然後被引用的页面的內容將被解析為 CSS，被过滤并載入到使用了这个 <templatestyles> 標籤的頁面（无论是直接还是通过模板嵌入）。
[某页面]必须是sanitized-css（已过滤的CSS）内容模型，模板名字空间内以.css结尾的页面默认为此内容模型。
推荐的模式是把Template:Foo的样式保存在最有影响力的子页面，例如Template:Foo/styles.css。
如果[某頁面]缺少了命名空間前缀，那就會默认為模板命名空间。因此，舉例來說，<templatestyles src="Foo/styles.css" />將會載入Template:Foo/styles.css。
<templatestyles> 標籤應放置在使用樣式的內容前面，最好是在模板的最上方或者尽可能接近，這是為了避免頁面刚載入但只有部分被渲染而發生無樣式內容閃爍的现象。
這解決了什麼問題？
模板样式（TemplateStyles）允许编辑者将样式规则与特定页面相关联，在过滤危险结构时提供CSS样式表的完整功能，并按预期使用预览/调试工具（如Extension:模板沙盒）。
降低访问和可维护性障碍有望在模板的可视化设计方式，更少的维护开销和更好的屏幕选项适应性（特别是现在构成维基百科网页浏览量的一半的移动设备，即使是）方面带来更多创新。
传统上，在MediaWiki页面有两种方式来给模板（或任何其他内容）添加样式，但两种方法都效果不好：
- 使用内联样式（即使用HTML代码并添加类似
style="margin: 10px;"等属性） - 使用某些特殊系统消息，如MediaWiki:Common.css
对于内联样式
- 内容和演示文稿没有分离。如果内容不是来自模板（例如文章中的表格），那将导致文章wikitext对于大多数编辑者来说是难以理解的。
- 由于样式与 wikitext 混合，语法突出显示和其他形式的 CSS 编辑支持很难或不可能。
- 必须为它们应用的每个HTML元素重复样式，这会导致大量的复制粘贴和难以阅读和维护的代码。
- 样式属性仅限于CSS的子集。 最重要的是，响应式设计所需的
@media规则不起作用，因此不可能制作出适用于各种屏幕尺寸的模板。 此外，内联样式优先于CSS样式表，因此针对用户、皮肤或设备的自定义变得更加困难。
对于系统页面（MediaWiki:*.css）
- 编辑仅限于界面管理员，这是参与的主要障碍。
- 无法解除编辑限制，因为无法限制可以使用的CSS规则，其中一些可能会被滥用来跟踪读者的IP地址甚至在某些旧版浏览器中执行脚本。
- 如果不首先保存，则无法进行更改。 T112474
- 所有样式表必须加载到所有页面上（无论它们是否实际使用页面），这会浪费带宽并使调试样式规则更难。
這安全嗎？
是的！模板样式包含一个成熟的CSS 解析器，可以读取、重新序列化和转义所有代码，并删除不识别的CSS规则。解析器足够精细以拒绝远程资源（例如背景图像）但允许本地解析器。 CSS选择器被重写，因而不能引用文章内容之外的元素。 （目前暂不能避免通过取代文章的某些部分（例如通过绝对定位）来视觉修改文章内容之外的区域。这与现状没有任何变化，因为wikitext和内联样式已经可以实现这一点。）
允许的CSS属性和规则
截至2025年3月5日 (星期三)，TemplateStyles接受不少于331个CSS属性和别名，其中包括现代互联网上最常用，并且得到了一个或多个主要网络浏览器官方支持的绝大多数属性和别名。
除了简单的规则外，还支持@media, @page, @supports, @keyframe, @font-face/@font-feature-values这些at规则（出于安全原因，font-face仅限于名称以TemplateStyles开头的字体）。
CSSvar()函数仅允许用在接受单个颜色值的属性以及calc()函数内部。
不允许设置自定义属性。
| css-sanitizer允许的CSS属性声明 [a][b][c] |
注意：每个属性都链接到有关其用法的文档来源，但是通常会显示出来的外部链接图标已被隐藏，以防遮挡任何以类似上标形式出现的脚注链接。
注释：
|
如何定位移动/桌面分辨率？
媒体查询允许您以移动分辨率和桌面分辨率定位元素。 一些建议使您的样式默认为移动友好，并在媒体查询中包装桌面样式。 注意，MediaWiki已标准化640px和1120px断点代表平板电脑和桌面。
如何定位特定皮肤？
MediaWiki提供了关于html和body元素的各种类，包括指示正在使用哪个外观的元素。
要实现这些，可以包含html或body元素以及所需的类的简单的选择器，然后加个空格（或CSS术语，后代组合子）。
通常此技术应用于设计一致性，而不是针对移动设备和桌面设备，因为所有外观都可用于移动和桌面分辨率。 参见#如何定位移动/桌面分辨率？。
/* 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; }
如何在MediaWiki消息中使用模板样式？
为了阻止恶意用户篡改页面内容以外的文档部分，所有CSS规则都会在前面加上mw-parser-output CSS类的前缀。
如果您在页面内容以外使用了基于模板样式实现的模板（例如用在全站公告 sitenotice），就需要手动提供该 CSS 类，即用类似 <div class="mw-parser-output">…</div> 的代码包裹模板。
CSS样式覆盖是按照什么顺序？
哪个CSS规则生效，取决于优先级（Specificity）（粗略地说，就是选择器的复杂性，例如div.foo { margin: 10px }比.foo { margin: 5px }更“具体）。
在具有相同优先级的情况下，文档中后面出现的CSS样式会覆盖前面的样式。
MediaWiki:Common.css、其他网站脚本、用户脚本和小工具都加载到页面的<head>部分。
TemplateStyles的样式表加载在<body>中，因此它们以相同的优先级覆盖站点/用户脚本和小工具规则，并且如果有两个TemplateStyles规则，则第二个覆盖第一个。
（请注意，模板样式规则是经过重复数据删除的：如果在页面上多次引用相同的样式表，则仅在第一次插入时。
另请注意，“后面”与文档位置有关，而不是加载顺序。 通过使用JavaScript操作页面，小工具在页面完全加载后添加CSS。有些人在用户执行某些操作（例如单击按钮）时按需添加。 然而，他们将它添加到head，因此body中同样具体的CSS规则优先于它。）
Lua模組如何使用樣式
可以使用frame:extensionTag从Lua模块调用模板样式。
示例代码如下：
local p = {};
function p.templateStyle( frame, src )
return frame:extensionTag( 'templatestyles', '', { src = src } );
end
return p;
提供了哪些反濫用工具？
将CSS存储在单独页面中的设计选择部分是为了简化与标准反滥用工具集的集成。模板样式CSS页面有自己的内容模型（sanitized-css），因此可以使用new_content_model变量使用Extension:AbuseFilter（滥用过滤器）跟踪或控制对它们的更改。
CSS包含的跟踪方式与模板转换相同，因此您可以通过“链入页面”选项查看样式表的使用位置，查看“页面信息”下页面上使用的样式表（可能在编辑屏幕上， 取决于您使用的编辑器），并使用“相关更改”查看最近可能影响页面的更改。
模板样式还在HTML代码中保留标识信息; 要查找特定规则的来源，请查看页面源，并且封闭的<style>标记将具有类似data-mw-deduplicate="TemplateStyles:r123456"，其中123456是样式表的修订版ID（可以用Special:Diff查看）。
有關模板樣式的決定是如何做出的？
在评论请求中提出并接受了将CSS与模板包含在一起的想法。技术细节固定在第二个评论请求和用户咨询中的工作流程详细信息中。
誰在維護模板樣式？
模板样式最初是Wikimedia Reading Infrastructure team的项目（之前是Coren作为志愿者的探索性工作），由Brad Jorsch（开发人员）、Chris Koerner（社区联络员）、Dan Garry（产品经理）、GergőTisza（开发人员）和Grace Gellerman（项目经理）组成。此後，人員和責任轉移到其他地方了，目前的所有權，請參見維護人員頁面。
哪裡可以報告錯誤或請求功能？
请在Phabricator中的模板样式组件下的文件任务。
在哪裡可以看到實際效果？
你可以看一些策划的例子。
所有维基媒体网站都启用了此功能。
错误处理帮助
background-image
如果您在尝试发布CSS文件更改时收到以下错误：
可能是赋予background-image的url('...');属性没有指向本地资源。
解析器只允许本地资源（并拒绝远程资源）。
只允许指向//upload.wikimedia.org/资源的URL，例如//upload.wikimedia.org/wikipedia/commons/8/83/MediaWiki-2023-button-proposal.svg指向File:MediaWiki-2023-button-proposal.svg的文件。
可以通过使用维基共享资源文件页面上链接指向的URL地址来获取这些URL。
这些链接包括指向“原始文件”的链接，或指向该文件“其他分辨率：”的任何链接，例如1,024 × 1,024 pixels。
参见
- Extension:TemplateStyles（模板样式） – 尤其是#Caveats部分。
- Wikipedia:TemplateStyles – 英语维基百科上的指南页面。