A rather geeky/technical weblog, est. 2001, by Bramus
Recently built a demo that demonstrated a specific animation. Only problem: if you missed it, you had no way of restarting it. Instead of forcing the visitor to reload the page, this little JavaScript-snippet – attached to a button click – did the trick: const restartAnimations = ($el) => { $el.getAnimations().forEach((anim) => { anim.cancel(); anim.play(); …
Continue reading “JavaScript: Restart all CSS Animations of an Element”
Thanks to Variable Units, authors can define Custom Properties and use them as units in their CSS
css-browser-support
If you want to include Browser Support tables on your site, you can use this package by Stephanie Eckles Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentages. Per feature that ask it, you get back an object with the browsers and the data: { …
Continue reading “Show CSS browser support data with css-browser-support“
Wonderful talk by Andy Bell. We look at how we can hint the browser, rather than micromanage it by leaning into progressive enhancement, CSS layout, fluid type & space and modern CSS capabilities to build resilient front-ends that look great for everyone, regardless of their device, connection speed or context. Slides available as well
Jim Nielsen set out to style a bunch of links that appeared before hr elements. As the element tree – generated from a Markdown file – was entirely flat, there are no enclosing section elements to hook onto in order to select those links (using something like section p:last-child a:only-child). The solution? The :has() selector: …
A presentation by Hidde de Vries covering <selectmenu> Styling selects? You’ve got options! →
Good post by Miriam Suzanne In CSS, there are compound selectors and also complex selectors, and I never remember which is which. Do you need to learn the difference? Probably not. But I’m tired of looking it up. Don’t tell anyone but this is the reason why many of us blog: to remember things 😉 …
In this post, Lynn Fisher walks us through the parallax scrolling CSS effects featured on the Matterday project. Does not use Scroll-Linked Animations (which is undergoing a spec rewrite) but transform hacks that rely on translateZ() to create a stack and scale() to correct the size again. Fun CSS-only scrolling effects for Matterday →
On June 9 & 10, I was in Amsterdam for CSS Day – a conference I’ve been attending since it’s very first edition in 2013. This time – after a two year hiatus due to youknowwhat – I was very glad to be back! This time not as an attendee though, but as a speaker. …
Continue reading “The CSS Cascade: A Deep Dive (2022.06.09 @ CSS Day)“
x items
Because I keep forgetting this, an entry on the blog so that my future self can find it back easily: CSS: Want your first 5 list items to be bold? li:nth-of-type(-n + 5) {font-weight: bold;} Start with the # of list items you want to impact, then increment backward with -n. — Estelle Weyl (@estellevw) …