Re: [csswg-drafts] [css-ui-4] appearance: none on <meter>

I think the spec needs significantly more work in this area, but I have not been able to commit time to do it.

If a visualization conveying the information carried by an element can be created using CSS, then I think that `appearance: none` is be justified in making the native look go away. However, this does not necessarily means that the element should become invisible. There should probably be something in the UA stylesheet to provide a default CSS-based rendering, which authors then go on overriding, possibly using `all: unset` to get a blank state after having checked using `@supports` that the styles they want to use are actually supported.

For `<metter>`, it is a bit tricky. I believe that using standard-but-not yet implemented CSS, it can be recreated.
```css
meter {
 appearance:none;
 width: 100px;
 height: 1em;
 display: inline-block;
 background: gray;
}
meter::before {
 content: "";
 display: block;
 height: 100%;
 background: lime;
 width: calc(100% * ( attr(value number, 0) - attr(min number, 0) ) / attr(max number, 1));
}
```
Using non-standard but implemented css, it can also be recreated. Firefox's UA stylesheet for example uses a non standard `::-moz-meter-bar` pseudo which thanks to the non-standard `-moz-appearance: meterchunk;` has the right size.

However, I do not think it can be recreated using standard css as currently implemented.

When `appearance` is `none`, should the spec make a decision about which control must preserve some native components to be functional, and which should instead have their look and feel be created via the UA style-sheet (and which, if any, should become invisible)? The problem is not just that it is a lot of work for the spec editor, but that the answer depends on how rich the is the set of css features implemented by each UA.

The spec currently contains these  statements:

> All decorative visual aspects of a form control which are not caused by a CSS style rule must be suppressed when the appearance is changed using appearance, even if the UA’s internal representation for this element was composed of multiple elements or pseudo elements combined together.
> [...]
> However, the UA must preserve aspects of the form control which are necessary to operate the control with its original semantics. This does not include aspects of a control which are merely needed to observe the state the control is in, only those that are needed for the user to be able to modify the state of the control.
> [...]
> UAs should include in their User Agent stylesheet style rules to give form controls a recognizable shape when `appearance` is `none`.

I think:

1. This should be changed to say that the UA must also preserve aspects of a control which are needed to observe the state the control is in if it would not be possible to expose that same information using CSS supported by the UA, and that in that case, the UA must include such style rules in their UA stylesheet rules. 
2. Author guidance should be added, recommending judicious use of `appearance:none`, `@supports`, and `all: unset` together
3. The determination of which form control should be treated which way should be left up to each UA, since it depends on what CSS it implements.

It sure would be nice if we could have no UA dependent behavior, and fully determine the behavior of everything in the spec, but I am not sure how to go about that given the broad diversity of form controls and the changing nature of CSS support in browsers. 

-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/356#issuecomment-301717913 using your GitHub account

Received on Tuesday, 16 May 2017 08:52:06 UTC