CSS is going through a period of unprecedented progress. Between :has(), container queries, subgrid, and many more, new features are making their way to browsers seemingly every month.

First, I will analyze the layout and think aloud with you about the decisions that the team made. Once that is finished, it will be the time to dive in and share my thoughts and ideas on how to approach the current design with modern CSS.

In JavaScript we have Math.round() which takes one numeric parameter, and the result will be the nearest integer. So 1.4 rounds down to 1 because it is closer to 1 than 2. Similarly, 3.9 rounds up to 4 since that is the nearest integer. With CSS, round() behaves similarly by default, except it takes two parameters. The first is the value you want to round, and the second is the precision number.

In this post, we'll compare different easing functions in CSS. The linear() function in CSS is a new easing function that gives us more control over crafting our animations. We'll explore how linear() function works and also look at some practical examples of where it can be used.

While I wasn’t looking, a rubber button I shared on CodePen was viewed more than 11,000 times (as of this writing). I thought it might be fun to break down how the effect works, including some accessibility and compatibility improvements over what I originally shared.