Take the State of CSS 2026 survey!
Astro Markdown Component Utility for Any Framework
In the previous article, I spoke about the why and how to use a Markdown component in Astro. Here, we’re […]
In the previous article, I spoke about the why and how to use a Markdown component in Astro. Here, we’re […]
Powered by
DigitalOcean
The old (testing in Safari when you don’t have Safari), the new (::checkmark), the in-between (anchor positioning but with HTML), and more.
Until we get something like ::nth-letter, there are still some really cool text effects we can make from existing CSS features, like letter-spacing, ::first-word and ::first-line.
This isn’t totally about AI. It’s about technical writing in the age of AI. I have some thoughts on this and I hope it’s helpful to you humans reading.
Every view-transition-name on a page must be unique. The problem is that every pseudo-element selector in your CSS targets a specific name, so your animation styles explode into an unmanageable wall of selectors.
Despite the countless number of online resources, it’s easy to get confused when trying to center an element. There are documented solutions, but do you really understand why the code you picked works? Let’s look at the current state of centering options today in 2026.
Take the State of CSS 2026 survey!
#
Chrome 151 will finally ship the autocorrect attribute, making it Baseline after 17 years.
#
Chrome 150 will ship text-fit, which determines how text scales to fit on a line.
#
Firefox 151 makes the Document Picture-in-Picture API, which fills an always-on-top window with HTML, available to desktop Firefox, but it still lacks Safari support.
#
.element { transform: rotate(45deg); }
.element { transform: rotateY(60deg); }
.element { transform: rotateY(30deg); }
.element { transform: rotateZ(90deg); }
.element { animation-timeline: view(); }
.element { animation-timeline: scroll(); }
.scroll-container { scroll-timeline-axis: x; }
.element { scroll-timeline-name: --scroller; }
