Chromium Blog: Chrome 69 Beta: CSS tricks, and more

Chromium Blog

News and developments from the open source browser project

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