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....
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....
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:...
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:
Today I learned that as of last month all modern browsers support css nesting! So instead of having to define styles like this: .header { background-color: blue; } .header p { font-size: 16px; } .header p span:hover{ color: green } you can instead do: .header { background-color: blue; p { font-size: 16px; span { &:hover { color: green } } } } This was the last feature of Sass that I used regularly that was missing from native CSS (CSS variables being the first big one that caused me to drop pulling sass into projects)....