用户:ChenM0M/playground：修订间差异

←上一编辑

可视化wikitext

2026年2月14日 (六) 17:47的最新版本

RIA Wiki · Playground

Playground

探索 MediaWiki TemplateStyles 的边界——这里没有 JavaScript，只有纯 CSS 的可能性。每一个组件、每一种交互，都在证明"无脚本"并不等于"无能力"。

MediaWiki 1.39 · TemplateStyles · CSS-only · Zero JavaScript

手风琴 · Tabs · 悬浮 · 色彩 · 进度条 · 渐变 · 时间线 · 步骤条 · 引言 · 图案 · 文字特效 · 像素画 · 动画 · 瀑布流 · 提示 · 对比 · 形状 · 竖排 · 斑马纹 · 渐变边框 · 总结

数据概览

悬浮任意数字卡片查看交互效果。

30组件类型

6@keyframes 动画

8CSS 图案

0行 JavaScript

手风琴 · FAQ（:target 交互）

点击问题标题展开答案，点击"↩ 收起"或其他问题折叠当前项。纯 CSS :target 实现。

▸ 为什么选择 CSS-only 方案？

       MediaWiki 的安全策略严格限制页面内 JavaScript 注入。TemplateStyles 只允许 CSS 属性白名单，因此我们利用 :target 伪类和锚点切换来实现折叠/展开等常见交互模式，既安全又可维护。
       ↩ 收起

▸ :target 伪类的工作原理是什么？

       当 URL 的 hash 片段（如 #pg-q2）与页面某元素的 id 匹配时，该元素即处于 :target 状态。我们通过 CSS 控制 max-height 和 opacity 来实现平滑的展开/折叠动画。
       ↩ 收起

▸ TemplateStyles 禁用了哪些属性？

       高风险或常被限制的属性包括：position: fixed/sticky、perspective、transform-style、backface-visibility、pointer-events、user-select 以及基于表单元素的 checkbox/radio hack 等。这些在 TemplateStyles 的白名单策略下可能被直接拦截。
       ↩ 收起

▸ hover 交互在移动端是否有效？

       移动端没有真正的 hover 事件，因此 :hover 效果主要服务于桌面端体验。移动端的交互应当依赖 :target（锚点切换），或在信息层面确保在无 hover 状态下也可阅读完整内容。
       ↩ 收起

面板切换 · Tabs（:target 交互）

点击标签切换内容面板，无需 JavaScript。利用 :target 控制面板显隐与 tab 高亮。

布局系统色彩策略交互模式

布局系统

基于 display: flex 的响应式布局是 TemplateStyles 中最可靠的布局手段。通过 flex-wrap: wrap 与 min-width 配合，无需 Grid 也能实现灵活的多列排版。辅以 @media 断点，可以在移动端自动降级为单列。

要点：flex-wrap min-width @media calc()

色彩策略

门户页的色彩应当克制——主色只用于强调标签、边框和标题色条。背景保持白/极浅灰，避免大面积彩色块。渐变色建议只在卡片、进度条等小面积元素上使用，不用于全屏背景。

要点：克制主色浅底深字边框色条渐变限小面积

交互模式

MediaWiki 中只有两种安全的 CSS 交互手段：:hover（微交互：背景、边框、阴影变化）和 :target（锚点切换：Tabs、FAQ 展开等）。将这两者组合使用，已经能覆盖绝大多数信息门户的交互需求。

要点：:hover :target transition max-height 动画

Hover 微交互展示

六种不同的悬浮效果，仅使用 border、background、box-shadow 和 color 实现。将鼠标悬浮在卡片上查看效果。

     边
     边框变色
     border-color 过渡

     渐
     背景渐变
     background gradient

     影
     阴影浮起
     box-shadow elevation

     左
     左色条
     border-left accent

     底
     底部色条
     border-bottom accent

     反
     色彩反转
     dark inversion

引用块 · Callout

四种语义化引用块，适用于提示、成功、警告和危险信息。

ℹ️ 信息提示

TemplateStyles 允许在任何 wiki 页面内加载自定义 CSS，只需在页面头部引用 <templatestyles src="样式页名" /> 即可生效。

✅ 操作成功

所有组件已通过 TemplateStyles 安全验证，可直接部署到 MediaWiki 1.39 站点。

⚠️ 注意事项

请勿使用 position: fixed、pointer-events 或 user-select——这些属性可能被站点白名单拦截。

🚫 不可用

JavaScript 注入、表单标签（<input>、<label>、<button>）以及 checkbox/radio hack 均被 MediaWiki 安全策略禁止。

色彩画廊 · Swatch Grid

