Bramus Profile picture
Chrome DevRel at Google (CSS + Web UI). @CSSWG Member. Former University Lecturer. PADI Divemaster. Blogs at @bramusblog.
Nov 28, 2022 11 tweets 8 min read
👀 WebKit Standards Positions: CSS Cascading and Inheritance Level 6 (@scope)

> I suggest we mark this as support seven days from now.

github.com/WebKit/standar… @scope Here’s why we need scope. Say you have the markup as seen in the demo below:

codepen.io/bramus/pen/dyK… CSS: .light { background: #ccc; } .dark  { background: #333;
Nov 15, 2022 5 tweets 3 min read
You think you’ve got the Viewports thing tackled, but then you suddenly wonder if it all plays nice with `scrollbar-gutter` or not …

Narrator: it doesn’t. Chrome with `scrollbar-gutt...Firefox with `scrollbar-gut...Chrome with `scrollbar-gutt...Firefox with `scrollbar-gut... And now I’m wondering what viewport units will do and how mobile browsers behave … #CanOfWorms 🙈
Oct 4, 2022 9 tweets 4 min read
What if I told you this demo right here is powered by nothing but HTML and CSS?

Yep that’s right, not a single line of JavaScript (*) in sight! 🤩

Demo on @CodePen: codepen.io/bramus/full/GR…

(*) Except for a polyfill that’s being loaded The demo uses Scroll-Snapping, CSS Reflections (using the proprietary `-webkit-box-reflect`), and Scroll-Linked Animations.

With Scroll-Linked Animations, it’s possible to drive a CSS Animation by scroll: as you scroll, an animation moves forwards/backwards along with it.
Sep 26, 2022 8 tweets 4 min read
🎉🥳 Good news everyone! The Large, Small and Dynamic viewport units (lv*, sv*, dv*) are coming to Chrome 108!

I2S announcement: groups.google.com/a/chromium.org… Illustration showing the 10... Now you might be wondering: “What took Chrome so long?!”

Well, if you’ve watched my #HTTP203 episode on Viewports () you know that there currently is a difference between browsers on how they handle the Virtual Keyboard.
Dec 30, 2021 6 tweets 3 min read
At the start of 2021, I discovered CSS @​scroll-timeline, a way to link CSS Animations to the scroll offset of a scroll container.

Seems fitting to close off the year with a final demo: reverse-scrolling columns.

🔗 codepen.io/bramus/pen/jOG…

🧵 In browsers that support CSS Scroll-Timeline (which is only Chromium with “Experimental Web Platform Features” enabled for now) the effect is achieved using nothing but CSS. /* Set up Animation */ @keyframes adjust-position {   from {
Dec 27, 2021 12 tweets 4 min read
🔥 CSS Features to start learning, as I expect them to ship in all browsers in 2022:

1. Container Queries
2. Cascade Layers
3. Color Functions
4. Viewport Units
5. :has()
6. Overscroll Behaviour
7. Subgrid
8. Accent Color
9. Media Query Ranges 1. Container Queries allow authors to style elements according to the size or appearance of a container. For size-based container queries, this is similar to a @​media query, except that it will evaluate against the size of a parent container instead of the viewport.
Jun 8, 2021 11 tweets 6 min read
🔥🔥🔥

`document.documentTransition` is a new experimental API in @ChromiumDev that allows you to create transitions between two different visual frames.

🔗 chromestatus.com/feature/519300…

Let's dig in … 🧵 @ChromiumDev In this example you see the API transition between the frame with the avatar and the frame with the info modal. The transition — including "slide up" animation — is handled by the API/browser.

🔗 codepen.io/bramus/pen/rNj…

This is called a Root Transition.