跨浏览器调样式
某前端开发者在改一个弹窗的圆角时，发现 Chrome 正常但 Safari 上圆角没了。他需要确认 `border-radius` 在 Safari 的哪个版本开始支持，以及是否要加 `-webkit-` 前缀。通过本工具查得 Safari 4 开始支持标准写法，而 5.1 之前需加前缀。他决定对 iOS 9 以下设备保留前缀，避免用户看到直角弹窗。
属 性 分 类盒模型 · 布局 · Flex · Grid · 文字 · 颜色背景 · 边框阴影 · 变形动画 · 滤镜混合 · 其它
属 性 速 查Gallery · 点卡片看取值 / 示例 / 实时效果
点选左侧任一属性
查看 取值列表 / 语法示例 / 实时视觉效果 · 兼容性 · 相关属性
查看 取值列表 / 语法示例 / 实时视觉效果 · 兼容性 · 相关属性
就绪 · 对照 MDN · 含 全属性 + 取值 + 语法 + 实时效果 demo + 兼容性 · 全程浏览器本地
第一节
关于本工具
About写样式时，一个属性记不准支持情况，就得切标签页查 MDN、翻 Can I use，再切回来试。这个速查表把 CSS 属性按功能分组陈列，每个属性旁直接标注兼容性基线（Chrome/Firefox/Safari/Edge 稳定版本号）和一个可运行示例。数据全部打包在页面内，打开即查，不依赖网络请求——适合调试时快速确认某属性是否安全可用。
使用场景
新属性上线前评估
团队计划下周上线一个使用 `aspect-ratio` 的图片组件，但担心老旧浏览器不兼容。前端负责人在本工具输入属性名，立即看到它从 Chrome 88、Firefox 87 开始支持，而 IE 全系列不支持。据此决定对 IE 用户回退到 `padding-top` 百分比方案，其他浏览器直接使用新属性，避免上线后图片变形。
排查 Flex 布局异常
一个电商详情页在 Android 微信浏览器里，商品描述文字被挤出了容器。开发者怀疑是 `flex-shrink` 的默认行为导致。用本工具查得 `flex-shrink` 默认值为 1，且微信内置浏览器基于 X5 内核（对应 Chrome 53 兼容性）。他意识到需显式设置 `flex-shrink: 0` 并加上 `min-width: 0` 来覆盖默认收缩逻辑，修复后布局恢复正常。
旧项目 CSS 重构
接手一个 2018 年的后台管理系统，代码里大量 `float` 和 `display: table-cell`。重构时计划替换为 Grid 布局，但不确定 `grid-template-columns` 的 `minmax()` 函数在项目最低支持的 Chrome 60 上是否可用。通过本工具查得该函数在 Chrome 57 开始支持，确认可以安全使用，避免了写两套布局的冗余工作。
CSS 动画性能调优
一个 H5 活动页的粒子动画在低端安卓机上掉帧严重。开发者在调试中发现使用了 `left` 属性做位移，想改用 `transform: translateX()` 来触发 GPU 合成层。用本工具确认 `transform` 从 Chrome 36、Safari 9 开始支持，且 `will-change` 属性在 Chrome 36 也有良好支持。修改后动画帧率从 15fps 提升至 55fps。
第二节
使用指南
Getting Started使用步骤
- 1在搜索框输入属性名（如 `display`），列表实时过滤匹配项，高亮显示当前匹配
- 2点击任意属性行，展开该属性的完整兼容性表格（Chrome/Firefox/Safari/Edge 版本号）
- 3展开的示例区块展示该属性的合法值与对应效果代码片段，可直接复制
- 4点击「复制代码」按钮将当前属性的示例代码存入剪贴板，按钮短暂显示「已复制」反馈
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| display | display: block | inline | inline-block | flex | grid | none | ...（完整列表含兼容性标注） | 常规：最常用属性之一，验证工具是否完整列出所有取值及浏览器兼容性（Chrome/Firefox/Safari/Edge 版本号） |
| position | position: static | relative | absolute | fixed | sticky（sticky 标注 Safari 需 -webkit- 前缀） | 常规：覆盖定位体系，验证工具对 sticky 这种有前缀需求的属性是否给出兼容性提示 |
| z-index | z-index: auto | <integer>（无单位整数，负值有效，auto 默认堆叠上下文） | 边界：auto 与整数的语义差异，验证工具是否区分 auto 和数值的堆叠上下文行为 |
| clip-path | clip-path: none | <url> | <basic-shape> | <geometry-box>（兼容性：Chrome 55+, Firefox 54+, Safari 6.1+, Edge 79+） | 边界：较新属性，验证工具对 CSS 新特性的收录完整度及版本号准确度 |
| width: 100% | width: <length> | <percentage> | auto | max-content | min-content | fit-content（百分比相对于包含块宽度，注意包含块有 padding 时的计算差异） | 易错：百分比计算基准易混淆，验证工具是否给出包含块 padding 影响的说明 |
| margin: 0 auto | margin: <length> | <percentage> | auto（auto 水平居中仅对块级元素且宽度已设定时生效） | 易错：auto 居中条件常被误解，验证工具是否明确说明需要 width 或 max-width 配合 |
| background: url('img.png') no-repeat center/cover | background: <bg-layer>（简写属性，顺序：color image repeat attachment position/size origin clip） | 易错：简写属性顺序和 / 分隔的 position/size 易写错，验证工具是否解析简写各子属性并标注兼容性 |
常见错误对照
1.属性名拼写错误或遗漏连字符
✗ 错误
backgroundcolor: red;✓ 修复
background-color: red;CSS 多词属性名使用连字符（-）分隔，如 background-color、font-size。拼写错误或遗漏连字符会导致属性无效，浏览器直接忽略该声明。
2.简写属性顺序错误
✗ 错误
background: url(bg.png) red top left no-repeat;✓ 修复
background: red url(bg.png) no-repeat left top;background 简写属性有固定顺序：color image repeat attachment position。顺序错误可能导致部分值被覆盖或解析异常，应严格按规范排列。
3.长度单位缺失或错误
✗ 错误
margin: 10;✓ 修复
margin: 10px;CSS 长度值（除 0 外）必须带单位，如 px、em、rem。缺失单位会被视为无效，浏览器不应用该样式。0 可以省略单位，但建议保留以保持一致性。
4.颜色值格式混淆
✗ 错误
color: #fff; // 想用白色，但实际是浅灰✓ 修复
color: #ffffff;#fff 是 #ffffff 的简写，但只适用于每两位相同的情况（如 #aabbcc → #abc）。若颜色值不满足此条件，简写会得到错误颜色。应使用完整六位十六进制或 rgb() 函数。
5.选择器优先级误解导致样式不生效
✗ 错误
.box { color: red; } #box { color: blue; }✓ 修复
使用更具体的选择器或 !important（谨慎）ID 选择器（#）优先级高于 class 选择器（.）。若同时定义，ID 选择器生效。应理解 CSS 优先级规则（内联 > ID > class > 标签），避免意外覆盖。
6.flex 属性值单位错误
✗ 错误
flex: 1 0 200px; // 想固定 200px，但 flex-basis 被覆盖✓ 修复
flex: 0 0 200px;flex 简写中 flex-grow 默认 0，flex-shrink 默认 1，flex-basis 默认 auto。若写 flex: 1 0 200px，flex-grow 为 1 会使项目放大，不固定。应明确设置 flex-grow 为 0 来禁止伸缩。
7.transform 顺序影响最终效果
✗ 错误
transform: rotate(45deg) translateX(100px);✓ 修复
transform: translateX(100px) rotate(45deg);transform 函数的执行顺序从左到右。先旋转再平移，坐标系会随元素旋转，导致平移方向偏移。应先平移再旋转，确保平移沿原始坐标轴。
8.媒体查询中单位混用导致断点失效
✗ 错误
@media (max-width: 768) { ... }✓ 修复
@media (max-width: 768px) { ... }媒体查询中的长度值必须带单位（px、em 等），否则解析器会忽略整个查询。常见错误是漏写单位，导致响应式布局在对应断点不生效。
第三节
工作原理
How It Works核心公式
CSS 属性兼容性得分 = Σ(浏览器权重 × 支持状态) ÷ 总权重 × 100
变量说明
浏览器权重各浏览器市场占比（如 Chrome 65%）支持状态1=完全支持, 0.5=部分支持, 0=不支持总权重所有浏览器权重之和（恒为 100%）
示例
属性 `grid-template-columns` 在 Chrome(权重 65%, 完全支持=1)、Firefox(25%, 完全支持=1)、Safari(10%, 部分支持=0.5) 下：得分 = (65×1 + 25×1 + 10×0.5) ÷ 100 × 100 = (65+25+5) ÷ 100 × 100 = 95 分，表示该属性在主流浏览器中兼容性极佳。
用户输入
本地处理
输出结果
特性说明
第五节
常见问题
Q & A问这个速查表里的兼容性数据是最新的吗？＋
答
数据来源于 caniuse.com 的公开 JSON 快照，每 30 天自动同步更新一次。覆盖 Chrome、Firefox、Safari、Edge 等主流浏览器的最新两个大版本。如果你需要查看某个属性在特定旧版本（如 IE11）的兼容性，建议直接访问 caniuse 网站，本表只展示当前主流环境的数据。
问为什么有些属性点进去没有示例代码？＋
答
本工具为纯前端离线实现，所有示例代码都预置在源码中，覆盖了约 80% 常用属性的基础用法。对于极少数非常新或极少用的属性（如个别 CSS 函数或实验性特性），可能暂时没有预置示例。你可以直接在右侧编辑区手动输入代码测试，浏览器会实时渲染效果。
问搜索框里输入中文属性名为什么搜不到？＋
答
当前搜索只支持英文属性名、CSS 关键词（如 flex、grid）和部分常用缩写。中文别名或翻译暂未收录。建议直接输入标准 CSS 属性名，比如搜「background-color」，不要搜「背景色」。如果你不确定属性名，可以尝试输入「color」或「flex」这类常见词，从下拉列表里找。
问这个工具能离线用吗？＋
答
整个页面是纯前端实现，所有数据（属性列表、兼容性、示例代码）都在首次加载时一次性下载到浏览器缓存中。只要访问过一次，后续在无网络环境下打开页面仍然可以正常搜索和查看。离线状态下不会更新兼容性数据，但本地缓存的数据足够日常查询使用。
问兼容性表格里的「-webkit-」前缀还需要手动加吗？＋
答
表格中标注「-webkit-」前缀支持，表示该属性在对应浏览器中需要使用带前缀的写法才能生效。例如 `-webkit-line-clamp`。建议在代码中同时写标准属性和带前缀的版本，以保证跨浏览器兼容。本工具的示例代码中，如果该属性需要前缀，会同时展示两种写法。
问属性太多找不到，有没有按功能分类的筛选？＋
答
目前只提供关键词搜索和按字母索引跳转两种定位方式，没有按「布局」「动画」「文本」等功能分类筛选。如果你需要按类别浏览，建议先使用搜索框输入「flex」「grid」「animation」等大类关键词，可以快速定位到相关属性群。后续版本可能会加入分类标签。
问示例代码在 Chrome 上正常，在 Safari 上不生效，是工具数据不准吗？＋
答
这通常是 Safari 对某些属性的实现差异或 bug 造成的，不是工具数据错误。兼容性表格标注的是「支持该属性」，不代表实现行为完全一致。例如 `position: sticky` 在 Safari 上需要父元素 `overflow` 不为 `hidden` 才能生效，而 Chrome 则无此限制。建议遇到跨浏览器问题时，参考表格中的浏览器版本号，并在对应浏览器中单独测试。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。