八组渐变色卡，悬浮时边框变色并呈现微透明效果。展示 linear-gradient 的视觉可能性。

Violet#a29bfe → #6c5ce7

Azure#74b9ff → #0984e3

Mint#55efc4 → #00b894

Amber#ffeaa7 → #fdcb6e

Coral#fab1a0 → #e17055

Rose#fd79a8 → #e84393

Graphite#636e72 → #2d3436

Silver#dfe6e9 → #b2bec3

进度条 · Status Bar（CSS 动画）

纯 CSS 渐变填充条，悬浮时触发脉冲动画（@keyframes）。无 JavaScript，无 canvas。

布局能力 · Flexbox85%

色彩系统 · Gradient72%

静态交互 · :hover95%

状态切换 · :target58%

动画能力 · @keyframes40%

排版系统 · Typography

字号阶梯

巨型标题 2.4em

大标题 1.8em

区域标题 1.3em

正文段落：TemplateStyles 在 MediaWiki 1.39 中提供了一种安全的、页面级别的自定义样式加载方式。

辅助说明文字 0.88em — 用于注释、元信息、次要描述

最小文字 0.78em — 用于版本号、技术标注、脚注

标签系统 · Badges

       Purple
       Blue
       Green
       Orange
       Pink
       Dark
       Default

色彩系统 · Color Palette

主色板

Violet

Azure

Mint

Amber

Coral

Rose

中性色板

Charcoal

Slate

Silver

Smoke

Snow

White

渐变色卡片 · Gradient Cards

六种预设渐变方案，悬浮时呈现阴影浮起效果。适合用于大面积色块、Hero 背景或强调区域。

     Sunset
     温暖的日落色调
     135deg · #f093fb → #f5576c

     Ocean
     深海到浅海的过渡
     135deg · #4facfe → #00f2fe

     Forest
     生机盎然的自然绿
     135deg · #43e97b → #38f9d7

     Night Sky
     深邃的夜空蓝
     135deg · #1e3c72 → #2a5298

     Candy
     甜蜜的糖果色
     135deg · #fa709a → #fee140

     Slate Teal
     沉稳的深色专业感
     135deg · #2c3e50 → #4ca1af

时间线 · Timeline

竖线时间线：左侧色条 + 圆点节点，悬浮时节点填色。展示 position: absolute 与 border 的组合运用。

     
     Phase 1
     基础组件
     实现 Hero、Banner、Section Header、Muted 文字等基础原子组件。

     
     Phase 2
     交互层
     加入 :hover 微交互（边框、阴影、背景渐变）与 :target 状态切换（Tabs、FAQ）。

     
     Phase 3
     色彩与排版
     建立完整的色彩系统（6 主色 + 6 中性色）和排版阶梯（6 级字号）。

     
     Phase 4
     动画层
     引入 @keyframes 脉冲动画和 transition 过渡，在 TemplateStyles 白名单内探索动效的极限。

     
     Phase 5
     响应式适配
     通过 @media 断点（720px / 480px）实现移动端优雅降级，确保所有组件在窄屏下依然可用。

步骤条 · Stepper（CSS 计数器）

利用 counter-increment 和 ::before 伪元素自动生成序号，无需在 HTML 中手写数字。悬浮时连接线变色。

     分析需求
     明确功能目标与约束条件（MediaWiki 1.39 TemplateStyles 白名单），确定可用 CSS 属性范围。

     设计系统
     建立色彩方案（6 主色 + 6 中性色）、排版阶梯（6 级字号）和间距系统，确保视觉一致性。

     构建组件
     逐个实现原子组件——从 Hero、Banner 到 Tabs、FAQ，验证每个组件在 wiki 环境中的兼容性。

     集成测试
     将所有组件整合到单一页面，测试 :target 锚点切换在 MediaWiki 中的实际行为和兼容性。

     响应式适配
     通过 @media 断点确保所有组件在窄屏下依然可用，添加 480px / 720px 两级降级策略。

引言卡片 · Blockquote（::before 装饰）

利用 ::before 伪元素和 content: "\201c" 生成大号引号装饰，无需额外图片或图标。

     在限制中寻找创造力——这正是 CSS-only 方案的魅力所在。约束不是枷锁，而是框架。
     Playground 设计理念
     CSS-only 交互探索

     最好的代码是不需要存在的代码。没有 JavaScript，就没有 JavaScript 的 bug。
     TemplateStyles 哲学
     零脚本安全策略

     一个像素的差异可能微不足道，但一百个精心调校的像素，就是专业与业余的分界线。
     视觉设计原则
     门户页美学标准

     :hover 是微交互的起点，:target 是状态管理的终点。两者组合，覆盖 90% 的信息展示需求。
     CSS 交互定律
     伪类交互模型

CSS 图案背景 · Pattern Backgrounds

八种纯 CSS 图案——全部通过 repeating-linear-gradient、radial-gradient 和多层 linear-gradient 实现，无需图片资源。

斜条纹

水平条纹

网格线

波点

反对角线

棋盘

菱形

锯齿

文字特效 · Text Effects

所有效果均通过 text-shadow、text-decoration 和 letter-spacing 实现。"模糊揭示"效果需要鼠标悬浮。

       text-shadow · 发光效果
       CSS 发光文字

       text-shadow · 立体效果
       CSS 立体文字

       text-shadow · 长阴影
       Long Shadow

       text-shadow · 描边效果
       CSS 描边文字

       text-shadow · 模糊揭示（hover 查看）
       悬浮鼠标揭示文字

       text-decoration · 波浪下划线
       这是波浪下划线效果 wavy underline

       text-decoration · 虚线下划线
       这是虚点下划线效果 dotted underline

       letter-spacing · 超宽字距
       Wide Spacing

像素艺术 · Box-shadow Pixel Art

仅用一个 6×6px 的 <span> 元素 + 多重 box-shadow，逐像素"画"出图形——零图片，零 canvas。

     
     爱心 Heart
     26 个 box-shadow 像素点

     
     星星 Star
     23 个 box-shadow 像素点

     
     箭头 Arrow
     10 个 box-shadow 像素点

双层边框 · Outline Effects

利用 outline + outline-offset 在元素的 border 之外再叠加一层边框，悬浮时展开。

     外扩实线
     outline-offset: 4px

     外扩虚线
     outline: dashed

     对比色双框
     border ≠ outline color

动画集合 · @keyframes Gallery

六种 @keyframes 动画——旋转、呼吸灯、弹跳、横向滑入、扫光骨架屏和打字机光标。全部纯 CSS，持续循环播放。

     
     旋转 Spin
     rotate 360deg · linear

     
     呼吸灯 Breathe
     opacity 0.4→1 · ease

     
     弹跳 Bounce
     translateY -10px · ease

     
     滑入 Slide In
     translateX -20px · ease

     
     扫光 Shimmer
     骨架屏加载效果

     输入中
     光标 Cursor Blink
     border-right · step-end

瀑布流 · Masonry Layout

利用 column-count + break-inside: avoid 实现类 Pinterest 的瀑布流排列，不同高度的卡片自动填充列空间。

     瀑布流原理
     CSS column-count 将容器分为指定列数，子元素按列优先顺序排列。配合 break-inside: avoid 确保单个卡片不被断列。

     三列布局
     桌面端默认 3 列。

     响应式降级
     720px 时降为 2 列，480px 时降为 1 列，确保移动端可读性。无需 JavaScript 监听。

     零依赖
     不需要 Masonry.js。

     适用场景
     适合展示不等高的内容卡片：新闻摘要、知识条目、图片画廊描述等。每张卡片的高度完全由内容决定。

     悬浮效果
     鼠标悬浮时边框变紫、增加阴影浮起感，增强交互反馈。

     CSS-only
     纯样式，零脚本。

     列间距控制
     column-gap: 12px 控制列间距，与卡片的 margin-bottom 配合形成均匀的网格间隙。

悬浮提示 · CSS Tooltip

利用 ::after 伪元素 + attr(data-tip) 读取自定义属性，悬浮时显示提示文字气泡——零 JavaScript。

对比卡片 · Comparison

展示 TemplateStyles 环境下**可用**与**不可用**的 CSS 能力对比。

✅ 可安全使用

✓ display: flex / inline-flex

✓ transition & @keyframes

✓ ::before / ::after + content

✓ :hover / :target 伪类

✓ linear-gradient / radial-gradient

✓ box-shadow / text-shadow

✓ counter-increment / counter-reset

✓ outline / outline-offset

✓ column-count / column-gap

✓ @media 响应式断点

✓ position: absolute / relative

✓ transform: rotate / translate

🚫 禁止或高风险

✗ JavaScript 注入

✗ <input> / <label> / <button>

✗ checkbox / radio hack

✗ position: fixed / sticky

✗ pointer-events / user-select

✗ -webkit-background-clip: text

✗ -webkit-text-fill-color

✗ perspective / transform-style

✗ backface-visibility

✗ filter (blur / grayscale 等)

✗ mix-blend-mode

✗ clip-path / mask-image

CSS 形状 · Border Shapes

全部通过 border 和 transform 组合实现，无需 SVG 或图片。每个形状只用一个 HTML 元素。

