Mastodawn

Benjamin Seber Mar 22

There it is! Finally, a real solution for how to style all of the HTML form controls using your own custom CSS to change anything — building on an interoperable UA set of defaults. It only took 30 years!

First will be the chance to style the “in-page” controls (the part embedded in the webpage), plus the popover for <select> (the part that appears “over top of” the page). Later we’ll do popovers for more things — like the date picker, etc.

Read about it here: https://drafts.csswg.org/css-forms/

CSS Form Control Styling Level 1

Jen Simmons Mar 21

Some things to know:

- This complements the work Open UI is doing (on popover, <select>, etc). It does not *compete*. They go together.

- This CSS specification aims to let you style *all existing form controls*. We believe in creating a single comprehensive system for the entire thing all at once, not layering ideas on top of each other piecemeal, having to fix mistakes we just made.

- We want feedback to make sure we get the whole plan right before any browser ships. Which will take time.

Paul Shryock Mar 21

@jensimmons feedback: this is awesome.

Jon Lunman Mar 22

@jensimmons I am overjoyed to see progress on this. I feel like form controls have been neglected for over a decade, with inconsistent browser implementations that are difficult or impossible to override. This has lead to so many bloated JS component libraries reinventing basic form inputs out of divs. 🤮

I can't wait to see where this goes.

Nathan Knowler Mar 21

@jensimmons Has any browser started prototyping with these?

Jen Simmons Mar 21

@knowler Not yet. The First Public Working Draft was just published yesterday.

@knowler @jensimmons fwiw I've been doing some very rough prototyping both via custom elements and browser hacking (just replacing the existing stylesheet rather than dealing with the appearance switch) to see what kind of UA stylesheet rules we might be missing (that's already fed some changes into the spec).

Thomas Michael Semmler Mar 21

@jensimmons yes, this is what I want and what I think we need. Not creating DOM nodes with CSS for carousels.

Very excited for this, especially that this evolving via standard first.

Jen Simmons Mar 21

@nachtfunke Standards-first is truly important. People have had ideas of how form controls and their custom styling should work for THIRTY YEARS. There is no lack of ideas. What's been lacking is consensus on how to move forward. Anyone pushing a one-company / one-person agenda without true cross-browser, cross-working-group consensus is not going to break the three-decade old log jam.

Eric Eggert Mar 21

@jensimmons This will be such a game changer for accessibility.

Jen Simmons Mar 21

@yatil Yes! Hopefully it will be a massive change, and web developers will stop avoiding HTML form controls. The work Open UI is doing to add functionality will be key as well, so more complex (than the OG) controls can also be in HTML.

shom ✊🏽🐧📷🤿🏔️🪚Mar 21

@jensimmons so when this gets implemented we're legally allowed to put a piece of tape under the mouse of every developer that doesn't use standard form controls?!

James Baker 🍁Mar 21

@jensimmons select option:hover could be the border-radius of 2028…

Jeremy Keith Mar 21

@jensimmons I’m very excited about this! …and I’d love it if the legend element could be included in the list:

https://adactio.com/journal/21797

Style legend

Why I’d like to see one or two more elements included in the new proposal for styling form controls.

Jen Simmons Mar 21

@adactio Did you see we started with design principles!!
https://drafts.csswg.org/css-forms-1/#basic-appearance-principles

We were thinking of you. Showing off your design principle collection as examples.

CSS Form Control Styling Level 1

Ollie Boermans Mar 22

@jensimmons @adactio Keith is undoubtably a “Style Legend”.

However, in this instance he means the fieldset kind of legend.

Furbland's Very Cool Mastodon™Mar 22

@jensimmons I will have you know, Mx. AI-Generated-PFP-For-No-Reason, that I am still using tables with the BGCOLOR attribute. The other day, I gave a website a vertical <marquee>. I don't really grasp what a flexbox is, can't you just do that with tables?

I hope this post distresses you significantly /lh

Furbland's Very Cool Mastodon™Mar 22

@jensimmons I code like it is 1997 and you cannot stop me. As a result of this, I have had no problems with forms because I do not need to put them in a JS carousel or make their buttons flat or whatever it is people are doing with forms these days.

I still put HTML comments in all my script and style tags.

Papageier Mar 22

@jensimmons Steven has finally completed XForms? 😂

Emma (has_many_books of old)Mar 22

@jensimmons go, go, go!

mirabilos Mar 22

@jensimmons egads noooooooooooooooooooooooooo

@jensimmons all I ever wanted were UI controls that look ok without any styling, like any other UI toolkit ever made.

Brad Dougherty Mar 22

@jensimmons will Safari have an preference for the user to have Safari ignore the styling done with this and show the default appearance?

medium rare bird Mar 22

@jensimmons I've always thought it's nicest to work with native form controls that look the way I'm familiar with. what advantage is there to letting the page author control their appearance?

tambourineman Mar 23

@migratory @jensimmons web devs/designers will do it anyway hacking with divs and JS, but it’s never as accessible, predictable, bug-free and fast as the native controls. There will be no excuse not to use them.

Torstein Mar 23

@jensimmons @siracusa can someone eli5 please? i feel like i should be excited about this, but i am not a web developer so i don't understand what's this about.

Jen Simmons Mar 23

@torsteinv @siracusa Since the very beginning, the web has been interactive. HTML includes form controls in the programming language. But often web developers don’t use them, and instead try to build their own with JavaScript. (Usually slower and without proper accessibility.) Why do they do this? They either need functionality that HTML doesn’t have, or they want to visually style them with custom branding.

This proposal invents technology to solve the second problem.

@jensimmons I hate to think what monstrosities this will spawn.

O Óscar Mar 28

@jensimmons Can I suggest to include also datalist elements? 🙏