JavaScript Cleyra Uzcategui she/her Software Engineer • Raise your hand if you consider yourself a JS developer… • My mission today is to convince you to move away from Javascript and start using CSS and HTML for your UI • Raise your hand if you consider yourself a JS hater… Well, you’re in the right place today ;)
The past year we have landed a golden era for web UI. New features have landed across multiple browsers supporting more web capabilities and customisation. As a developer who’s wanted a lot of these features for so long, I am excited about where the platform is going and happy to see all the hard work that the Chromium team has been up to. •
UI features on the web platform. Introduction Get ready, get set, go! • So join me on this speed run journey as we take a look at some of the most exciting features that landed in the web UI space or that are coming soon.
animations Discrete property transitions Wide-gamut color Text-wrap: balance Cascade layers Nesting Scoped styles Introduction • And it is a lot of topics to cover in a such a short amount of time
availability Widely available • For those who don’t know what Baseline is, Baseline was announced at Google IO 2023, and it identifies web features that work across multiple browsers, desktop and mobile, like Chrome, Edge, Firefox, and Safari, helping you avoid compatibility issues. • A newly available Baseline badge indicates that a feature works in the latest stable versions of Baseline browsers but may not work with older browsers and devices. • A widely available Baseline badge means that a feature has been supported for at least 2.5 years across Baseline browsers and it is safe to use. • A limited availability badge means the feature is not Baseline, Do more research and testing before using that feature, or wait for it to become Baseline. • https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility • https://web.dev/baseline/overview The core browser set Chrome (desktop and Android) Edge Firefox (desktop and Android) Safari (macOS and iOS)
balance initial-letter Dynamic Viewport units Wide-gamut color spaces color-mix() System variables (Accent-color) Logical components System capabilities User preference queries Theming User-driven design The new responsive • Let’s get started with some new responsive UI capabilities. • Talk about each of the sections
features users can create dynamic interfaces that take responsive design to the next level. Ethan Marcotte must be so proud of the Chromium team just now!
stable across all modern browsers, and allow for you to query a parents element’s size and style values to determinate the styles which should be applied to any of it children. • * Unlike media queries, which can only access and leverage the information from the viewport, container queries is a more refined tool that allows developers to apply styles to children elements based on the size of their container rather than the size of the viewport. • * As a result, developers can design more flexible and responsive layouts without having to use fixed breakpoints. •
Don’t get me wrong… I am not saying Hasta la vista, baby to media queries. • Media queries for more general styling based on the device and container queries are more handy for more modular reusable components. •
container query, their styles are dynamic. As we readjust the page size and the macro layout shifts, they look to their individually allocated space to make styling decisions. The sidebar becomes a top bar with more space and we see the internal layouts shift to adjust.
doesn’t stop at sizing… It also includes the ability to query a parents container’s style values. • The container query specification doesn’t stop at sizing. It also includes the ability to query a parents container’s style values. This spec is currently partially implemented in Chrome 111, where you can use CSS custom properties to apply container styles.
(--cloudy: true) { … } Style queries Limited availability • In this example, we are using weather characteristics stored in custom property values, such as rain, sunny, and cloudy to style the background cards and indicator icon.
style(20% < --clouds <= 50%) { … } Style queries ✅ Reduce code repetition and currently in discussion are range queries to apply styles based on a range of values… Limited availability • But this is just the beginning with style queries. In the future, we will have Boolean queries to determinate if a custom property value exists, to reduce code repetition, and currently in discussion are range queries to apply styles based on a range of values. This will make it possible to apply the styles shown here, suing a % value for the chance of rain or cloud cover. Pretty powerful
May 24 Una Remember to check your emails Adam Reschedule CSS Podcast Recording Bramus Notes - CSS Performance Exploration Paul Weekly team newsletter: I/O edition .item:has(.star) { … } Inbox Rachel Reviewed: Style Queries are landing in… Jecelyn Trip Report: GDE Summit Changhao Invitation: DevTools UI Team Sync blink-dev [blink-dev] Intent to Implement and… With :has() you can apply styles by checking to see: • if a parent element contains the presence of speci fi c children • if those children are in a speci fi c state Newly available • The has selector is one of the most powerful new CSS capabilities landing in modern browsers. With has you can apply styles by checking to see if a parent element contains the presence of specific children, or if those children are in a specific state. This means we essentially have now a parent selector. • In this element, we’re giving an item that has a star element a grey background and an item that has a checkbox in the checked state a blue background, all using has.
Una Remember to check your emails Adam Reschedule CSS Podcast Recording Bramus Notes - CSS Performance Exploration Paul Weekly team newsletter: I/O edition .item:has(.star) .title { … } Inbox Rachel Reviewed: Style Queries are landing in… Jecelyn Trip Report: GDE Summit Changhao Invitation: DevTools UI Team Sync blink-dev [blink-dev] Intent to Implement and… :has() selector But this API isn’t limited to parent selection… ✅ has element gives you access to parent elements, child elements and even sibling elements Newly available • But this API isn’t limited to parent selection. You can also style any children within the parent as well. For example, you can make the title element bold in those items that have the star element present or apply some styling pseudo element. Using the has element gives you access to parent elements, child elements and even sibling elements using existing combinators.
Invitation: Saturday, May Una Remember to check your emails Adam Reschedule CSS Podcast Bramus Notes - CSS Performance Paul Weekly team newsletter: I/O edition Inbox Rachel Reviewed: Style Queries are land Jecelyn Trip Report: GDE Summit Changhao Invitation: DevTools UI Team Sync Show 10 20 blink-dev [blink-dev] Intent to Implement a Jake View transitions demo links :has() selector Logical CSS using has for creating quantity queries: Newly available Rendering performance slowdowns ❌ Scope it as tightly as possible ✅ • One of my favourite examples of logical CSS using has is for creating quantity queries, something that we had to hack around in the past. In this example, we’re leveraging the nth child pseudo elements and looking to see if the inbox has n plus 11 children. If this is true, and there are 11 items within the inbox, we can style the pagination bar to appear, going from display none to giving it a display value. You can use this form message via invalid states, changing the layout based on the number of items in a list, and many more examples. To limit rendering performance slowdowns for the has selector, we recommend that you scope it as tightly as possible. For example, try to scope the has selector to a containing element, such as a card or navbar, rather that something more global like the HTML route, particularly on pages with large DOM trees
aren’t the only places that we can embed logic. Topography is another one, now in Chrome Canary, you can try out text-wrap balancing, for headings, which enables more even headings. •
looks like after a text-wrap balance. • The headings and subheadings are more uniform. • Text-wrap balance uses an algorithm to identify the most visually balanced position for the text in a headline. • While this is a great enhancement that you can try out today it’s important to note that this API only works up to four lines of text. So it’s great for headlines and titles but is not great for longer pieces of content. •
initial-letter Gives you better controlling of your drop caps styling. Newly available • ✋ Raise your hand if you struggle to style the initial letter of your content in the past • A great improvement to web typography is initial-letter. • This CSS property gives you better controlling your drop caps. •
initial-letter The size of the letter based on how many lines it occupies The letters block o ff set for where the letter will sit. Newly available • You use initial-letter on the first-letter pseudo element to specify, one, the size of the letter based on how many lines it occupies, and two, the letters block offset for where the letter will sit. •
now have new unit values on the web platform, including small viewport height and width, which represents the smallest active viewport size, large viewport height and width which represents the largest size, and dynamic viewport height and width. Dynamic viewport units change in value when the additional browser Chrome like the header or footer bar are visible and when they’re not. •
new key addition to the web platform are wide-gamut colour spaces. Before wide-gamut colour spaces became available on the web, you could take a photograph with really vivid colours, and you could use it on the web, but you couldn’t get a button or a text color or a background to match some of those vivid values. •
foundations Architectural The right tool for the job! • Building new capabilities that have user wins is one part of the equation, but the Chrome team is also landing developer-facing features, for more reliable organised CSS architecture. •
(width >= 1024px) { &.highlight { font-size: 1.25rem; } } } CSS Nesting Newly available • Nesting allows developers to write in a more grouped format that reduces redundancy. • This capability which is something that folks love from SaaS, has been one of the top CSS developers request for years and has now finally landed in the web platform. •
@media (width >= 1024px) { .card.highlight { font-size: 1.25rem; } } .card { background-color: var(--card-bg); } .card:hover { background-color: var(--card-bg–hover); } @media (width >= 1024px) { .card.highlight { font-size: 1.25rem; } } CSS Nesting Widely available • Instead of writing card styles, card hover and its styles, card qualifier values and their styles inside of a media query that might be in a totally separate part of your code base, you can now keep them all organised together and get the same result as this.
Source order 👎 Pain point: ensuring consistency on which styles win over others. Newly available • Another web developer’s pain point that we have identified is ensuring consistency and which styles wins over others •
Cascade layers ✅ One part of resolving this is having better control over the CSS cascade. Newly available • And one part of resolving this is having better control over the CSS cascade. Enter cascade layers. •
utilities, components.header, components.footer, page.blog, page.index, …; Cascade layers Newly available • Cascade layers give users control over which layers takes priority. I recently relied on cascade layers for a website that I was building, which was built on a framework that used a bundler that changed the source order of the CSS imports, causing unexpected styles to be applied. Cascade layers saved the day and let me clearly set up the source order I wanted, regardless of where the styles loaded in. •
Selector specificity Source order Scope Proximity 🔜 The fi nal game changing architectural update that will be coming to browsers soon is CSS scope styles… Limited availability • And the final game changing architectural update that will be coming to browsers soon is CSS scope styles using @scope. Scope allows developers to specify the boundaries for which their specific styles apply, essentially creating native namespacing in CSS. •
/* Namespacing via class names */ .card–-title { font-weight: bold; } .card--meta { text-align: center; } /* Native scope */ @scope (.card) { .title { font-weight: bold; } .meta { text-align: center; } } Scoped styles Limited availability • Before, developers rely on third-party scripting to rename classes or specific naming conventions to prevent file collision, but soon you can use @scope. Here we are scopping a title element to a card. This will prevent that title element from conflicting with any other element on the page that has a class of title, like a blog post title or some other heading. •
👎 How di ff i cult used to be to style form controls ✅ Working with the Open UI Community Group to identify 3 solutions • Another developer’s pain point is how difficult used to be to style form controls. • And to make sure the Chromium team is resolving that properly, they’re working with the Open UI Community Group and have identified 3 solutions to start with… •
well as light-dismiss and top-layer support. Tether an element to another element. Popover Anchor positioning Style dropdown menus (and more) with a new native HTML element. Selectmenu Customisable components Components The first is native pop up functionality with built in event handlers, and declarative DOM structure, and accessible defaults. The second is a CSS API to tether two elements to each other and enable native anchor positioning. And the third one, is an easy to style dropdown menu component for when you want to customise content inside of a select. •
5PM Schedule 9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Add event title Save Wednesday, June 21 9:00am - 10:00am Time zone | Does not repeat Find a time Add guests Add video conferencing Add rooms or location Add description or attachments x Popover The pop over attribute give elements some built-in browser support magic 🪄 Newly available • The pop over attribute give elements some built-in browser support magic •
1PM 2PM 3PM 4PM 5PM Schedule 9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Add event title Save Wednesday, June 21 9:00am - 10:00am Time zone | Does not repeat Find a time Add guests Add video conferencing Add rooms or location Add description or attachments x Popover Newly available • Like top layer support, so you don’t have to mess with z-index anymore. When you open a popover or a dialog, you’re promoting that element to a special layer on top of the page. •
11AM 12PM 1PM 2PM 3PM 4PM 5PM Schedule 9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Add event title Save Wednesday, June 21 9:00am - 10:00am Time zone | Does not repeat Find a time Add guests Add video conferencing Add rooms or location Add description or attachments x Popover Newly available • You also get light-dismiss behaviour for free. So when you click outside of an element, the popover dismissed, removing it from the accessibility tree and managing focus. •
9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Schedule 9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Add event title Save Wednesday, June 21 9:00am - 10:00am Time zone | Does not repeat Find a time Add guests Add video conferencing Add rooms or location Add description or attachments x Popover Newly available • There is also some nice default accessibility between the popovers target and the popover itself. •
No JavaScript needed Schedule 9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Schedule 9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Add event title Save Wednesday, June 21 9:00am - 10:00am Time zone | Does not repeat Find a time Add guests Add video conferencing Add rooms or location Add description or attachments x Popover Newly available • And all of this means less JS has to be written to create all of this functionality and track all of these states. •
form) goes in here -–> </div> <button popovertarget="event-popup"> Create New Event </button> Schedule 9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Schedule 9A M 10AM 11AM 12PM 1PM 2PM 3PM 4PM 5PM Add event title Save Wednesday, June 21 9:00am - 10:00am Time zone | Does not repeat Find a time Add guests Add video conferencing Add rooms or location Add description or attachments x Popover Newly available • The DOM structure for popover can be written as clearly as giving your popover element an ID and the popover attribute. Then you sync that ID to the element which would open the popover, such as a button with the popover target attribute. Now we have a fully functional popover. •
Sans Georgia RECENT Alfa Slab One Amatic SC Arial Calibri Caveat Comfortaa Newly available • Well we need a way to animate that. And in order for all of these to transition in and out smoothly, the web needs some way to animate discrete properties. These are properties that typically weren’t animatable in the past. Such as animating to and from the top layer, and animating to and from the display none. •
size-adjust • text-align • … Properties Such As To and from the top layer Animating: An initial state with @initial Discrete animations Newly available • As part of the work to enable nice transitions for popovers, Selectmenus,and even existing elements, like dialogs or custom components, the Chromium team is enabling new support for this animations, bringing them into the flow of your animation or transition timelines, rather than swapping them at 0 seconds and creating a visual break. •
discrete views, such as animating top-layer and animating to and from display:none. Discrete property transitions Animate between views, pages, and elements. View transitions Interactions Interactions • We already talked about animating discrete properties, but they are also some really exciting APIs landing in Chrome around scroll-driven animations and view transitions. •
CSS animations that rely on a scroller rather than a timer. • This API let’s you build really smooth and engaging interactions on a VUE timeline. So you can make parallax effects, entry and exit effects, and a lot of other scroll-based experiences to manage user attention. • And the best part is that this API is declarative. • And you can do it all in CSS, without reaching for additional scripting.
And all of this adds up to a more robust and solid web platform, with less redundant scripting, more developer access to user customisation, and more optimised declarative web APIs. To keep all with all of these changes and landings in the web space, follow along on developer.chrome.com and web.dev •
cleyra
takumiogawa
iotengineer22
ronnnnn
eventhub
sudoakiy
negi111111
chanyou0311
ryosukeigarashi
techiro
oracle4engineer
kakehashi
vanchan2625
lauravandoore
dougneiner
jlugia
bluesmoon
thoeni
destraynor
matthewcrist
paulrobertlloyd
jmmastey
colly
skipperchong
ufuk
