Friday Front-End - Issue #322: How to deal with iOS 15 Safari tabs, using position:sticky in CSS Grid, the state of CSS 2021, and more!

Have you ever come across a case where position: sticky isn’t working as expected with a child of a grid container? A few days ago, I was helping a friend in fixing that exact problem and wanted to finally write about it. That problem isn’t actually something buggy or wrong. In fact, that’s the effect of a default CSS behavior. Why and how? Let’s see…

In my “Different Degrees of Custom Property Usage” article, I noted a situation about colors and CSS custom properties where I went “too far” with breaking up HSL color values. Breaking every single color into its H, S, and L parts is may be a step too far.

Design systems are systems of systems, but not all systems are part of the design system. Confused? You’re certainly not alone. This post tries to articulate how my own definition of a design system has recently changed to address some hard-earned lessons.

Our Largest Contentful Paint (LCP) scores were fine, as were First Input Delay (FID) which was a relief given we load React on the page and often hear how that can prevent you from reaching these targets. Where we felt catastrophically short of the mark was Cumulative Layout Shift (CLS) where only 20% of visits were receiving a “good” experience — a long way from the 75% target. This blog post, and the subsequent parts, detail the progress we’ve made and the lessons we’ve learned which can help your team accomplish the same improvements.