[css-pseudo][MQ][css-env] Seasonal Theming

[Crissov]

Although we already have mediaqueries – drafted for level 5 – for user preferences regarding dark themes and measured environmental lightning, styling based on the userʼs seasonal and temporal surroundings can be more complex than that.

Many sites use special (content and) style during specific times of the year (and less often of the month, week or day), or in anticipation thereof. A problem with server-side approaches is that they may not be appropriate within the visitorʼs timezone, location or culture – the result can be irritating or even offensive.

• Meteorological seasons and lunar crescents are inverted in the opposite hemisphere.
• The time of day depends on the userʼs longitudinal location and national laws.
• Availability of sunlight outside buildings depends on the date, (absolute) time and latitudinal location of the user.
• Holidays depend on national laws, the calendar(s) in use, the predominant local religion or culture and that observed by the user.

I am not sure how to address this the best way in CSS, but I believe it is in scope. Environment variables, pseudo classes and media queries could provide solutions.

@media sunlit {
  {foo: bar;}
} 
:waning-crescent {foo: bar;} 
foo {bar: env(seasonal-color);} 

Fingerprinting and privacy concerns should be about as serious as for preferred languages and available fonts.

[SebastianZ]

Fingerprinting and privacy concerns should be about as serious as for preferred languages and available fonts.

With all this information fingerprinting can be more fine grained, especially holidays hold national, sometimess even regional information.

Disregarding the privacy issues, this is an interesting idea, though.

Sebastian

[frivoal]

all of this can be derived from date and location, which are accessible from javascript (modulo some user permissions). From there, I think that this is specialized enough that you're better off building this yourself with custom script-based media queries. I think pushing for that generic mechanism to happen is more likely to get you to a working solution that trying to convince browser vendors to implement seasonal theming MQs directly.

[Crissov]

Perhaps.

User-local :date() and :time() selectors or @date and @time at-rules or date and time MQs would certainly help to build some of this oneself. Like I said, Iʼm not sure how to address this.

[tabatkins]

Overall I'm with Florian - these seem special-purpose enough that it's probably not worth building into the browser; I've virtually never seen any site trying to theme itself in such a way, despite the capability definitely already existing via JS, as Florian explains.

As such, I'll close this, but it can be re-opened if you can show reasonable cases of sites that are already, or would reasonably like to, theme themselves in such a way.

---

But also:

lunar crescents are inverted in the opposite hemisphere

The moon looks the same across the world at any given time; that's one thing that doesn't invert when you cross north/south. ^_^

[dbaron]

A little bit off-topic, but...

The moon looks the same across the world at any given time; that's one thing that doesn't invert when you cross north/south. ^_^

Not quite. Suppose the moon is directly above the equator and 115°E (a bit north of Samarinda in Borneo) and the sun is directly above the equator and 25°E (near Kisangani, D.R. Congo) -- a waxing half-moon. In Borneo the moon is nearly directly above, and lit on its west half. In Perth, Australia (around 32°S and 115°E), the moon is in the north, so its left half is lit. But in Beijing (close to 40°N and 115°E) the moon is in the south, so its right half is lit. In Nairobi, Kenya, the moon is just above the horizon in the east and its top half is lit. But in Nauru in the equatorial Pacific Ocean the moon is low-ish in the west, and its bottom half is lit.

[Crissov]

Besides date and time (e. g. ISO 8601), one would also need some kind of information about the userʼs location (e. g. ISO 3166) .

Example: 🇺🇸 Independence Day and 🇫🇷 Bastille Day

@env (date(-07-04) and location(us))
  or (date(-07-14) and location(fr)) {
      --color-1: red;
      --color-2: blue;
      --color-3: white;
} 

@date month = 7 {
  @date day = 4 or (1 week before) {
    @location us {
      color-scheme: red-white-blue;
    } 
  @date 7 < day =< 14 {
    @location fr {
      color-scheme: red-white-blue;
    } 
  } 
} 

Example: snowy season

@media local-season = winter {
   cursor: url("snowflakes.ani");
} 

[teh-maxh]

As such, I'll close this, but it can be re-opened if you can show reasonable cases of sites that are already, or would reasonably like to, theme themselves in such a way.

I do it on my personal website. Ordinarily, I just have my name in blue in the header, but during special events, I change it thematically — for example, since it's Pride month, my name is decorated as a Pride flag.

It's hardly a major thing, but the same could be argued about quite a few features.

[Crissov]

Many reasons for seasonal theming would be the same for everyone and it would make sense to offer predefined entry points for authors, so not everyone would have to create date and locale rules themselves. Iʼm thinking of stuff like Christmas (with Advent), Easter (with Lent), Ramadan, Holi, Halloween, Yom Kippur, Midsummer, Cinco del Mayo, Carnival, New Year, Poppy Day, St. Patrickʼs, Motherʼs Day, World AIDS Day, Thanksgiving, Summer Olympics, FIFA World Cup, Super Bowl, many national holidays celebrating independence, unification, liberation, revolution, victory or rulerʼs nominal birthday and so on. This could become part of a registry, as exists for list counters, if date and place “selectors” were available. This could also cover the recommended color(s), e. g. of flags, ribbons or crape.

[frivoal]

Even if it isn't major, seasonal theming, in general, doesn't seem crazy. Building all sorts of events into browsers isn't viable though: being exhaustive in impossible, covering some countries and not others is unfair, and including some events that are celebrated in some countries might be a very good way to get banned from some other countries. So I think the the following is the way forward:

• ability to access the date
• ability to make up your own MQ based on the date

The first one already exists in JS. A rough sketch of the second one is proposed in MQ5 https://drafts.csswg.org/mediaqueries-5/#script-custom-mq.

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.

[Crissov]

JFTR, ICU has (localizable) holiday support, although it is still considered experimental.