Subscribe: Chromium Blog
Added By: Feedage Forager Feedage Grade A rated
Language: English
ads  api  chrome beta  chrome  css  developers  experience  experiences  new  page  performance  site  sites  user  users  web 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Chromium Blog

Chromium Blog

News and developments from the open source browser project

Updated: 2018-03-22T15:45:36.947-07:00


Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet


Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 66 on ChromeStatus.The ImageBitmap Rendering Context for Historically, rendering an image to a canvas has involved first creating an tag and then rendering its contents to a canvas. This causes multiple copies of the image to be stored in memory. A new rendering context streamlines the display of ImageBitmap objects by avoiding memory duplication and rendering them more efficiently.This example shows how to do this using an ImageBitmapRenderingContext. This essentially transfers ownership of an image's pixels. This example does so from a blob to a , but pixels can be moved between elements as well. Note that the blob is compressed so it is not a full copy in memory.const image = await createImageBitmap(imageBlob);const canvas = document.createElement('canvas');const context = canvas.getContext('bitmaprenderer');context.transferFromImageBitmap(image);canvas.toBlob((outputJPEGBlob) => { // Do something with outputJPEGBlob.}, 'image/jpeg');If this were done without createImageBitmap(), the imageBlob would be lazily decoded, which would cause jank. On the other hand createImageBitmap() is asynchronous which allows you to decode it completely before using it and avoiding jank. For example, a WebGL game could use this to load new textures on the fly as gameplay progresses.CSS Typed Object ModelHistorically, developers wanting to manipulate CSS properties have had to manipulate strings only for the browser to then convert it back to a typed representation. What made things worse was when developers tried to read the value of a CSS property in Javascript, this typed value was converted back to a string. In version 66, Chrome implements the CSS Typed Object Model (OM) Level 1, a part of Houdini, for a subset of CSS properties. Typed OM reduces this burden on both the developer and browser by exposing CSS values as typed JavaScript objects rather than strings. Along with allowing the performant manipulation of values assigned to CSS properties, Typed OM allows developers to write more maintainable and easy to understand code. A brief example illustrates the point. Previously if I wanted to set the opacity of an element I could do = 0.3; === "0.3"With CSSOM:el.attributeStyleMap.set("opacity", CSS.number("0.3"));el.attributeStyleMap.get("opacity").value === 0.3The returned values above are of type CSSUnitValue, which are easier to manipulate than strings. Asynchronous Clipboard APIThe new asynchronous clipboard API provides a promise-based means of reading from and writing to the clipboard. It's simpler than the old execCommand('copy') API released in Chrome 43 and integrates with the Permissions API. Future Chrome releases will also support copy/paste of richer types of data, including images.To get a taste of this API, lets do simple write and read operations with text.try { await navigator.clipboard.writeText("Hello, clipboard.");} catch { console.error("Unable to write to clipboard.");}Similarly, to read text back:const data = await navigator.clipboard.readText();console.log("From the clipboard:", data);For more information, including how to use security and permissions with the API, read Unblocking Clipboard Access and check out our sample.AudioWorkletThe legacy ScriptProcessorNode was asynchronous and required thread hops, which could produce an unstable audio output. The AudioWorklet object provides a new synchronous JavaScript execution context which allows developers to programmatically control audio without additional latency and higher stability in the output audio.You can see example code in action along with other examples at Google Chrome Labs.In addition to AudioWorklet, other worklet API are being built. PaintWorklet was released in Chrome 65/Opera 52. An AnimationWorklet is planned. ScriptProcessorNode will be depreca[...]

Under the hood: How Chrome's ad filtering works


