CSS属性选择器具有不区分大小写的模式

今天，我偶然发现了 caniuse.com 项目的一期，其中提到了新的和即将推出的 CSS Level 4 选择器。

这个列表很长，并且有许多新的选择器正在开发中。一个新的选择器标志引起了我的注意；属性选择器将变成一个 i 标志，这使得它不区分大小写。

/**
 * matches:
 * <div class="foo">...</div>
 * <div class="Foo">...</div>
 * <div class="fOo">...</div>
 * ...
 */
[class=foo i] {
  color: red;
}

浏览器支持看起来也不错。

如果你想玩它，我创建了一个 codepen。我能想到的唯一有用的情况是当你必须处理用户生产内容时，用户输入不准确数据的可能性很高。我很想了解更多关于其他用例的信息——如果你有什么想法，请告诉我！

编辑：Dominik 指出，这对于使用 value 属性的输入字段中的用户生成内容确实有用。

/**
 * matches:
 * <input value="hello world">
 * <input value="hello World">
 * <input value="hElLo WoRlD">
 * ...
 */
[value="hello world" i] { /* ... */ }

原文：https://www.stefanjudis.com/today-i-learned/the-css-attribute-selector-has-a-case-insensitive-mode/?