UD5工具箱
CSS 代码质量在线分析 - 选择器复杂度与冗余检测
粘贴 CSS 代码，分析选择器数量、特异性分布、重复声明、颜色使用情况，提供优化建议。
未使用 CSS 扫描器
粘贴你的 HTML 和 CSS，快速找出未被使用的样式规则，优化你的代码
HTML 代码
0 字符
CSS 代码
0 字符
粘贴 HTML 和 CSS 代码后点击扫描按钮查看结果
常见问题
这个工具如何检测未使用的 CSS？
工具会解析 CSS 中的所有选择器（类、ID、标签、属性选择器等），然后在 HTML 中查找对应匹配。如果某个选择器在 HTML 中找不到任何匹配元素，则标记为"未使用"。对于包含伪类（如 :hover）的选择器，工具会检查其基础选择器是否存在，并标记为"可能使用"。
为什么有些未使用的 CSS 可能被误判？
静态分析无法检测 JavaScript 动态添加的元素、动态切换的类名、以及用户交互触发的样式。例如通过 JS 创建的弹窗、动态添加的 active 类等。建议在清理前人工复核标记为"未使用"的规则，特别是涉及交互状态的样式。
什么是"可能使用"的规则？
"可能使用"指的是选择器包含伪类（:hover、:focus、:active 等）、伪元素（::before、::after）、或属性选择器，其基础元素在 HTML 中存在，但静态分析无法确定这些状态是否会被触发。建议保留这类规则以避免破坏交互效果。
为什么 @keyframes 也可能被标记为未使用？
工具会检查 CSS 中的 animation 属性是否引用了定义的 @keyframes 名称。如果某个关键帧动画名称从未在任何 animation 或 animation-name 属性中被引用，它将被标记为未使用。你可以勾选"保留未引用 @keyframes"选项来保留它们。
如何安全地删除未使用的 CSS？
建议先使用"复制清理后 CSS"功能获取优化后的样式表，在开发环境中测试所有页面和交互功能是否正常。特别关注动态内容、表单状态、响应式布局和动画效果。不要直接在生产环境中替换原始 CSS 文件。
这个工具支持哪些 CSS 选择器类型？
支持类选择器（.class）、ID 选择器（#id）、标签选择器（div、span）、属性选择器（[data-*]）、通用选择器（*）、以及包含伪类和伪元素的复合选择器。对于后代选择器和子选择器等组合选择器，工具会提取其中的原子部分进行匹配检查。
相关知识点
- CSS 选择器优先级：ID > 类 > 标签，未使用的选择器不仅增加文件体积，还可能影响浏览器渲染性能。
- 关键渲染路径：浏览器需要解析所有 CSS 才能开始渲染，减少未使用的 CSS 可以加快首屏渲染速度。
- 覆盖率工具：Chrome DevTools 的 Coverage 面板可以动态检测运行时使用的 CSS，与静态分析互补。
- PurgeCSS：流行的构建时工具，可与 Webpack、Vite 等集成，自动移除未使用的 CSS。
- Tailwind CSS：使用按需生成的原子类框架可以从源头避免未使用 CSS 的积累。
CSS @scope 规则演示 - 作用域样式隔离
演示新的 CSS @scope 规则如何限定样式作用范围，对比传统 BEM 和 CSS Modules。
SVG 图标优化器 - 精简路径数据与清理冗余
粘贴SVG代码，移除无用命名空间、注释与默认属性，减小文件体积，提升加载速度。
JSON 数据表格生成器 - 自动列与样式
粘贴 JSON 数组，自动生成带搜索、排序和分页功能的数据表格组件。
CSS图案背景构建器 - 纯CSS重复花纹
编写或配置基础的CSS渐变、径向、锥形图案组合，生成美观的无缝重复背景代码。
展开/收起文本截断生成器 - 行数限制CSS
设置限制行数，生成带“更多”按钮的纯CSS或轻JS截断方案。
布局蓝图生成器 - 线框容器配置
选择页眉、侧边栏、主体、页脚的网格布局，生成基本的布局骨架代码。
网页整页截图生成器 - html2canvas当前页面捕获
使用html2canvas截取当前网页的完整内容（需粘贴HTML或演示），生成长图并下载。
JSON Schema 示例生成器 - 根据定义产出示例数据
提供JSON Schema定义，自动生成符合约束的示例JSON数据，用于接口文档说明。
CSS Subgrid 布局构建器 - 对齐嵌套网格轨道
拖拽设计包含 Subgrid 的嵌套网格，直观展示子网格如何继承父网格轨道并进行独立调整，生成代码。
在线像素标尺 - 测量网页元素宽高
在页面移动鼠标时显示十字参考线和像素距离，方便UI开发。
响应式表格生成器 - 移动端堆叠表格
将HTML表格转换为移动端友好的折叠行显示模式，并生成相应CSS。
CSS媒体查询生成器 - 响应式断点代码生成
可视化选择设备类型、屏幕方向和宽度范围，一键生成标准CSS媒体查询代码。
ASCII字符画编辑器 - 网格绘制导出
在字符网格上通过工具绘制猫、超人等各种图案，导出为.txt ASCII艺术。
网页截取转PDF - 输入URL生成PDF
输入网址，使用浏览器渲染并转换为可下载的PDF文件（纯前端模拟）。
占位图构建器 - 指定宽高文字自动生成
输入宽高、背景色和文字，生成对应尺寸的占位图片，适用于原型设计和文档填充。
滚动截图拼接器 - 多张截屏自动拼长图
上传多张连续重叠截屏，自动对齐并拼成一幅完整长图，完美展示聊天或网页。
CSS Grid交互演示 - 网格布局可视化学习
通过控件调整网格轨道、间距和对齐，实时展示效果及对应CSS代码，轻松掌握Grid。
血条样式生成器 - 游戏风HP条CSS
生成用于网页游戏或展示的动态血量/进度条样式代码，支持渐变和闪烁。
空状态插画生成器 - 无数据占位符
为应用的空白页（如无订单、无消息）生成带插画和文案的HTML/CSS占位组件。
高级占位图生成器 - 渐变/几何/文字组合
生成漂亮几何图案或文字占位图，指定尺寸，下载用于原型。
网页长截图工具 - 滚动捕捉整个页面
输入URL或使用当前页，自动滚动并拼接为一张完整的长图。
结构化数据 (JSON-LD) 验证器 - Schema.org 类型检测
粘贴JSON-LD，校验其是否符合Schema.org语法并预览可能触发的丰富结果类型。
网页元数据查看器 - Open Graph/Twitter Card
输入网址，抓取并展示该页面的标题、描述、OG标签和Twitter Card信息。
HTTP 状态码互动参考表 - 含场景与原因短语
按类型筛选状态码，点击查看详细描述与常见使用场景，开发调试速查手册。
网站是否宕机检测 - 并发请求状态验证
输入网址，通过多个公有镜像请求检测目标站点可用性，并显示各节点状态码。
像素画编辑器 - 在线网格绘图与导出
在可缩放网格上逐点绘制像素艺术，支持调色板、橡皮擦和导出PNG。
占位图片生成器 - 在线生成示意图片(Canvas)
自定义尺寸、背景色、文字，纯前端生成占位图，适用于原型设计和网页排版，无需依赖外部服务。
GraphQL 查询成本计算器 - 估算字段解析复杂度
粘贴 GraphQL 查询和 Schema（或模拟类型权重），计算请求的代价分，辅助限流策略。
在线SVG基础编辑器 - 矢量图形可视化绘制
直接编写SVG代码并实时预览，或通过基本形状工具绘制矩形、圆形、路径，适合动态图形调试。