Using our 3, 2, 1 state system, we can make popovers animate on “the way in” and “the way out” just like we did with dialogs in Part 1.
I had the thought gosh I wish this table’s rows were numbered when I was looking at the big table of Interop 2024 popular votes. I don’t know the that the <table> needed numbering, but when I wanted to know the “rank” of some of the items, I found myself wishing it did.
Fortunately, CSS has a quick answer:
table {
counter-reset: tr;
tbody tr {
counter-increment: tr;
:where(td, th):first-child::before {
content: "#" counter(tr) ": ";
}
}Code language: CSS (css)Props to Cennydd Bowles and Harry Bringnull for calling out this poor behavior on Microsoft’s part. Microsoft Edge is literally injecting a big banner on Chrome’s download page telling people that Edge is better.
Of all Microsoft’s tactics, the most objectionable for me is their dissuasive messaging injected directly into the Chrome download page. As we write, ‘for a browser vendor to interfere with the contents of a competitor’s website – or indeed any website – with neither due cause nor user consent is highly irregular and ethically indefensible.’
We need to cry foul when browser vendors mess with the actual content on websites. While this just looks like two behemoths clashing heads, how would you feel about Microsoft making editorial choices on your website?
While I was over on Codrops reading Adam’s article about Scroll-Driven animation, I also read Noam Rosenthal’s article about View Transitions. Noam is also at Google and working on the View Transitions API, so knows it pretty intimately, and found enough gaps that a library around it was warranted. That’s what Velvette is: a library around making certain things easier with the View Transitions API.
The #1 thing I wanted to try was “generate unique view-transition-names”. If you want a whole bunch of elements to all transition, every single one of them needs to have a unique view-transition-name. This is annoying verging on untenable in CSS, so the usual approach is using inline styles in the HTML. Unfortunately, the best Velvette can do is map the id of the element to the view-transition-name, so you’re having to craft unique identifiers anyway. Why not just toss a UUID on them or something?
I was able to get it working, but ultimately didn’t find it very useful.
If you were going to read one article to get you going with Scroll-Driven Animations from scratch, I think Adam Argyle has the one so far.
Developer news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.