Support for Nested Container Queries and the CSS if() function inside CSS Custom Functions make @function very powerful.
CSS @function + CSS if() = 🤯
Category Archives: Original Content
CSS
CSS Custom Functions are coming … and they are going to be a game changer!
View Transitions Applied: More performant ::view-transition-group(*) animations
If the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot you can optimize its keyframes so that it animates on the compositor.
View Transitions Snippets: Keeping the page interactive while a View Transition is running
Move elements around the DOM while preserving their state with moveBefore
Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.
View Transitions Snippets: Getting all Animations linked to a View Transition
View Transitions Experiment: Automatically trigger a View Transition when a JavaScript Property of an Element changes
Tricking a MutationObserver into observing changes to IDL attributes by syncing the IDL attributes to their Content Attribute counterparts.
Animatable Accordions (2024.11.27 @ devs.gent)
Talk on animating the <details> element with transition-behavior: allow-discrete , interpolate-size: allow-keywords, and ::details-content.
The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident()
Uniquely name a bunch elements in CSS in one go! Instead of assigning 100 unique names through 100 declarations, write only 1 and use ident() to construct the names.