SuperAPI AI 工具集

pseudo-elements

通用与其它

查看项目

更新于 10-15 23:57

技能介绍

用途:审查指定 CSS 与 JavaScript 文件(或由用户提供文件/匹配模式),检查伪元素最佳实践与 View Transitions API 的使用是否符合规则,并以 file:line 格式输出发现的问题。

主要能力:规则分三类。一是 Before/After(前缀 pseudo-):::before 与 ::after 必须声明 content 才能渲染;装饰内容应使用伪元素而非额外 DOM 节点;绝对定位伪元素的父级需 position: relative;伪元素需 z-index 正确分层;可用负 inset 扩展点击区域而无需额外标记。二是 View Transitions(前缀 transition-):参与过渡的元素需设置 view-transition-name;同一页面过渡期间名称必须唯一;过渡完成后应移除 view-transition-name;页面过渡优先使用 View Transitions API 而非 JavaScript 动画库;可通过 ::view-transition-group 等伪元素自定义动画。三是 Native Styling(前缀 native-):对话框/弹出层背景用 ::backdrop;输入占位符用 ::placeholder;文本选中用 ::selection。

使用方式:读取指定文件后逐条比对规则,输出形如 components/button/styles.module.css:12 - [pseudo-content-required] ::before missing content property 的条目,并在末尾给出规则、数量、严重程度的汇总表。

适用场景:审查悬停效果、装饰层、页面过渡等实现。

限制:资料未提供安装命令、收费方式、支持平台及具体严重程度判定标准;规则细节以资料所列条目为准。