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

Re: :invalid

From: Jonas Sicking <jonas@sicking.cc>
Date: Fri, 24 Sep 2010 14:28:44 -0700
Message-ID: <AANLkTik-wKvK94RzFv50t-exi9VZjXhjXQoyyzM4s-KM@mail.gmail.com>
To: Anne van Kesteren <annevk@opera.com>
Cc: Ryan Seddon <seddon.ryan@gmail.com>, Mounir Lamouri <mounir.lamouri@gmail.com>, www-style@w3.org
On Fri, Sep 24, 2010 at 11:30 AM, Anne van Kesteren <annevk@opera.com> wrote:
> On Fri, 24 Sep 2010 19:57:41 +0200, Jonas Sicking <jonas@sicking.cc> wrote:
>> The question is, what would the use case for :invalid be then?
> Easily selecting all controls that are invalid irrespective of UA UI
> decisions?

What is the use case for doing that?

You can still use :not(:valid) if we don't keep :invalid and :valid in
sync (which I don't feel strongly about at this point).

> It's tricky. Thinking about it some more I do not really like the
> :invalid-ui idea either. It is too unpredictable. Having more concretely
> defined pseudo-classes and allowing UAs to play around with them in their UA
> stylesheet seems better.
> Simon suggested having something like :dirty that would select controls that
> have been edited or are in a form after it has been attempted to submit that
> form.

So to implement the current set of rules, we'd need the following
three pseudo classes:

Matches if user has modified value of control

Matches if the control was ever unfocused and invalid at the same
time. Even if it later has become valid or focused

The user has attempted to submit the <form> which is the elements .form

We'd then put something like this into our UA.css

:belongs-to-form-which-has-been-submitted:invalid {
  box-shadow: 0 0 1.5px 1px red;
This certainly works, but it introduces three new pseudo classes to
the web platform which are likely not going to be useful for pages. It
will likely only be useful to pages that want to replicate the same
styling rules, but with a different styling. I.e. something like

:belongs-to-form-which-has-been-submitted:invalid {
  background-color: red;
  box-shadow: none;

These pseduo classes seem extra useless if other UAs don't want to
bother implementing them since they'll use different rules for when to
style invalid elements. Alternatively, they seem extra useless for
other UAs to implement if they are not going to take advantage of them
in their UA.css, since they are not likely to be used by pages.

>From a styling point of view it seems strictly more useful for page
authors to have a selector that applies when a form control should be
rendered as invalid. After all, I'd be surprised if that wasn't the
original intent of the :invalid pseudo class.

I do hear your concern about having selectors that match different
things in different UAs. But the alternatives doesn't really seem
better here.

/ Jonas
Received on Friday, 24 September 2010 21:29:38 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:49:47 UTC