@bramus@front-end.social
@bramus@front-end.social avatar

bramus

@bramus@front-end.social

Chrome Developer Relations at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us

This profile is from a federated server and may be incomplete. Browse more on the original instance.

bramus, to random
@bramus@front-end.social avatar

It's exciting to see Firefox start working on @ scope.

With it, you can limit the reach of your selectors to only a certain subtree or slice of the DOM: https://developer.chrome.com/docs/css-ui/at-scope

(And prelude-less scope also rocks! 🤩)

Supported as of Chrome 118 and Safari 17.4.
https://botsin.space/@intenttoship/112293813944847835

csscade, to random
@csscade@mastodon.social avatar

Did ya know that it’s possible to style an element if it’s overflowing the parent element? I certainly didn’t!

.parent {  
 max-width: 300px;  
}

.child {  
 width: 500px;

 @media@mastodon.social (overflow-inline) {  
 background: yellow;  
 }  
}  

https://www.csscade.com/cool-queries

bramus,
@bramus@front-end.social avatar

@csscade @Kilian @sarajw On a related note: you can use Scroll-Driven Animations to detect if an element is scrollable or not, and style based on that.

https://brm.us/can-scroll

bramus,
@bramus@front-end.social avatar

@Kilian @SaraSoueidan I think inheritance is kicking you in the butt.

Try registering --can-scroll with @property and set inherits to false.

ppk, (edited ) to random
@ppk@front-end.social avatar

I'm now at day 8 of not smoking.

If it continues like this, I'm going to succeed in quitting smoking permanently. Though I thank the stars for bits of nicotine chewing gum when I really need it.

Meanwhile, a funny story is attached to my quitting ...

bramus,
@bramus@front-end.social avatar

@ppk Keep it going! 💪

bramus, (edited ) to random
@bramus@front-end.social avatar

Hey all! Quick heads up that I’m working on a free video course that teaches you all there is to know about Scroll-Driven Animations in CSS and JavaScript.

https://youtube.com/shorts/W1la5yV3PcQ

Expect the full series to drop later this month 🤩

bramus,
@bramus@front-end.social avatar

@iamdtms the autostart would require a tad of extra JS, but in general: YES.

bramus,
@bramus@front-end.social avatar
bramus,
@bramus@front-end.social avatar

@ydaniv Thanks! 😊

bramus,
@bramus@front-end.social avatar

@Kilian Gracias!

jpzwarte, to random
@jpzwarte@fosstodon.org avatar

@bramus So anchor positioning is in Chrome 125 beta, but not in dev? Una's http://anchor-tool.com/ doesn't work in 125.0.6420.4 (dev build).

Devtools sees things like inset-area as valid, but the element isn't positioned correctly.

bramus,
@bramus@front-end.social avatar

@jpzwarte @dbaron There was a recent crashfix wrt anchorpos in Canary. Can take a while before that goes into Dev.

If it happens in Canary too, could you report the crash from chrome://crashes? It should be listed there.

After uploading the report, you can use that same screen to file a bug that refers that crashreport.

matuzo, to random
@matuzo@front-end.social avatar

People often ask me for recommendations for front-end development conferences. Picking my Top 3 would be challenging, but I know that @btconf in Germany is one of them!

https://matuzo.at/blog/2024/beyond-tellerand?t

bramus,
@bramus@front-end.social avatar

@matuzo @btconf BT is on my list of “Conferences I need to attend but never have”.

Never made it to it as there’s always something else going on at the same time (this year: Google I/O in May; A planned vacation in November).

One day …

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Idea: Web Component which uses the CSS Highlight API to highlight code blocks

bramus,
@bramus@front-end.social avatar
j9t, to CSS
@j9t@mas.to avatar

Today I learned about the table column combinator ||: https://www.w3.org/TR/selectors-4/#the-column-combinator

—and also that it’s (still?) at risk: https://www.w3.org/TR/selectors-4/#:~:text=The%20following%20features%20are%20at%2Drisk

bramus,
@bramus@front-end.social avatar

@j9t which reminds me: I have a whole thread prepared on that one that I still need to publish.

bramus, to random
@bramus@front-end.social avatar

🌞 vs 🌑

If you’ve been following me for a while here you most likely know that I think that Dark Mode Toggle Buttons should be a browser feature:

Let the user decide which color-scheme they want on a per-site basis and store that.

https://brm.us/dark-mode-override

bramus,
@bramus@front-end.social avatar

@rdela @jensimmons

> I am with you until you want it to remember individual site settings, which opens up fingerprinting possibilities no matter how you implement it

If Service A from company X sees you as prefers-color-scheme: light from the UA, and Service B from that same company sees prefers-color-scheme: dark then that’s less tracking, no? One bit of identifying data got flipped.

