An excellent and clear explanation of specificity in CSS.
I think this a solution worthy of Solomon. In this case, the Gordian knot is the
select element and its inevitable recreation in order to style it.
What if we instead deliver a native select by default and replace it with a more aesthetically pleasing one if possible? That’s where the “hybrid” select idea comes into action. It’s “hybrid” because it consists of two selects, showing the appropriate one at the right moment:
- A native select, visible and accessible by default
- A custom select, hidden until it’s safe to be interacted with a mouse
The implementation uses a genius combination of a
hover media query and an adjacent sibling selector in CSS. It has been tested on a number of device/platform/browser combinations but more tests are welcome!
What I love about this solution is that it satisfies the stakeholders insisting on a custom component but doesn’t abandon all the built-in accessibility that you get from native form controls.
I never thought of combining the
datalist element with
input type="color"—it’s pretty cool that it just works!
I can see this coming in very handy at Codebar—pop any CSS selector in here and get a plain English explanation of what it’s doing.
This is a wonderful interactive explanation of the way CSS hierarchy works—beautiful!
Everyone wants it, but it sure seems like no one is actively working on it.
For fun, here’s some made-up syntax (which Jeremy has dubbed ‘selector queries’)…
- Obey the Law of Locality
- ABD: Anything But Dropdowns
- Pass the Squint Test
- Teach by example
Well, the clever CSS techniques just keep on comin’ from Trys—I’m learning so much from him!
This is a great explanation of the difference between the
:lang CSS selectors. I wouldn’t even have thought’ve the differences so this is really valuable to me.
Rachel gives us the run-down on what’s coming soon to Cascading Style Sheets near you, including an aspect-ratio unit and a
matches selector (as originally proposed by Lea).
The fascinating results of Brad’s survey.
Personally, I’m not a fan of nesting. I feel it obfuscates more than helps. And it makes searching for a specific selector tricky.
That said, Danielle feels quite strongly that nesting is the way to go, so on Clearleft projects, that’s how we write Sass + BEM.
A deep, deep dive into biomicry in digital design.
Nature is our outsourced research and development department. Observing problems solved by nature can help inform how we approach problems in digital design. Nature doesn’t like arbitrary features. It finds a way to shed unnecessary elements in advancing long-term goals over vast systems.
A really deep dive into the
lang attribute, and the
:lang() pseudo-class (hitherto unknown to me). This is all proving really useful for a little side project I’m working on.
A deep dive into the
:focus pseudo-class and why it’s important.
Rebuttals to the most oft-asked requests for browsers to change the way they handle CSS.
An excellent level-headed evaluation of styling and scripting form controls, weighing up the benefits and trade-offs. The more tightly you control the appearance, the less you get to benefit from the functionality (and accessibility) that the browser gives you for free …meaning you’ve now to got to work harder to replace it.
HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible?
[selectors] Functional pseudo-class like :matches() with 0 specificity · Issue #1170 · w3c/csswg-drafts
A really interesting proposal from Lea that would allow CSS authors to make full use of selectors but without increasing specificity. Great thoughts in the comments too.
Vitaly’s been bitten with date-picker fever. Here’s his deep, deep, deep dive into one interface element.