Chrome Dev Summit 2021 | Keynote: What's new in Chrome

[Music] hello and welcome to a very virtual chrome dev summit 2021 i'm ben and in the next few minutes my colleagues and i along with a few guests will share some of the highlights of our work over the past year to improve the web in 2008 chrome launched with a vision that the web could be more than just rich documents that i could enable fast safe and powerful applications across devices available instantly with just the click of a link this vision of the web has become more relevant than ever during the pandemic as people around the world realize how powerful the web platform has become and look increasingly to the web and their browser to get things done every day now the web's continued success is only possible because it's continued to evolve through the years adapting as technology advances and as people's expectations shift as we at google help evolve the web we strive for transparency and openness in all that we do collaborating closely with developers users and the rest of the ecosystem now this theme of web evolution is the central one for this video and we're going to highlight a number of examples that represent the web's continual progress one of the most important of these themes comes from feedback that we consistently receive from web developers both via surveys and individual conversations and this theme is the importance of cross browser compatibility now of course this theme isn't new and through the years the chrome team has joined with others on various initiatives to help recent examples include the web platform test project which is a comprehensive cross browser test suite for new web platform features hosted on github and the open web docs initiative that brings together a large coalition to collaboratively contribute to the web platform documentation that's hosted on mozilla's developer network this year we've added a new initiative to the list a cross-browser effort called compat 2021 that's focused on improving compatibility in five key areas of the web all related shockingly to css to measure our progress the compat 2021 team was able to use the aforementioned web platform test project to quantify compatibility scores for these areas across the latest development builds of chrome edge firefox and safari now while we're not done yet we've already seen significant improvements since march and we'll keep pushing to make the web much more compatible in these and other critical areas another area in which the web is evolving is privacy as we seek to curtail third-party tracking practices while preserving important and critical capabilities that enable a vibrant global web ecosystem to tell us more i'd like to introduce my colleague barb thank you ben we believe it's important for people to be in control of their information including their online activity most users believe it's important too with privacy concerns increasingly driving choices about what people do online we also see regulations around the world stepping up privacy requirements at a rapid pace and yet it's difficult for developers to meet growing expectations for privacy when so many capabilities rely on third-party cookies and other cross-site tracking mechanisms that weren't designed with privacy in mind we need new technologies for a modern privacy focused web and that's what the privacy sandbox is about we're working with the web community and industry stakeholders to develop new privacy preserving technologies that can support a healthy sustainable ecosystem this includes purpose-built apis to support advertising which is a critical part of the ecosystem and funds much of the web's content as well as many other capabilities that modern sites need like fraud detection identity or content that's customized to a user's device now let's take a minute to clarify what we mean by purpose-built apis many of the use cases that i just mentioned were never really built into the web platform but layered over it using general purpose technologies like third-party cookies the browser has no way to tell whether you're using third-party cookies for something helpful like providing a customized experience or keeping a user logged in or for cross-site tracking by designing apis for each specific use case we can ensure appropriate privacy protections give people more useful controls and ideally make each api better at what it does over time once these new apis are in place we'll make sure that developers have time to adopt them so that we can safely phase out support for third-party cookies in chrome while continuing our work to mitigate other types of tracking so that cross-site tracking doesn't simply shift from third-party cookies to more covert methods to make this complex project easier to follow we're sharing progress in two places privacysandbox.com explains the vision goals and concepts behind this initiative it also includes a high-level timeline that we're updating every month the timeline links to each of the technologies we're working to test and launch and lays out a staged plan for phasing out third-party cookies in chrome the second resource is the privacy sandbox section at developer.chrome.com here you'll find more technical detail and implementation guidance including a blog with the latest updates for developers we've just added a post with all the links and updates from this session now we talk a lot about the importance of collaboration in this project and i'd like to show you what that looks like at each stage of development i'll mention some apis as examples but the broader idea is to illustrate how ecosystem involvement is shaping this work this process will be familiar to many of you in the web development community but the privacy sandbox is bringing a lot of newcomers to this process including industry stakeholders who will use these purpose-built apis and whose expertise is critical in their development the first stage of the process is discussion where anyone can propose and weigh in on ideas for new technologies there have been dozens of privacy preserving proposals offered by chrome and others over the last couple of years they're all online so you can read them ask questions offer ideas to improve them and see what others are saying to find live conversations where all of the proposed solutions are being discussed and debated together there are a number of w3c groups that you can join or monitor depending on the types of use cases you're interested in here's one example to illustrate how involved this discussion stage can get fledge is a proposal to support interest-based advertising without cross-site tracking with valuable input from privacy advocates and many industry stakeholders fledge has evolved from two previous proposals with more than a hundred organizations joining w3c meetings to help refine the current version and over 200 online discussion threads there have also been more than half a dozen other proposals in the same solution space through continued incubation we hope will reach consensus on a path forward and at the same time we're starting developer testing for the initial version of fledge behind a flag in chrome so that developers can get their hands on it not all of these proposals will go through such an intense incubation period some will move much more quickly but there's a lot of innovation happening here these are new ideas and it can take a lot of work to get them right the next stage is testing there are already a handful of proposals ready for developer testing today and you can expect more as we head into 2022 and don't be surprised to see some iterative cycles of discussion and testing testing is important precisely because it surfaces issues or gaps that may require more work testing in chrome usually starts with a feature behind a flag for developers to test locally this means you need to turn it on in your browser to try it out this code is often very fresh so you can expect to find some issues and then origin trials each running for a limited time with a limited population of chrome users origin trials are public and open to all developers you just need to register to opt in your site or service this is when we get actionable feedback from developers on what works what doesn't and where those gaps are success at this stage depends not only on developers doing hands-on testing but on their being willing to share what they learn for example yahoo japan recently published a detailed analysis of their test of the attribution reporting api highlighting areas for improvement like the need for a better way to deliver conversion reports which has now been added these are the sorts of things that turn up once developers can get their hands on an api we also hope to see companies talking about their approach to testing and how they expect to use an api during the origin trial for the first version of flock a proposal to support interest-based advertising and content we were pleased to see companies like cafe media publishing their analysis and insights so that others could see what they'd learned and chrome tests aren't the only way to explore how new technologies might work some companies are also building simulations based on privacy sandbox concepts advertising platform criteo recently ran a competition with more than 150 teams testing different machine learning models to evaluate how differential privacy concepts such as noise insertion and aggregation might impact advertising performance it's helpful to examine these concepts since they underlie several of the privacy sandbox apis we are truly appreciative of the companies investing their time to test these new technologies and of their being willing to share their perspectives and learnings publicly now once an api is tested and ready for general use in chrome will announce the launch and make sure public documentation is ready for scaled adoption user agent client hints or uach launched in chrome earlier this year and is now ready to scale it's part of the privacy sandbox workstream to reduce covert tracking such as browser fingerprinting but first let's back up and take a look at the legacy mechanism it's replacing like cookies the user agent string is an early web feature by default it provides a lot of information about the user's browser and device making it a readily available surface for fingerprinting it also has a format that can be a headache to parse we recently announced plans to start reducing the granularity of information available in chrome's user agent string starting in april of 2022 to get that information in the future you'll need to transition to user agent client hints it'll give you some information by default which may cover most of your use cases with more detailed information on request in a straightforward format we were happy to make this ergonomic improvement for developers while at the same time moving the majority of user agent information from an available by default model to an on request model that way you can request only the information you need which is good practice today and the pattern we want to set for the future so let's go back to the timeline i showed you a moment ago gradual ua string reduction starts in april of 2022 the replacement solution user agent client hints has been launched and ready for scaled adoption since march so you can begin testing and migrating to it any time now to help with that there's an origin trial to opt into the reduced ua string early so that you can see what that future state will look like and if it turns out that you need more time you'll be able to opt in to keep using the user agent string as is through march 2023 the details of this plan are all online and while the scaled adoption stage might not look exactly like this for other apis you can expect to see consistency in the overall approach we'll continue to explain what's happening provide as much visibility as we can encourage your involvement and hear your input we appreciate all contributions to this complex and vitally important project as we seek to create durable web features with broad utility and strong privacy protections for users it's worth this effort to get the foundations right and ben i will hand it back to you thanks barb the privacy sandbox is one of the largest efforts we've seen to evolve the web we believe that it's critically important to help ensure the web's continued health and success for decades to come the next theme we'll highlight is web capabilities over the past several years the web's gained a number of powerful new integrations that enable web apps to do more we've been heavily involved in this with the fugu project collaborating with others in the ecosystem to unlock things like secure file system access and rich integration with operating system launchers and as the web has gained these new capabilities developers have embraced them in compelling ways to tell us more i'd like to introduce my colleague anshul thanks ben before we dive in take a couple of seconds to look around you no really look closely at your surroundings most of you are probably at home right now a place that in the last couple of years has transformed into a buzzing tech driven hub our kids have turned the dining room into a virtual classroom we've turned the kitchen into our office and we're all connecting with family and friends in living rooms around the world the pivot to virtual has had a profound impact on how we live and work in particular it's the world of video and creation that has seen a powerful shift in norms from casual creators to professional designers there's real time editing sharing and collaboration but it's entirely virtual hosting and attending video conference calls from some part of the house is now a regular part of our day and let's be honest we've been streaming and binge watching more content than we ever thought possible our team has worked hard to unlock new paths for the web whether you're taking your existing experience to the next level or building something that's cutting edge and never been done before we're inspired and grateful to see how our partners around the world are building web experiences that enable creativity expression communication entertainment and so much more one example is kapink kapwing is a collaborative video editor with more than 3 million monthly active users processing 100 000 videos a day to tell you more i'd like to invite a special guest josh grasper hi i'm josh cto at kapwing kapung is a web-based collaborative video editor designed mainly for casual creatives like game streamers musicians youtube creators and memers we're also a go-to resource for business owners who need an easy way to produce their own social content like facebook and instagram ads people usually discover us by searching for a specific task like how to trim a video add music to my video or resize a video copying lets users instantly do what they search for with one click there's no added friction by making them navigate to an app store to download an app the web makes it so much simpler for people to search for precisely what they need help with and then do it the fact that we pay zero dollars in paid acquisition is a testament to how well this strategy has worked and after that first click they can do a whole lot more they can explore free templates add new layers of free stock videos insert subtitles and transcribe videos and upload background music the web also makes it easy for users to collaborate on kaplan with friends and colleagues regardless of their device or operating system just click share get a share link and send it to your collaborator all they have to do is click the link and they are editing with you and because supporting different devices and os's takes minimal work on the web it's the ideal environment to enable this level of collaboration editing videos in kapwing works easily and seamlessly in all modern browsers high performance editing requires all of our users content to live on the client avoiding the network whenever possible for that we use indexeddb websockets enable the real-time collaboration that users expect in modern web apps to generate waveforms and allow users to splice together audio in exactly the right place we use the web audio api the media recorder api allows users to simultaneously record their webcam and screen perfect for catching facial expressions when creating screencasts web workers allow us to offload computationally intensive work removing the background from videos without affecting the performance of the main thread and of course we've built kapwing as a pwa so once users have found it from search it's installable and coming back to it is as easy as launching it from their desktop in the future we're excited to use web codecs to accelerate our frame drawings use webgl to enable more sophisticated animations and use media source extensions to have more seamless transitions from clip to clip none of these apis are brand new but when combined together they make it a lot easier for our users to collaborate with each other and quickly bring their ideas to life and for us the web gives us a streamlined way to reach and engage more users back to you ancho thanks josh so if you're looking to create a cds meme you know where to go i highly recommend trying out kapwing it's really easy to use and now onto a web feature we're all more than familiar with video conferencing it'll be hard to find someone who hasn't clicked on a zoom meeting in the last two years in 2020 zoom saw huge influx of people using its web app to chat and connect online for virtual happy hours group workshops online webinars you name it zoom took this opportunity to improve their web experience with a pwa and to provide a more comparable experience to their native apps it was also a chance for zoom to offer its millions of chrome os users a powerful alternative to their chrome app they're using the new web codecs api for video encoding and decoding which improves the performance and enhances the user experience with fast clean video link capturing ensures that when a user clicks on a link to a zoom meeting in their email it opens in the pwa and not in the browser tab and for chrome os users managed configurations allow enterprises to easily install the pwa across the workforce just one month after launching the pwa zoom saw 16.9 million new users join web meetings which amounts to an increase of 7 million year-over-year with developments in webrtc and fugu apis audio and video call experiences that were previously not possible are now available apple has brought facetime links to the web for android and windows users so people can join a facetime call from their web browser and we have the google meet pwa to thank for this keynote we collaborated and created everything you see today on several google meet web calls and i mean several then produced it remotely in a studio and you're most likely watching it on youtube at home the meat team shipped custom backgrounds and light adjustments in their pwa using wasm simdi and webgl this has drastically improved the speed as well as the video and audio quality and better video and audio aren't all work and no play the world of entertainment and social media is thriving on the web youtube premium is a paid subscription which enables members to watch youtube ad free play videos in the background and download videos to watch offline watching videos offline on laptops and hybrid devices was one of the top requested features from youtube premium users to make this possible they added everything necessary to turn their site into an installable pwa for the offline experience they use a combination of service workers cache storage and db of course the team focused on more than just the offline experience for example they use the web share apis so users can share links to videos with other installed apps on the device and navigation preload to increase service worker performance they're running an experiment to enable youtube premium users to download videos that can be watched offline on chrome edge or opera they're looking forward to delighting premium users with the new feature soon i can't talk about social and entertainment without mentioning short form videos that's where tick tock is leading the way tick tock views the web as a channel to acquire more users keep them happy and they focused on creating a multi-form factor frictionless experience they've optimized the performance of their web app using workbox to pre-fetch videos to reduce any lag as users transition between videos they've also expanded the pwa to desktop leaning in on the web superpower of building just once and making tiktok available and accessible on any device with these improvements across mobile and desktop ticktock seen the traffic from search has improved by 10x so as you can see web on desktop has seen path-breaking innovation in the last few years users now have access to complex creativity and productivity tools that are enabling instant expression and collaboration there's a powerful web app for every use case whether you're learning something new talking to your boss or simply creating something beautiful and that brings us to some exciting news that i'm thrilled to share with you after nearly three years of an ongoing strong partnership with adobe many flagship apps in the adobe creative cloud suite are soon coming to the web bringing advanced features and capabilities to the platform would be incomplete without real use by companies like adobe that are pushing the edge of what's possible and we believe these collaborations benefit all developers opening up new opportunities to create incredible experiences for their users and now i'd like to welcome another special guest pam clark vp of product management and strategy for adobe photoshop to tell us more about these launches hello everyone i'm excited to be here with you at chrome dev summit at adobe we believe creativity and collaboration go hand in hand and over the past year we've made lots of advancements to products like photoshop to support the kinds of mobile and collaborative workflows our customers want for instance you can now store psds in the cloud so you can work on a single document across all of your devices you can also create and share links to those psds in the cloud you can co-edit them with your collaborators and share them on the web for review and comment we are committed to helping people create and work together no matter how they want to work which is why at adobe max last week we shared a vision for the next evolution of creative cloud one that is as much about connecting with each other as it is about creative tools for decades you could only use photoshop on a computer a powerful computer at that then photoshop went mobile on the ipad and now we're making photoshop accessible in a web browser via a public beta thanks to the close collaboration with the chrome and web platform team at google adobe is able to bring photoshop magic to millions more people around the globe the photoshop on web beta allows you to access review and comment workflows and test out some photoshop editing features we are piloting your collaborators will also be able to open and view your work in the browser provide feedback and make basic edits all in one place without having to download or launch the photoshop application on the desktop or ipad the collaboration between adobe google and within the standards bodies helped bring the functionality needed for photoshop into the browser web assembly allowed us to bring large portions of our code base to the web some of that code relies on exceptions for flow control the addition of zero cost exception handling means there's no performance penalties for high fidelity work canvas 2d is now color managed and supports srgb and the p3 color space reading and writing your files to disk had to feel natural and the storage foundation api ensures that you can work on your psds no matter how big or how many layers they have we are still at the beginning of exploring photoshop editing features on the web and we are looking forward to the feedback from the adobe community which will help us grow the capabilities and functionality of the browser experience in addition to photoshop on web beta last week we also announced creative cloud spaces and creative cloud canvas both in private beta spaces are a shared place that allows teams to access and organize all their creative project files canvas is a new surface where teams can display visualize and review creative work together we are excited by the idea of giving everyone more ways to access our tools by bringing them to the web we are helping to create a more fluid more connected more collaborative environment for your projects this is just the beginning of a broader evolution of creative cloud thanks so much for your time and now ben will pick things back up to talk some more about user experiences thanks pam josh and ancho for walking us through these highlights you know progress on the web generally comes in iterations year over year step by step and so it's amazing to me when we can take a step back and reflect on what's become possible on the platform over time as these examples have shown and as the web gains new features and capabilities another theme we hear is the importance of helping developers get the best results they can out of the modern web platform now one way we're doing this is the web vinyls program which is the result of years of research to understand what makes a web experience great with core web vitals we closely examined many factors that lead to high quality user experiences and we identified three quantifiable measures that have a big impact these are one how quickly a user can see a site's most important content two how quickly a user can start to interact with that site and three the stability of the site's layout over time and we've found that websites which optimize these measures are consistently more successful to tell us more i'd like to introduce hussein thanks ben so if you want to build a great website you need to understand how it performs from a real user's point of view that's what the web vitals initiative is all about giving developers and site owners the metrics tools and guidance they need to deliver a great experience for every user last year we announced that the core of vitals a set of three metrics that covers loading performance input responsiveness during load and the visual stability of content will begin to be surfaced across tools provided by google to help developers build great user experiences so what's happened in the past year thanks to developers around the world working hard in improving their sites the ecosystem as a whole is steadily improving twenty percent more page visits on chrome now fully meet the recommended core vital thresholds compared to a year ago and the total percentage of page visits in chrome that meet these thresholds is now 60 percent which is a big deal much of these advancements are a direct result of the work being done by developer communities including the improvements that many content management systems website builders and e-commerce platforms have made this past spring we launched a new core vitals technology report to show how sites built on these platforms perform you can see that many are sharply up and to the right with some showing more than 200 improvement year on year and leaders like duda and jimdo surpassing 50 of origins with good core vital scores we've also worked with some popular javascript frameworks including nexjs and angular to deliver the best user experience as possible without sacrificing developer experience we're calling this initiative aurora and thanks to the work we've done to land strong defaults and optimize performance in less than a year we've seen 91 percent and 111 increases in the number of mobile and xgs and angular origins respectively that have good core revital scores that's incredible progress in a short time span and we can't wait to see similar growth in other framework ecosystems in the near future like nuxt we know that optimizing for core vitals could still be challenging for the everyday developer so we've got a couple of new updates to our performance tooling that make the process a lot easier first we started with a complete revamp of the pagespeed insights ui pagespeed insights is a great tool because it'll show you real user data from the chrome ux report and we'll also run a lighthouse report and show suggestions and opportunities to improve based on a synthetic load of the page in a lab environment the new ui makes it much clearer which data is field data coming from real user experiences and which data is lab data coming from the lighthouse report if you want to check a core vital score you should always look at real user field data for anyone who wants specific actionable suggestions for how to improve performance the lighthouse report is a great place to start next up we've worked on addressing a blind spot that our tooling hasn't been able to capture yet user flows some of our tools have been limited by only assessing your pages during load they wouldn't scroll down the page click around or do anything else that users typically do as they browse the web for example consider a typical checkout flow where someone needs to perform a number of different actions to order some coffee like navigating through several pages adding items to a cart and confirming their payment details in the past we could only measure the performance of each page separately but think about how much more we can learn about the overall user experience by measuring every action and navigation in between we're glad to announce that we've rolled out support for user flows in lighthouse which will only make it easier to diagnose performance issues within a user journey and get suggestions for how to improve lighthouse will be able to distinguish and provide separate reports for page navigations any user interactions that occur during a given time span and snapshots to represent a capture state of a page and it's not just a lighthouse where we're introducing support to analyzing user flows we launched a completely new recorder panel in devtools that will also let you record an entire user journey on your website and easily view all the actions taken by the user directly in the panel such as navigations key presses link clicks and so on you can download the user flow and export it as a puppeteer script for testing replay it and even click and easily measure the performance trace in the performance panel not only will this make the process of understanding and debugging interactions easier it will also help you better identify performance opportunities throughout the user journey the recorder panel is currently in the preview stage and the team is working on it actively so stay tuned for more features all of our tooling has been instrumental to how the core volumetrics have helped developers succeed in improving the user experiences of millions of sites around the world and all these brand new changes will go a long way to help you understand precisely where and how you can keep getting better now what's next for the core vital metrics themselves well there's more to great user experiences than just three areas and we're working hard to fill the gaps that the current set of metrics don't address just yet we're excited to introduce two new metrics we've been experimenting with that we think will improve how user experience is measured on the web and we love to get your feedback on the first is a metric to measure overall input responsiveness today we measure the responsiveness of the first user input but ideally we want to extend that to capture every user input from the moment they land on your site to the moment they leave we've also made improvements to the apis that capture event timing so we can better monitor the full event life cycle and better handle complex user inputs to trigger more than one event the second metric measures scrolling and animation's smoothness i'm sure if all had experiences where a page will stutter or freeze during scrolling or animations we want to better understand how often this happens and how severe it is we're still working on both of these metrics and we'd love to hear your feedback these articles explain our current thinking in detail so give them a read and think about how using them can help improve the user experience of your site feel free to send us an email if you have any thoughts or suggestions we're excited about all the advancements that have been made to help developers succeed in building fast delightful experiences for their users in the metrics themselves from the community and directly in many tools and platforms if you haven't already go to patreon insights to see how your site scores on the core of vitals metrics we also have a number of other great tools that you can also use to continuously monitor and optimize your site's performance so be sure to check them out to see which one works best for you now i'll pass it back to ben before we share some exciting updates about ux design thanks usain i'm really excited to see how core web vitals evolves in the coming years of course quality web experiences are about more than just measurement and optimization they require the efforts of passionate designers and developers who work behind the scenes to create delightful digital interfaces and need to be armed with the right tools and capabilities to do that a few years ago a group of engineers set about rethinking chromium support for html css and graphics which led to an effort called rendering ng an ambitious refactoring of chromium's rendering engine this work has now largely landed and it's enabling a major evolution in web user experience design to tell us more i'll hand things over to younow thank you everything we've talked about today comes back to the user experience privacy measurement next-gen web capabilities they all work together to create better experiences that align with our vision for the web while giving developers the tools and capabilities they need to build them so today i'm excited to share a ton of updates and changes coming down the pipeline for ui styling and devtools first let's talk about responsive design and how it's evolving responsive design is no longer just about making sure an interface looks good on both desktop mobile devices developers now have the tools to really create customized user experiences based on personalized user preferences in a component driven architecture model we're calling this the new responsive and it includes being responsive to the user with user preference queries and modalities like dark mode and prefers reduced motion being responsive to new form factors like foldable devices which allow for multi-display functionality and being responsive to other components on the page with container queries this is a feature that's been highly requested by developers we've been working with the css working group to spec this feature and have been able to unlock the implementation through recent changes in the chrome rendering engine the new container query spec lets you access a parent element's width to make styling decisions for its children you can even nest container queries and create named queries for easier access and organization let's take a look at an example here i have a responsive add to cart button that i can place anywhere in the container then when i put it inside of this product card which is also a container i can query the product card itself to restyle the already responsive button and shift it from being center aligned to left aligned this might look simple on the surface but it's something that wasn't previously possible without a lot of heavy scripting which would significantly slow down your page we're working with the open source community to provide a polyfill for container queries as we build the feature into the platform using container queries makes your interfaces much more flexible components own all of their individual responsive styles right where they are and don't rely on the global viewport to adjust styles this is a huge paradigm shift for component based developments and we're excited to see how you make the most of this new feature if you want to try it out container queries are now available for testing behind a flag in chrome canary and because of this big shift we've been working hard to support you by providing dev tools that allow you to debug and style with container queries as the feature launches here you can see that devtools is pointing out where the container for the child is and highlighting the styles that are being applied by it speaking of responsive dev tools we released several new tools this year for better layout debugging layout tooling for grid now allows you to add names to specific grid lines and also shows you the size of your grid areas i also love the dynamic new tools for flexbox and grid these let you actually see what different property values do on the page and give you the ability to easily change layout rules with the click of a button these new dev tools are designed to make css layout easier to visualize and understand which frees up more time to build new features for your users and less time looking up the differences between justify and align another way we're helping simplify the process is by launching web.dev patterns a collection of off-the-shelf ui patterns you can use in your web projects to help you quickly get started with building the base of your ui we've added layout patterns for everything from large full page spreads and card sets to smaller layouts that can live within those larger layouts such as the cards themselves all of these patterns use css grid flexbox or container queries to showcase how quickly you can pick up these tools and build interfaces from the ground up we're also partnering with jeremy keith of clear left to launch learn responsive design on web.dev this is a free online course with everything you need to know about designing for the new responsive web of today you'll learn about theming art direction logical properties for internationalization utilizing preference queries and so much more today we're launching the first few course modules at web.dev learn slash design with more to come in the following weeks we're also updating our learn css course with six new modules learn css is another free evergreen course and reference on web.dev where you can level up your css knowledge and test your skills we launched the first 24 modules at google i o this year and now we're introducing lists backgrounds transitions text and typography media queries and more be sure to check out those new modules and dive in whenever you're ready we're also working on rolling out some new features in css in addition to container queries our team has been thinking about how to introduce scope styles and cascade layers they're not ready just yet and we look forward to working with you and the web community over the next few months to push them forward we do have a particularly fun new api that's ready for exploration and that's scroll timeline previously you could create css animations that had a time basis and moved over a length of time scroll timeline lets you set scroll based offsets and timings for animations instead that means you can set an element to animate as you scroll down or across a page pretty neat you can explore scroll timeline using the experimental web platform features flag in canary we have another exciting addition that recently reached its first public working draft and that's css nesting nesting is a syntactic sugar that brings one of the most popular features of css preprocessors to the web stacking your styles for a cleaner developer experience while the nesting spec will let you keep your styles tidier and more encapsulated we recommend that you don't go more than three layers deep to ensure the best performance we've also launched the size adjust property for typography this is particularly useful for preventing cumulative layout shift for core web vitals as you can adjust the default font to better match your web font this causes less jank as the web font loads in and last but not least accent color just landed in chromium and firefox stable accent color is a one-line css superpower that gives your form controls like checkboxes and radios a theme color to match your brand we get a lot of feature requests from developers and users alike but one is a clear favorite especially for those of you who love to browse the web at night dark mode is a popular feature we're really excited to build on and not just because you asked for it but because its impact extends beyond the user interface dark themes have shown measurable battery life savings over their light themed counterparts on oled devices in our lab study with a single pixel six device we found an indication that at sixty percent brightness dark theme used eleven percent less power than light themes for oled screens and it's a feature that users love too when twitter released the first preview version of their new twitter progressive web app everyone said wow it's new and fast but where's dark mode so they surveyed users on what they needed to add and user said three things dark mode an emoji picker and more dark mode so it's kind of a big deal to a lot of very vocal users to create a dark theme we recommend using css custom properties and the prefers color scheme media feature which is supported in all evergreen browsers this lets you swap theme colors in and out based on what your users prefer a core part of our new responsive framework and set of goals if you need help getting dark mode set up the way you like it there's some excellent new guidance from the material design team by their research on building beautiful dark themes this includes how to adjust depth by using lightness instead of shadows how to adjust color vibrancy to reduce visual vibration and more but to make it even easier for your team chrome is working on a machine learning aided auto dark algorithm feature this feature will include auto darkened websites along with a few affordances to opt out of the auto dark functionality on a more granular level we're still in the early stages of feature developments and we need your help to get it right to try it out now you can open the devtools rendering panel in chrome canary and enable auto dark mode emulation check out the link to learn more and to give us your thoughts now pass back to ben one last time thanks yuna you know we've seen a lot of change in the web over the past year and we're still more optimistic than ever about the future of the platform across the areas we just talked about and more in the years ahead you can expect to see us continue to push hard to make the web more private and powerful and to provide developers with better tools and guidance to create top quality experiences for people all over the world you know part of what makes the web so special is that it's an open decentralized ecosystem which presents lots of ways for anyone to get involved in helping to shape its future so we invite you to participate with this effort whether that's through the chromium open source project the w3c and other standards bodies or simply following along with us on web.dev and our chromiumdev twitter account and over the next couple of weeks as part of this virtual cds 2021 we're hosting a number of workshops group learning lounges and one-on-one office hours where you can engage directly with the chrome team audit your own sites with expert guidance give us feedback and share your ideas for the future of the web and with that thank you for watching and i hope to see you again in person sometime soon at a future chrome dev summit event until then [Music] you

Channel: Google Chrome Developers

Views: 941,670

Rating: 4.767313 out of 5

Keywords: Chrome Dev Summit, Chrome Dev Summit 21, Chrome Dev Summit 2021, Chrome, Chrome Developers, Chrome Development, what's new in chrome, chrome development updates, Chrome developer updates, new in chrome, type: Conference Talk (Full production), pr_pr: Chrome

Id: Df2U9-R-OJs

Length: 47min 25sec (2845 seconds)

Published: Wed Nov 03 2021