Css

Scroll-driven Animations Some really cool demos on this site.

una.im | Creating a scroll-spy with 2 lines of CSS

Friends at Last: Tailwind & CSS…whodathunkit?!

Pokémon Cards CSS Holographic Effect This shows some super impressive effects you can do with CSS! via

How to Keep Up With New CSS Features This is nice list of resources to follow if you want to keep up to date with all the latest CSS features. via

Today I learned about the new view transitions API and I was pretty impressed with how much of the heavy lifting the browser will now do for you to animate between states. Adam Argyle has a fun talk where he shows what you can do with this new API. I only had to add a couple of lines of javascript to animate reordering a list of items that would have required a more complicated technique like FLIP (first last invert play) in the past. ...

Today I learned about the new :has() selector in CSS. It’s also referred to as the “parent” selector and that’s probably the most straightforward use case but this post shows several cool use cases. I used it today when I needed to apply a style to a shared root element but only on a specific page, but all of the styles are bundled into a single CSS file that’s loaded on every page: ...

Today I learned that the viewport units in CSS don’t account for the width of visible classic scrollbars like on Windows. This means that if you use width: 100vw to make an element the full width of the page and then a scrollbar appears, it will cause the element to overflow (by 17px which is apparently the width of Windows scrollbars) and create a horizontal scrollbar. CSS media queries don’t take them into account either, so if the viewport width is close (say within 17px) of a breakpoint then the appearance of a scrollbar will cause it to cross that threshold. ...

I’ve recently been learning about the new logical properties in CSS. Essentially if we’re developing applications for a global audience, instead of thinking in terms of right/left or top/bottom, we should start thinking in terms of “inline” and “block”. These let us specify our styling and layouts in relative logical values instead of physical ones so they can adapt appropriately for right-to-left or vertical languages. For example, margin-left: 20px would now be margin-inline-start: 20px. ...

Today I learned about the font-variant-numeric CSS property that lets you control alternate glyphs for numbers. Not every font will support all of these but the tabular-nums option is common and seems especially useful for data in grids. Using Font Variant Numeric