HTML isn’t done! (Chrome Dev Summit 2019)

[@fernandolunadev]

Is amazing to hear and see Microsoft and Google working together for the standarization of web elements(at least in form elements). Thanks!

[@braindeveloperdimensional5579]

Microsoft is now using Chrome's code to rebuild their Edge browser. They are now big time companions because of the huge failure of Microsoft's previous browsers.

[@fernandolunadev]

@@braindeveloperdimensional5579 I think both companies are building a web browser with the same compatibility and usability for any user and collaborating with Chromium's code. And in this video, Microsoft's Edge Team and Google's Chrome Team are cooperating, thinking and designing the Forms elements, to get a unique design. I code mobile web apps and progressive web apps to teach coding to other persons and until now, is really tired planning a class where you need to get or dedicate some examples and screenshot, limitations and many other tricks, to think and build a unique base code to work in any web browser. I hope the continuos collab between both companies to get future products more homogeneus. I am sorry for Firefox and Apple who don't collab on the same purpose.

[@vkray]

Fernando Omar Don’t worry. Donald Trump will act.

[@robinware77]

Tough crowd lol 😂 I would've been the only one laughing.

[@rir360master]

They are all professional serious developers.

[@Masounifier]

mozilla didn't come

[@caaiiro]

@@rir360master professionals can laugh you know

[@rir360master]

@@caaiiro Yeah, and I also mentioned serious homie.

[@valen8560]

@@Masounifier 😂

[@matthewcullum2455]

This whole thing feels like a Microsoft advert and you know what? I'm not even mad.

Any signals from Apple that they want to collaborate on this effort? Is there any formal standardization process which will force consistency between the browsers?

[@TopicalAuthority]

Nice question bro.

[@robertlinder8464]

