Issue 306
Safari News from WWDC, improving Core Web Vitals, creating a hexagon grid, and other news and resources.
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.