While most advertising on the web is respectful of user experience, over the years we've increasingly heard from our users that some advertising can be particularly intrusive. As we announced last June, Chrome will tackle this issue by removing ads from sites that do not follow the Better Ads Standards. We've previously discussed some of the details surrounding how Chrome protects users from intrusive ads, but as we approach the launch date of February 15, we wanted to go under the hood and discuss how this feature works in more detail.What are the Better Ads Standards?The Better Ads Standards are the result of public consumer research by the Coalition for Better Ads, an industry group focused on improving users' experience with online advertising. Over 40,000 internet users in North America and Europe participated in surveys where they were shown common ad experiences and asked to evaluate how intrusive the experiences were. The most intrusive ad experiences include prestitial ads (those full-page ads that block you from seeing the content on the page) and flashing animated ads. More details about the research and methodology can be found on the Coalition's website.Although a few of the ad experiences that violate the Better Ads Standards are problems in the advertisement itself, the majority of problematic ad experiences are controlled by the site owner — such as high ad density or prestitial ads with countdown. This result led to the approach Chrome takes to protect users from many of the intrusive ad experiences identified by the Better Ads Standards: evaluate how well sites comply with the Better Ads Standards, inform sites of any issues encountered, provide the opportunity for sites to address identified issues, and remove ads from sites that continue to maintain a problematic ads experience.Today, the Better Ads Standards consists of 12 ad experiences that research found to be particularly annoying to users. Image Source: Coalition for Better AdsEvaluating sites for violationsSites are evaluated by examining a sample of pages from the site. Depending on how many violations of the Better Ads Standards are found, the site will be evaluated as having a status of Passing, Warning, or Failing. The evaluation status of sites can be accessed via the Ad Experience Report API. Site owners can also see more detailed results, such as the specific violations of the Better Ads Standards that were found, via the Ad Experience Report in Google’s Search Console. From the Report site owners can also request that their site be re-reviewed after they have addressed the non-compliant ad experiences. allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="" frameborder="0" height="266" src="" width="320">The Ad Experience Report in Google's Search Console allows site owners to see their overall site evaluation status, as well as the specifics of any violations identified on their site.Filtering on sites at the network levelAt a technical level, when a Chrome user navigates to a page, Chrome’s ad filter first checks if that page belongs to a site that fails the Better Ads Standards. If so, network requests on the page — such as those for JavaScript or images — are checked against a list of known ad-related URL patterns. If there is a match, Chrome will block the request, preventing the ad from displaying on the page. This set of patterns is based on the public EasyList filter rules, and includes patterns matching many ad providers including Google’s own ad platforms, AdSense and DoubleClick.What this looks like in ChromeChrome will automatically block ads on sites that fail the Better Ads Standards, using the approach described above. When at least one network request has been blocked, Chrome will show the user a message indicating that ad blocking has occurred as well as an option to disable this setting by selecting “allow [...]

Chrome 65 Beta: CSS Paint API and the ServerTiming API


Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.CSS Paint APIThe CSS Paint API, also known as “CSS Custom Paint”, allows developers to programmatically generate an image whenever a CSS property expects one. Instead of referencing an image resource, developers can now use the new paint() function to reference a paint worklet that will draw the image. This API can be used for many things, including making the DOM tree smaller and transferring significantly less data compared to an image.To see the paint worklet in action, check out our explainer and the video demo below. In this example, the CSS Paint API is used to programmatically create a checkerboard image. Server Timing APIDevelopers interested in measuring the performance of their web applications have been able to use the Navigation Timing and Resource Timing APIs to request timing data for the document and its resources. Until now, there has been no way for the server to send any details about its response time to the client. The new Server Timing API allows web servers to pass performance timing information via HTTP headers to browsers. This new API provides developers a more complete performance picture that includes the speed of both the client and the server. For example, Chrome Developer Tools now shows server timing performance information via the Server Timing API.Screenshot of the Chrome Developer Tools integration of the ServerTiming API.Other features in this releaseBlink > CSSDevelopers can now use the :any-link pseudo-selector to apply CSS properties to all unvisited or visited hyperlink elements.The syntax for specifying HSL/HSLA and RGB/RGBA coordinates for the color property now match the CSS Color 4 spec.Developers can use display:contents to generate boxes for an element’s children and pseudo-elements without generating the parent box.Blink > DOMTo complement assignedNodes(), the element now has an assignedElements() method, which returns only the element nodes assigned to a given slot.Chrome now supports the HTMLAnchorElement.relList property to indicate the relationship between the resource represented by the element and the current document. Thanks to Samsung for this contribution!Blink > Feature PolicyDevelopers can now use the sync-xhr feature policy to selectively enable and disable the use of Synchronous XMLHttpRequest.Blink > NetworkTo match compatibility with the TLS spec, Chrome now supports the draft-23 version of the TLS 1.3 protocol.Developers can use Request.destination to evaluate which resource their service worker is fetching.Blink > Performance APIsAs WebIDL was deprecated, PerformanceResourceTiming, PerformanceLongTaskTiming, and TaskAttributionTiming now support the toJSON method to convert objects to JSON.Blink > SecurityTo protect users against cross-origin information leakage, Chrome will ignore the presence of the download attribute on anchor elements with cross-origin attributes.Deprecations and interoperability improvementsBlink > BindingsTo match compatibility with the HTML spec, document.all is no longer overwritable.Blink > NetworkAs previously announced, Chrome 65 will not trust certificates issued from Symantec’s Legacy PKI after December 1st, 2017, and will result in interstitials. This will only affect site operators who explicitly opted-out of the transition from Symantec’s Legacy PKI to DigiCert’s new PKI, and does not apply to the previously disclosed independent sub-CAs from this infrastructure.For a complete list of all features (including experimental features) in this release, see the Chrome 65 milestone hotlist.Posted by Ian Kilpatrick, Patiently Painting Engineer[...]

A secure web is here to stay


For the past several years, we’ve moved toward a more secure web by strongly advocating that sites adopt HTTPS encryption. And within the last year, we’ve also helped users understand that HTTP sites are not secure by gradually marking a larger subset of HTTP pages as “not secure”. Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”.

In Chrome 68, the omnibox will display “Not secure” for all HTTP pages.

Developers have been transitioning their sites to HTTPS and making the web safer for everyone. Progress last year was incredible, and it’s continued since then:

  • Over 68% of Chrome traffic on both Android and Windows is now protected
  • Over 78% of Chrome traffic on both Chrome OS and Mac is now protected
  • 81 of the top 100 sites on the web use HTTPS by default
Chrome is dedicated to making it as easy as possible to set up HTTPS. Mixed content audits are now available to help developers migrate their sites to HTTPS in the latest Node CLI version of Lighthouse, an automated tool for improving web pages. The new audit in Lighthouse helps developers find which resources a site loads using HTTP, and which of those are ready to be upgraded to HTTPS simply by changing the subresource reference to the HTTPS version.

Lighthouse is an automated developer tool for improving web pages.

Chrome’s new interface will help users understand that all HTTP sites are not secure, and continue to move the web towards a secure HTTPS web by default. HTTPS is easier and cheaper than ever before, and it unlocks both performance improvements and powerful new features that are too sensitive for HTTP. Developers, check out our set-up guides to get started.

Posted by Emily Schechter, Chrome Security Product Manager

Further protecting users from deceptive or confusing inline installation


Since 2012, Chrome has enabled extension developers to provide a smooth installation experience on their own pages using inline installation. We have also worked hard to prevent abuse of this feature by disabling inline installation in cases where we detect misleading or deceptive installation flows. User complaints have been reduced by 65% since the start of this disabling initiative. Fewer than 3% of extensions still engage in these deceptive or confusing install flows, but this subset of extensions generates 90% more user complaints on average than the rest of the extensions in the Chrome Web Store.

As part of our ongoing efforts to protect users, we are expanding our abuse protections to further reduce user harm. Starting in a few weeks, we will upgrade our automated inline installation abuse detection to improve our detection speed and better detect extensions using deceptive or confusing installation flows.

In addition to the existing extension-level protection, our expanded enforcement will also use machine learning to evaluate each inline installation request for signals of deceptive, confusing, or malicious ads or webpages. When we find those signals, we’ll selectively disable that one inline installation request and redirect the user to the extension’s page on the Chrome Web Store. This selective enforcement will not impact inline installation of that extension from other, non-deceptive sources.

We’ve taken these measures to preserve a good experience for Chrome users and developers in the Chrome Web Store. More information is available in the Inline Installation Enforcement FAQ.

Posted by Nav Jagpal and Benjamin Ackerman, Safe Browsing Team

Chrome 64 Beta: stronger pop-up blocker, Resize Observer, and import.meta


Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.Stronger pop-up blocker1 out of every 5 user feedback reports submitted on Chrome for desktop mention some type of unwanted content. Examples include links to third-party websites disguised as play buttons or other site controls, or transparent overlays on websites that capture all clicks and open new tabs or windows. In this release, Chrome's pop-up blocker now prevents sites with these types of abusive experiences from opening new tabs or windows. Site owners can use the Abusive Experiences Report in Google Search Console to see if any of these abusive experiences have been found on their site and improve their user experience.  Two types of abusive experiences where a deceptive site control appears to do one thing, but has a different behavior when clicked. One looks like a play button on a video but sends the user to an unwanted download when clicked (left), and the other looks like a close button but instead opens unwanted pop-up windows (right).Resize ObserverTraditionally, responsive web applications have used CSS media queries or window.onresize to build responsive components that adapt content to different viewport sizes. However, both of these are global signals and require the overall viewport to change in order for the site to respond accordingly. Chrome now supports the Resize Observer API to give web applications finer control to observe changes to sizes of elements on a page. const ro = new ResizeObserver((entries) => {  for (const entry of entries) {    const cr = entry.contentRect;    console.log('Element:',;    console.log(`Element size: ${cr.width}px × ${cr.height}px`);    console.log(`Element padding: ${}px / ${cr.left}px`);  }});// Observe one or multiple elementsro.observe(someElement);The code snippet above uses the Resize Observer API to observe changes to an element. import.metaDevelopers writing JavaScript modules often want access to host-specific metadata about the current module. To make this easier, Chrome now supports the import.meta property within modules that exposes the module URL via import.meta.url. Library authors might want to access the URL of the module being bundled into the library to more easily resolve resources relative to the module file as opposed to the current HTML document. In the future, Chrome plans to add more properties to import.meta.Other features in this releaseBlink > AnimationThe offset-path property can be used to animate an element by specifying the geometry of the path that an element moves along. Blink>FontsDevelopers can now use the text-decoration-skip-ink CSS property to control how overlines and underlines are drawn when they cross over a glyph. Blink>InputCoordinates of PointerEvent with pointerType=mouse are now fractional, resulting in more precise mouse measurements. Blink>JavaScriptTo improve developer experience, Chrome now supports named captures in regular expressions, allowing developers to assign meaningful names to portions of a string that a regular expression matches. Chrome now supports the Unicode property escapes \p{…} and \P{…} for regular expressions that have the u flag set, allowing developers to create more powerful Unicode-aware regular expressions. To assist with local-aware formatting of strings produced by internationalization formatters, developers can now use Intl.NumberFormat.prototype.formatToParts() to format a number to a list of tokens and their type. Thanks to Igalia for helping make this happen! Blink>MediaMatching other browser implementations, Chrome now sets the default preload value for

Reducing Chrome crashes caused by third-party software


Roughly two-thirds of Windows Chrome users have other applications on their machines that interact with Chrome, such as accessibility or antivirus software. In the past, this software needed to inject code in Chrome in order to function properly; unfortunately, users with software that injects code into Windows Chrome are 15% more likely to experience crashes. With Chrome extensions and Native Messaging, there are now modern alternatives to running code inside of Chrome processes. Starting in July 2018, Chrome 68 will begin blocking third-party software from injecting code into Chrome on Windows.

These changes will take place in three phases. In April 2018, Chrome 66 will begin showing affected users a warning after a crash, alerting them that other software is injecting code into Chrome and guiding them to update or remove that software.

In Chrome 66 a warning will be shown to users with third-party software that injects into Chrome.

In July 2018, Chrome 68 will begin blocking third-party software from injecting into Chrome processes. If this blocking prevents Chrome from starting, Chrome will restart and allow the injection, but also show a warning that guides the user to remove the software. Finally, in January 2019, Chrome 72 will remove this accomodation and always block code injection.

While most software that injects code into Chrome will be affected by these changes, there are some exceptions. Microsoft-signed code, accessibility software, and IME software will not be affected. As with all Chrome changes, developers are encouraged to use Chrome Beta for early testing.

