译注:本文当前仅适用于英文站,此处仅供参考
以下守则涉及了CSS版式,主要为那些自我包含且可能导入到其它页面的版式,但本守则的大部分同样适用于在独立页面中的嵌入式CSS。
创作
CSS版式应于沙盒页面中起草。
在你觉得版式已经完工之后,你才可以将其完全移至维基中。而只有在你收到能够确认你的版式与本守则符合的技术团队(在IRC的#site11中,或Discord)成员许可后,才能在维基上创建带有版式标签且处于theme:分类下的新页面。请注意,从其他维基翻译过来的版式也需要通过与新版式相同的流程获得技术批准。
某些老旧的版式发布到了component:分类中。请使用theme:分类。
版式必须符合如下列出的限制条件。
限制条件
若要被准许在网站上使用,你的版式必须遵守几点限制条件。
许可
版式必须发布于与维基上的其它内容相同的知识共享许可之下。
你能改什么与不能改什么
你可以改变除了工作人员在本守则上规定的东西外的任何维基上的组件样式。
你不能移除、隐藏,或“破坏”任何维基上的导航元素,或评分模组,或者component:adult-content-warning。
你不能破坏维基预计期望中的结构与外观。网站应该仍然是可识别且可读的。
你可以用CSS3滤镜或者别的东西改变翻译模组(.scpnet-interwiki-frame)和跨维基模块的样式,但是你不能更改和删除其内容。
基础功能
你的CSS版式必须能够在主流浏览器(Chromium、Firefox、Safari)上运作良好且至少能够在次要浏览器(IE 11等)上运作。
你的CSS版式必须如在桌面端一般在移动端运行良好。
设置好版式页
版式页就是你的CSS版式源代码存放的地方。
你必须指导用户用Wikidot的[[include]]法把你的版式加到他们的页面里(并且相应地设定好你的版式页。这里是模板。)
你不能指导用户用CSS的@import法把你的版式加到他们的页面里。
你不能指导用户使用任何使用HTTP链接的Wikidot语法,链接必须为HTTPS。
你必须在你的版式页中提供用法介绍。注意这仅指要告诉用户输入什么才能让这个版式展现到他们的文章里。如果你的版式有什么作者应该知道如何使用的特性,那也必须要有说明。你无需引入你的版式格式实例——即使你完全可以,且绝对应该这么做!
你的版式页必须要将你的版式应用上去——也就是说,你的页面必须作为你的版式的预览。如果你用了上文的模板的话,那么这些就都已经为你做好了。
通过你的版式的技术团队成员会期望不但能看到你的CSS源代码,还能看到你的版式页的草稿。
代码膨胀
CSS版式不能含有大量无用代码。CSS版式的源代码应该包含有一点,如果有的话,除了这个版式从Sigma-10(维基的基础CSS版式)修改来的内容外的东西。大段从Sigma版式复制黏贴的行为是严格禁止的。
对CSS熟悉的人应该能够查看你的版式并明确了解你的意图。至少你应该能够说出你为什么要选择引用某一行。
此外,若非特别需要,你应当尽量避免使用!important标记,比如在增加优先级也无法满足时提供与其它CSS的兼容性。
可访问性
在编写CSS版式时,应遵守无障碍守则。
热链
热链即将文件链接至另一个网站的做法,这既是一种非常糟糕的做法,又违反了站规。强迫他人的网站负荷你的版式图片是非常不礼貌的,且还会给你的版式带来一定程度的不可靠性——那如果那个网站消失了呢?
若想防止热链行为,在CSS版式里用到的所有的图片、字体与其它文件必须要上传到版式页内而不是从互联网上的某个地方链接过来。
然而,你允许使用某些明确鼓励用热链来为用户提供文件的网站。显著例子包括谷歌字体与Lorem Picsum。若有疑问,谨慎行事并询问技术团队。
此外,CSS不可由沙盒页或别的不是主网站(且在工坊外)的地方链接过来。你必须在维基用theme:页面来承载CSS版式。
HTTPS
注意HTTPS的wdfiles链接甚至能在普遍不支持HTTPS的沙盒中运作。
批准
在发布之前,你的版式必须要被技术团队的一员批准。他们会查看你的版式并确认其是否符合该守则。
你可以在在IRC的#site11中,或Discord中找到技术团队,或者通过Wikidot私信他们。
只有运营职员及以上职位可以批准CSS版式。技术团队队长对任何批准都有最终决定权。技术团队成员所制作的版式必须得到另一技术团队成员的批准。
得到技术团队的批准意味着你的版式至少将要在几日内发布且尽可能不要做出修改;如果你在得到批准过长时间后发布版式或者如果你做出了较大的修改,请重新寻求批准。
请确保能给予技术团队一点时间(比如几日)来检查你的版式。
CSS版式的删除守则
CSS版式需如普通页面一样其他用户不允许对你的作品进行较大修改。小的错误被认为等同于拼写与语法错误且任何善意的用户都可以修正。
CSS版式受到通常删除守则的影响,且一旦其跌至-10的评分就会被删除。
修正不兼容的版式
若你的版式无法在主流浏览器(Chromium、Firefox、Safari、移动端、IE11)上起作用且表现完全破坏了导航、功能、或可访问性,其就需要被于网站上移除(或最低限度地,从引用块中移除),然后按照这个顺序修复。我们首先要做的是兼容性,功能,然后是可访问性。
+ 批准检查清单
该清单由现正批准版式的技术团队成员写作而成,版式制作者可能会在此找到有用的信息。
需求
版式必须对以下所有的问题都能回答“是”。
- 该版式的作用是否清楚?
- 该版式是否已经应用到了当前页面中?
- 它看起来是否有在运作?是否没有明显错误?
- 它是否能在移动端运作?
- 一个常见的错误是使用
background(其内包含有background-position)修改页眉标志,这将会移除掉移动端做出的所有定位修改,使用background-image即可仅修改标志图片。该版式修改标志(如果有的话)的方式是否正确? - 它是否能运作在另一个浏览器上?(至少得试试Chromium和Firefox)
- 导航组件是否齐全且正常?
- 如果该版式有修改
#login-status,检查一下以确保还能看见消息提醒 - 该版式的标题仍然是指向首页的可点击链接吗?
- 这个页面看着是否还像是SCP维基?
- 是否有英文用法介绍?
- 这个页面是否有用到
[[include]]? - 是否有大量的代码膨胀?(比如大段从Sigma-10或其它版式复制来的代码)(若有疑问,让作者解释一下某一段是做什么的。若其无法解释,那很可能就是膨胀了)
- 检查引入的文件与字体(包括不同字重的字体),这些是否都有被使用?
- 如果该版式是另一版式的分支(意味着有按需复制且编辑代码的动作),制作者是否能证明这一点?
- 他是否有考虑将其变为版式扩展(意味着需要引入其它版式,要么在版式页内引入,要么要求终端用户引入该版式,然后覆写其需要的地方)?
- 强烈建议在可能的情况下做成扩展,以最小化代码重复;应该要有一个非常好的成为分支的理由
- 如果作者坚持将其变为另一版式的分支,他能解释一下原因吗?他能否证明自己在CSS方面足够熟练,能够理解和维护他复制的任何复杂功能?
- 这个CSS是否简明易懂?若有复杂的部分,其是否难以描述的?(应该没有你不能理解且作者也无法解释的部分)
- 这个版式是否有任何可访问性问题?(版式必须至少有与Sigma-10相同的可访问性——绝对不能出现更多的问题,但是不对修复现有问题负责)
- 字号是否过小?
- 是否有任何文本与对比度推荐规范相悖?
- 是否所有动感十足或重复乏味的动画都能通过减少动作倾向检查?
- 重要的元素比如链接是否能够明显辨识?
- 页面源代码区域是否可读?这个区域经常被遗忘,因为它被选项按钮折叠。
- 试试页面的选项卡导航,是否所有的交互式元素(链接、侧边栏、顶栏、主页眉链接、搜索栏、页面历史按钮等等)都能在其被聚焦时有可见区别?
- 大多数浏览器都会在此时使用
outline属性;如果有移除/覆写outline的情况,检查是否有提供替代方案 - 是否所有的字体都有定义备用字体?
- 是否有除鼠标形状与文本颜色之外的其它视觉信息来告诉使用者已悬停在链接之上?
- 反选某些文本;反选是否可见?
- 如果查看“选项”»“页面源代码”,源代码区域的文本是否可见?
- 如果查看页面历史记录,用于浏览和回退历史记录的页面按钮是否可见?
- 检查更多的复杂UI比如页面历史与页面编辑,这些地方是否也仍还好?
- (当有遇见时列出其它常见的与可访问性相关的问题)
- 内置元素的修改是否有与Sigma版式所提供的重复元素相呼应?
- 对
blockquote的修改是否同样有应用于div.blockquote(原文如此)? - 对
#page-title的修改是否同样有应用于.meta-title? - 对
#breadcrumbs的修改是否同样有应用于.pseudocrumbs? !important是否有合理使用(少量使用是可以的,最好不使用;理想情况下所有对其的使用都应有说明)- Ctrl+F搜索http,是否所有外部资源都托管于Wikidot?
- 这个版式是否能运作在HTTPS下?是否有什么资源是在HTTP下加载的?
- 若版式有提供自定义功能,那它们的用法是否有说明?
- 该版式是否遵守CC BY-SA 3.0协议?
- 是否所有的图像使用都遵守CC BY-SA?(这包括嵌入式图像,比如内联SVG)
- 是否所有的字体使用都遵守CC BY-SA?(谷歌字体是可以用的,但要检查其它来源与/或自行上传的字体)
- 若有使用某组织的资料或以某种方式将其重制,该版式是否符合它们的授权发放惯例?
- 该版式是否遵守技术内容守则?
- 是否所有的文件资料大小都合适?
- 如果该版式是暗色版式,所有根元素的背景是否都被设置为暗色?(这将通知浏览器该版式是暗色版式,并相应地调整滚动条等)
- 如果该版式是已经这样做的现有暗色版式的分支版式,则可以忽略该问题。
非需求
若版式无法对以下所有问题回答“是”,那么提供点如何将其改进的建议。这些问题在批准时并不需求。
- 代码是否清晰且简明易懂?
- CSS是否有适当缩进,且有一致的注释?(这可能意味着有大段复制黏贴)
- 版式是否好看?
- 是否清楚这个版式有什么用途,且谁会去使用它?
- 使用术语“美学版式”通常意味着“不与任何世界观内的前设或设定有关”;若该版式使用了这一词语,其是否与这一意思相合?能否更加明确一点?
- 文档写得是否清晰易懂?
- 如果有示例,那么示例是否具有意义?
- 如果示例中有未被该版式修改的东西,那么是否能被移除?
在批准某个版式(或组件)之后,需通告技术团队的其他成员,即使该页面仍未被发布到维基之中。
在维基上发布已通过的版式时的检查清单:
- 版式被发布在theme分类中
- 页面有打上版式(以及_image,如果有图片的话)
- 所有文件资料都已移植至维基中
- 文件资料链接为https,而不是http
- 合著者已在attribution-metadata处登记
- 批准该版式的技术团队成员有在页面中留下评论(在给作者发布第一条评论的机会之后)以证明该版式已获批准
最近原创版式
列表暂不可用: 此 ListPages 查询尚未由只读迁移站支持。
最近翻译版式
列表暂不可用: 此 ListPages 查询尚未由只读迁移站支持。
1. 如果你看到有页面用@import的方法添加版式,而且那个版式也可以用[[include]]的方法,你可以编辑这一页来将它更新到新方法。






