Highlights from Chrome Dev Summit 2019

I’ve been going to Chrome Dev Summit for a couple of years now (2016 & 2018) and I always like to do this roundup article, highlighting what I thought were the most interesting ideas and projects from the conference. So let’s get into it! HTML is (finally) getting some 💕 It seems like the design and functionality of pretty much all control elements have stayed the same since the dawn of the browser. This is true even despite the fact that the way we use browsers have changed a lot, for example with the shift to mobile. Well, no more! In the talk, HTML isn’t done, Nicole and Greg discussed a few updates that will be introduced to Chrome soon. Redesigned form elements Several form elements are finally getting a visual refresh! Not only are the elements being designed to look more modern, but they are being designed with accessibility and mobile in mind. The date picker, for example, will now allow for larger touch targets when selecting values. Extensibility of form elements Form elements are also getting more flexible! An example of this is the <select> element. So many of us end up using custom select components because we want to do something as simple as adding an icon to an option, or something as complex as allowing users to search through options. In future versions of Chrome, this should all be possible with the native <select> element itself! New elements? Although this is more an improvement for the further-away future, the Chrome team are looking to add elements to the web that don’t exist yet. Elements like a table view similar to a UITableView in iOS, or a toggle switch element are in the pipeline. CSS is getting better too! CSS is also getting some much-needed refinements. In their packed talk on Next-generation web styling, Una and Adam talked about 12 new features coming to CSS. Although there were many shiny features like Houdini mentioned, what had me really excited were the refinements that will allow us to write CSS more simply and effectively. The :is() selector The :is() selector allows us to group multiple alike selectors. This is better explained with an example. Typically, if we want to apply the same style to multiple elements that share a part of their selector, we would still have to write out the entire selector each time. body.theme–light button, body.theme–light a, body.theme–light p, body.theme–light h1 { /* … */ } With :is(), we can group the parts of the selectors that are different together. body.theme–light :is(button, a, p, h1) { /* … */ } Amazing, right?! Logical properties Logical properties are a move from CSS that is biased to left-to-right languages like English, to a more agnostic approach. Instead of thinking of the block model as top, right, bottom, left, it’s changing to block-start, inline-end, block-end, inline-start. Credit: Una Kravets This can be a little difficult to wrap your head around the first time, but once you get the hang of it, you see why it makes more sense. A lot of times, when we want a margin or a padding to the left, what we actually want is a margin/padding to the start of the inline block. With these logical properties, we can apply those kinds of styles that will adapt based on the language of the user. For times when left really means left, the directional properties are still there. The web is coming for native Through the new Project Fugu, the Chromium team is aggressively trying to bridge the gap between the capabilities of web and native…

Like to keep reading?

This article first appeared on bitsofco.de. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply