W3C home > Mailing lists > Public > www-style@w3.org > September 2015

Re: Proposal for a "duration" meta-property(?) on a css class

From: Xidorn Quan <quanxunzhen@gmail.com>
Date: Thu, 1 Oct 2015 00:01:56 +1000
Message-ID: <CAMdq698TAE0hVay+THUsOkQ8c8nfagmiw_HxtbOC7xHQrfbAWg@mail.gmail.com>
To: George Triantafyllakos <gtrianta@gmail.com>
Cc: www-style list <www-style@w3.org>
On Wed, Sep 30, 2015 at 7:29 AM, George Triantafyllakos
<gtrianta@gmail.com> wrote:
> Hello everyone.
>
> I was thinking that it would be really useful if a css meta-property(?)(*)
> existed that allowed one to set a specific duration (in milliseconds) that a
> css class will be applied on an element. It would definitely simplify the
> use of classes as a tool for immediate user feedback (e.g. toggle short
> notification messages after certain actions).
>
> An example use case can be seen here: https://jsfiddle.net/gtria80/hx2dph3j/
> There is a button that can move a user to the next page of, let's say, a
> form, and the button is disabled until the user selects at least 3 options.
> When she does, the button is enabled and a short notification message
> appears next to the button for 1 second.
> An easy way to do this (one of many I guess) is to hide the message at first
> (display:none or opacity:0 or visibility:hidden or ...), create a css class
> that shows the message, add this class dynamically to the message element
> whenever you want, and hide it again after a delay (that you'll have to
> create programmatically).
>
> However, if a "duration" meta-property existed that allowed one to say that
> a class should be applied on an element for a certain period of time, the
> javascript part that programmatically waits and removes this class after 1
> second, could be dismissed. You would only have to add the class on the
> element you want and it would be automatically removed after the designated
> period of time.
>
> An idea on how this could be specified would be to set this duration
> meta-property in a way similar to the :nth-child selector, that is:
>
> .visible:duration(1000) { display:inline; } or
> .visible:dur(1000) { display:inline; } (as a shorter alternative)
>
> ....where 1000 is obviously in milliseconds ( = 1sec).
> However, this is just an idea/suggestion on how such a feature could be
> specified.
>
> Has something similar been suggested/discussed before?
> Eventually, do you think it would be a good idea? I really believe that it
> would be useful in several occasions, especially in web apps.

Your usecase has already been covered by CSS animation.

So, for your specific case, you can do this:

@keyframes show-a-while {
  0% { visibility: visible; }
  100% { visibility: hidden; }
}
.visible {
  animation: show-a-while 1s step-end;
  visibility: hidden;
}

Note that you need to use script to remove the class anyway, since CSS
can never change the content of the HTML document.

- Xidorn
Received on Wednesday, 30 September 2015 14:03:07 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:57 UTC