let’s take a step-by-step hands-on look at what web developers can do with this desperately desired tool. It turns out, the :has() pseudo-class is not just a “parent selector”. After decades of dead-ends, this selector can do far more.
While we wait for browsers to implement the text-wrap: balance;#CSS property and value for text (pleeeeeease! 🙏), I may have created a silly — and probably sub-optimal — function to do it with HTML block elements:
nowadays we can build things with CSS that are impossible to create with our design tools. We have scroll-snap, we have complicated animations, we have all kinds of wonderful interaction, grid, flexbox, all kinds of shapes, and so much more that you won’t find in the drop down menus of your tool of choice. Yet our websites still look and behave like they were designed with photoshop.
This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a “how to do a 12-column grid in HTML/CSS?” Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.