Chromium Blog: August 2018

Charting Browser Interoperability

Thursday, August 30, 2018

At this year's Google I/O, Ben Galbraith and Malte Ubl presented a chart during the Web keynote showing how the web is getting more interoperable:

This trend is really important to the Chrome team: web developers should be able to target the web platform, not four different (though overlapping) platforms. The chart was gleaned from the data in our Web API Confluence Dashboard. This project, originally designed for browser engineers, provides insights into web interoperability by tracking page-visible JavaScript APIs across many releases of the four major browser engines. Here’s an example:

Caption: Count of browser-specific APIs goes up when browsers are first to ship a new API, and down when either (i) a second browser implements a new API, or (ii) an API that failed to build consensus is removed by the one browser that implemented it. This chart plots a count of APIs shipped by only one of the four browser vendors over time. Interacting with the chart on the dashboard lets you open the list of APIs that corresponds to each count:

This information helps browser vendors prioritize work that will make the web more interoperable by either removing old browser-specific APIs or working with other vendors to implement APIs that are not yet widely supported. How APIs are collected In order to count APIs on the web, we first had to define what counts as a “web API”. The web is full of useful features, some of which are hard to define let alone detect. For this analysis we focused on JavaScript APIs that are visible to the developer when the page first loads. This leaves out several classes of feature, like CSS properties, HTML attributes, and APIs that are not available on page load (e.g., APIs are surfaced through interaction user/API interactions, or only available in certain types of workers). Nevertheless, it gives us a general view of programmable browser capabilities. Our JavaScript API-finding algorithm inspects the JavaScript object graph exposed on the global window object. Check out the link for details on how we managed to extract APIs from JavaScript prototypes. With the help of BrowserStack’s 1000+ browser/operating system configurations, we were able to gather API data for browser releases going back as far as 2012.

Determining if the web is healthy

Take a look at the metrics page on the dashboard and you’ll see a few different charts we’ve generated about the shape of the web. These metrics, and the APIs they represent, give web platform implementers insights into which APIs are fragmenting the web. APIs that fragment the web are:

Shipped by almost every browser, but not quite;

Removed by one browser, but not others; or

Shipped by one browser, but not others.

For example, our data shows that Safari is the only major browser that does not ship CSSStyleDeclaration#backfaceVisibility, Chrome has removed a number of SVGSVGElement APIs that are still shipped by all major browsers, and Edge is the only major browser shipping a number of BhxBrowser APIs. Querying the raw data yourself The dashboard isn’t intended to replace tools like MDN Docs or caniuse.com, but rather to illustrate trends that help browser vendors keep evolving the web towards interoperability. That said, the catalog page on the dashboard can give developers another source to corroborate interop info from manually curated sources. Try playing around with the search box above the API catalog. It supports some basic structured queries like in:firefox60 or notin:chrome66 for APIs in Firefox 60 or missing from Chrome 66, or RTCPeerConnection count:2 for RTCPeerConnection-related APIs shipped by exactly two of the browsers currently in view. Clicking the vertical ellipsis icon lets you add or remove dozens of browser releases from the grid, and the URL bar always contains a link that will get you back to the current query. Validating MDN browser compat tables We’ve also started using the data to help tech writers programmatically check their contributions to MDN’s excellent browser compatibility database. Try this out: # Clone MDN’s browser compatibility database git clone https://github.com/mdn/browser-compat-data.git cd browser-compat-data # Install dependencies npm install # Load confluence data for ServiceWorker npm run confluence -- --interfaces=ServiceWorker # Take a look at the differences that have been applied to your working tree git diff # Read the full list of parameters you can try on `npm run confluence` npm run confluence -- --help ConclusionWe hope both browser engineers and web developers can benefit from the dashboard. Check it out and let us know what you think over at the GitHub project that hosts the code.
Posted by Mark Dittmer, Software Engineer working on Web Ecosystem Infrastructure

Help test / provide feedback on upcoming Chrome browser features

Friday, August 24, 2018

What is the Chrome beta channel?

How do I switch to the Chrome beta channel?

Is the beta channel considered stable enough to use every day?
Generally yes - but there may be hiccups along the way. We encourage beta channel users to regularly back up their important personal settings, like bookmarks, passwords, and more.

What’s the best way to provide feedback, report problems, etc.?
Chrome has three ways to provide feedback and report issues you may spot.

Reporting feedback within Chrome. You can use the instructions found here to submit a feedback report within Chrome. We use these reports in aggregate to identify spikes and trends. We also perform deep dives when investigating issues, when checking in on new feature launches, and as part of regular user journey efforts.
Troubleshooting an issue. Our official community forums are the best place to get help troubleshooting issues. We have a group of top contributors who also have the ability to escalate threads, which often help identify issues we aren’t seeing elsewhere.
Reporting confirmed bugs on this project tracker. Once an issue is confirmed as a bug, you’re able to create a report to it on our public development tracker - straight to our team! You may find that your bug has already been reported (things move fast!), but this allows us to track a bug’s life cycle in an easy way.

