[csswg-drafts] [css-values] Time based numerical functions (#13659)

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

== [css-values] Time based numerical functions ==
Splitting off from https://github.com/w3c/csswg-drafts/issues/13655. 

Using the current time can be useful for creating dynamic computed themes and layouts.
To avoid flashes of wrongly styled content, this is currently only possible by adding blocking scripts to set a custom property or attribute.

## Proposal

Add time functions that return `<number>` values:
- `year()`
- `month()`
- `day()`
- `day-of-week()`
- `day-of-year()`
- `weak-of-year()`
- ...

The time functions should roughly match the [Temporal ZonedDateTime properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/ZonedDateTime#instance_properties) to make it easier to learn.

To provide values specific to one time zone or calendar, the functions _could_ optionally accept time zone and calendar as a parameter:

`day-of-year("Europe/Brussels" iso8601)`

To provide values specific to one zoned date time, the functions _could_ optionally accept a RFC 9557 string:

`day-of-year("2026-03-15T11:00:00+01:00[Europe/Oslo]")`

## Use cases

### 1. Time based theming

A mini-game is set up to have a generative color theme based on the day of the year. Each day the game has a new combination of colors.

```css
--background-color-1: ...;
--background-color-2: ...;
--background-color-3: ...;
--background-index: mod(day-of-year(), 3);


background-color: var(ident("--background-color-" var(--background-index)));
```

### 2. Highlighting simple timetables

A local hackerspace has a time table with the daily opening hours and the person responsible. 
`day-of-week()` can be used in a style query to highlight the row corresponding to the current week day.

```html
<table>
  <tr data-timetable-day=1>...</tr>
  <tr data-timetable-day=2>...</tr>
</table>
```

```css
--timetable-day: attr("data-timetable-day" type(<number>));

font-weight: if(
  style(--timetable-day: day-of-week()): bold;
  else: normal;
);
```

## Previous related proposals

- https://github.com/w3c/csswg-drafts/issues/9710


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


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

Received on Sunday, 15 March 2026 11:46:12 UTC