Fewer crashes means more happy users, and we look forward to continuing to make Chrome better for everyone.

Posted by Chris Hamilton, Chrome Stability Team

Expanding user protections on the web


One of the advantages of the web is that it allows developers to create any type of experience they can imagine, which has led to the rich diversity of content available on the web today. While most content producers are interested in providing excellent experiences for their users, we've found that a small number use the flexibility and power of the web to take advantage of users and redirect them to unintended destinations. 1 out of every 5 feedback reports from Chrome users on desktop mention encountering some type of unwanted content, and we take this feedback seriously when considering how to improve Chrome. Following on from features like Chrome's pop-up blocker and autoplay protections, over the next few releases we'll be rolling out three new protections designed to give users all the web has to offer, but without many of these types of unwanted behaviors.One piece of feedback we regularly hear from users is that a page will unexpectedly navigate to a new page, for seemingly no reason. We've found that this redirect often comes from third-party content embedded in the page, and the page author didn't intend the redirect to happen at all. To address this, in Chrome 64 all redirects originating from third-party iframes will show an infobar instead of redirecting, unless the user had been interacting with that frame. This will keep the user on the page they were reading, and prevent those surprising redirects.An example of a redirect being blocked on a test site. The iframes embedded in the site are attempting to navigate the page to an unintended destination, but Chrome prevents the redirect and shows an infobar.When the user interacts with content, things can also go wrong. One example that causes user frustration is when clicking a link opens the desired destination in a new tab, while the main window navigates to a different, unwanted page. Starting in Chrome 65 we'll also detect this behavior, trigger an infobar, and prevent the main tab from being redirected. This allows the user to continue directly to their intended destination, while also preserving the context of the page they came from.Finally, there are several other types of abusive experiences that send users to unintended destinations but are hard to automatically detect. These include links to third-party websites disguised as play buttons or other site controls, or transparent overlays on websites that capture all clicks and open new tabs or windows. Two types of abusive experiences where a deceptive site control appears to do one thing, but has a different behavior when clicked. One looks like a play button on a video but sends the user to an unwanted download when clicked (left), and the other looks like a close button but instead opens unwanted pop-up windows (right).Similar to how Google Safe Browsing protects users from malicious content, starting in early January Chrome's pop-up blocker will prevent sites with these types of abusive experiences from opening new windows or tabs. To help site owners prepare for this change, today we're also launching the Abusive Experiences Report alongside other similar reports in the Google Search Console. Site owners can use the report to see if any of these abusive experiences have been found on their site and improve their user experience. Otherwise, abusive experiences left unaddressed for 30 days will trigger the prevention of new windows and tabs.Together, these protections will dramatically improve users' web browsing experiences while still allowing them access to all that the web has to offer. Posted by Ryan Schoen, Product Manager[...]

