web_css_cssguidelin - 笨鸟编程导航

CSS属性值查询工具：快速查找CSS2/CSS3属性和浏览器支持信息

我自己写CSS时经常会遇到这个问题，比如一个属性名记得，但具体支持什么值，默认值是什么、浏览器支不支持、有没有兼容问题——完全不确定。尤其是像 scroll-snap-type、mask-composite 这类不常用的属性，看着名字都感觉陌生。

后来我就发现了这个CSS值查询工具，真的非常实用。你只要在页面上输入一个 CSS 属性名，比如 display，它就会自动帮你补全、展示所有相关信息。而且页面是实时更新的，输入越多越精确。

这个工具是专门为写CSS的人准备的，尤其适合像我这种“记不住所有属性值”的前端。它的几个功能很关键：

1. 实时搜索提示，输入即查
你只需要开始打字，比如 justify-，它就会自动补全相关的 CSS 属性，像 justify-content、justify-items 等等马上跳出来，快速又准确。

2. 支持CSS2和CSS3+分类查找
页面顶部有各种分类按钮，像“弹性盒子”、“动画”、“网格”、“定位”、“边框图像”等。你也可以通过这些分类筛选你要找的属性，非常适合查漏补缺。

3. 详细的初始值和规范链接
每个属性的默认值是直接标注出来的，而且像 <length>、<percentage> 这种尖括号里的值，会直接链接到 W3C 规范，让你可以深入了解具体规则。

4. 浏览器支持情况一键加载
点一下“加载浏览器支持”按钮，就能看到 CanIUse 的支持信息，非常直观地告诉你这个属性在各大浏览器里是不是能稳定使用。

5. 支持 PWA 安装
你甚至可以把它安装成桌面App，变成一个“离线版”的CSS手册，用起来比浏览器标签页还快。

属性后加空格：比如输入 width（带空格），可以避免显示多个关键词结果，更精确地定位属性。
结合筛选器：比如点“动画”或“网格”，再输入 align，马上就能看到 align-items、align-content 这些网格相关的属性，效率更高。
滚动条、变换、逻辑道具这种平常不常接触的，也能通过分类了解新特性，特别适合学习阶段查找资料。

这个工具感觉就像是前端写样式时候的“智能小助手”，随用随查，不用再去翻MDN一大段英文描述。特别是做响应式、写动画或者玩 CSS Grid 的时候，属性太多太碎了，这个工具就能快速定位，省事不少。

我现在基本已经养成习惯了，写样式时只要遇到拿不准的属性，就去查一下。特别适合当“写CSS时的即时参考表”。再加上它还能安装成PWA，离线用也完全没问题，真的挺方便的。

如果你也总是在想“这个属性支持什么值来着？”、“我写这个样式在Safari能用吗？”——那这个工具你一定得收藏起来，说不定以后天天都要打开它几次。