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

> Unfortunately, many holidays that authors would use this for, do not have simply fixed annual dates in the Gregorian calendar, e.g. Chinese New Year, US Thanksgiving, Orthodox Easter. With a simple `year`, `month`, `day` solution, authors would need to maintain a comprehensive list of explicit dates.

Yes, that's true. Though as @frivoal [pointed out in #4627](https://github.com/w3c/csswg-drafts/issues/4627), there's no way to provide a built-in, exhaustive solution for that. Though giving a way query the date and time, as you suggested, makes fixed-date use cases easily possible.
And for events that have dynamic dates, authors can fall back to script-based custom media queries.

E.g. the date for Easter is calculated via a complicated formula. For the Gregorian calendar, this might look like:

JS:
```js
function calculateEasterDay(year) {
  const a = year % 4;
  const b = year % 7;
  const c = year % 19;
  const d = (19 * c + 24) % 30;
  const e = (2 * a + 4 * b + 6 * d + 5) % 7;
  const f = Math.floor((c + 11 * d + 22 * e) / 451);
  let day = 22 + d + e - 7 * f;

  if (day <= 31) {
    return new Date(year, 2, day);
  } else {
    day = d + e - 7 * f - 9;
    return new Date(year, 3, day);
  }
}

function isTodayEasterDay() {
  const currentDate = new Date();
  currentDate.setHours(0, 0, 0, 0);
  const easterDayDate = calculateEaster(currentDate.getFullYear());
  return currentDate === easterDayDate;
}

CSS.customMedia.set('--easter-day', isTodayEasterDay());
```

CSS:
```css
@media (--easter-day) {
  body {
    background-image: url('easter-eggs.svg');
  }
}
```

> Also, it is common to apply a styling for the tide leading up to the holiday, not just in the date itself.

Yeah. Very common for Advent season, for example, which we're in right now. For such timespans, the same rules as above apply.

For those, we probably want to express date spans using the range syntax of media features. The same for time spans. Examples for that:

```css
@media (month: 12) and (1 <= day <= 24) {
  body {
    background-image: url('christmas-decoration.svg');
  }
}

@media (2023-11-20 <= date <= 2023-11-26) {
  .event-price {
    background-image: url('black-friday.svg');
  }
}

@media (10pm <= time <= 4am) or (22:00 <= time <= 04:00) {
  .logo {
    background-image: url('night-owl-logo.png');
  }
}
```

Talking about dates and times, the issues I can see are the focus on the Gregorian calendar and the format in which they are expressed.

> PS: I believe for dark mode we have better solutions that respect the user preference.

Absolutely agree. I just took the example from that page which uses fixed times.

Sebastian

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


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

Received on Sunday, 17 December 2023 00:56:31 UTC