Email or username:

Password:

Forgot your password?
193 posts total
Anisha Latchman

@paul Hi Paul! I created a short (3:38) application video (youtu.be/iu5RnX47Ebg) to express my excitement for developer relations for Chrome at Google. Please check it out! Would love to chat more about future opps.

Bramus

Oh nice, @FirefoxNightly now has support for the 'interactive-widget' meta viewport key, to control the viewport resize behaviour when showing a virtual keyboard.

There are 3 values to choose from: resizes-visual, resizes-content, and overlays-content.

You can use one of these values to prevent a `position: fixed` element from getting placed underneath the virtual keyboard.

See developer.chrome.com/blog/view for all details.

Supported in Chrome from Chrome 108. No word from Safari on this.

Oh nice, @FirefoxNightly now has support for the 'interactive-widget' meta viewport key, to control the viewport resize behaviour when showing a virtual keyboard.

There are 3 values to choose from: resizes-visual, resizes-content, and overlays-content.

You can use one of these values to prevent a `position: fixed` element from getting placed underneath the virtual keyboard.

Visual showing how each value behaves.
Show previous comments
wakest ⁂

@bramus @FirefoxNightly hey @cheeaun would this help with the weird empty space above the keyboard?

Jonathan Dallas

@bramus I don’t see a WebKit standards position issue for this. Has one been filed? github.com/WebKit/standards-po

Kilian Valkhof

@bramus @FirefoxNightly

Nice. Would be great if browsers could also emulate those changes in svh/dvh wink wink nudge nudge.

issues.chromium.org/issues/408

Bramus

In latest @FirefoxNightly, the variable tooltip in @FirefoxDevTools now shows the computed value of the variable!

I'm super excited about this, it should make working with custom properties much easier. Combined with the registered property info and @starting-style value, this feels like super power 🦹

We're also planning other changes that would make the tooltip even better :)

cc @kizu @anatudor @shadeed9

#CSS

Firefox DevTools Inspector showing a CSS value using a CSS variable.
A popup is displayed, pointing to the variable name. In the popup, we can see the variable declaration (`--button-border-radius = var(--border-radius-small)`), as well as a "computed value" section, under which we can see the value: "4px"
Firefox DevTools Inspector showing a CSS declaration value using a CSS variable.
The tooltip displays the variable declaration value, the computed value, the @startin-style value, and the @property information
Bramus

Last day of my summer vacation … time for a quick dive before opening my mailbox next Monday.

Selfie with today's buddy Dirk.
Brammm

@bramus Waar is dat? Rode container doet me denken aan Put van Ekeren?

Bramus

🤩 View Transitions excitement!

The Firefox team recently had a kick-off meeting to implement View Transitions.

“Goal and scope of the project: Single page in H2 2024”

docs.google.com/document/d/1w5

🥹🥳

Bramus

If you haven't been following along: (if all goes well) that means we'll have cross-browser support for Same-Document View Transitions by the end of the year! 😎

Bramus

🎉 Happy Cross-Document View Transitions day!

Today Chrome 126 is released. It enables Cross-Document View Transitions triggered by a same-origin navigation.

From now on, you no longer need rearchitect your website to an SPA in order to use View Transitions!

Developer Docs: developer.chrome.com/docs/web-

Demos: view-transitions.netlify.app/

More View Transitions features Chrome recently shipped: developer.chrome.com/blog/view

Recording: astro-zerojs-transitions.verce by the @astro folks.

🎉 Happy Cross-Document View Transitions day!

Today Chrome 126 is released. It enables Cross-Document View Transitions triggered by a same-origin navigation.

From now on, you no longer need rearchitect your website to an SPA in order to use View Transitions!

Developer Docs: developer.chrome.com/docs/web-

Bramus

Can you Syntax Highlight a code snippet on the web without overloading the DOM with a ton of `<span>` elements wrapped around the tokens?

Thanks to the Custom Highlight API, you can!

codepen.io/bramus/full/VwRqGVo

Show previous comments
Paweł Grzybek

@bramus This demo is incredibly cool.

I see a huge value in this API. I am wondering more about the trade-off: more spans vs more tokenization logic. What if code blocks can be rendered on the server? Is it worth the effort? I have so many questions about this…

Thanks for sharing this snippet dude!

Dave Rupert

@bramus Do CSS Highlights support bold/italic? I saw those in your code but had a play and couldn't get it to work. MDN lists a stricter set of allowed properties. Is that changing?

developer.mozilla.org/en-US/do

Bramus

Psst, you no longer need JavaScript to create an exclusive accordion!

As of Chrome 120 you can give `<details>` elements a `name` value.

Just like radio buttons, those with the same name will form a group, of which only one can be chosen at the same time.

developer.chrome.com/docs/css-

Exclusive Accordion (aka “named <details>”) is also supported in Safari 17.2 and up.

Bramus

And oh, we’re also looking into making it more easy for you to add animations `<details>` … but more on that later ;)

Matt Wilcox

@bramus There are a11y concerns around this pattern which have not yet been addressed, so I'm not going to be using or encouraging this pattern until that's done.

Dusty Pomerleau

@bramus Exclusive accordions aren't good for the user. It shouldn't be someone else's choice whether you can expand all the content on a page.

See this discussion:

yatil.social/@yatil/1113347751

Bramus

New demo + article dropping tomorrow … using Scroll-Driven Animations to detect the direction a user is actively scrolling in (🤯)

That means you can style an element based on the scroll direction and scroll speed using only #CSS 🤩

Bramus

To change a color based on Light Mode or Dark Mode, you’d typically use a `prefers-color-scheme` Media Query.

To make things easier, CSS now comes with a `light-dark()` utility function.

Read brm.us/light-dark to get to know the details.

Browser Support: Firefox 120.

Promotional image with the code detailed in the post: `background: light-dark(#333, #ccc)`. The first value is used in Light Mode, the second one in Dark Mode.
Show previous comments
p01

@bramus gotta read the details, but was there some consideration to have a syntax that supports more color scheme like forced-colors? Or who knows, there could be color schemes for common color blindness.

Would be nice to have a unified syntax to define colors, and other values for the different color schemes

Roma Komarov

@bramus One day it would be very easy to replace my

var(--LIGHT, …) var(--DARK, …)

space-toggles-based solution with this :D

(which we use in production for around a year with zero issues!)

Bramus

Just a moment ago, CSS View Transitions Module Level 1 got published as Candidate Recommendation.

Congrats @jaffathecake et al on reaching this HUGE MILESTONE!

w3.org/TR/css-view-transitions

Go Up