Is there anything more beta than beta?
Yes! For some platforms, we also offer developer versions and even canary builds that are fresh off the test servers. These are generally only advised for folks that work on projects that need testing lead time. You can learn more about other release options here.

Chrome 69 Beta: CSS tricks, and more

Thursday, August 2, 2018

ChromeStatus.com New CSS tricks Conic gradientsCSS conic (angular/sweep) gradientsare availablediv { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border-radius: 50% } New margin, padding, and border propertiesmarginpaddingbordernow use standard namesmargin-{block,inline}-{start,end}padding-{block,inline}-{start,end}border-{block,inline}-{start,end}-{width,style,color}-webkitborder-{block,inline}-{start,end} CSS scroll snapCSS scroll snap positions#gallery { scroll-snap-type: x mandatory; overflow-x: scroll; display: flex; } #gallery img { scroll-snap-align: center; } Display cutoutsDisplay cutoutsenv()viewport-fitviewportcoverexplainerspec<meta name="viewport" content="viewport-fit: cover" /> <style> #box { margin-top: env(safe-area-inset-top); margin-left: env(safe-area-inset-left); margin-bottom: env(safe-area-inset-bottom); margin-right: env(safe-area-inset-right); } </style> <div id=box></div> Other features in this release CanvasOffscreenCanvasDedicatedWorker.requestAnimationFrame()const offscreenCanvas = new OffscreenCanvas(100, 100); const ctx = offscreenCanvas.getContext("2d"); ctx.fillRect(0, 0, 10, 10);const canvasElement = document.getElementById("mycanvas") const offscreenCanvas = canvasElement.transferControlToOffscreen(); const ctx = offscreenCanvas.getContext("2d"); ctx.fillRect(0, 0, 10, 10); self.onmessage = function(ev) { const offscreenCanvas = ev.data; const ctx = offscreenCanvas.getContext("2d"); let x = 0; const draw = function() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillRect(x, 0, 10, 10); x = (x + 1) % ctx.canvas.width; requestAnimationFrame(draw); }; draw(0); } const worker = new Worker("worker.js"); const offscreenCanvas = document.getElementById("canvas").transferControlToOffscreen(); worker.postMessage(offscreenCanvas, [offscreenCanvas]); DOMElement.toggleAttribute() Element.classList.toggleElement.setAttribute() Fetch API: Request.isHistoryNavigation JavaScript APIs

The ReportingObserver API provides a JavaScript callback function invoked in response to deprecations and browser interventions. The report can be saved, sent to the server, or or handled using arbitrary JavaScript. This feature is designed to give developers greater insight into the operation of their sites on real-world devices.

JavaScript arrays are getting two new methods. Array.prototype.flat() returns a new array with all sub-array elements concatenated into it recursively up to the specified depth. The sub-array elements become members of the new array. Array.prototype.flatMap() first maps each element using a mapping function, then flattens the result into a new array. This method is functionally equivalent to a map followed by calling flat() with a depth of 1.

Keyboard Map APIKeyboardEvent.codespecificationexplainer Loader"rtt", "downlink", and "ect" client hint valuesrttnavigator.connection.rttnavigator.connection.downlinknavigator.connection.effectiveType Media: Querying encryption scheme support through EMEnew method Mid-ligature text selection

Selection in a ligature in English.Selection in a ligature in Arabic. PerformanceSite Isolation on desktopreturn quantized memory consumption information ServiceWorker

ServiceWorkerRegistration.update() previously resolved with undefined. Now it resolves to the registration object as required by the specification.

Because of a technical limitation, navigator.serviceWorker previously threw a SecurityError when accessed on an insecure context. After this change, navigator.serviceWorker returns undefined

Update behavior of CSS Grid Layout percentage row tracks and gutters Web Locks APIasynchronously acquire a lockmy_net_syncmy_resourceawait navigator.locks.request('my_resource', async lock => { const url = await look_up_in_database(); const response = await fetch(url); const body = await response.text(); await store_body_in_database(body); }); explainerdraft specification Web Authentication now supports CTAP2 FIDO devicesadds support for CTAP2 devicesThe WebAuthentication API WebRTC

Chrome now supports the RTCRtpParameters.headerExtensions dictionary entry which is returned by RTCRtpSender.getParameters(). This is a read-only field that allows inspection of the parameters that are set on a PeerConnection after negotiation.

The RTCRtpSender and RTCRtpReceiver interfaces now provide the getCapabilities() method

Deprecations and Interoperability Improvements Removal of 'stalled' event from HTMLMediaElements that use Media Source ExtensionsHTMLMediaElement.stalledstalledstalledremoved for Media Source Extensions Removal of document.createTouchListdocument.createTouchList()Touch() The window.confirm() method no longer activates its parent tabwindow.confirm()returns immediately with falsewindow.confirm()Posted by Jennifer Apacible

Aug	SEP	Oct
	30
2019	2020	2021

Chromium Blog

Charting Browser Interoperability

Help test / provide feedback on upcoming Chrome browser features

Chrome 69 Beta: CSS tricks, and more

Labels

Archive

Feed