507927 - Suggestion of new CSS part - CSS properties controlled by a dates or time

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, enhancement)

Description

[d]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; sv-SE; rv:1.9.1.1) Gecko/20090715 Firefox/3.5.1
Build Identifier: 

As the browser(s) usually takes the first step in getting a new part of CSS implemented, I suggest a way to control CSS properties depending on which is the current date or time. This can then be used to for example, generate a page background that displays a field during day time, and a sky filled with stars during night. It can also reflect different seasons of the year.

The solution I suggest is simple, but as you implement it, you are free to change it.

What I suggest is looking something like this:

@date(2009, December, 1, 6:00 AM - 2010, January, 1, 6:00 AM){
	background: url(christmas.jpg) no-repeat;
}

If no time is given, a standard value shall be used, for this I suggest 12:00 AM.

I also suggest supporting 24-hour clocks as inputs for time.

I don't think this will be implemented in CSS3, nor would that be very wise, but as for CSS4, this could be an excellent extension. But as of now, we'll have to use -moz.

More examples:

@date(*, *, *, 6:00 AM - *, *, * 5:00 PM){
	background: url(background.jpg) no-repeat;
}

Any year, any month, any day, only time matter.

@date(2009, February, 4, 23:00 - 2015, March, 1, 20:00){
	background: url(background.jpg) no-repeat;
}

24-hour clock/time.

@date(*, June, *, * - 2020, June, *, *){
	background: url(background.jpg) no-repeat;
}

Displays any day, any month and any year until 2020.

@date(2010, July, 28, *){
	background: url(background.jpg) no-repeat;
}

Displays only on July 28 2010.

What do you think?

Reproducible: Always

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I think this would probably be better as an addition to media queries rather than its own at-rule.  And I think the date syntax should follow ISO 8601.

Comment 2

[d]

I agree on both of those. As I've never used media queries for my own sites, I had a glance at the W3C pages and put together something based on that and the ISO 8601 standard below.

@media date(YYYY-MM-DD-hh:mm:ss AM - YYYY-MM-DD-hh:mm:ss)

Comment 3

[d]

(Ignore that "AM" that ended up inside, /me blames copy and paste.)

@media date(YYYY-MM-DD-hh:mm:ss - YYYY-MM-DD-hh:mm:ss)

Comment 4

[d]

A few changes to the "rules" I first set up, if no time is given, that is:

@media date(YYYY-MM-DD - YYYY-MM-DD)

It should be assumed that it should display during any time during the day, according to the other requirements. This is equivalent  to writing:

YYYY-MM-DD-*:*:* - YYYY-MM-DD-*:*:*

If you choose to give a time, you will have to give hours, minutes and seconds, example follows:

YYYY-MM-DD-*:08:*

The reason for this is that if people wrote only the time they wanted to display first, without adding the *, the minutes, :08 in this case would be considered as hours.

Short version of this, if anything follows after "DD", it should be assumed that this is the time and for the @media properties to be valid, all three values must be used. Either as real values or "*".

Comment 5

[d]

If two dates crosses each other with contradicting properties, for example:

@media date(2010-02-04 - 2010-02-10){
    background: url(background1.jpg) no-repeat;
}

@media date(2010-02-07 - 2010-02-10){
    background: url(background2.jpg) no-repeat;
}

In this case, background2.jpg should be displayed from the 7th, ignoring the first one as they both cover the same property, and to follow CSS standards the last one gets used. For the first one to be used, it would have to marked as !important.

Comment 6

[d]

So, this has not been discussed for months, but I still believe it's a good idea. I would appreciate if someone with more experience would either reject because of "this" and "that", or turn it in to a specification proposal similar to the ones at: http://webkit.org/specs/

There has not been much suggested from "our" side lately, at least not compared to the Webkit team. This could be submitted to the W3C for consideration in CSS3 or CSS4, and if implemented properly, really enhance the web with effects/images based on time and date.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

This seems like something that could make Web pages a lot harder to test for relatively limited value.  If authors have to write their own solution to this, at least they'd be more able to test it.

Comment 8

[d]

I don't see how it would make them harder to test, you just need to edit the date temporarily, the only problem would arise if you entered the wrong date and didn't notice this. "Their own solution", would most likely include complicated and large JavaScript code. This is presentational and could therefore be simplified through implementation in CSS.

Comment 9

[Sean Newman]

bump