Browsers usually adhere to specifications, for example, the select element is defined in html.spec.whatwg.org/multipage/form-elements.html (issues raised in github.com/whatwg/html/issues/ ). Proposals usually have to go through W3C TAG (World Wide Web Consortium's Technical Architecture Group) for reviews: github.com/w3ctag. WICG (Web Incubator Community Group) is a forum for proposals and discussions (discourse.wicg.io/, github.com/wicg/ ) which developers are super welcome to contribute and participate. Welcome to the Open Web! :)

[@a-yon_n]

Maybe someday Apple may adopt Chromium, but giving feedback and contribution? I don’t think so.

[@gregwhitworth3069]

That is a good question - I have spoken with the primary controls owners at Mozilla, Apple and of course Google and all agree that this is a pain point that should be addressed. Now we need to get a proposal out there in order for them to provide feedback on, which we're actively working on.

[@fernandolunadev]

I don’t believe that Apple thinks to collaborate with Google and Microsoft for the standarization of the web elements. My thought starts from the moment when Apple forbid to other companies to distribute a web browser with a different web engine that Safari. If Apple starts collaborating with Google and Microsoft on web browser’ field will means that Apple should be launch a new version of Safari desktop and mobile every month. Apple only thinks in launch the 'perfect' hardware with an acceptable operating system.

[@JKhalaf]

I didn't even know the progress, meter and range elements existed! :/

[@JohnSmith-is6ns]

dude they lost connnection with reality long time ago in private google city they living in for years

[@AundreL]

amazing what happens when large companies start to collaborate instead of fight each other.

[@vkray]

Aundre Lattie MAGA 2020.

[@jasonc6241992]

The enemy of my enemy is my friend. (China ripoffs and controlling our American companies in their country )

[@citguy]

I want native combo boxes (select + text input) so that you can provide a list of pre-defined options, but allow free-form entry if none of the options are satisfactory. Example use cases include categorization and tagging.

[@gregwhitworth3069]

As I noted in the above comment, we have every intention to enable this - but the first and top priority is to unlock styling of the select. The current plan in which we plan to make this possible should make building out a true solution for a good combobox should be relatively straight forward following that work.

[@philadams9254]

What about ?

[@SazLowify]

KZbin comments don't have a understandable set order. "As I noted in the above comment" means nothing.

[@mrleblanc]

Isn't a toggle switch just a styled checkbox ? Why would you need a new element for that if you can easily style the checkbox

[@martinfink6234]

We should be able to style alt text, making it more convenient to make accessible pages. Also, we should be able to define the amount of visible options in a drop-down list, and a decimal value should be valid. If I have more options in a drop-down list then I am able to show at once, I want to give a visual clue by only revealing half of the last visible option. (E.g. would result in a drop-down list with 10 visible options where the last of them is only half visible)

[@renwar]

Just upgrade then we're done.

[@oussama40612]

😂

[@basicgaming3056]

these two perfectly represent how Microsoft and Google work together

[@nwoo2275]

Hmmm....Make me wonder why Chrome employees use highcharts instead of google chart @13:20

[@Fadhilx]

i love "vh" css unit.....until i met android and iphone :(

[@Tatubanana]

Why?

[@christianmartinez2179]

@@Tatubanana the god damn collapsible title bar gets in the way

[@shubhamsehgal2336]

wtf is wrong with it? I think you didn't in the head tag😂😂😂. I am using vh and it works awesome!

[@wojtek9395]

@@shubhamsehgal2336 There is indeed a workaround required. I stick to creating css var --vh manually and updating it on scroll, worth checking. That way elements stuck to the bottom stay visible all the time.

[@shubhamsehgal2336]

@@wojtek9395 You can just put html, body { height: 100vh; margin:0; padding: 0; } and it might resolve your issue I guess🙄

[@BruceArmstrong09121997]

I want a select with a text box so that we can search the options I want in native html man!! Ofc select multiple options at a time in native html

[@vorniy]

The second you can do already

[@BruceArmstrong09121997]

Ya i forgot... Just adding multiple in the tag!! Thanks for reminding .. I usually won't use it.. If textbox is added in native html... Then multiple willbe used along easily... I find difficultly scrolling my select .. u know?!

[@vorniy]

@@BruceArmstrong09121997 Yes, hold ctrl to select multiple options

[@BruceArmstrong09121997]

@@vorniy I'm talking about select multiple.. but i want a textbox embedded with select so that when drop-down comes we can also type text on focused area... Just like Google search thing Just from native html.. no javascript or css included

[@gunsler]

Firefox has the select search, you just need to set dom.forms.selectSearch to true in about:config.

[@MrLuke255]

>both Mac and Windows Great guys, I guess it's not the year of Linux yet

[@ricecake1228]

Yeah as if developer's don't develop on Linux

[@JameelAhmedMemon]

By the way chromium starts for Linux and went cross platform then Google took it and made chrome browser and chrome os So you are wrong my friend

[@steppenwolf_666]

Then why is Microsoft trying to jack Linux? Or do you really believe all the influence they're building (kernel contributions, www.linuxfoundation.org/press-release/2016/11/microsoft-fortifies-commitment-to-open-source-becomes-linux-foundation-platinum-member/ , www.linuxfoundation.org/blog/2018/06/microsoft-buys-github-the-linux-foundations-reaction/ , techrights.org/2019/06/25/linux-foundation-weakens-self/ ) is for altruistic motives? Just wait until they buy the trademark from Linus. Then it's officially dead. One word... fork.

[@neutralface]

Most of the user interactive (buttons, inputs..) elements were so outdated. This is a huge step forward already!

[@serhiimamedov]

All you have to do is to make select menu to be rendered with browser and not operation system (this will enable styling it with css)

[@godchuanz]

Someone educate me: why add toggle-switch when we already have checkbox? What can we do with toggle-switch that we can't with checkbox?

[@anhkhoanguyen8562]

for me it's about meaning: switch is about on-off, while check-box is about yes-no. You will put the check-box in user form, but you usually put switch in settings options, for example. Also, different visual. Again, even with similar functionality, having different options is always better. And toggle-switch is much more popular and easy to use in phones than check-box, while check-box is better if you use mouse, which you should notice.

[@godchuanz]

@@anhkhoanguyen8562 I'm not sure that on-off is different from yes-no. Also, you mention "different visual", which should be done via CSS. With stylable form elements, I can style a checkbox in any way I want in CSS. When it's in the "on" state, it could look like a blue tick, green tick, a mickey mouse icon, or even an iOS toggle switch. And, no... having two different options with the same functionality is ALWAYS bad. It's confusing.

[@braindeveloperdimensional5579]

@@godchuanz in my opinion, toggle switch and check boxes should have different purposes. Check boxes should be used when we are selecting from multiple options but toggle switch should be used for On and Off purposes. Using check boxes for On/Off functionality in 2019 is such a drag.

[@godchuanz]

@@braindeveloperdimensional5579 are you saying that using a checkbox for "I have read the terms and conditions" is (or will become) semantically wrong?

[@braindeveloperdimensional5579]

@@godchuanz I said that toggle should be used in On/Off situations, how can you turn Off the "terms and conditions"? Toggle switch should be used in settings page.

[@wiktork.8910]

Previous version of time input can be simply focused and quickly updated using mouse wheel. Now it requires opening lookup, changing values by mouse wheel and then clicking outside control to accept changes. Two additional steps are required from user to set the time!!! Could you restore setting time by mouse wheel without opening lookup?

[@tycorrell5390]

I typically disable all WebKit styling, even with these changes due to cross-browser UI fugliness. I'd like more functionality over design changes. Like a range slider that accepts two handles. And built-in radial progress bars, built-in charts (pie, bar, etc.). Progress bars that display numbers (is possible with pseudos in Firefox if I remember correctly). Disabling the auto fill styling on Chrome: If I have a black background input and it auto fills, it turns white.. the only way to fix that is kind of a hack (not telling in case you're doing this on purpose). Multiple input s that work with more than emails. This only works with emails.

[@calimio6]

The future of forms looks awesome. I'm eager to see this implemented soon.

[@tycorrell5390]

Built-in tag forms and tool tips! Infinite pseudo elements. Pseudo elements on everything!!!

[@alireza29675]

New Edge is surprisingly well-made and I see a good future for it. Currently watching this using Edge Beta.

[@gregwhitworth3069]

AWESOME!! Thank you so much for taking it for a test drive.

[@joech1065]

The only way to use Edge is to download ”Firefox” or ”Chrome”.

[@alimertc]

After making the worst 10 browsers of the world it is shocking to see they made one that does not suck that much

[@germwire90]

Are you working on Animated Grid Layout anytime soon???

[@Sttuey]

Glad you guys are looking into features that we've been expecting for 10+ years!

[@Meleeman011]

yeah i would be pretty happy about select being easier to style, i would also want check boxes to be styleable, as well as radio buttons so that I can make my css framework look much cooler

[@roboko6618]

Could it be? Microsoft helping design the web for the future, instead of holding it back? Are the IE days ending?

[@philadams9254]

These days, the big bad wolf is Apple, who are behind the times with Safari and restrictive/lazy in other ways. MS has been reformed for a while now

[@softwarelivre2389]

Microsoft helped to spread the adoption of Javascript (or Jscript kkkk), aswell as async AJAX calls and css grid templates. So yeah, it was bad, but some good things came out of it.

[@danh5637]

The problem is the elements you have 'updated for touch' actually wind up sucking for those using a cursor. And this is really to placate some Windows and Chromebook users who have decided to build a hybrid cursor/touch system. It really winds up being a solution that is really not optimised for either.

[@Andrey-il8rh]

for God sake!!! 🙏🙏🙏

[@sifiso5055]

😃

[@bibibobs]

css scroll-snap! :)

