Re: [csswg-drafts] [MQ] Dates (#9710)

Note that this approach still allows some fingerprinting depending on when exactly the media query matches.

Imagine this:

```css
@custom-media --monday (day: Monday) {
  background-image: url('https://example.com/timetracker');
}
```

So `https://example.com/timetracker` will be called in the second when the user's local date switches from Sunday to Monday. Based on that you can infer their longitudinal location with such media features.

Nonetheless, I still like the idea of date- and time-based media queries.

@tabatkins wrote in the other issue:

> I've virtually never seen any site trying to theme itself in such a way

Here's one:

https://mein-mmo.de

That site is in light mode from 8am to 6pm and switches to dark mode, otherwise. It also styles its logo for Pride Month, which was another seasonal use case mentioned by @teh-maxh in the other issue.
Similarily, many websites style their logos or parts of their contents for different recurring events like Christmas, Hanukkah, carnival, etc. (@Crissov [named a lot more](https://github.com/w3c/csswg-drafts/issues/4627#issuecomment-637046652)).

So there are a lot of use cases for having such media features, which, I believe, justify an integration into CSS.

And if it's not something the group considers important enough to integrate into CSS directly, it could still be achieved via script-based custom media queries.

As @frivoal wrote in the other issue:

> I encourage people who want this sort of things to contribute proposals to make https://drafts.csswg.org/mediaqueries-5/#script-custom-mq more than a rough sketch.

Here's an example for how a script-based CSS variant could look like for the page I mentioned above:

JS:
```js
setInterval(() => {
  const currentHour = new Date().getHours();
  CSS.customMedia.set('--dark-mode-time', currentHour >= 18 && currentHour < 8);
}, 60000);
```

CSS:
```css
body {
  background-color: #fafafa;
  color: #1a1d20;
}
@media (--dark-mode-time) {
  body {
    background-color: #1a1d20;
    color: #e3e4e5;
  }
}
```
Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9710#issuecomment-1856748939 using your GitHub account


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

Received on Thursday, 14 December 2023 22:03:42 UTC