:required validation in CSS3

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

:required validation in CSS3

Benedicte Roussel
Good day,

I have used :required in a HTLM5 form<label for="mail">Votre mail : </label><input type="email" name="mail" id="mail" required/>. It was understood by the navigators but in the validator instead of writing the following in my CSS3:  

:required
{
background-color:pink;
}
:focus
{
background-color:whitesmoke;
}
fieldset
{
margin:20px;
background-color:#FFEFD5;

}

I had to write the following in order that my CSS (level3) be validated.


[required]
{
background-color:pink;
}
:focus
{
background-color:whitesmoke;
}
fieldset
{
margin:20px;
background-color:#FFEFD5;

}

Could we expect that :required be validated by CSS3 validator in a very near future ? Or am I dreaming about it ?

I thank you for the attention drawn to this mail.

I look forwards to receiving you answer.

Yours sincerely

Benedicte
Reply | Threaded
Open this post in threaded view
|

Re: :required validation in CSS3

Jukka K. Korpela
15.6.2016, 1:38, Benedicte Roussel wrote:

> I have used :required in a HTLM5 form<label for="mail">Votre mail :
> </label><input type="email" name="mail" id="mail" required/>. It was
> understood by the navigators but in the validator instead of writing the
> following in my CSS3:
>
> *:required*
– –
> *I had to write the following in order that my CSS (level3) be validated.*
>
>
> *[required]*

I’m afraid there isn’t any definite published description of exactly
what the CSS Validator is checking against. But it seems that (possibly
with some exceptions) it recognizes W3C CSS specifications with maturity
level CR (Candidate Recommendation) or higher.

And as far as I can see, :required is not defined in such documents.
“Selectors Level 4” mentions it, but it’s just a Working Draft and has
not made much progress (the newest Working Draft is dated 2 May 2013).

> *Could we expect that :required be validated by CSS3 validator in a very
> near future ? Or am I dreaming about it ?*

I wouldn’t expect so. But why would that matter?

There is the simple workaround you mention, using the attribute selector
[required]. (I wonder whether :required offers any particular benefit
over it.)

Yucca



Reply | Threaded
Open this post in threaded view
|

Re: :required validation in CSS3

Kravvitz-3
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)? 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. Fortunately, JavaScript can be used to simulate most pseudo-classes, either by calling "setAttribute()" or by adding/removing a class to/from the element.


On Wed, Jun 15, 2016 at 4:06 PM, Jukka K. Korpela <[hidden email]> wrote:
15.6.2016, 1:38, Benedicte Roussel wrote:

I have used :required in a HTLM5 form<label for="mail">Votre mail :
</label><input type="email" name="mail" id="mail" required/>. It was
understood by the navigators but in the validator instead of writing the
following in my CSS3:

*:required*
– –
*I had to write the following in order that my CSS (level3) be validated.*


*[required]*

I’m afraid there isn’t any definite published description of exactly what the CSS Validator is checking against. But it seems that (possibly with some exceptions) it recognizes W3C CSS specifications with maturity level CR (Candidate Recommendation) or higher.

And as far as I can see, :required is not defined in such documents.
“Selectors Level 4” mentions it, but it’s just a Working Draft and has not made much progress (the newest Working Draft is dated 2 May 2013).

*Could we expect that :required be validated by CSS3 validator in a very
near future ? Or am I dreaming about it ?*

I wouldn’t expect so. But why would that matter?

There is the simple workaround you mention, using the attribute selector [required]. (I wonder whether :required offers any particular benefit over it..)

Yucca




Reply | Threaded
Open this post in threaded view
|

Re: :required validation in CSS3

Jukka K. Korpela
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


Reply | Threaded
Open this post in threaded view
|

Re: :required validation in CSS3

Philip Taylor (Webmaster, Ret'd)
Subject:
Re: :required validation in CSS3
From:
Philip Taylor [hidden email]
Date:
17/06/2016 10:01
To:
"Jukka K. Korpela" [hidden email]
CC:
CSS-D [hidden email]



Jukka K. Korpela wrote:
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.
Is it not the case, Jukka, that whether one needs set Attribute () or can access the attribute directly as a property of an element can be (perhaps is) browser specific ?
--

Philip Taylor