Re: :required validation in CSS3

15.6.2016, 23:49, Kravvitz wrote:

> Isn't the main difference between a given attribute selector and its
> equivalent pseudo-class that the attribute selector only matches the
> attribute but a pseudo-class can be dynamic (e.g. respond to a property
> change or other change in state)?

That’s the conceptual difference.

> An example would be "p:lang(en)",
> which will match the "computed language" (for lack of a better term) of
> paragraph elements whereas "p[lang|=en]" will only match the attribute
> on the paragraph elements themselves.

That’s a case where the conceptual difference matters. The reason is 
that the declared language of an element is defined so that setting the 
lang or xml:lang attribute on an element sets it for its children, too, 
unless they have their own lang or xml:lang attribute.

For :required, the situation is different. As far as I can see, the 
conceptual difference is insignificant in practice; I suppose this is 
the reason why :required has been omitted.

> Fortunately, JavaScript can be
> used to simulate most pseudo-classes, either by calling "setAttribute()"
> or by adding/removing a class to/from the element.

It would be logical to think that [required] would refer to the presence 
of an attribute in HTML or XML markup only. But under
“6.3.4. Default attribute values in DTDs”, the CSS 3 Selectors spec says:

“Attribute selectors represent attribute values in the document tree. 
How that document tree is constructed is outside the scope of Selectors.”

So setting an attribute in JavaScript can be expected to be relevant to 
the interpretation of attribute selectors in CSS. This means that 
[required] is just as dynamic as :required – or am I missing some other 
dynamics that might apply?

It seems that you don’t even need to use setAttribute(). Setting the 
property directly in JavaScript works, too. This change is reflected as 
a change of the corresponding attribute.

In the following example, both <input> elements are rendered so that 
both CSS rules apply (when JavaScript execution is enabled):

<!doctype html>
<title>required</title>
<style>
:required { border: solid red; }
[required] { background: yellow; }
</style>
<input required>
<p>
<input id=foo>
<script>
document.getElementById('foo').required = true;
</script>


Yucca

Received on Friday, 17 June 2016 04:16:44 UTC