Css

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

Today I learned that you can now easily darken or lighten a color natively in CSS with the new color-mix function. Here’s a use case I run into a lot where you have a primary brand color and you need to darken it on hover: :root { --brand-color-dark: color-mix(in oklab, var(--brand-color), black 30%); --brand-color-light: color-mix(in oklab, var(--brand-color), white 30%); } .button:hover { background-color: var(--brand-color-dark) } This works by mixing the color with some amount of black or white. I also chose the oklab color space since it’s the most likely to produce what I’m expecting for this use case. ...

Today I learned that you can now implement smooth scrolling purely with CSS in modern browsers. By adding the following CSS: /* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */ @media screen and (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } the browser will scroll smoothly whenever scrolling is triggered either by Javascript (with something like document.documentElement.scrollTop = 0) or by linking to elements with an internal anchor link. It’s considered best practice to use the prefers-reduced-motion media query to only enable things like animations to be mindful of users with motion sensitivities. In my testing, however, the browser won’t ever smooth scroll if the user has prefers-reduced-motion enabled. ...

This is another #til by proxy. A teammate asked about a CSS selector I used which has come to be referred to as the “lobotomized owl” (* + *): .flow > * + * { margin-top: var(--flow-space, 1em); } What this does is select every child element of the .flow class except the first one. You can also use newer CSS selectors to do the same thing in a way that might be more obvious: .flow > *:where(:not(:first-child)) { margin-top: var(--flow-space, 1em); } The above snippet is probably my favorite CSS utility called flow spacing. ...

Today I learned that there are new line height units in CSS. The lh unit is “equal to the computed value of line-height”. If nothing else this will be nice for a small annoyance I’ve run into before of vertically centering icons: