Re: [csswg-drafts] [mediaqueries-5] Script control of (prefers-*) queries (#6517)

The CSS Working Group just discussed `[mediaqueries-5] Script control of (prefers-*) queries`, and agreed to the following:

* `ACTION(fremy): Look at the proposal, see whether there's an issue to be filed`
* `ACTION(TabAtkins): Determine if prefers-reduce-data is handled`

<details><summary>The full IRC log of that discussion</summary>
&lt;myles> Topic: [mediaqueries-5] Script control of (prefers-*) queries<br>
&lt;myles> github: https://github.com/w3c/csswg-drafts/issues/6517<br>
&lt;myles> TabAtkins: some time ago i opened this issue so it would be useful to allow script control of the prefers media queries. simple case: if you were doing a dark mode toggle on your site (explicit switch) independent of their UA/OS, it's awkward to style<br>
&lt;myles> TabAtkins: you want to be able to pay attention to people's OS styles when their OS preferences when they haven't indicated a preference, but use the toggle when they have.<br>
&lt;myles> TabAtkins: Writing styles based on when a class in HTML exists is awkward. The examples are terrible, you have to repeat yourself<br>
&lt;myles> TabAtkins: The most straightforward way to fix this is to allow people to directly control the media query<br>
&lt;myles> TabAtkins: There are some routes to address some aspects of this problem<br>
&lt;myles> TabAtkins: Another option: a media pseudoclass. so you  could name that in the block. But that would just solve one problem<br>
&lt;myles> TabAtkins: A person posted a proposal for the API for controlling this. He gives a great example of multiple problems we solve by this.<br>
&lt;astearns> https://github.com/WICG/proposals/issues/117<br>
&lt;myles> TabAtkins: Namely: IF you want to a dark mode toggle by the user, it would be great if you could use this for stylesheet loading. right now, that wouldn't work.<br>
&lt;TabAtkins> https://github.com/lukewarlow/web-preferences-api/blob/main/README.md<br>
&lt;myles> TabAtkins: Any of the media matches API, it would be good to have it respond appropriately<br>
&lt;myles> TabAtkins: I think this looks good<br>
&lt;myles> TabAtkins: I think what's in the proposal is good<br>
&lt;myles> TabAtkins: It can be iterated on<br>
&lt;myles> TabAtkins: We should take it to any group to iterate and adopt it appropriately<br>
&lt;bramus> q+<br>
&lt;myles> TabAtkins: The main question: Does solveing this problem sound sufficiently useful to the group? Is the rough shape (a JS API where you explicitly control the media queries for your site and descendent frames) reasonable?<br>
&lt;myles> TabAtkins: There's an implied persistence model here: Once you set the toggle, it stays toggled (so you don't have re-up the toggle on the next load)<br>
&lt;emilio> q+<br>
&lt;myles> TabAtkins: _how_ persistent it should be is worthy of discussion. But it's should be able to toggle and keep it toggled for future visits<br>
&lt;myles> TabAtkins: is this the right direction? Should we take it? Should we send it to webapps?<br>
&lt;astearns> ack bramus<br>
&lt;myles> bramus: I'm a big fan of this proposal. Authors are having this problem.<br>
&lt;myles> bramus: Right now authors need to duplicate a bunch of their CSS<br>
&lt;myles> bramus: They also need more blocking JS on page load<br>
&lt;myles> bramus: it would be really nice to get this<br>
&lt;myles> bramus: For the CSS-only type of approach where you have your setting and your override, setting the preference inside the browser ... &lt;missed> already has this, it has an override built in<br>
&lt;astearns> ack emilio<br>
&lt;myles> emilio: I see a point to override the color scheme. At the end of the day that's a user preference but it's not a hard preference. I'm not sure I agree overriding things like contrast-preference, reduced-motion, etc.<br>
&lt;ntim> +1 to emilio<br>
&lt;astearns> +1 to emilio<br>
&lt;myles> emilio: Those don't seem equally useful. Those are a11y preferences we expose so the page can react to that. There's no use case<br>
&lt;bramus> q+<br>
&lt;myles> TabAtkins: Remember these media queries are optional to pay attention to. The author can not look at them and do whatever they want. There is nothing that does a dang thing if the author doesn't want it. Nothing here reduces the ability for the user to communicate to the page or for the page to render different things. This is just for letting the user have a per-page toggle<br>
&lt;myles> TabAtkins: "This page is extra-wiggly" and let the user opt-into lower motion even if the user wouldn't have the global value set<br>
&lt;myles> emilio: Some other preferences (reduced-data) affect stuff like what headers the browsers send<br>
&lt;myles> emilio: there's no mention of that stuff<br>
&lt;myles> TabAtkins: Reduced-data isn't in the proposal<br>
&lt;myles> emilio: yeah it is<br>
&lt;myles> TabAtkins: i missed that<br>
&lt;myles> TabAtkins: i'm happy to iterate on this for what ones will apply<br>
&lt;myles> TabAtkins: That is not unreasonable bit of feedback<br>
&lt;myles> emilio: it feels sketchy to override prefers-reduced motion<br>
&lt;jasew1> Is there an option to keep this API shape but with reduced preferences? It seems we all agree about colorScheme for example but maybe not some others<br>
&lt;astearns> ack dbaron<br>
&lt;ntim> q+<br>
&lt;astearns> jasew1 yes, there is definitely time/space to iterate and refine<br>
&lt;myles> dbaron: it seems like with a bunch of these things, there's potentially a user-agent is doing other things with these things. things like prefers-reduced-motion, the UA does things that are not queryable.<br>
&lt;emilio> q+<br>
&lt;myles> dbaron: one thing that should be clear in the proposal is "is this about only affecting the reflection of these preferences to the site, or is this also about affecting other things"<br>
&lt;myles> dbaron: A) if it's just about reflection of the preferences to the site, there isn't a problem with things that use data. it just doesn't have the other effecets. But if it IS about changing other things, thn it's more complicated<br>
&lt;myles> TabAtkins: we've discussed these things, like automatically reducing motion if the prefence is enabled.<br>
&lt;vmpstr> q+<br>
&lt;fremy> q+<br>
&lt;myles> TabAtkins: I thought we were not going to do that, or reflect it in a forced media query<br>
&lt;dbaron> s/things that use data/prefers-reduced-data/<br>
&lt;jasew1> q+<br>
&lt;bramus> q-<br>
&lt;myles> myles: My recollection is that we decided not to automatically try to reduce motion<br>
&lt;myles> dbaron: There may actually be value for the site to provide a setting that's easier to get to than the OS setting<br>
&lt;astearns> ack ntim<br>
&lt;myles> ntim: are the overrides persistent?<br>
&lt;myles> TabAtkins: They are persistent. next time you visit the page, they will be applied<br>
&lt;myles> ntim: if you clear storage, will that clear the override?<br>
&lt;myles> TabAtkins: That is a question that we should answer.<br>
&lt;myles> TabAtkins: it's an open question.<br>
&lt;myles> TabAtkins: By default, when there's no clearing going on, the user is going to want the same setting<br>
&lt;myles> ntim: i don't think we should make it persistent<br>
&lt;myles> q+<br>
&lt;myles> TabAtkins: if it's not persistent, you have to have a blocking script at the top of the page, and store it somewhere (in a cookie)<br>
&lt;nicole_> q+<br>
&lt;myles> TabAtkins: defeats most of the difficulty of doing this<br>
&lt;astearns> ack emilio<br>
&lt;astearns> ack vmpstr<br>
&lt;myles> vmpstr: i think defining exactly who can see this change is important. can UA style sheets see this?<br>
&lt;emilio> q+ to say that reduced-motion has various side effects in Firefox<br>
&lt;myles> vmpstr: i'm questioning the persistence. How you define this ... &lt;missed><br>
&lt;myles> vmpstr: there needs to be some signal to say "yes ... &lt;missed>"<br>
&lt;myles> TabAtkins: We should give a consistent answer for what value a media query's answer is, regardless of what's querying it. otherwise it's weird.<br>
&lt;myles> TabAtkins: For iframes, exactly what the passdown behavior is needs to be iterated on. But if you already have a communicatino channel (or if there isn't one), then we pass the preference down. otherwise, it sees the user's origial preference<br>
&lt;astearns> ack fantasai<br>
&lt;Zakim> fantasai, you wanted to react to vmpstr to comment that UA stylesheets should be reflecting color-scheme not prefers-color-scheme<br>
&lt;myles> TabAtkins: Goal: Don't open new communication channels, but respect the ones that exist<br>
&lt;myles> fantasai: i don't think there are places in the UA stylesheet where we are or should be making it conditional on prefers-color-scheme. Rather we should be doing it based on the color-scheme property<br>
&lt;myles> TabAtkins: Yeah but the other prefers-* are still fair game<br>
&lt;astearns> ack fremy<br>
&lt;myles> TabAtkins: a UA animation could conditionalize on prefers-reduced-motion<br>
&lt;myles> fremy: i have 2 comments<br>
&lt;vmpstr> s/this ... &lt;missed>/what "the page is", if the page changes that there is a dark mode, it persists forever/<br>
&lt;myles> fremy: 1. I am of the opinion that if a user wants to use a dark mode on a website, they should communicate that to the UA<br>
&lt;ntim> +1 to fremy<br>
&lt;myles> +1 to fremy<br>
&lt;vmpstr> s/yes ... &lt;missed>/I'm still dark mode/<br>
&lt;myles> fremy: If you want ot have a UA in chrome that applies dark mode to different pages, do it<br>
&lt;myles> fremy: I'd prefer that<br>
&lt;myles> fremy: If the website changes, and don't provide the feature any more, how is the user going to get the behavior any more?<br>
&lt;astearns> q?<br>
&lt;astearns> zakim, close queue<br>
&lt;Zakim> ok, astearns, the speaker queue is closed<br>
&lt;myles> fremy: It would make more sense. It's fine if there's an API the site can poll to popup the browser's UI or something, but at least as the user you are basically interacting with the user agent. that makes more sense.<br>
&lt;myles> fremy: Another way of doing this is to add a custom media query. If you don't want to say this is a UA behavior, why not just create a custom media query whose value is based on the OS's MQ, but you can change it<br>
&lt;myles> fremy: But we should make the UA in control of this.<br>
&lt;myles> TabAtkins: Regarding to UA: No user-agent has seen fit to stuff it into the UI. I don't want to rely on that being a thing they do. I suspect they won't want to. (Maybe i'm wrong.) But i don't think browsers are interested in offering more UI to expose preference toggles. In the absence of that, letting pages control it (which they do already) is straightforward and easy.<br>
&lt;myles> TabAtkins: For the persistence issue: There will be a way to clear the preference. It's an open question exactly which question. Please stop assuming that<br>
&lt;myles> TabAtkins: custom media query: MQs aren't suitable for this. It's awkward to do in the first place. There are mutliple features of the web that rely on various media queries that wouldn't work by default. 3rd party content wouldn't know to pay attention to your custom dark mode MQ. Manipulating the real MQ works more interoperably<br>
&lt;myles> jasew1: I've hearing concerns of preferences exposed and persistence.<br>
&lt;myles> jasew1: We can discuss outside of this. Assuming we can continue to discuss which preferences go into this, are there concerns with the API shape itself? Assuming we can make changes with the overall API<br>
&lt;myles> fremy: What I just mentioned. The UA should be more involved.<br>
&lt;fremy> @TabAtkins: If there is a way for the user to make this "non-persistent", how do you tell the user that?<br>
&lt;myles> ntim: Persistence is a big one<br>
&lt;emilio> myles: I wanted to jump on the bandwagon and say that persistence is super scary<br>
&lt;emilio> ... and also agree with ntim and fremy that the UA should be in charge of this<br>
&lt;astearns> ack nicole_<br>
&lt;astearns> ack jasew1<br>
&lt;astearns> ack myles<br>
&lt;TabAtkins> The same way users know to clear *any* page-specific data. "clear cookies" is a bit advanced but not unknown<br>
&lt;astearns> ack jasew<br>
&lt;fremy> q+<br>
&lt;myles> nicole_: I think there's a complicated relationship between the OS, UA, and site setting. That needs to be worked out to make sure the user's intent is happening<br>
&lt;myles> nicole_: To add to persistence, with a multi-page app, it will be hard if it's page by page. Maybe there's a way to do that, but i maybe haven't understood it<br>
&lt;myles> nicole_: Usually single page apps actually have multiple pages. Something about that could be weird where part is on wordpress and part is a react app ... figuring out how to make sure the user's intent was following through what the website owner determined as their ... all the sites that make up their actual site. I do wonder if it's complex enough that we need to have another mechanism if it was to be done this way for site authors actually need<br>
&lt;myles>  to be able to say "all these pieces are one site and the setting should persist across across all of them"<br>
&lt;myles> nicole_: But I agree it's best done at a UA level<br>
&lt;fremy> fremy was on the queue to say that Chrome already had a page for "site settings" with tons of toggles, I don't see why a switch could not be provided for site-specific accessibility settings<br>
&lt;myles> TabAtkins: For the multi-page site, th question of "do we need control over the scope". My feedback was "this should just apply to the origin" We don't need to offer a toggle. But it was in the earlier version of the API. If needed, we could put it back. For all the new UI people, there browser developers<br>
&lt;myles> TabAtkins: Are y'all saying "y'all committing to adding browser UI to allow per-site preference changes"? If you think it's a good idea, but you don't want to do it, i'd like to proceed<br>
&lt;myles> myles: i cannot comment on future produces or releases<br>
&lt;myles> emilio: 1. some of these preferences... i want concrete examples. some preferences have side effects apart from MQs. reduce-motion markes marquees not scroll in firefox. Disables smooth scrolling. The API should be explicit about whether that's effected<br>
&lt;myles> emilio: For color-scheme, you already have a resolution to inherit used color scheme for SVG images (and maybe iframes).<br>
&lt;florian> q+<br>
&lt;myles> emilio: Browsers do expose per-sites settings for this, but not to the site, but they do for extensions. Firefox does have per-site setting override that extensions and users can use.<br>
&lt;ntim> This is what emilio is referring to: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/overrideContentColorScheme<br>
&lt;myles> emilio: I'm not sure how that should work together with the site ... the site being able to override the user decision both ath the UA level and extension level seems confusing. The user can tell the exttension to be dark ... there are like 4 different switches now can effect the page. The user has to figure out which is the one that actually is effecting the rendering<br>
&lt;myles> TabAtkins: SVGs - you're right. Already handled. For iframes, they should see the override<br>
&lt;myles> fantasai: We already resolved iframes inherit from color-scheme<br>
&lt;myles> TabAtkins: We still want to apply them when necessary<br>
&lt;myles> astearns: We are at time<br>
&lt;myles> astearns: We should take this as "hey, this as an introduction of an interesting proposal"<br>
&lt;myles> ACTION(fremy): Look at the proposal, see whether there's an issue to be filed<br>
&lt;TabAtkins> vmpstr, no, eTLD+1<br>
&lt;myles> ACTION(TabAtkins): Determine if prefers-reduce-data is handled<br>
&lt;myles> astearns: Anyone else, please comment in the issue<br>
&lt;myles> &lt;general discussion about breakout sessions for unrelated topics><br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6517#issuecomment-1721083701 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 15 September 2023 11:01:29 UTC