FeedCity

To target multiple classes that share the same prefix, you'd typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a new selector: The Class Prefix Selector (.prefix-*).

To target multiple classes that share the same prefix, you'd typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a new selector: The Class Prefix Selector (.prefix-*).

To target multiple classes with the same prefix, you'd typically have to resort to brittle attribute selectors. To make things easier, CSS is getting a new selector: the “Class Prefix Selector” (`.foo-*`).

Check https://brm.us/class-prefix-selector to get the details.

(Browser Support: None 😛 — just resolved!)

I was looking up some stuff and noticed that `:has()` is now used on more than 50% of all page loads (in Chrome) 🥳

https://chromestatus.com/metrics/webfeature/timeline/popularity/39

Go #CSS!

New blog post: The Case for Tri-State Dark Mode Toggles

https://brm.us/dark-mode-tri-state

#CSS #DarkMode #UX

Adding a Dark Mode toggle to your website is a nice touch that many users appreciate. When implementing one, the default instinct for many developers is to reach for a simple binary switch: Light on one side, Dark on the other.

While a two-state control might seem like the most straightforward solution, I firmly believe it’s flawed from a user experience perspective. Instead, we should all be using tri-state controls. Let me explain why.

Adding a Dark Mode toggle to your website is a nice touch that many users appreciate. When implementing one, the default instinct for many developers is to reach for a simple binary switch: Light on one side, Dark on the other. While a two-state control might seem like the most straightforward solution, I firmly believe …

Continue reading "The Case for Tri-State Dark Mode Toggles"

Also, building this demo revealed that I suck at raw scrolling with a trackpad.

At one point I had to cover half of my trackpad with a piece of paper to physically rail my fingers as things kept going diagonally 😅

Thankfully the browser does *A LOT* of corrections by default to keep you on track 😃

When you scroll a 2D scroller on the web, the browser may ignore some minor scroll deltas in the non-main scrolling axis when the user’s intent was to scroll only one axis.

While helpful most of the time, this “railing” sometimes gets in the way … and with `scroll-axis-lock: none`, you can soon remove it 😊

https://brm.us/scroll-axis-lock

The new CSS scroll-axis-lock property allows you to disable the browser's default scroll-locking behavior (aka “railing”) to enable immediate diagonal scrolling.

The new CSS scroll-axis-lock property allows you to disable the browser's default scroll-locking behavior (aka “railing”) to enable immediate diagonal scrolling.

Now, I am not against two-state controls.

I believe that _if_ you were to go for a two-state control, you should write *the actual values* to storage (different to what Lea does) *and* you should also offer a reset option.

See this post from 2020: https://www.bram.us/2020/04/26/the-quest-for-the-perfect-dark-mode-using-vanilla-javascript/

However, at that point you might as well just make the control a tri-state one. As I said back then:

> What ideally could be done is to use radio buttons […] or a dropdown to change between auto, light, and dark.

Thoughts?

Imagine this:

- OS is set to auto-switch light/dark based on time of day
- Visit during the day, see light
- Using the control, try out dark but don't like it and revert to light
- Visit again at night

Your site is now dark, although the user last chose light. To them (and me), this is a bug.

RE: https://front-end.social/@leaverou/117048761441552914

I … disagree.

In short, I don’t believe that forcing a site into your current mode gets to be dependent on the time of the day.

The two-state approach in the post has this problem when the OS is set to auto-change from light to dark based on the time of the day.

🧵👇

QQ about Dark Mode Toggles on websites

How many options do you show to users?

- Three values: System, Light, Dark
- Two values: Light, Dark (with one of them mapping to “System” behind the scenes).

Why the one or the other?

(I have an opinion about it, but I’m looking for external input)

TIL: MDN exposes up-to-date page view data through https://popularities.mdn.mozilla.net/current.csv. Using Google AI Studio, I generated a visualizer to explore the data.

TIL: MDN exposes up-to-date page view data through https://popularities.mdn.mozilla.net/current.csv. Using Google AI Studio, I generated a visualizer to explore the data.

TIL: @mdn exposes up-to-date page view data through https://popularities.mdn.mozilla.net/current.csv

Here’s a visualizer I had A​I Studio throw together for me: https://ready-unit-fowl.codepen.app

One of the things that we at Chrome have been thinking about for a while now is a way to do declarative route and navigation matching in CSS. Together with Noam Rosenthal and David Baron I’ve been working on it for the past few months.

After an initial introduction at the CSS Working Group back in January, and a quick feedback session at CSS Day in June, we think we have something that is ready for further discussion.

At next week’s CSS Working Group F2F (face-to-face) meeting in Berlin, we’ll be presenting our current line of thinking. This post is a quick intro to the concepts we’ll be covering.

One of the things that we at Chrome have been thinking about for a while now is a way to do declarative route and navigation matching in CSS. Together with Noam Rosenthal and David Baron I’ve been working on it for the past few months.

After an initial introduction at the CSS Working Group back in January, and a quick feedback session at CSS Day in June, we think we have something that is ready for further discussion.

At next week’s CSS Working Group F2F (face-to-face) meeting in Berlin, we’ll be presenting our current line of thinking. This post is a quick intro to the concepts we’ll be covering.