CSS selectors never cease to amaze me at how powerful they can be for complex pattern matching. Most of this flexibility occurs in the relationships between parents, children and siblings, and very rarely in the correspondence of values. Consider my surprise when I learned that CSS allows matching attribute values regardless of whether they are upper or lower case!
Add a {space}i to the brackets in the attribute selector will make searching for attribute values 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 probably very limited, especially if you know this flag and are used to a standard lowercase standard. A flexible CSS class name standard will and will continue to cause problems, so use this case-insensitivity flag sparingly!
Be a developer parent
I get asked a ton of questions every day, but I’m always surprised that they are rarely questions about code or even technology; a lot of the questions I get are more about non-development things, like what is my office likewhat software do I use and how often…
CSS Gradients
With CSS border radiusI showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari and Chrome…
CSS animations between media queries
The CSS animations are second to none. CSS animations are efficient because they can be hardware accelerated, require no JavaScript overhead, and are composed of very little CSS code. Very often we add CSS transformations to elements through CSS during…
