📝 CSS-Tricks 201: Core Web Vitals, aspect-ratio, and RWD turning 10!

View this newsletter on the web.

[Editor’s Note from Chris]: The world is in a bad way, team. If reading about web tech doesn’t feel right to you right now, smash that delete button (or unsubscribe through the link at the bottom). We’ll always be around if you care to come back, and all these issues are archived.

I’d encourage you to use whatever strengths you have to better the world. Find organizations that are most important to your community and help. Maybe with money. Maybe with your web skills. Maybe with your voice. Maybe with your time.

💪 💜

📝 CSS-Tricks 198: The Future of CSS Layout and CSS Shadow Parts

View this newsletter on the web.

There’s exciting things on the horizon for CSS layout

Michelle Barker has the scoop on all the upcoming things to get excited about, such as:

  • Support is coming soon for the gap CSS property when used with Flexbox in Chrome (yay!).
  • Masonry-style layouts will soon be possible Firefox.
  • Chrome previewing a new Grid inspector, which looks like this:

📝 CSS-Tricks 197: CSS Generators, generic-components, and Alpine.js

View this newsletter on the web.

Setting text inside a circle with CSS

I totally forgot that this is possible with the shape-outside CSS property. As Kerry Smyth shows in this demo, we can use that property twice to force text to float around two different paths, giving us shape on both sides (in this case, a circle). It’s neat that browser tools have come so far as to give us this really nice visual representation as we build it, too:

As Kerry mentions in this post, I’m excited for shape-inside which will let us create a shape to wrap the content within an element more naturally, too.