W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2019

Re: [csswg-drafts] [web-animations] Error handling in KeyframeEffect.pseudoElement (#4586)

From: Stephen McGruer via GitHub <sysbot+gh@w3.org>
Date: Fri, 13 Dec 2019 14:23:45 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-565458764-1576247023-sysbot+gh@w3.org>
If we drew a parallel to [`getComputedStyle`](https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle), then we should throw for text not prefixed with ':', and silently accept all other input. The intent from `getComputedStyle` appears to be that anything prefixed with a ':' is a pseudo-element, just maybe not one the browser does anything with. (See step 3.3, which just says "let obj be the given pseudo-element of elt", but this can be called for e.g. `::foo`).

Of course, detecting support then becomes a problem; what if the web author wants to animate the `::first-line` if possible, but fall back to animating the entire text if `::first-line` isn't supported? To be fair, this problem exists today for pseudo-elements; it seems that most authors fall back to either inserting CSS and checking for the style applying, or calling [`insertRule`](https://drafts.csswg.org/cssom/#dom-cssstylesheet-insertrule) and seeing if it throws (which I can't find the spec text for, but which [apparently works](https://gist.github.com/paulirish/441842)). So perhaps we could say that it is reasonable for an author to do:

const div = document.createElement('div');
const anim = div.animate({ top: ['100px', '100px']}, { pseudoElement: myPseudoElement });
const supported = getComputedStyle(div, myPseudoElement).top === '100px';
return supported;

Given that, I think I'm coming down on 4. Console warning is an interesting question; I tend to lean away from adding them as each one lowers the chance that developers will actually pay attention to the console. But if a given browser felt it was important to warn the developer, they of course could do so?

> Given you can't set style on an arbitrary pseudo from JS presently with constructing a stylesheet, I wonder if being able to animate an arbitrary pseudo from Web Animations API is necessary. Can we make this read-only initially and then make it writable later?

It feels weird to me to say that one of the goals of Web Animations is to give authors much finer control over their animations, and then say "but only for animations of non-pseudo elements". 

GitHub Notification of comment by stephenmcgruer
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4586#issuecomment-565458764 using your GitHub account
Received on Friday, 13 December 2019 14:23:46 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:57 UTC