Case Insensitive CSS Attribute Selector
June 19, 2024 2024-08-11 8:30Case Insensitive CSS Attribute Selector
CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case!
Adding a {space}i
to the attribute selector brackets will make the attribute value search case insensitive:
/* case sensitive, only matches "example" */ [class=example] { background: pink; } /* case insensitive, matches "example", "eXampLe", etc. */ [class=example i] { background: lightblue; }
The use cases for this i
flag are likely very limited, especially if this flag is knew knowledge for you and you’re used to a standard lower-case standard. A loose CSS classname standard will have and would continue to lead to problems, so use this case insensitivity flag sparingly!
39 Shirts – Leaving Mozilla
In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell…
fetch API
One of the worst kept secrets about AJAX on the web is that the underlying API for it,
XMLHttpRequest
, wasn’t really made for what we’ve been using it for. We’ve done well to create elegant APIs around XHR but we know we can do better. Our effort to…
Degradable SELECT onChange
Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function…
Source link