用户:ChenM0M/playground

RIA Wiki · Playground

Playground

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

MediaWiki 1.39 · TemplateStyles · CSS-only · Zero JavaScript

手风琴 · Tabs · 悬浮特效 · 色彩画廊 · 进度条 · 渐变卡片 · 时间线 · 步骤条 · 引言 · 图案 · 文字特效 · 像素画 · 动画集 · 瀑布流 · 提示 · 对比

数据概览

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

25组件类型

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