CSS Layout News - Issue 306

The sun is still shining and I have a nice collection of things to read this week.

Later this month I'm going to be speaking at the Frontend RheinMain meetup, this will be an online event. I've had a few people get in touch about possible in-person, or perhaps hybrid events later in the year. I'm keeping everything crossed as I really miss talking to folk in person.

Rachel Andrew, CSS Layout News

News

WebKit Features in Safari at WWDC21

Apple's WWDC is happening right now, and all the session video is being released for free. On Friday you can watch Design for Safari 15, a talk for those developing for the web.

Safari Beta Release Notes

Includes the lab(), lch(), and lwb() color syntaxes, plus aspect-ratio for boxes.

Learn

CSS for Web Vitals

CSS-related tips for optimizing Core Web Vitals, in particular things which impact Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP).

Best practices for fonts

Staying with the Core Web Vitals theme, this article gives help for the various aspects of the font lifecycle: font loading, font delivery, and font rendering.

Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries

This is a really great article. It covers a whole lot of things about CSS, that you'll find interesting even if building a hexagon grid is not a use case you come across all that often.

Trigonometry in CSS and JavaScript

This is the first in a three part series (all the parts are available) introducing and explaining how trigonometry can be useful.

Interesting

Can I :has

Igalia are filing an Intent to Prototype the :has() selector. Brian explains why implementing this selector is a trickly problem to solve.