Open gregwhitworth opened 3 years ago
@zcorpan I had not considered that given that appearance: base
takes the step of requiring a defined DOM and styles. You're correct at the definition that the behavior should remain but without that required DOM & styles we don't take a step towards the goal of this which is to enable styling of the built-in control/component without having to replace it.
I don't have a strong opinion regarding the switch that enables that DOM & styles, @frivoal recommended over on the explainer repo a base
attribute on the control/component that would likewise enable this and would also not conflate appearance
which some people think will lead to author confusion.
You both have more history investigating the appearance
property so I'll happily take guidance to ensure that the following goals are met:
@fantasai brought up item 3 with the current proposal of appearance: base
as authors may apply it to many controls and thus hindering our future additions. @tabatkins recommended a appearance: base-checkbox
style approach to the problem and as noted @frivoal recommended a similar approach but with a HTML attribute.
cc: @tantek as he had opinions on this aspect as well
Also: Thank you all so much for the thoughtful engagement and help on this
To sum up the possible options for a switch to a defined anatomy and UA styles we have:
appearance
keyword of base-<control>
(eg: base-checkbox
)base
attribute on the control (eg: <input type="checkbox" base>
)With regards to next steps - @tabatkins @frivoal @tantek @jensimmons am I missing any other possible solutions?
Don't we want to have a defined DOM and styles for appearance: none
?
Does using SVG allow more CSS animation than html? Why not use clip path and a background instead?
While I applaud the idea of having standardized stylable component parts in the presence of appearance: base
(especially for things like file upload controls), I’m not a fan of that being a single design for all eternity. I would rather allow for platforms to vary it somewhat and update in the future, but perhaps sticking to a limited set of properties, so that authors know which ones they will need to overwrite. Or just let the authors use all: initial
.
I am also not against using glyphs, even if different platforms have different fonts. They don’t all have to look identical for this proposal of standardized component parts to be valuable. As long as the author can apply a different font, or use content: ""
and a clipping path and background for that part, then it is just as customizable.
appearance: base-checkbox
on something other than a checkbox would not be good. I thought we were trying to get away from that. appearance: base
seems better.
Also, I would prefer to keep this all in CSS. I often can only edit the CSS for a project, not the HTML or JavaScript. Perhaps we could have an at-rule for styles that only apply to elements that have appearance: base
. appearance
Property values inside the at-rule would be ignored.
Don't we want to have a defined DOM and styles for
appearance: none
?
When initially discussing this with @fantasai and @frivoal in the fall 2020 they didn't want overload appearance: none
for compat reasons; although that was the initial direction I was heading which is why I actually extend appearance: none
with the base
solution. The defined DOM structure I think is actually the least of the concerns for compat in this scenario though because properties that wouldn't have worked prior may begin working due to the standardization of base styles. I'm not entirely sure of a concrete scenario however given how appearance: none
is most commonly used however. @fantasai @frivoal do you all have one?
Does using SVG allow more CSS animation than html? Why not use clip path and a background instead?
It provides greater flexibility on the parts (eg: paths) with strokes, joint, etc. Also, the minute you have to reach for background assets you've removed one of the key demos for this base solution which isn't to have to reach for any graphics software. It's also important to note that while SVG is currently being proposed for the checkmark that probably won't be the case for all control/component parts much in the same way that when authors create their own today they don't use SVG for the entire control.
I am also not against using glyphs, even if different platforms have different fonts. They don’t all have to look identical for this proposal of standardized component parts to be valuable. As long as the author can apply a different font, or use content: "" and a clipping path and background for that part, then it is just as customizable.
I am due to the limitations of styling to text as outlined in the explainer in comparison to SVG.
I’m not a fan of that being a single design for all eternity
I agree to an extent, this is commonly brought up but if one looks at many of the controls in the platform the models and base UX has remained the same since the webs inception. Upon looking into <select>
, checkbox
, radio
, there are some that have existed prior in the same manner prior to browsers in native OSes and some (eg: checkbox/radio) prior to graphical UI. Some even exist well before mass access to computers existed, here's an example from 1963 with checkboxes, text inputs, date, date-time, etc. The important part to note is that this "design" will be a base but with the standardized DOM & styles they can adjust the look and feel utilizing the powerful layout capabilities we have today provided to us on the web. It will be purposefully plain and simple to give authors a starting point with the expectation that they will/can adjust it interoperably. So while I agree with your position I feel that cow paths are very well trodden in Graphical UI to be able to take a host of controls/components and define their parts and base styles.
appearance: base-checkbox on something other than a checkbox would not be good.
This is a good point and one we'll need to ensure is accurately informed to authors as well in spec text as it will only apply to an HTMLInputElement
with a state of checkbox
; or other elements as we make progress with others. As appearance: none
works today it removes the native styling but doesn't enforce a DOM nor base styles for that DOM. Does that clarify it?
The CSS Working Group just discussed appearance: base to enable interoperable styling of controls/components
, and agreed to the following:
RESOLVED: This feature should be solved with an attribute rather than a CSS value
The reasons given for handling this as an attribute rather than in CSS (even though it is about presentation and otherwise would belong in CSS):
* { appearance: base }
would create if only some form elements supported basic rendering and others didn't.I get the reasoning of not using CSS for DOM building, but I think the end result of doing an attribute is that instead of doing this:
* { appearance: base; /* etc. */ }
Authors will just do this instead:
*[base]:base { /* etc. */ }
And if they have control over the HTML, they will add the base attribute to every form element whether it is currently supported or not.
And those without control over the HTML won't be able to take advantage of this feature.
I'd still rather have just a pseudo be the switch for whether or not to use the alternate DOM, when it is supported on that element.
Sorry I missed the meeting. It sounds like it was a very interesting conversation.
DOM modifications that depend on CSS computed values are messy/difficult to implement
I wonder if we need this aspect. If we provide sufficient pseudo-elements web developers should have their styling needs addressed as well.
So the resolution above was initially this:
Proposed resolution: This functionality be pursued as an attribute instead of a CSS property, and CSS adds a mechanism to detect an element in this mode in a browser that has support for it
and I think the second part got accidentally (based on the detailed notes) left off the resolution. Does that sound right?
If so, we need to add a new attribute to HTML that enables interoperable styling on controls that wear it. And we need to add a pseudo class to CSS that matches when an element supports interoperable styling. That leaves a few questions:
base
seems wrong. It made sense when it was appearance:base
, but just base
as an attribute feels hard to understand. How about something like interoperable
? That feels too long, but at least it explains what it's trying to do.input[interoperable]:interoperable
?appearance
? There would seem to be two possibilities. One is that input[interoperable] {appearance:auto}
and input[interoperable] {appearance:none}
both render the same way, with an interoperable spec-defined set of styles and DOM structure. The other is that only appearance:none
does that, and appearance:auto
is still up to the UA to define. I think I prefer the former, but I'm not sure.base
(could refer to base URLs or other) or interoperable
(things should generally be interoperable). Maybe something like basestyle
or stylable
?
- I don't like either
base
(could refer to base URLs or other) orinteroperable
(things should generally be interoperable). Maybe something likebasestyle
orstylable
?
I kind of like basestyle
- it says that it's related to styles, and it has "base" which I like for some reason. I don't like stylable
for two reasons - there are two spellings (also styleable
) and all controls are stylable in some ways even if they don't have interoperable styling which is what this attribute implies.
- Why is a pseudo-class needed if it only checks the presence of an attribute?
The pseudo class allows for feature detection - it should only match when the attribute is actually supported on a given element. I.e. const supported = document.createElement('select').matches(':basestyle');
. If there's a better way to do feature detection element-by-element, I think that'd be fine too.
- It seems to me the former has to be chosen, or it was moot to use an attribute.
I don't understand this comment, sorry.
@mfreed7 wrote:
I kind of like
basestyle
- it says that it's related to styles, and it has "base" which I like for some reason.
I do so as well. Though note, in CSS, names are generally dash-separated, so it should be base-style
.
Sebastian
Maybe unstyled
could work as the name of this attribute, implying that authors would have to style these controls themselves?
I like unstyled
also, maybe better actually.
I do so as well. Though note, in CSS, names are generally dash-separated, so it should be
base-style
.
But this is the name of an HTML attribute, which typically don’t have dashes. Perhaps you’re talking about the pseudo class for feature detection?
I do so as well. Though note, in CSS, names are generally dash-separated, so it should be
base-style
.But this is the name of an HTML attribute, which typically don’t have dashes. Perhaps you’re talking about the pseudo class for feature detection?
I did talk about the pseudo-class, yes. I didn't realize before the resolution was to add an HTML attribute and make it detectable in CSS. But given that, the HTML attribute may still be called basestyle
. Generally, I believe the attribute name and the name in CSS should be aligned with each other.
Maybe
unstyled
could work as the name of this attribute, implying that authors would have to style these controls themselves?
Form elements with that attribute will still have some basic styling, right? So "unstyled" may not be fully true. Though as we are searching for something that fits for both HTML and CSS, it might make sense to use a single word to avoid the issue of the names being different due to the different word separation rules in both languages. So "unstyled" sounds ok.
Sebastian
I don't think we should add a new HTML attribute for this. Although it is a bit janky and CSS should probably support it better, it's possible to implement this without a new HTML attribute and adding an HTML attribute for this would be mixing styling and semantics, something which we've managed to avoid doing for a very long time now.
I don't think we should add a new HTML attribute for this. Although it is a bit janky and CSS should probably support it better, it's possible to implement this without a new HTML attribute and adding an HTML attribute for this would be mixing styling and semantics, something which we've managed to avoid doing for a very long time now.
Would you mind suggesting an alternative, rather than just saying "no"? This was discussed at length in CSSWG and the conclusion was that an attribute was the best solution.
I'm not sure that was an "at length" discussion, but it's been discussed a number of times since then as well, including in this thread. And the alternative is using a new appearance
value and branching code on that. WebKit at least hasn't fully ruled out that option and I wouldn't really want to consider HTML-based alternatives until we're sure we cannot solve this through styling.
Ok, sounds like we're back to needing a CSS solution. That's appearance:base
and an :appearance-base-supported
pseudo-class (name TBD) to detect support on each element. Right?
@hober and @emilio were concerned about changing DOM structure based on CSS property values, I'm not sure if that's still an issue?
I'm still concerned about forward compat issues. While they were possible with a base
attribute, it seems a lot less likely for someone to add base
to every element on the page than it does for someone to add * {appearance:base}
to a stylesheet.
I think the details of the CSS-based solution are still up for debate. Perhaps as a start we introduce one-off values for each control and once we've covered all controls we can add a catch-all and new controls would have to support it out-of-the-box once you support the catch-all. That might allow us to get somewhere incrementally. E.g., we could start by adding appearance:base-radio
that would only work on <input type=radio>
.
I appreciate the continued discourse. Since we resolved on using <select>
over introducing a new element (eg: selectlist
) I would still prefer a CSS based solution even if we have to do the control by control approach that @annevk outlined. Only concern with the CSS approach is the potential performance implications going back to adjust the tree after style calc.
I think for new elements we should follow the resolution of them being interoperable by default and opt in to native UA styling/tree/external control. This is what we resolved on in Open UI when first discussing this which can be found here.
I had not heard of that before. The WebKit team strongly believes that the defaults should be consistent across controls and thus disagrees with that Open UI resolution.
@annevk yeah, I added this topic to our agenda to discuss tomorrow because since Open UI resolved to use select
rather than selectlist
based on your feedback; it has the domino effect and it will ultimately result in aligning with WebKit's position.
I had not heard of that before. The WebKit team strongly believes that the defaults should be consistent across controls and thus disagrees with that Open UI resolution.
Just to be sure I understand this comment - you're saying you don't think appearance:base
(or whatever the API shape ends up being) should be the default. Is that right? I.e. you're still supportive of a way to get to interoperable styles, just not by default? (We're discussing this tomorrow at OpenUI - it'd be great if you could attend to offer your opinions regardless.)
That's correct. Unfortunately Open UI meets at a time that would be disruptive for my sleep. Aditya will be there though.
I'll be there, but will miss the first 20 minutes.
We can't post our minutes directly here but we just discussed this (we'll carry it forward to next week) in the Open UI telecon. Here are the minutes: https://www.w3.org/2024/01/11-openui-minutes.html
Heads-up, there was a discussion about this issue at OpenUI just now, but the notes got mixed in with this issue. We did not conclude our discussion, so it'll be on the agenda for next week as well.
Hello! I've been implementing appearance:base-select
for the <select>
element in chromium instead of a new HTML element or HTML attribute in response to feedback on the WHATWG thread here: https://github.com/whatwg/html/issues/9799
I was able to implement it by including all of the DOM content needed for appearance:auto and appearance:base-select in the <select>
's UA shadowroot, and then excluding certain parts from the layout tree based on the computed value of the appearance property. It is also possible to adjust certain UA styles based on the computed value of appearance based on findings here: https://github.com/w3c/csswg-drafts/issues/10028#issuecomment-2047865990
In response to fantasai's comment here: https://github.com/w3c/csswg-drafts/issues/5998#issuecomment-816310082
DOM modifications that depend on CSS computed values are messy/difficult to implement
I was able to implement the CSS property without making any DOM modifications by adjusting the layout tree in response to the computed style.
We need to be able to style differently depending on whether the element is basic or not, and an attribute allows for selecting against that.
I was able to change other styles based on appearance here: https://github.com/w3c/csswg-drafts/issues/10028#issuecomment-2047865990
An attribute is less likely to create the forwards-compatibility problem that rules like
* { appearance: base }
would create if only some form elements supported basic rendering and others didn't.
If this is an issue, then we should implement it as appearance:base-select
instead of appearance:base
.
Replying to @josepharhar's comment... For the record, I think appearance: base
would be a better solution if it can be done. I was just listing the rationale behind the previous discussions.
The CSS Working Group just discussed [css-ui] appearance: base to enable interoperable styling of controls/components
.
In response to @fantasai’s comment in https://github.com/w3c/csswg-drafts/issues/5998#issuecomment-816310082 :
The reasons given for handling this as an attribute rather than in CSS (even though it is about presentation and otherwise would belong in CSS):
- DOM modifications that depend on CSS computed values are messy/difficult to implement
That is a separate pain point that should be addressed for authors as well.
- We need to be able to style differently depending on whether the element is basic or not, and an attribute allows for selecting against that.
In what way?
- An attribute is less likely to create the forwards-compatibility problem that rules like
* { appearance: base }
would create if only some form elements supported basic rendering and others didn't.
Assuming that form controls are actually still functional with appearance: base
, this doesn’t actually seem like the end of the world? Compat impact (not just the quantity, but also the type of impact) is a factor to consider when making changes, weighed against the benefit of the change. It doesn’t mean that if there is any compat impact, the change should not be made. In this case, form control rendering without appearance: base
is "anything goes" anyway, so I don't see how a base appearance is any different than a different default style for these use cases.
Assuming that form controls are actually still functional with
appearance: base
, this doesn’t actually seem like the end of the world? Compact impact (not just the quantity, but also the type of impact) is a factor to consider when making changes, weighed against the benefit of the change. It doesn’t mean that if there is any compat impact, the change should not be made. In this case, form control rendering withoutappearance: base
is "anything goes" anyway, so I don't see how a base appearance is any different than a different default style for these use cases.
This doesn't bear out in practice. For example, in 2020, Chromium launched a "form controls refresh", which was just a moderate re-styling of the built-in form controls. In a few cases, those new styles changed the size of elements by a few pixels, e.g. by changing padding from 2px to 1px. We had enormous pressure to change back, and quite a bit of web compat breakage that threatened to require us to roll back the project. And that was just from relatively small changes. I would be very concerned if we just said "it'll be fine to break sites that do *{appearance:base}
in the future". We would really like to make all form controls stylable as future projects, and this would put that effort at risk.
I think @frivoal said it best when talking about the non-auto/none values of appearance
, such as appearance:button
. Those are there for historical and backwards-compat reasons, and the eventual end-state is just auto
or none
. I think this issue adds one more to that list: auto
, none
, or base
. And there's an unfortunate but necessary requirement for some intermediate values (e.g. base-select
) for forwards-compat reasons, but the eventual goal is to get back to just the three values once the work is done to add support for base
to all form controls. That work will take some time though, so it's not practical to try to retrofit all form controls in one enormous project. (The work to do this just for <select>
has been going for 5+ years now. Let's not wait another 20 years to get form control stylability, please. 😃 )
(chair hat off)
It makes sense to me to have an end goal of base
that could be enabled (and tested for support) when and if a browser felt the compat issues were low enough.
Since we aren’t there now I think it makes sense to work on form-specific values on the way towards that end goal.
Thanks for the context @mfreed7, that’s very useful.
Is the idea that we’d start with form-specific values like base-select
and move towards appearance: base
once it works for all elements? Would the specific values be deprecated then?
Is the idea that we’d start with form-specific values like
base-select
and move towardsappearance: base
once it works for all elements? Would the specific values be deprecated then?
That sounds like a great plan to me! As @astearns said, shipping base
could be done when browsers feel comfortable about the compat situation. I think the intermediate values (e.g. base-select
) could be deprecated at that point. Is that the current state of e.g. appearance: button
? Deprecated? I would think we should do the same thing for base-select
.
I don't think we would want to deprecate appearance: base-*
, because going forward they can be used for granular feature detection, since these things are expected to vary in support from platform to platform
I don't think we would want to deprecate
appearance: base-*
, because going forward they can be used for granular feature detection, since these things are expected to vary in support from platform to platform
Ohh, that's a very good point.
I think we should also consider appearance: base-*-excluding-picker
at the same time. This would allow platforms to respect the in-page styling, but still control the picker. And conversely would allow web developers to only worry about the in-page styling, and let platforms worry about the picker.
Thanks for the feedback everyone! I feel like this discussion is moving towards what exactly the new appearance value should be, but I still want to know if using CSS to opt into this new mode is something that the standards groups can agree on. I filed a new issue to discuss particular value(s) for appearance here: https://github.com/w3c/csswg-drafts/issues/10333
After going back and forth between the HTML and CSS groups for some time, we currently have each of them implemented as <selectlist>
and appearance:base-select
respectively in chromium and I'd like some more direction from these groups on which direction I should go in.
For this issue, here is the proposed resolution that I'd like us to discuss next time: "A CSS property will be used to opt in to an interoperable and stylable mode of the select element."
Yes, the WHATNOT joint meeting seemed to, iirc, find the idea of using appearance
to trigger the switch to be workable, since the only changes needed were on the box tree side, not the element tree. Given that, we should resolve to accept that behavior.
The CSS Working Group just discussed [css-ui] appearance: base to enable interoperable styling of controls/components
, and agreed to the following:
RESOLVED: use css to opt into styleable mode
So just a quick followup: the plan is for @annevk or someone to open a fresh issue describing the ::picker()
proposal in more detail. Is that right?
From the minutes:
<chrishtr> zcorpan: should we use appearance: base as a trigger to turn off button layout
<chrishtr> emilio: didn't ian have a plan to do that w/o new CSS?
<chrishtr> chrishtr: yes
I'm not sure what this means, but sounds like appearance: base
could be the fix to #3226? 👀
Can we close this issue now that we got a resolution?
Would we have a separate issue then to specify it?
The below comment is in reference to an explainer level proposal regarding a new pseudo element and a way for an author to opt-in to a standardized DOM and styles, currently being proposed is
appearance: base
.Originally posted by @zcorpan in https://github.com/w3c/csswg-drafts/issues/5914#issuecomment-778089292