三角形 ▲

三角形 ▶

菱形 ◆

梯形

气泡框

平行四边形

竖排文字 · writing-mode

利用 writing-mode: vertical-rl 实现中文传统竖排阅读。配合 letter-spacing 调整字间距，呈现古风排版效果。

     人法地地法天天法道道法自然
     《道德经》

     大音希声大象无形
     《道德经》

     上善若水水善利万物而不争
     《道德经》

     知人者智自知者明
     《道德经》

斑马纹表格 · :nth-child

利用 :nth-child(even) 交替行背景色，配合 :hover 行高亮。纯 CSS 实现的数据表格样式。

CSS 属性用途白名单

display: flex弹性布局✅ 安全

transition过渡动画✅ 安全

@keyframes关键帧动画✅ 安全

::before/::after伪元素装饰✅ 安全

counter-increment自动编号✅ 安全

text-underline-offset下划线偏移❌ 被拦截

background-clip: text文字裁剪❌ 被拦截

position: fixed固定定位❌ 被拦截

文字省略 · Ellipsis

利用 overflow: hidden + white-space: nowrap + text-overflow: ellipsis 三件套实现单行文字截断省略。

   单行省略 (overflow: hidden + text-overflow: ellipsis)
   这是一段非常长的文字用来演示CSS文字省略效果。当文本内容超过容器宽度时，超出部分会被隐藏并显示省略号（...）。这种技术常用于卡片标题、列表项和导航链接等需要限制单行显示的场景中。它只需要三个CSS属性配合使用即可。

   正常换行（对比）
   这是一段普通文本，它会在容器宽度不够时自动换行，与上面的省略效果形成对比。正常换行行为是 CSS 的默认表现。

渐变边框 · border-image

