[csswg-drafts] [css-values-5] Add functions for time-sensitive styling (#12146)

dead-claudia has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-5] Add functions for time-sensitive styling ==
I'm thinking the following:

- `load-clock()`: Get load-time wall clock time in decimal seconds. Useful for starting time-dependent animations like clocks.
- `datetime(offset? <datetime-option>+)`: Display a localized date-time string. Takes a number of options, mostly inspired by [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) (but with a different syntax). Possible options:
 - `relative`, `absolute`: Display as relative or absolute. Default is absolute. If relative, it'll update in real time, so you don't have to keep it in sync.
 - `locale(<locale-ident> | default)`: Display using the given locale. Optionally can follow the identifier with `lookup` or (default) `best-fit` to set the matching algorithm. This is also used for specifying numbering system, calendar, and optionally hour cycle.
 - `format(lookup | best-fit)`: Sets the format matcher algorithm. Default is `best-fit`.
 - `timezone(<string>? + [long | short]? + [localized | offset | generic]?)`: Set the time zone to display as. Default is the runtime's default time zone (usually the local one). The other options control the equivalent of the `timeZoneName` parameter for `DateTimeFormat`.
 - `weekday(long | short | narrow)`: Set the weekday representation
 - `era(long | short | narrow)`: Set the era (CE/BCE/etc.) representation
 - `year(numeric | two-digit)`: Set the year representation
 - `month(numeric | two-digit | long | short | narrow)`: Set the month representation
 - `day(numeric | two-digit)`: Set the day representation
 - `hour([numeric | two-digit] + [12 | 24] + [long | short | narrow])`: Set the hour representation. `12` forces 12-hour, while `24` forces 24-hour.
 - `minute(numeric | two-digit)`: Set the minute representation
 - `second(numeric | two-digit)`: Set the second representation
 - `fractional-digits(0 | 1 | 2 | 3)`: Set the number of fractional second digits
 - `date-style(full | long | medium | short)`: Set the date style, like in `dateStyle` for `Intl.DateTimeFormat`
 - `time-style(full | long | medium | short)`: Set the time style, like in `timeStyle` for `Intl.DateTimeFormat`

I've noticed dates show up a *lot*, and it'd be nice to be able to simply do `content: datetime(attr(data-time));` in CSS rather than having to roll a `<span>{{date_time}}</span>` possibly hundreds of times.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12146 using your GitHub account


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

Received on Friday, 2 May 2025 10:30:00 UTC