[whatwg] Suggestion: New "input-redirect" CSS property.
Matthew Raymond
mattraymond at earthlink.net
Tue Aug 17 20:30:08 PDT 2004
BACKGROUND:
There has been much talk recently about changing the behavior of the
<label> element. The current HTML 4.01 specified behavior is pass focus
from the label to the associated control in all situations, regardless
of the control or the conventions of the operating system.
ARGUMENTS FOR THE CHANGE:
1) Users may not understand why clicking a label in a web app focuses a
control, but clicking one in a native app doesn't. Considering clicking
labels is more likely to be a conscious act, and that clicking a label
in a native app is in all likelihood harmless, I don't see this as a
problem.
2) There is the possibility that people my accidently click the label
and cause undesired behavior. Some of these problems are because of
vendor-specific form submission handling that is not specified in the
HTML 4.01 specification. Other circumstances involve rare but
recoverable situations that require a combination of keyboard and mouse
input to occur.
3) It is a general principle of web standards groups that markup should
not specify presentation or behavior. The HTML 4.01 specification
violates this. However, vendors would have to enable focus passing to
specific types of controls regardless if whether it was specified to
make the label behavior consistent with the operating system, so
adhering to this principle in this situation is of little benefit to
browser programmers or webmasters.
ARGUMENTS AGAINST THE CHANGE (IN ITS CURRENT FORM):
1) The new behavior is not backwards compatibility with HTML 4.01, thus
resulting in unexpected behavior when webmasters who wish to start using
our new markup.
2) The existing HTML 4.01 behavior is already implemented on many browsers.
3) The HTML 4.01 behavior is generally not an "expensive" feature to
implement in browsers.
4) There is no existing method to determine the correct native behavior
for a <label> when associated with an <object>, and even if there were,
the browser vendors would have to depend on plug-in makers to report
what behavior should be used, so there's no way of knowing if the
plug-in is reporting the correct native behavior.
5) The HTML 4.01 spec makes the behavior of labels more consistent,
because all controls have a single label behavior.
6) The HTML 4.01 spec makes the behavior of markup more consistent,
because a <label> for two different controls will always do the same
thing on the same platform.
7) As it stands now, <label> is underused on the web. Many webmasters
use text only. Removing focus passing to the control will only encourage
this trend.
A REASONABLE COMPROMISE:
The problem her is not so much that the HTML 4.01 behavior is so
terrible, but that native behavior is not possible. Webmasters need a
way to specify native behavior when necessary while not having to worry
about behavioral backwards compatibility. To this end, I suggest a
compromise: let a CSS property specific to <label> control the behavior.
Property Name
input-redirect
Values
"forced" - The element redirects input to an associated control.
"native" - The element uses native UI conventions for focus passing.
"none" - The element suppresses all input redirection.
The default for HTML 4.01 markup and for markup without a Doctype
would be "forced", so that markup without this property would remain
backwards compatible with the HTML 4.01 specification. In "HTML5",
"native" would be the default. If someone wants the old HTML 4.01
behavior in "HTML5", they just add one line of CSS:
label { input-redirect: forced }
Webmasters can also use the property to specify exactly how they
want <label> to behave in specific situations:
<html>
<head>
<title>Example for input-redirect</title>
<style><!--
label.text { input-redirect: none }
label.radio { input-redirect: native }
label.check { input-redirect: forced }
--></style>
</head>
<body>
<form>
<label class="text">
Text Box
<input type="text" name="text1">
</label>
<label class="check">
<input type="checkbox" name="check1">
Check Box
</label>
<label class="radio">Radio Button 1
<input type="radio" name="radio" value="radio1">
</label>
<label class="radio">Radio Button 2
<input type="radio" name="radio" value="radio2">
</label>
<label class="radio">Radio Button 3
<input type="radio" name="radio" value="radio3">
</label>
</form>
</body>
</html>
(For <object>, the default "HTML5" behavior should probably be "none".)
The new input-redirect property gives everyone what they want. Those
who want native behavior as opposed to the 4.01 behavior get it as the
default for "HTML5". Those that favor the 4.01 standard don't have to
worry about behavioral backwards compatibility issues. Most importantly,
webmasters can make up their own minds by learning a single CSS property
rather than being forced to learn Javascript.
More information about the whatwg
mailing list