Google Chrome 104 introduces a new screen sharing tool and interface changes

Latest Chrome Build 104, gets a new screen sharing tool and interface changes



Chrome 104 is currently rolling out! When using getDisplayMedia to record the current tab, you may now define a crop area thanks to region capture. Mathematical comparison operators can be used to write the syntax for media queries. A new origin experiment is launched by Shared Element Transitions. And there are a tonne more.

what's new for developers in chrome 104 


getdisplay media makes it possible to create a video stream from the current tab but there are times when you don't want the whole tab you only want a small portion of it until now the only way to do that was to manually crop each frame with region capture a web app can define the specific area of the screen that it wants to share for example google slides could allow you to share the current slide and no need to switch to the presenter view to use it select the element to share than create a crop target based on that element next start screen sharing by calling get display media that prompts the user for permission to share their screen then call track.crop2 and pass the crop target created earlier more details and a demo about region capture are on developer.chrome.com 

media queries are critical to responsive design allowing you to define specific styles for different size viewports but unless you use them every single day the syntax can be a little confusing chrome 104 adds support for media queries level 4 syntax and evaluation allowing you to write media queries using ordinary mathematical comparison operators so instead of something like this to indicate a viewport between 400 and 600 pixels it can be written like this in addition to making media queries less verbose the new syntax can be more accurate the min and max queries are inclusive for example min width 400px tests for a width of 400 pixels or greater the new syntax allows you to be more explicit about what you mean it's already supported in firefox and there's a post css plugin that will rewrite the new syntax to the old syntax ensuring browser compatibility

platform-specific apps typically have smooth transitions between different views they look beautiful they keep the user in context and they help the experience feel more performant whereas on the web full navigation means a momentary blank screen for a single-page app it can be better but transitions are still hard shared element transitions starts a new origin trial in chrome 104 allowing you to provide smooth transitions regardless of whether transitions are cross-document or intra-document.  Using the navigate function get the new page content check if transitions are supported if not update the page without the transition then create a transition and start it letting the api know when the dom change is complete under the hood shared element transitions use css animations so you can change from a fade-in effect to a slide-in or whatever you want

when cookies are set with an explicit expires or max-age attribute the value will now be capped to no more than 400 days there are enhancements to the multi-screen window placement api and the overflow clip margin property specifies how far an element's content is allowed to paint before being clipped

Source - https://developer.chrome.com/blog/new-in-chrome-104/