Chrome 63 Beta: Dynamic module imports, async iterators and generators, Device Memory API, and permissions UI changes


Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.Dynamic module importsCurrently, importing JavaScript modules is completely static, and developers cannot import modules based on runtime conditions, like whether a user is logged in. Starting in this release, the import(specifier) syntax now allows developers to dynamically load code into modules and scripts at runtime. This  can be used for lazy loading a script only when it’s needed, which improves performance of the application. button.addEventListener('click', event => {    import('./dialogBox')    .then(dialogBox => {;    })    .catch(error => {        /* Error handling */    });});The code example above shows how to use the import(specifier) function to import JavaScript after an event. Async iterators and generatorsWriting code that does any sort of iteration with async functions can be inelegant. The new async generator functions using the async iteration protocol are now available to help developers streamline the consumption or implementation of streaming data sources. Async iterators can be used in for loops and also to create custom async iterators through async iterator factories. async function* getChunkSizes(url) {  const response = await fetch(url);  for await (const chunk of streamAsyncIterator(response.body)) {    yield chunk.length;  }} The code example above shows how to use async iterators to writer cleaner code for streaming fetches, using the streamAsyncIterator function. Device Memory APIIt’s challenging for developers to create one user experience that can work across all devices, due to varying device capabilities. The new Device Memory JavaScript API helps developers with this challenge by using the total RAM on a user’s machine to provide insights into device constraints. This insight enables developers to tailor content at runtime in accordance with hardware limitations. For example, developers can serve a “lite” app to users on low-end devices, resulting in better experiences and fewer frustrations. The Device Memory API can also be used to add context to metrics, such as the amount of time a task takes to complete in JavaScript, through the lens of device memory. Permissions UI changesWhen websites need special permissions from a user, they trigger a permission request. Currently these permission requests appear in Chrome for Android as ignorable banners at the bottom of the screen, and developers often show them without considering whether the user has the appropriate context to grant the permission. This results in a distracting user experience, and users ignore or temporarily dismiss these permission prompts more than 90% of the time.In Chrome 59, we started to address this problem by temporarily blocking a permission if the user dismisses the request three times. As a next step, in this release Chrome for Android now presents permission requests as modal dialogs. This change reduces the overall number of permission prompts by 50%. It also makes users 5 times more likely to accept or deny requests, rather than temporarily dismissing or repeatedly ignoring them. To ensure users understand the permission request, developers should present users with permission requests at an appropriate time, as we’ve found that users were 2.5 times more likely to grant permission to a site that ask for permissions with context. Other features in this releaseBlink > BindingsTo improve interoperability, a TypeError is now thrown for EventTarget.addEventListener and removeEventListener when the callback passed is not an EventLi[...]

Introducing the Chrome User Experience Report


Chrome was founded to push the web forward, and a key part of that is enabling developers to improve their user experience. Although current tools allow developers to understand how real-world users experience their own sites, they have never provided insight into comparisons with other sites or macro user experience trends across the web. Following similar efforts like the HTTPS Transparency Report, today we’re making the Chrome User Experience Report available to encourage performance and user experience improvements across the web.

The report is a public dataset of key user experience metrics for top origins on the web. All performance data included in the report is from real-world conditions, aggregated from Chrome users who have opted-in to syncing their browsing history and have usage statistic reporting enabled. The initial release includes data from a sample of ten thousand origins and focuses on loading metrics, though we hope to expand coverage in future iterations. For full details on the dataset format, how to access it, and best practices for analysis, please see our developer documentation.

By querying the dataset, developers can understand how real Chrome users experience the web from the diverse set of hardware, software, and networks they use in the wild. Analyzing many origins on the web will help site developers and the web community understand where they are doing well, identify areas for improvement, and observe advancements in user experience over time.

We welcome feedback on the dataset’s format, metrics, dimensions, or any other ways to improve the report. We hope that this dataset will help the web community identify opportunities, record trends, and improve user experience on the web.

Posted by Bryan McQuade and Ilya Grigorik, User Experience Reporters

Building unified documentation for the web


Browsers are always exploring new directions. This independent experimentation has enabled the web to evolve to meet new use cases, but it also means that keeping up with how the web is changing can be difficult. Browsers maintain documentation for their features and APIs, but cross-browser documentation is often fragmented across several sources. One of Chrome’s top priorities is making it easier to build sites that work in all browsers, and simplifying web documentation is a key part of that effort.

Today, web documentation is taking a big step towards a unified source. Mozilla Developer Network (MDN) Web Docs is announcing a new product advisory board, which includes founding members from Mozilla, Google, Microsoft, Samsung, and several others from the web standards and development communities. The product advisory board will review and provide feedback on the direction of MDN’s web documentation going forward.

For the last several years, Chrome has been transitioning its web documentation efforts to MDN, allowing us to combine our documentation efforts with many open source contributors like Mozilla. The product advisory board is another step towards making MDN the best source of up-to-date, comprehensive documentation on the web and aligns closely with our goal to make it easier to build for the web as a whole. As part of this effort, we’re also investing in interoperability tests for the web, which allows browsers to share tests and compare the compatibility of their features. We’re also building new infrastructure to help browser developers find bugs and missing APIs between implementations.

Check out MDN Web Docs as the centralized source of web API documentation. And look out for more information on how we’re working to make the web an even easier platform to build on.

