CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性,显示其在主流浏览器的支持范围和前缀需求,快速避免踩坑。
UD5工具箱
| 属性名 | 描述 | 使用率 | Chrome | Firefox | Safari | Edge | 分类 |
|---|
搜索CSS属性,显示其在主流浏览器的支持范围和前缀需求,快速避免踩坑。
选择多张图片或纯色叠加,切换所有CSS混合模式并实时预览图层效果。
通过勾选元素关系(子孙、兄弟)、属性、伪类等条件,自动生成精确的CSS选择器字符串。
为内容区域生成灰色闪烁的骨架屏占位代码,包含卡片、标题等组件样式。
提取HTML中所有内嵌 `<style>` 标签的内容,合并生成单独CSS文件。
调节宽度、颜色、条纹动画等参数,实时预览并生成进度条HTML/CSS。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
浏览并一键复制常见CSS动画(跳动、淡入、滑动等)的@keyframes代码。
自动生成适合打印的`@media print`样式,重置背景色、字号并隐藏导航。
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式,即时预览并复制生成代码。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
列出所有标准 CSS 光标值(pointer, grab, zoom-in 等),鼠标悬停实时查看对应光标样式并复制代码。
输入文本,滑块调节letter-spacing和word-spacing,实时显示效果并复制CSS。
设定最小、首选、最大三个尺寸及视口范围,生成响应式CSS clamp()表达式。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
将 JSON 数组或对象渲染为可交互的 HTML 表格,支持嵌套展开、列排序和搜索。
拖拽顶点或选择预定义形状,可视生成CSS clip-path多边形、圆形、椭圆等,实时预览并复制代码。
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
调节光源角度、颜色和距离,生成凹凸柔和的新拟态UI元素CSS盒阴影代码,潮流设计工具。
粘贴HTML和基本CSS,分析渲染后视觉顺序与DOM顺序的差异,避免可访问性问题。
制作像荧光笔划过的高亮背景或扫描下划线效果,导出类名。
勾选或调整所需的重置元素(盒模型、边距等),生成自定义CSS Reset片段,确保跨浏览器一致性。
输入嵌套对象和取值路径,测试?.可选链和??空值合并运算的结果,学习JS新特性。
选择背景图片(或使用占位色),配置标题、副标题和按钮,生成Hero区域代码。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
粘贴网页上的 HTML 表格代码,自动提取数据并转换为 JSON 或 CSV 格式下载。