利用 border-image: linear-gradient(...) 1 为边框应用渐变色，效果比 border-color 单色更现代。

     紫罗兰渐变
     135deg · #a29bfe → #6c5ce7
     border-image: linear-gradient(135deg, #a29bfe, #6c5ce7) 1

     海洋渐变
     135deg · #74b9ff → #00b894
     border-image: linear-gradient(135deg, #74b9ff, #00b894) 1

     日落渐变
     135deg · #fd79a8 → #fdcb6e
     border-image: linear-gradient(135deg, #fd79a8, #fdcb6e) 1

探索总结 · 能力边界与设计准则

以下是本 Playground 探索过程中验证的所有 CSS 属性能力和 MediaWiki 环境限制的系统性总结。

     一、已验证安全可用的 CSS 属性 (本页全部使用并测试通过)

✓ display: flex / inline-flex — 弹性布局，是 TemplateStyles 中最安全可靠的布局手段

✓ flex-wrap / flex-basis / min-width — flex 排列与响应式降级

✓ transition — 过渡动画，支持 background / color / border / box-shadow / opacity 等

✓ @keyframes + animation — 关键帧动画，已验证 rotate / translateY / translateX / opacity / background-position

✓ ::before / ::after + content — 伪元素，支持 counter() / attr() / 字符串 / 空字符串

✓ :hover 伪类 — 微交互核心，可改变背景、边框、阴影、颜色、透明度等

✓ :target 伪类 — 锚点状态切换核心，用于 Tabs / 手风琴 / FAQ 等

✓ :nth-child() / :last-child / :first-child — 结构伪类，已用于斑马纹表格

✓ linear-gradient / radial-gradient / repeating-linear-gradient — 渐变背景

✓ box-shadow — 阴影，支持多重阴影（已用于像素画）

✓ text-shadow — 文字阴影，支持多重层（已用于发光 / 立体 / 描边 / 长阴影 / 模糊效果）

✓ counter-reset / counter-increment — CSS 计数器，用于自动编号

✓ outline / outline-offset — 外轮廓线，用于双层边框效果

✓ column-count / column-gap / break-inside — 多列布局（瀑布流）

✓ @media 媒体查询 — 响应式断点，已验证 max-width: 720px / 480px

✓ position: absolute / relative — 定位，用于伪元素装饰、shape 等

✓ transform: rotate() / translateY() / translateX() / skewX() — 变换

✓ text-decoration: underline wavy / dotted — 下划线变体

✓ letter-spacing / text-transform — 字距与大小写转换

✓ overflow: hidden + text-overflow: ellipsis — 文字省略

✓ border-image: linear-gradient(...) 1 — 渐变边框（待实际 wiki 验证）

✓ writing-mode: vertical-rl — 竖排文字（待实际 wiki 验证）

✓ font-style: italic / font-weight: 900 — 字体样式

✓ opacity — 透明度控制，可用于 hover / animation

✓ z-index — 层叠顺序（用于 Tooltip）

✓ max-height + transition — 可用于手风琴展开动画

✓ 白名单选择器 — ~（兄弟）、>（子代）、+（相邻）、[attr$=]（属性结尾匹配）均可用

     二、已验证被拦截/不可用的 CSS 属性

✗ -webkit-background-clip: text — 渐变文字裁剪，直接被拦截报错

✗ -webkit-text-fill-color — 配合 background-clip 的文字填充色

✗ background-clip: text — 标准版本也被拦截

✗ text-underline-offset — 下划线偏移量，报错"不被认可"

✗ position: fixed / sticky — 固定定位和粘性定位

✗ pointer-events — 指针事件控制

✗ user-select — 文字选择控制

✗ JavaScript / <script> — 完全禁止

✗ <input> / <label> / <button> — 表单元素被 HTML 清洗器移除

✗ checkbox / radio hack — 因表单元素被移除而不可行

✗ perspective / transform-style: preserve-3d — 3D 变换

✗ backface-visibility — 背面可见性

     三、需实测验证的 CSS 属性（本页已写入样式但未确认拦截状态）

⚠ border-image — 渐变边框，语法复杂，需在 wiki 上确认是否通过

⚠ writing-mode: vertical-rl — 竖排文字，需确认白名单是否包含

⚠ transform: skewX() — 平行四边形用到的倾斜变换

⚠ filter: blur() / grayscale() — 滤镜（本页未使用，预计大概率被拦截）

⚠ mix-blend-mode — 混合模式（本页未使用，预计大概率被拦截）

⚠ clip-path / mask-image — 裁剪与遮罩（本页未使用，预计被拦截）

     四、MediaWiki HTML 解析陷阱

! 空行 = 段落标签 — Wikitext 解析器在空行处自动插入 <p> 标签，会破坏 CSS 兄弟选择器 ~ 的 DOM 关系。解决：消除所有 HTML 元素之间的空行，或用 <div> 替代 <span>。

! inline 元素被 <p> 包裹 — 孤立的 <span> 会被自动包裹进 <p>。解决：改用 <div>（block 元素不会被包裹）。

! 链接 href 完整路径 — [[#anchor|text]] 被解析为 href="/wiki/PageName#anchor"，不是 href="#anchor"。CSS 属性选择器需用 $=（结尾匹配）而非 =（精确匹配）。

! templatestyles 引用语法 — 正确写法是 <templatestyles src="pagename_styles" />，不含 .css 后缀。

! data-* 自定义属性 — MediaWiki HTML 清洗器可能移除 data-* 属性，导致 attr(data-tip) 式的 Tooltip 失效。需实测确认。

     五、:target 交互模式设计指南

→ 兄弟选择器依赖 — :target 的 anchor 元素和受控面板必须是**同一父级的直接子代**，用 ~ 选择器关联。

→ 默认显示 — 第一个面板默认 display: block，当其他 tab 被激活时用 :target ~ .panels .panel-a { display: none } 隐藏。

→ anchor 紧密排列 — 所有 anchor <div> 和 tabbar、panels 必须在同一行或无空行隔断。任何空行都会产生 <p> 破坏选择器链。

→ 局限性 — :target 依赖 URL hash（会导致页面滚动到锚点），且同一时间只能有一个 target，无法实现多个独立的展开/折叠状态。

→ 不可回退 — 一旦用户点击了 :target，没有"关闭"操作（除非点击另一个锚点或手动修改 URL hash）。

     六、性能与维护准则

→ 命名空间前缀 — 所有 class 使用 pg- 前缀，避免与 MediaWiki 默认样式或其他模板样式冲突。

→ 容器作用域 — 所有规则以 .pg-page 开头，确保样式不会泄漏到其他 wiki 页面。

→ transition 控制 — 所有过渡动画使用 120-300ms 时长，避免过长的等待感。

→ box-shadow 像素画 — 每个 shadow 约占 20-30 字节，一个图形约 26 个 shadow ≈ 700 字节，可接受；但不建议做超过 50 像素的复杂图形。

→ 渐变复杂度 — 多层 linear-gradient 叠加（如棋盘图案的 4 层）对渲染性能有轻微影响，但在现代浏览器中可忽略。

→ @keyframes 节制 — 循环动画用于装饰，不应在同一可视区域内同时播放超过 3 个动画。

     重要提示：以上所有属性的支持状态基于 MediaWiki 1.39 的 TemplateStyles 白名单。不同站点的 MediaWiki 版本和配置可能导致差异。标记为 ⚠ 的属性请在实际部署时逐一测试。