Posted by Dru Knox, Product Manager

Chrome 62 Beta: Network Quality Estimator API, OpenType variable fonts, and media capture from DOM elements


Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.Network Quality Estimator APIThe Network Infomation API has been available in previous versions of Chrome, but has only provided theoretical network speeds given the type of a user's connection. In this release, the API has been expanded to provide developers with network performance metrics as experienced by the client. Using the API, a developer can inspect the current expected round trip time and throughput and be notified of performance changes. To simplify application logic, the API also summarizes measured network performance as the cellular connection type (e.g. 2G) most similar to it, even if the actual connection is WiFi or Ethernet. Using these network quality signals, developers can tailor content to network constraints. For example, on very slow connections, developers can serve a simplified version of the page to improve page load times.  These signals will also soon be available as HTTP request headers and enabled via Client Hints.OpenType Variable FontsOpenType Font Variations bring new typographic capabilities to the web. Previously, one font file contained just a single instance of a font family, including only one weight (Regular, Bold, Black…) or one stretch (Normal, Condensed, Expanded…).Figure: Animated Amstelvar and Decovar variable font examples With variable fonts, responsive design on the web now extends to typography. OpenType Variations provide a continuous spectrum of stylistic variations while saving space and bandwidth, since they all load from a single compact font file. Stretch, style, and weight can be adjusted using the respective updated CSS properties which now allow numeric values. Fine tuning of variation axis parameters, such as weight or width, is possible using the font-variation-settings CSS property.Media Capture from DOM ElementsThe W3C Media Capture from DOM Elements API now allows sites to live-capture content in the form of a MediaStream directly from HTMLMediaElements (i.e.

Unified autoplay


Users watch and listen to a lot of media, and autoplay can make it faster and easier to consume on the web. However, one of the most frequent user concerns is unexpected media playback, which can use data, consume power, and make unwanted noise while browsing. To address this, Chrome will be making autoplay more consistent with user expectations and will give users more control over audio.

Starting in Chrome 64, autoplay will be allowed when either the media won’t play sound, or the user has indicated an interest in the media. This will allow autoplay to occur when users want media to play, and respect users' wishes when they don't. These changes will also unify desktop and mobile web behavior, making web media development more predictable across platforms and browsers.

Not all users have the same preferences for autoplay media, so Chrome 63 will add a new user option to completely disable audio for individual sites. This site muting option will persist between browsing sessions, allowing users to customize when and where audio will play.

These changes will give users greater control over media playing in their browser, while making it easier for publishers to implement autoplay where it benefits the user. For more details, please see the autoplay roadmap.

Posted by Mounir Lamouri, Software Engineer

Run multiple versions of Chrome side-by-side


By default, when users install Chrome, they receive the most stable and supported build available. However, Chrome fans and web developers have long been able to opt into new Chrome features by installing pre-release packages such as Chrome Beta and Dev. Historically it's been impossible to install these pre-releases on the same computer as stable Chrome, forcing developers to choose between testing their site in the next version of Chrome and experiencing their site as users see it now.

Starting today, Chrome Beta and Chrome Dev can be installed on the same Windows computer as stable Chrome and run simultaneously, allowing developers to more easily test their site across multiple versions of Chrome. This means side-by-side Chrome installation is available on Windows, Android, and Linux, and will be made available on other platforms in future releases.

Chrome, Chrome Beta, and Chrome Dev can now be installed side by side on the same Windows computer. 

To install Chrome Beta or Chrome Dev, visit the Chromium release channels page. If you already have Chrome Dev or Beta and wish to run it side-by-side with stable Chrome, you'll need to uninstall it and then reinstall from this page. To easily transfer your bookmarks, settings, and other data, sign in to Chrome before you uninstall. And if you see something not quite right in Chrome Dev or Beta, please send us feedback.

Posted by Greg Thompson, Bitmason

Chrome 61 Beta: JavaScript modules, Payment Request API on desktop, Web Share API, and WebUSB


Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.JavaScript modulesModules allow developers to declare a script's dependencies and are already popular in third-party build tools, which use them to bundle only the required scripts. This release adds native support for JavaScript modules via the new