[css-selectors] Can you standardise a pseudo-element selector for file inputs? #5049
Comments
|
The CSS Working Group just discussed
The full IRC log of that discussion<dael> Topic: [css-selectors] Can you standardise a pseudo-element selector for file inputs?<dael> github: https://github.com//issues/5049 <dael> emilio: Apparently all others UI than FF have a pseudo-element for this. <dael> emilio: Is anyone planning to remove it? If not, can we add a specific pseudo for this? <dael> Rossen_: Is question about if component model for the control will change so there's no button? <dael> emilio: No, question is that all of them have a button and all UI except FF expose as a pseudo element. ONly reason to not make a standard version is if underlying model will change. I don't see a reason not to add this unless there are objections <dael> TabAtkins: Still vaguely uncomfortable about exposing internals of form controls, but I'm comfortable with this one. All files must have button and I expect will in future <dael> emilio: Ideas on name? <dael> TabAtkins: In issue works for me <dael> Rossen_: Can we future proof more? <dael> Rossen_: Currently ultra specific to the input type = file. If we're going down the path of exposing selectors to target form controls I would hope more generic so if there are other input types that can have a button that this selector will match with them <dael> emilio: Not sure I agree. All different input types have values, mostly prefixed pseudo-elements. I don't think you want...I'd rather it be specific than potentially expand in the future and websites change b/c of that <dael> TabAtkins: Comfortable with button name. This is a naming convention that we could extend <jensimmons> I wanted to ask "how does this fit with the overall form control research project that's underway?" (Instead I hung up the call) <dael> smfr: I don't like upload in the name. It's choose a file. Not sure it should look the same b/c this is apsecific behavior about trigger UI file selection. If it says only image types it opens photo picker. Name needs to be generic <dael> emilio: Edge name is ::msbrowse <smfr> ::file-chooser-button <fremy> ::file-picker-button <dael> Rossen_: WE spent quite a bit of time bikeshedding that name back when we expanded our control model. I think it was debated quite a bit and I was on the other side of the argument. If everyone else is fine with it, sure. <dael> jensimmons: Curious about work around form control styling coming in the next few years. Will there be a pseudo-element for buttons? What's the names that have been discussed there. <dael> TabAtkins: I believe gregwhitworth and Nicole Sullivan have been working on that and doing user research. Work is ongoing but not sure the results. <dael> jensimmons: I know it's massive and lots of questions, but this feels like it should be designed in the context of that. Though I don't mean don't push for 2 years <dael> TabAtkins: I feel you. I think the use cases and name are clear enough I think this would be an alright one off to do. <dael> Rossen_: Sounds like general agreement around the reasoning to expose this. Naming-wise let's not spend hte hour bikeshedding. file-chooser or file-picker sort of fit what has been explained even if case you open an image gallery it's still a file <dael> Rossen_: Can we pick one and move on? file-chooser or file-picker are good enough for now? <fremy> +1 to either <fremy> Rossen_: ^_^ <dael> Rossen_: I'll choose file-chooser. We can rename later <jensimmons> I'm ok with file chooser or picker or upload, etc. I don't really like "browse" — it's far too generic in the context of "browser" and plus a younger generation of people don't really know what 'browsing files' means.... <dael> Rossen_: Obj to expose this selector and name it ::file-chooser <dael> RESOLVED: expose this selector and name it ::file-chooser <dael> RESOLVED: expose this selector and name it ::file-chooser button <emilio> `::file-chooser-button` |
|
Can we get an anatomy definition for this in Open UI. The primary purpose of this site is to begin defining the actual pieces of the control from a functional perspective and align across the industry. I can help someone out here. Let me know if you'd like to setup 30 minutes to get it rolling. For the file input anatomy itself it shouldn't take too long. Here's the contribution docs: https://open-ui.org/contribute |
|
I'm really happy we made a clear and quick decision on the call we just had. Also, perhaps the name needs a bit of additional consideration? Testing, really... test the name with Authors to make sure we make the right call. So I tweeted: https://twitter.com/jensimmons/status/1263142931034234886 to see what Authors think. |
|
Thanks @jensimmons - only reason I want some research done is to ensure that we aren't standardizing ourselves into a corner. Since there is a web compat hit this may be fine but in our peeling of the |
|
@gregwhitworth here's my initial draft. The good thing is that all the systems listed there which have file inputs have a button of sorts, fwiw. So I think this is pretty sensible over-all. |
|
Should this be a tree-abiding pseudo? |
|
Probably. |
|
I will note that there are a lot more search results for "file picker" than "file chooser". And also most of the ones for "file chooser" in quotes seem to be about some Java thing... |
|
And yes, it's a tree-abiding pseudo. |
As per w3c/csswg-drafts#5049. Don't enable it unconditionally just yet, as the name may change. I had to move some rules in forms.css because otherwise you get specificity conflicts. Differential Revision: https://phabricator.services.mozilla.com/D76214 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1635675 gecko-commit: 82df6f70ec60b3b63bca95f2dfe170e336d84c0c gecko-integration-branch: autoland gecko-reviewers: jwatt
…watt As per w3c/csswg-drafts#5049. Don't enable it unconditionally just yet, as the name may change. I had to move some rules in forms.css because otherwise you get specificity conflicts. Differential Revision: https://phabricator.services.mozilla.com/D76214
…watt As per w3c/csswg-drafts#5049. Don't enable it unconditionally just yet, as the name may change. I had to move some rules in forms.css because otherwise you get specificity conflicts. Differential Revision: https://phabricator.services.mozilla.com/D76214
As per w3c/csswg-drafts#5049. Don't enable it unconditionally just yet, as the name may change. I had to move some rules in forms.css because otherwise you get specificity conflicts. Differential Revision: https://phabricator.services.mozilla.com/D76214 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1635675 gecko-commit: ff6c38ffa425135c02cd9988d8dfb6f12f63a1b5 gecko-integration-branch: autoland gecko-reviewers: jwatt
"file upload" is way ahead in search volume when coupled with either css, or button. As I wrote in the WICG draft thread:
It's already "upload" in |
|
The only consideration of upload in the IRC log was
This is not really true because the act of choosing a file is equivalent to uploading it. Choosing a file causes (a copy of) it to move "up" from the context of the OS to that of the web page/app. |
|
A file input only selects a file, submitting the form uploads it. They are not equivalent. That said, I'm not thrilled with the name myself. But it's still subject to change. We had to pick something in the meanwhile. |
@plinss This is barely technically correct. A vanilla form won't submit the data until the user chooses, but they are the minority. Once chosen, a file is no longer private to the user. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file As soon as a file is selected, the |
|
In your example, it's still JS that's uploading the file, not the input control. It's also entirely possible that client-side JS acts on the file without ever uploading it, see the second half of the sentence you quoted from MDN. I also find it interesting that when describing the action you used the terms "chosen" and "selected". An "upload control" as you describe it, is simply a file select control with script to do the upload. Without the script, or a form submission by other means, there is no upload. Whether or not this is the most common use, it's still not descriptive of what the input control does. As I said, I'm not a fan of the current name, but I'm strongly opposed to calling any part of a file input an "upload" control, this would be a disservice to authors. |
|
Were I writing standards docs, I would use the word "select" over "choose", because that's what countless other docs already do. Referring to it as an "upload control" is not my nomencalture, it's the spec and is independent from associated script.
…who are already referring to it as an upload control and will continue to in the future, not least because of I don't think "upload" is the only answer, more that "choose" should not be. I've only bothered writing anything about this because it seemed that existing conventions were being ignored. I'll stop bike-shedding now. |
There are other precedents for "file chooser", fwiw: https://developer.gnome.org/gtk3/stable/GtkFileChooserButton.html |
… in all channels. See w3c/csswg-drafts#5049 Differential Revision: https://phabricator.services.mozilla.com/D88995 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1662478 gecko-commit: 98afbf7fa4fdf697acdd6335cd00c8c315978c2f gecko-reviewers: jwatt
… and enable it in all channels. r=jwatt See w3c/csswg-drafts#5049 Differential Revision: https://phabricator.services.mozilla.com/D88995
… and enable it in all channels. r=jwatt See w3c/csswg-drafts#5049 Differential Revision: https://phabricator.services.mozilla.com/D88995 UltraBlame original commit: 98afbf7fa4fdf697acdd6335cd00c8c315978c2f
… and enable it in all channels. r=jwatt See w3c/csswg-drafts#5049 Differential Revision: https://phabricator.services.mozilla.com/D88995 UltraBlame original commit: 98afbf7fa4fdf697acdd6335cd00c8c315978c2f
… and enable it in all channels. r=jwatt See w3c/csswg-drafts#5049 Differential Revision: https://phabricator.services.mozilla.com/D88995 UltraBlame original commit: 98afbf7fa4fdf697acdd6335cd00c8c315978c2f
… in all channels. See w3c/csswg-drafts#5049 Differential Revision: https://phabricator.services.mozilla.com/D88995 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1662478 gecko-commit: 98afbf7fa4fdf697acdd6335cd00c8c315978c2f gecko-reviewers: jwatt
… and enable it in all channels. r=jwatt See w3c/csswg-drafts#5049 Differential Revision: https://phabricator.services.mozilla.com/D88995
Is there a reason the actual spec change for that has not been made yet? Is there an open PR for it? |
|
#5788 is the spec PR. |
|
web-platform-tests/wpt#26876 un-tentatives the tests. |
They're standard, see w3c/csswg-drafts#5049.
…tests., a=testonly Automatic update from web-platform-tests Un -tentative file-selector-button tests. (#26876) They're standard, see w3c/csswg-drafts#5049. -- wpt-commits: 81dc4e173e3db82c8fb7a2c533c646f91b385107 wpt-pr: 26876
…tests., a=testonly Automatic update from web-platform-tests Un -tentative file-selector-button tests. (#26876) They're standard, see w3c/csswg-drafts#5049. -- wpt-commits: 81dc4e173e3db82c8fb7a2c533c646f91b385107 wpt-pr: 26876 UltraBlame original commit: 7f23899b3f502c8e3a1a7efac5201408fb7d3466
…tests., a=testonly Automatic update from web-platform-tests Un -tentative file-selector-button tests. (#26876) They're standard, see w3c/csswg-drafts#5049. -- wpt-commits: 81dc4e173e3db82c8fb7a2c533c646f91b385107 wpt-pr: 26876 UltraBlame original commit: 7f23899b3f502c8e3a1a7efac5201408fb7d3466
…tests., a=testonly Automatic update from web-platform-tests Un -tentative file-selector-button tests. (#26876) They're standard, see w3c/csswg-drafts#5049. -- wpt-commits: 81dc4e173e3db82c8fb7a2c533c646f91b385107 wpt-pr: 26876 UltraBlame original commit: 7f23899b3f502c8e3a1a7efac5201408fb7d3466
…tests., a=testonly Automatic update from web-platform-tests Un -tentative file-selector-button tests. (#26876) They're standard, see w3c/csswg-drafts#5049. -- wpt-commits: 81dc4e173e3db82c8fb7a2c533c646f91b385107 wpt-pr: 26876
…able it in all channels. See w3c/csswg-drafts#5049 Differential Revision: https://phabricator.services.mozilla.com/D88995
As per this Mozilla bug, there are already vendor-specific selectors to style buttons rendered within
<input type=file>controls for Webkit and Trident engines. Webkit alone represents the majority market share, EdgeHTML is now "legacy", leaving Gecko/Quantum as the only current major engine without it. Mozilla is reluctant to add their own vendor-prefixed selector when the sensible choice would be to make::file-upload-buttonofficial.The text was updated successfully, but these errors were encountered: