7 Game-Changing Web UI Features You Can Start Using Today

I was watching this video from the Google IO on all the new web UI features that are coming to the web platform and I was blown away by how many of these features are already available in modern browsers. In this article, I want to highlight 7 of these features that I think are game-changing and that you can start using today (of course, in some of the modern browsers). CSS Text Box CSS Scrollspy Contrast Color The hidey bar using @scroll-state query Gap Decorations The light-dark() function The linear() function CSS Text Box A new property called text-box is coming to the web platforms that allows you to trim extra leading and verical whitespace above and below the text glyphs, enabling precise pixel-perfect alignment and typgraphy layouts without arbitrary negative margins. The short-hand for the text-box property: text-box: trim-both cap alphabetic; The long-hand version of the text-box property: text-box-trim: trim-start | trim-end | trim-both | none; text-box-edge: cap | ex |…