Bramus
Developer Advocate for CSS, UI, and DevTools at Chrome
bram.us
Scoped styling with CSS @scope (2023.10.19 @ Full Stack Europe)
Slides of my lightning talk on CSS @scope
bram.us
Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed
Combine Scroll-Driven Animations with @property, transition-delay, calc(), sign() and abs() … and you can do Scroll Detection using only CSS!
bram.us
What’s new in CSS? (2023.10.12 @ Frontmania)
Slides of the talk “What’s new in CSS” I gave at Frontmania
bram.us
The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
A function that computes to the first color if the used color scheme is light or unknown, or to the second color if the used color scheme is dark.
bram.us
Run a Scroll-Driven Animation only once
A small piece of JavaScript to run a scroll-driven animation only once.
developer.chrome.com
Limit the reach of your selectors with the CSS @scope at-rule
@scope at-rule
Learn how to use @scope to select elements only within a limited subtree of your DOM.
bram.us
Animate between states with the View Transition API (2023.09.27 @ devs.gent)
Slides of my talk on View Transitions at the inaugural devs.gent meetup.
bram.us
Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not
Leverage Scroll-Driven Animations + a Space Toggle or State Query to selectively style an element based on it being scrollable or not.
bram.us
Scroll-Driven Animations Debugger (DevTools Extension)
A DevTools extension to visualize and debug Scroll-Driven Animations
bram.us
Mastodon Redirector – A browser extension to rewrite external Mastodon URLs to your own instance
Because Mastodon URLs across instances is a mess …
bram.us
CSS @property improvements in Chrome DevTools (Chrome 118)
Chrome DevTools included with Chrome 118 has some nice improvements to working with @property.
developer.chrome.com
Create complex animation curves in CSS with the linear() easing function
linear() easing function
Introducing linear(), an easing function in CSS that interpolates linearly between its points, allowing you to recreate bounce and spring effects.
developer.chrome.com
What's new in CSS and UI: I/O 2023 Edition
The top 20 CSS and UI features highlighted at Google I/O 2023 that you don't want to miss.
developer.chrome.com
Animate elements on scroll with Scroll-driven animations
Learn how to work with Scroll Timelines and View Timelines to create scroll-driven animations in a declarative way.
developer.chrome.com
Specify how multiple animation effects should composite with animation-composition
animation-composition
When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?
developer.chrome.com
More control over :nth-child() selections with the of S syntax
Pre-filter a set of child elements before applying An+B logic on it.
developer.chrome.com
Help choose the syntax for CSS Nesting
The CSS Working Group is continuing a debate over the best way to define nesting in CSS. If you are someone who writes CSS, we’d like your help.
developer.chrome.com
Prepare for viewport resize behavior changes coming to Chrome on Android
What changes are coming to the viewport resize behavior in Chrome 108, why Chrome is making this change, and what you can do to prepare.
developer.chrome.com
Case Study: Better Angular Debugging with DevTools
Using Angular as a test pilot, the Chrome DevTools and Angular teams collaborated to offer you a better debugging experience. Other frameworks can ship similar changes.
developer.chrome.com
Modern web debugging in Chrome DevTools
Take a look at some of the recent changes in Chrome DevTools which improve your debugging and profiling experience when working with bundlers, frameworks, and third party code.