Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

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.

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

The browser support's looking good as well.

If you want to play around with it, I created a quick codepen. The only case I can think of this being useful is when you have to deal with user-generated content, and the possibility is quite high the users enter not accurate data. I would love to learn more about other use cases โ€“ 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.

/**
 * matches:
 * <input value="hello world">
 * <input value="hello World">
 * <input value="hElLo WoRlD">
 * ...
 */
[value="hello world" i] { /* ... */ }
Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 14 days ago.

Related Topics

Related Articles