- From: François REMY <francois.remy.dev@outlook.com>
- Date: Fri, 12 Jul 2013 04:47:16 +0200
- To: Sylvain Galineau <galineau@adobe.com>, "www-style@w3.org" <www-style@w3.org>
> [Sylvain noting that <label> state inheritance and
> a :contains-focus pseudo-class would be better
> solutions to some of my use-cases]
I totally agree with you. Meanwhile, they represent a class of problems that cannot be solved efficiently right now and could benefit from lazy rules.
>>[4] carousel un-hovered elements styling
>>
>>In some cases, you may want to decrease the opacity of elements inside a
>>carousel that are not under the mouse if there's an element inside the
>>carousel that is under the mouse cursor. However, when the mouse is
>>moving very fast, you may don't care about this effect; that's why you
>>may want to put these selectors in a @defer at-rule and specify that the
>>state should not get updated every time frame.
>
> Not quire sure how we make things faster by having hover apply/ignore
> entire
> sets of rules based on yet another timer in the system.
When you move the mouse, the selectors containing :hover have to be reevaluated very frequently. If you look at the last selectors, they're actually very slow to update because they can be applied on so much elements to begin with. You probably want to debounce their reevaluation.
>>
>> ul.carousel> li { opacity: 0.9; transition: opacity 0.5s; }
>> ul.carousel> li:hover { opacity: 0.99; }
>> @defer 100ms up-to 300ms {
>> ul.carousel:hover> li:hover ~ li:not(:hover), ul.carousel:hover>
>>!li:not(hover) ~ li:hover { opacity: 0.6; }
>> }
Received on Friday, 12 July 2013 02:47:42 UTC