(I am talking about the browser overriding the value directly here, not the Web Preferences API)

bramus,
@bramus@front-end.social avatar

@rdela @jensimmons

> Also people typically would want that to apply across the sites they visit for a given range of time.

You’re making a feature request here? :)

> interface challenges […], that I am near certain browser vendors would fail to rise to

I agree that this must be executed correctly and will be difficult to get right, but having these fears upfront doesn’t mean the proposal has no value.

bramus,
@bramus@front-end.social avatar

@rdela @jensimmons

> it needlessly complicates the primary use case in service of the edge case who wants a different arbitrary color-scheme

Setting a specific light/dark preference on a website is not an edge case but a common thing.

Proof: the many dark mode toggle buttons in the wild.

> within short browsing sessions on different sites.

This is not short lived. By persisting the value, the override applies to the current and future visits to that origin.

bramus,
@bramus@front-end.social avatar

@rdela @jensimmons This could be a problem for the Web Preferences API when implemented without the proper safeguards, but not for the browser itself.

The browser itself doesn’t leak whether you are overriding the value or not. It only reports “this is the value and it’s none of your business where that came from”

(And yes, I did use the Web Preferences API in my extension as that’s what was needed to create the POC. A browser can implement this natively, without needing the WP API).

bramus,
@bramus@front-end.social avatar

@rdela @jensimmons And that‘s exactly where this browser feature comes into play.

The existing button can’t be pulled out of DevTools and put into Chrome as DevTools is its own app that communicates with Chrome through the Chrome DevTools Protocol to manipulate the page’s appearance.

bramus,
@bramus@front-end.social avatar

@rdela @jensimmons

> I am not sure “the many dark mode toggle buttons in the wild” prove anything since many of them do not respond to prefers-color-scheme on load or value change.

You are underlining why exactly we need this as a browser feature.

By putting the feature into the browser, we can get rid of all these (often incorrectly implemented) custom dark mode buttons.

> short-lived,” yes, but that persistence might not be preferable.

Seems like a preference to be set in the feature :)

bramus,
@bramus@front-end.social avatar

@rdela @jensimmons But that would require you to have logged in to those services already … so they already know it's you.

bramus,
@bramus@front-end.social avatar

@rdela @jensimmons @mattburgess (can't read the article as it's paywalled)

In that case too "they" already have already identified you through some other means (be it by logging in, or some nasty way of fingerprinting as the quote suggests).

Using a different light/dark mode per site will not make you "more detectable" when that happens. On the contrary: it will add noise to the fingerprinting-data.

bramus,
@bramus@front-end.social avatar

@rdela Say you are identifying people by their name. If on one occasion the person says their name is Jeff and on another they say their name is Samantha, then that's an ambiguous bit.

(Mutatis mutandis for light/dark mode)

When that one bit is part of more tracking bits, it adds noise to the whole set as the bit can't really be trusted to be correct. It can be 1 or 0, without the other bits changing.

That's what I mean by noise.

bramus, to random
@bramus@front-end.social avatar

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!

https://codepen.io/bramus/full/VwRqGVo

bramus,
@bramus@front-end.social avatar

UPDATE 1: Since posting this performance in Chrome has improved.

Here’s a comparison of highlighting the jQuery source in Chrome 123 versus Chrome 125.

The initial pre-paint still takes the same amount of time, but scrolling is much smoother as there are less repaints happening.

Here’s the CodePen that was used to record the trace: https://codepen.io/bramus/details/MWxLjEo

For an explanation of the code, see the original post: https://bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/#highlighting-contenteditable

Trace in Chrome 125: - Scripting: 174 ms - Rendering: 1103 ms - Painting: 118 ms

bramus,
@bramus@front-end.social avatar

UPDATE 2: The text selection bug got fixed!

As of Chrome 126.0.6426.0, upon selecting text, the Custom Highlights retain their color.

Compare the old and new behavior in the attached screenshots.

Screenshot of the new, correct, behavior in Chrome 126.

bramus,
@bramus@front-end.social avatar

Big shout-out to Stephen Chenney from @igalia for following up on the bugs I filed and landing these fixes.

(Let this be a reminder to file bugs 😉)

  • All
  • Subscribed
  • Moderated
  • Favorites
  • provamag3
  • kavyap
  • rosin
  • everett
  • Backrooms
  • DreamBathrooms
  • magazineikmin
  • cisconetworking
  • Youngstown
  • slotface
  • khanakhh
  • InstantRegret
  • hgfsjryuu7
  • thenastyranch
  • modclub
  • mdbf
  • ngwrru68w68
  • ethstaker
  • osvaldo12
  • Leos
  • tester
  • tacticalgear
  • Durango
  • GTA5RPClips
  • cubers
  • anitta
  • normalnudes
  • JUstTest
  • All magazines