Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Bramus Profile picture
Bramus
@bramus
Frontend Engineer with a love for HTML, CSS, and JS (in that order). Also speaks PHP+SQL. Former TU Lecturer Web&Mobile. 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.