I thought I was a DevTools expert, but I learned a bunch of new tricks here!
As a front-end designer, I spend a lot of my time working in a browser with the developer tools open. This magical panel of tools provides some features that make my design workflows faster and more fun, but they can be easy to miss. Therefore, in the spirit of sharing, I thought I’d compile a list of some of my favorites!
This past week has brought a few announcements from browser vendors of some exciting things that might have a big impact on CSS layout in the very near future: A new CSS Grid inspector in Chrome, adding support for the Flexbox gap property in Chrome, and an experimental new Masonry CSS Grid layout in Firefox!
Heydon’s <watched-box> is a custom element that essentially does container queries by way of class names that get added to the box based on size breakpoints. For development, I had the idea of using Zach’s interesting little <resize-asaurus> web component. It wraps elements in another box that is resizeable via CSS and labels it with the current width.
Grid isn’t Masonry, because it’s a grid with strict rows and columns. If you take another look at the layout created by Masonry, we don’t have strict rows and columns. Typically we have defined rows, but the columns act more like a flex layout, or Multicol. The key difference between the layout you get with Multicol and a Masonry layout, is that in Multicol the items are displayed by column. Typically in a Masonry layout you want them displayed row-wise.
Unfortunately, you have to consider using content in pseudo-elements very carefully because it can affect accessibility. Just because your generated content is not defined in the HTML, it doesn’t mean that it is not picked up by assistive technology like screen readers. Today I learned that the content property supports a way to define alternative text for generated content.
CSS has come a long way, but min(), max(), and clamp() make a lot of things a lot easier than they used to be, and really open up the world of responsive typography like we never had before! Clamp() is the ingredient that we’ve needed for a long time to really be able to make type fully responsive in our CSS, and to be able to do it on one line is absolute magic!
Adam reviews the design and architecture that went into creating a component compiler which generates framework agnostic components. First, he goes over “why” a compiler, then dives into how we’re able to take advantage of TypeScript and Rollup to generate web-standard components, while also focused on developer experience.