The CSS attribute selector has a case-insensitive mode

This post is part of my Today I learned series in which I share all my learnings regarding web development.

I'm following the caniuse.com project on GitHub which means I get notifications about additions to the web platform and updated browser support. Today, I stumbled upon an issue including new CSS Level 4 selectors that are or will be included on caniuse.com.

It turns out there are a lot of new selectors on their way, and one interesting one is a flag which makes attribute selectors case-insensitive.

[class=foo i] { color : red ; }

Only downside is, that Edge is not supporting this selector yet.

If you want to play around with this, I created a quick codepen. The only case I can think of this for this is when you have to deal with user-generated content, and the possibility is quite high the users enter not accurate data. Would love to learn more about other use cases for this – if you have an idea, please let me know.

Edited: Dominik pointed out that this could be indeed useful for user-generated content in input fields using the value attribute.