Help:模板樣式

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Help:TemplateStyles and the translation is 100% complete.
Other languages:
Deutsch • ‎English • ‎français • ‎română • ‎русский • ‎سنڌي • ‎中文 • ‎日本語 • ‎한국어

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

工作原理

編輯者添加<templatestyles src="[某頁面]" />到一個頁面,然後[某頁面]的內容將被解析為CSS,它被清洁并載入到使用了这个<templatestyles>標籤的頁面(直接使用或是通过模板嵌入)。

[某頁面]必須是sanitized-css(已过滤的CSS)內容模型,預設是在模板名字空間並且以.css結尾。推薦的模式是把Template:Foo的樣式儲存在子頁面,例如Template:Foo/styles.css

如果[某頁面]缺少了命名空間前缀,那就會預設為模板命名空間。因此,舉例來說,<templatestyles src="Foo/styles.css" />將會載入Template:Foo/styles.css

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

這解決了什麼問題?

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

对于内联样式:

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

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

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

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

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

這安全嗎?

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

哪些CSS規則是有效的?

目前,模板样式接受一个或多个主要浏览器支持的大多数CSS3属性(截至2017年初)。除了简单的规则,@media@page@supports@keyframe@font-face/@font-feature-values还支持at-rules(出于安全原因,font-face仅限于名称以TemplateStyles开头的字体)。 對於允許屬性的完整列表,請參見css-sanitizer StylePropertySanitizer程式碼的「$props」部分。

目前不支持非标准属性(包括供应商前缀)。有关计划,请参见T162379

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

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

如何定位特定皮肤?

MediaWiki提供了关于htmlbody元素的各种类,包括指示正在使用哪个外观的元素。 这些可以通过包含htmlbody元素的简单选择器来实现,包括所需的类、后跟空格(或CSS术语,后代组合子)。

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

/* Elements with class 'foo' will have red text in all skins */
.foo { color: red; }

/* Override that to green for Vector only */
body.skin-vector .foo { color: green; }

/* Add a red border if the user doesn't have JavaScript enabled */
html.client-nojs .foo { border: 1px solid red; }

/* Make that border green in Vector */
html.client-nojs body.skin-vector .foo { border-color: green; }
/* This does not work! The 'body' element must be specified. */
.skin-vector .foo { background: orange; }

/* These do not work! 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; }

CSS样式覆盖哪个顺序?

哪个CSS规则生效由特异性控制(粗略地说,选择器的复杂性,例如div.foo{margin:10px}.foo{margin:5px}更具体。 在具有相同特异性的情况下,文档中稍后出现的CSS样式会覆盖早期样式。

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

提供了哪些反濫用工具?

将CSS存储在单独页面中的设计选择部分是为了简化与标准反滥用工具集的集成。模板样式CSS页面有自己的内容模型(sanitized-css),因此可以使用new_content_model变量使用滥用过滤器跟踪或控制对它们的更改。

CSS包含的跟踪方式与模板转换相同,因此您可以通过“What links here”选项查看样式表的使用位置,查看“Page information”下页面上使用的样式表(可能在编辑屏幕上, 取决于您使用的编辑器),并使用“Related changes”查看最近可能影响页面的更改。

模板样式还在HTML代码中保留标识信息; 要查找特定规则的来源,请查看页面源,并且封闭的<style>标记将具有类似data-mw-deduplicate="TemplateStyles:r123456",其中123456是样式表的修订版ID(可以用Special:Diff查看)。

有關模板樣式的決定是如何做出的?

评论请求中提出并接受了将CSS与模板包含在一起的想法。技术细节固定在第二个评论请求用户咨询中的工作流程详细信息中。

誰在維護模板樣式?

模板样式最初是Wikimedia Reading Infrastructure team的项目(之前是作为志愿者的探索性工作Coren,然后人们四处走动。它现在是(截止2018年3月)由一个由Brad Jorsch(开发人员)组成的特设维基媒体基金会团队维护,包括Chris Koerner(社区联络员)、Dan Garry(产品经理)、GergőTisza(开发人员)和Grace Gellerman(项目经理)。

哪裡可以報告錯誤或請求功能?

请在Phabricator中的模板样式组件下的文件任务

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

你可以看一些策划的例子

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

从Lua模块调用

可以使用frame:extensionTag从Lua模块调用模板样式。

示例代码如下:

local p = {};

function p.templateStyle( frame, src )
   return frame:extensionTag( 'templatestyles', '', { src = src } );
end

return p;

參見