[@Cm0nd00d]

yes! the new scroll-snap css property removes the need for 💪

[@Andrey-il8rh]

@@Cm0nd00d please, send an example of full featured carousel built with scroll-snap

[@Andrey-il8rh]

@@Farbfilmstudio ?

[@itedjeregodspower]

It's nice to see Microsoft and Google collaborate. If the form element have good UI, that will save me lots of CSS code. For now Bootstrap to the rescue.

[@megri3441]

file element's content is not changable even File API. I have to send file content to server apart from main form post. no way to pick image using form file element and crop client side and modify form file element using cropped image content.

[@raulgbcr]

Why don't work with Firefox too, if you want to really make a standard then you should get in touch with all the browser developers, having a lead on browser usage doesnt give you the right to do things alone and push the others to follow with a bad implementation, work together and freaking fix browser specific attributes and labels before styling forms, please...

[@TheDuckPox]

you know that's not possible right?

[@gregwhitworth3069]

As noted in another discussion, we are - that's the entire point of Open UI which is to incubate and standardize the controls. One of the main problems of the form controls currently is that they aren't consistently implemented across browsers, so it's irrelevant if we make it so you can style the Chromium based but not Safari's or Firefox's. I've spoke with the controls and components teams at Firefox and Safari before even beginning this work as I know if it isn't standardized then this becomes throw away work. I go over this more here: www.gwhitworth.com/blog/2019/07/form-controls-components/

[@ChrisLocke1969]

Today, it doesn't really matter what you guys do, we are going to style it the way we (our clients) want.

[@keokawasaki7833]

Chris Locke yeah but, if they provide us better tools to style them... it would totally take some pain away from my butt.

[@ChrisLocke1969]

@@keokawasaki7833 true, true, especially the slider, checkboxes, and radios. But still, at this point, we have solutions without them 😁

[@gregwhitworth3069]

