Friday Front-End - Issue #343: CSS parent selector, childish font sizes, declarative design tools, and more!

I remember that it was with a mix of disbelief and disappointment that I realized one day that there was no way to select the parent of an element in CSS. Wait, what? This can’t be. Why? All of this changed last month when Apple released Safari 15.4, the first browser to support the :has() pseudo-class. There it is. A parent selector. But :has is not only useful as a parent selector. It also opens up a lot more interesting opportunities.

Long story short: don’t wrap the whole card with a link, and instead link your main distinctive piece of information and expand its hitbox with CSS. This offers a better experience when listing links, and enable cards to contain other interactive elements.

I’m not saying that declarative tools—like Utopia—are right and that imperative tools—like Tailwind—are wrong. As always, it depends. In this case, it depends on the mindset you have. If you agree with this statement, you should probably use an imperative design tool: CSS is broken and I want my tools to work around the way CSS has been designed. But if you agree with this statement, you should probably use a declarative design tool: CSS is awesome and I want my tools to amplify the way that CSS had been designed.

I recently received a tantalizing email from a reader who showed me how you can key in a couple write commands in the macOS terminal, which lets you trigger the Safari Web Inspector and inspect elements of the view — like you would any website.