Chrome DevTools CSS调试器浅色文本含义及官方文档查询

浅色文本的含义 #

Chrome DevTools里显示为浅色（灰色）的CSS属性，和带删除线的属性有本质区别：这类属性从始至终都没被浏览器应用到元素上，常见原因包括：

• 属性名无效：比如拼写错误（把background写成backgroud），或是浏览器尚未支持的实验性属性（不带前缀的新属性）
• 属性值不合法：比如给font-size设置100px solid，或给color设置无效的颜色值
• 属性对当前元素不生效：比如给<div>这类块级元素设置vertical-align，或是给非图片/视频元素设置object-fit

官方文档获取方式 #

1. DevTools内直接查看：把鼠标悬停在目标CSS属性名上，会弹出包含MDN官方文档摘要的提示框，点击提示框里的内容就能查看完整文档
2. Chrome官方DevTools文档：在Chrome官方的开发者文档中搜索“CSS Styles pane grayed properties”，就能找到关于这类属性的官方说明

内容的提问来源于stack exchange，提问作者dfrankow