@@ChrisLocke1969 Yep, you're correct. That said, that's why I did the live survey. We know from investigation that while there are work arounds to achieve this rarely do all solutions actually cover everyone where they include all input modalities, any AT, keyboard, high contrast, performance, etc. So if we make it so that these controls/components that do get this extensive testing when many authors, to your point, want to adjust the UI/UX a bit to meet their client's needs we'll improve the platform for all users. Not to mention the savings for web developers having to do this redundant work.

[@betaakurnia3998]

so how this work? can i use it right now?

[@HareesIN]

In which browser is this CSS work, In Chrome or Edge ?

[@stephanedubedat5538]

Both

[@nepalcodetv6298]

Good Finally Something for HTML Now Just Add Function To Divide as Component

[@snakemanluffy7645]

wow! big change is coming in form. finally ugly form will be gone!

[@TechnoTrace]

I'm too much excited for the future.. Cuz you see a lot a fields are seeing innovation which we never expected of... AI improvements to Native like experience in Web applications... What else lies ahead in the future...😲😲😊

[@xrishi20]

05:06 finally i felt there are people over there

[@ZIMLEARN]

Yes... let's give the radio button its own tag - radio - with nested option tags like select and get rid of the name parameter completely and just use id to collect form data...

[@ZIMLEARN]

And while you're at it... selected is a fine parameter for checked. And... everywhere you put a URL just call the parameter url instead of src, href and action.

[@ZIMLEARN]

Oh... and if you could only make the little grip on the slider vertical to handle not slipping when you move the slider horizontally.

[@maximilian8864]

* Safari left the room *

[@novagaming7928]

Web dev community !!!! Assemble !

[@danielzaiser]

Uhm i hate to say it, but these differences in design from browser to browser is really annoying... Probably have to design everything 100% individual to get the desired look without side effects

[@rishavbhowmik7778]

Safari's Date & Time input spinners are the best

[@ricecake1228]

Wished Mozilla Firefox was in this show.

[@royz_1]

The speakers: We added these super cool features and improved these UI elements Audience: meh The speakers: we made 36 commits Audience: wooohh.. heck yeah *applaudes

[@marcelopotty5218]

Now please give us UDP Sockets PLEASEEE :(

[@TesterAnimal1]

You’ll never create an HTML select control which can be as flexible as a well coded combo with all the remote or local querying and filtering capability and flexibility of how to create elements in the dropdown. Multi select with chips to reflect the selection? You’ll always be behind.

[@nullbeyondo]

Actually they only need to add HTML support, the rest can be done by a framework like SvelteKit which manages the DOM for all that kind of quering. Not only stylin options but itself (like adding a ::toggled CSS state and then we can customize select so that when it is toggled, add like a dropdown arrow elemnt that flips over on toggle and so on); I don't have anything exact in mind, but adding HTML support to any native element is a step in the right direction cause WHY on earth shouldn't you be able to style them!? Just what I think.

[@flutterflowexpert]

Hello Microsoft. Where have you been, we missed you all that time :)

[@gregwhitworth3069]

Right back at ya

[@SeanGoresht]

We already have the element, which can be completely customized while masking the element. Toggle switches? Really? We already have . UITableView and lazily loading s makes sense, but we have far more pressing matters like figuring out how to style on touch devices. It seems to me like the Chrome/Microsoft team are trying to add features that will only get used, and not features that will help those who get left behind (the real negligence of accessibility). Maybe instead of trying to add fancy bells and whistles (a la Pete Hunt's undoing of web standards), the team(s) can focus on delivering the long-awaited features we were promised almost a decade ago with HTML 5: , , and .

[@softwarelivre2389]

Well, I believe something is better than nothing. While I agree with you in some points, having better out-of-the-box radio and checkbox buttons, aswell as better customizable select and progress-bars are really welcome anyway.

[@brielov]

The crowd is not very excited

[@rantceck]

plot twist: there is no crowd

[@phisch95]

I'm very happy that there is no random outburst of whoos and yeahs and claps at a tech talk actually :D Look at the latest Github Universe Mobile Video if you're looking for that ;)

[@phisch95]

@@brielov True that.

[@sten6160]

A Tab please!

[@chordfunc3072]

lol, just give me a predictable way of positioning and styling things in every browser...

[@AbisGamer]

Why does my php download insted of running ? I belive everyone here are big programmers

[@calimio6]

you need an appropiate server to run php

[@gregwhitworth3069]

