Help:TemplateStyles/zh

PD 注意：當您編輯本頁面時，即同意以CC0協議授權您的貢獻。您可以在公有領域找到更多。 PD

enables the complex behavioral and aesthetic styling of templates through the use of referenced external CSS files that are wiki pages themselves. Notably, the ability to create/modify the CSS files is included in the default permissions for autoconfirmed users and so doesn't require involving someone with interface administrator privileges.

原理

編輯者添加<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样式表的完整功能，并按预期使用预览/调试工具（如:模板沙盒）。

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

传统上，有两种方式来设置模板（或任何其他内容）：使用内联样式（即使用HTML代码并添加类似style="margin: 10px"等属性）或者使用某些特殊系统消息如$1。这些方法都不能很好地发挥作用。

  • Using inline styles (that is, raw HTML code with added attributes like style="margin: 10px;")
  • Using certain special system messages such as MediaWiki:Common.css

对于内联样式

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

对于系统页面（MediaWiki:*.css）

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

這安全嗎？

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

Allowed CSS properties and rules

As of 2025年3月5日 (星期三), TemplateStyles accepts no fewer than 331 CSS properties and aliases, including the vast majority of those most often used on the modern internet with official support by one or more major web browser. Beyond simple rules, @media, @page, @supports, @keyframe, @font-face/@font-feature-values at-rules are also supported (with font-face restricted to fonts whose name starts with TemplateStyles, for security reasons).


如何定位移动/桌面分辨率？

媒体查询允许您以移动分辨率和桌面分辨率定位元素。 一些建议使您的样式默认为移动友好，并在媒体查询中包装桌面样式。 注意，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变量使用:跟踪或控制对它们的更改。

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中的模板样式组件下的文件任务。

在哪裡可以看到實際效果？

你可以看一些策划的例子。

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

参见

Category:Help/zh
Category:Help/zh