[css-values-5][css-content-3] Add functions for time-sensitive styling

[dead-claudia]

I'm thinking the following:

• wall-time(load): Get load-time wall clock time at millisecond resolution. Useful for starting infinite, time-dependent animations like clocks at the right phase.
• wall-time(current): Get current wall clock time at millisecond resolution. Updates every frame. Useful for some advanced uses, as well as stuff like content: datetime(var(--post-time), if(calc(wall-time(current) - 86400s < var(--post-time)), relative, absolute) (see below). The lack of timers makes it way simpler to code.
• datetime(offset? <datetime-option>+): Display a localized date-time string. Takes a number of options, mostly inspired by Intl.DateTimeFormat (but with a different syntax). If omitted, offset is the current time, continuously updated. 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. Default is zero.
  • 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 date displaying shows up pretty much constantly, and it'd be nice to be able to simply do content: datetime(attr(data-time ms)); in CSS with data-time="{{ms}}" rather than having to roll a <span>{{date_time}}</span> possibly across hundreds of instances.

[tabatkins]

What are the expected use-cases for this? This is a lot of complexity to pull in, and needs a reasonably good use-case to justify it.

I've noticed date displaying shows up pretty much constantly, and it'd be nice to be able to simply do content: datetime(attr(data-time ms)); in CSS with data-time="{{ms}}" rather than having to roll a <span>{{date_time}}</span> possibly across hundreds of instances.

This would not be a good use-case, fwiw. That's meaningful information in the page, and should be expressed in the page markup, not hidden in attributes and then exposed via CSS.

[Crissov]

In #9877, I’ve mentioned already that I believe it should be in scope of CSS to describe and select different datetime representations depending on the available width, especially in table columns, e.g. as part of text-overflow. This may be a use case for what is proposed here.

Only remotely related, I proposed MQ features to deal with user-local dates and times in #9710.

[dead-claudia]

@tabatkins It might be helpful to think of it as an offshoot of WICG/webcomponents#1064.

I'm also open to it being at least partly done in HTML instead. But, the incredibly regular structure of them already gives me some pause, and Intl options are effectively styling options IMHO.

I can go ahead and close this and file an HTML issue with proposals related to datetime. (These would benefit from a CSS cascade, anyways.)

[dead-claudia]

Update: filed whatwg/html#4630 (comment) and came up with a (much) better (hybrid) HTML/CSS solution.