はてなブックマーク

Fit-to-Width TextWhat if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue exploring the experimental implementations of the latest specs. The Example Let me start with the demonstration: if you’d look at the following example in the browserGo to a sidenote th

Cyclic Dependency Space TogglesOver the past few years, I wanted to be able to select a value from a list in CSS by toggling a single custom property. We have the “space toggle” for booleans, and hopefully, one day, we’ll get style queries, but what about today? In this article, I present you with the technique I recently discovered. The Technique Let me startGo to a sidenote by showing you the co

This is done just with HTML and CSS, no JavaScript involved. But how does this work? Inline CSS Variables I was researching CSS variablesGo to a sidenote rather actively for the last 3 months, and initially I wanted to write a long article about just one aspect — CSS variables inside inline styles. But there were just so many things to write about, and I found a lot of general use-cases of variabl

We can already see that for most elements in all browsers we would get that focused state when we’d click our custom element, while for the <button>s in Safari and Firefox for Mac we won’t. Possible Solution in the Specs? One thing we should always do when we start experimenting is to see if there is already a solution in current or incoming specifications. The latest draft of Selectors Level 4 pr