Yeah, @camilo is correct - head over to stackoverflow.com and ask your question. Ensure that you provide what server you're using but ultimately you'll need to ensure that the correct PHP version is installed and your server config understands how to serve php files. Good luck!

[@TheDuckPox]

why samsung internet? why not ask about konqueror instead. :))

[@shgysk8zer0]

Google and the renamed Internet Explorer announcing issues that should be going through and decided by the w3c. This is why I hate monopoly market share.

[@gregwhitworth3069]

Thanks for the feedback - but you must have missed the aspect of Open UI noted at the end which is in the W3C. If you read my first blog post on this subject here (gwhitworth.com/blog/2019/07/form-controls-components/) I outline that in our opportunity analysis we determined that if this is not a standard and implemented interoperably across all browsers then the rest of the work is pointless. As such, before we said a public word I reached out to the various browser vendors to ensure that this is something they're willing to entertain as this isn't the first time this problem has been tried to be solved and so I wanted to ensure we can have all browser vendors and more importantly the designers/developers of design systems/component libraries are engaged in the process within the W3C to ensure that what we build meets the needs of the web developers. Hope that clarifies things, and thanks for your candor.

[@shgysk8zer0]

@@gregwhitworth3069 I must have missed that. I guess that's what happens when the video plays while I'm making breakfast. I'm predicting that opening up to allow HTML is going to cause issues on some occasions, depending on constraints. For example, let's say that I put an SVG icon in, but it doesn't have a set width/height. Maybe the stylesheet is slow to load for some reason. User expands the and finds one to be effectively full screen. I can say that my instinct on how to do this would have started by seeing what could be done similar to , where an icon attribute is available and nesting is possible. Excited about a standard coming along to address such an old issue. I've done quite a few hidden inputs and used a number of selectors to deal with some of these, and have been hopeless in others.

[@gregwhitworth3069]

@@shgysk8zer0 No worries - thanks for keeping us hones; we're committed to standards and ultimately it supports our vision for an open web and is even more critical now that we're also working in the Chromium project.

[@guitarfumar]

Is this 2010? Yall just sip coffee and ride bikes all day huh?

[@guyincognito5663]

Uh, I just hope Firefox won’t lag behind on all that.

[@OggyDesiDog]

You use fire 🦊

[@AnonymousUser77254]

Power Me・20M views it's just a more mature browser. It does things like tab handling way better than Chrome. Seriously Chrome, just making tabs smaller to make them fit instead of adding a scroll feature?

[@stephanedubedat5538]

Firefox is obscolete

[@AnonymousUser77254]

Stéphane Dubedat Firefox recently had a complete overhaul. It's far from obsolete.

[@Khaltazar]

The before is better than the after for meter, why would they even think that after is better? It is tiny and bland.

[@orlandogarcia4403]

Native Material Design Support

[@GommeAntiLegit]

Yes. Yes. Yes.

[@Rundik]

new tag was introduced. A page won't function in chrome without that tag. The tag sends all your information to google servers

[@Anton-cv2ti]

First!important

[@tycorrell5390]

. comments *:before, . comments *:after { content: attr(username) "FIRST" !important; font-size: 999em; }

[@MaestroCipher]

Very nice! You are awesome!

[@jishnuviswanath]

How are these going to be backward compatible it's not going to be useful. For that to happen force uninstall ie and if user want to install ie make them jump through 100 hoops before it's acceptable.

[@Anton-cv2ti]

IE will be removed from Windows in 2020, and will instead work as a compatibility layer in Edge.

[@citguy]

@@Anton-cv2ti Do you have a reputable source for this information?

[@nickardecky7404]

@@citguy MIcrosoft had a release statement saying this.

[@DEVDerr]

@@Anton-cv2ti You mean Adobe Flash? www.neowin.net/news/microsoft-will-remove-flash-from-all-of-its-browsers-by-december-2020/

[@DEVDerr]

@@nickardecky7404 Can you give the link for that statement?

[@_vicary]

The whole thing goes well until they said Ionic is a notable influence.

[@27plays]

Why not

[@manthan6814]

What's wrong with the crowd 😂😂😂

[@MrGenioflavio]

I like ppl calling other ppl friends.

[@Aemilindore]

guys stop ruining the internet with GOOGLE CHROME. Web is a standard Google doesnt get to define.

[@stoicfloor]

.....But I'm done with HTML

[@mfpears]

5 years late

[@guseynismayylov1945]

It's good, but not as good as what EHTML(github.com/Guseyn/EHTML) introduced

[@YallahYah]

!First

[@danh5637]

ugh edge

[@max_ai_2025]

First!