"i"在CSS属性选择器中的含义是什么？

Question

我在Google Chrome用户代理样式表中找到了以下CSS选择器:

[type="checkbox" i]

什么i意思？

Answer 1

正如评论中所提到的,它是针对不区分大小写的属性匹配.这是CSS Selectors Level 4中的一项新功能.

目前,它可用于Chrome 49 +,Firefox 47 +,Safari 9+和Opera 37 +*.在此之前,它仅在Chrome用户代理样式中以Chrome 39开头,但可以通过设置实验性功能标志来启用Web内容.

*早期版本的Opera也可能支持它.

工作示例/浏览器测试:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

如果浏览器支持此功能,上面的方块将为绿色,如果不支持,则为红色.

Answer 2

这是选择器4中引入的属性选择器的不区分大小写的标志.显然他们早在2014年8月就将这项功能的实现隐藏在Chrome中.

简而言之:此标志告诉浏览器匹配type不区分大小写的属性的相应值.HTML中属性值的默认选择器匹配行为区分大小写,这通常是不合需要的,因为许多属性被定义为具有不区分大小写的值,并且您希望确保选择器选择所有正确的元素而不管大小写.type是这种属性的一个示例,因为它是枚举属性,并且枚举属性被称为具有不区分大小写的值.

以下是相关提交:

• 179370 - 实施
• 179401 - 更改为UA样式表,如问题中的屏幕截图所示

请注意,它目前隐藏在"启用实验性Web平台功能"标志中,您可以通过chrome:// flags/#enable-experimental-web-platform-features访问该标志.这也许可以解释为什么这个功能在很大程度上被忽视了 - 隐藏在该标志后面的功能只能在内部使用,而不能在面向公众的代码(例如作者样式表)中使用,除非它已启用,因为它们是实验性的,因此不适合生产使用.

这是一个可以使用的测试用例 - 比较启用和禁用标志时的结果:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

请注意,我使用自定义数据属性而不是type显示它可以与几乎任何属性一起使用.

在撰写本文时,我不知道任何其他实现,但希望其他浏览器很快就能赶上.这是一个相对简单但非常有用的标准补充,我期待将来能够使用它.