Recent CSS Bookmarks 20: Just Three Links

Published on:

November 19, 2024

Categories:

CSS⁵⁵, bookmarks²⁰

Current music:

Haisuinonasa — Mirror

Current drink:

Peppermint Tea

Writing one post a day is hard! I had an idea for an observation but did not have an opportunity to write it up properly. Come on, me, these should not take that long!

That means I am falling back to the idea I reserved for cases like this one: where I cannot quickly come up with a post on the spot. That is: share just a few recent bookmarks!

Here they are! This time, they’re ordered from longer to shorter.

• “Overflow Clip” by Ahmad Shadeed — an article explaining the clip value of the overflow property and where it can be used. Fun fact: the ideas for some of my experiments with scroll-driven animations, that later became “Fit-to-Width Text” and “Position-Driven Styles” articles, came from me reading the specs for overflow: clip, specifically its difference from hidden. The clip value is cool, and well-supported — play with it!

• “The stretch keyword: a better alternative to width: 100% in CSS?” by Ollie Williams — a post about the new standard sizing value, which is now implemented in Chrome, and will come as a replacement for -moz-available and -webkit-fill-available (and could be potentially used in more contexts).

• “How to correctly use steps() with animations” by Temani Afif — a quick tip about the steps() easing function for CSS animations, specifically its jump-none value for <step-position>. This is something I did not play much, so it was new to me! And I can already remember how some places where I struggled before could’ve been solved by this tiny trick. I recommend reading the specs for steps() — there are some nice animations that demonstrate how its different values work!

I wonder: have you noticed a common theme between these three bookmarks? Please tell me if you did spot it!