Chrome plating is essential to keep machines running in top condition. Trust New England Chrome Plating Inc for quality plating services. We have great attention to detail. Whether it is a car or a boat, if you want to redefine its look by chrome plating it, we can help you. We offer hassle-free household hardware or antique chrome plating. Chrome has supported Windows 10’s system-wide dark theme for a while, but Chrome 88 makes it a little better. Dark Theme now applies to scroll bars on many of Chrome’s internal pages. That includes Settings, Bookmarks, History, New Tab Page, and more.
Chrome 79 is rolling out now!
- Installed Progressive Web Apps on Android now support maskable icons.
- You can now create immersive experiences with the WebXR Device API.
- The Wake Lock API is available as an origin trial.
- The
rendersubtreeattribute is available as an origin trial. - Videos from the Chrome DevSummit are now online.
- And plenty more.
I'm Pete LePage, let's dive in and see what's new for developers in Chrome 79!
Maskable Icons #
If you're running Android O or later, and you've installed a Progressive Web App, you've probably noticed the annoying white circle around the icon.
Thankfully, Chrome 79 now supports maskable icons for installed Progressive Web Apps.You'll need to design your icon to fit within the safe zone - essentially a circle with a diameter that's 80% of the canvas.
Then, in the web app manifest, you'll need to add a new purpose property to the icon, and set its value to maskable.
Tiger Oakes has a great post on CSS Tricks - Maskable Icons: Android Adaptive Icons for Your PWA with all of the details, and has a great tool you can use for testing your icons to make sure they'll fit.
Web XR #
You can now create immersive experiences for smartphones and head-mounted displays with the WebXR Device API.
WebXR enables a whole spectrum of immersive experiences. From using augmented reality to see what a new couch might look like in your home before you buy it, to virtual reality games and 360 degree movies, and more.
To get started with the new API, read Virtual Reality Comes to the Web. Zip decompressor mac.
New origin trials #
Origin trials provide an opportunity for us to validate experimental features and APIs, and make it possible for you to provide feedback on their usability and effectiveness in broader deployment.
Experimental features are typically only available behind a flag, but when we offer an Origin Trial for a feature, you can register for that origin trial to enable the feature for all users on your origin.
Opting into an origin trial allows you to build demos and prototypes that your beta testing users can try for the duration of the trial without requiring them to flip any special flags in Chrome.
There's more info on origin trials in the Origin Trials Guide for Web Developers. You can see a list of active origin trials, and sign up for them on the Chrome Origin Trials page.
Wake Lock #
One of my biggest pet peeves about Google Slides is that if you leave the deck open on a single slide for too long, the screensaver kicks in. Before you can continue, you need to unlock your computer. Ugh.
But, with the new Wake Lock API, a page can request a lock, and prevent the screen from dimming or the screensaver from kicking in. It's perfect for Slides, but it's also helpful for things like recipe sites - where you might want to keep the screen on while you follow the instructions.
To request a wake lock, you need to call navigator.wakeLock.request(), and save the WakeLockSentinel object that it returns.
Mac os x lion disc. The lock is maintained until the user navigates away from the page, or you call release on the WakeLockSentinel object you saved earlier.
More details are at web.dev/wakelock.
rendersubtree attribute #
There are times when you don't want part of the DOM to render immediately. For example scrollers with a large amount of content, or tabbed UIs where only some of the content is visible at any given time.
The new rendersubtree attribute tells the browser it can skip rendering that subtree. This allows the browser to spend more time processing the rest of the page, increasing performance.
When rendersubtree is set to invisible, the element's content is not drawn or hit-tested, allowing for rendering optimizations.
Changing the rendersubtree to activatable, makes the content visible by removing the invisible attribute, and rendering the content.
Chrome Dev Summit 2019 #
If you missed Chrome Dev Summit, all of the talks are on our YouTube channel.
Jake also has a great Twitter thread with all the fun stuff that went on between the talks, including the newest member of our team, Surjiko.
Further reading #
This covers only some of the key highlights. Check the links below for additional changes in Chrome 78.
Subscribe #
Want to stay up to date with our videos, then subscribe to our Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.
I'm Pete LePage, and as soon as Chrome 80 is released, I'll be right here to tell you -- what's new in Chrome!
Last updated: •Improve article
Chrome 90 is starting to roll out to stable now, and in honor of Chrome 90, the video is '90s style. Enjoy!
Here's what you need to know:
- There's a new value for the CSS
overflowproperty. - The Feature Policy API has been renamed to Permissions Policy.
- And there's a new way to implement and use Shadow DOM directly in HTML.
- I owned several jackets almost exactly like this in the 1990s.
- And, there's plenty more.
I'm Pete LePage, and I've got the 411 for developers in Chrome 90, doin' it 1990's style!
Prevent overflow with overflow: clip#
CSS is all that and a bag of chips! But, I think every web developer has seen and experienced something that overflows awkwardly at some point. There's a great post on CSS Tricks about different ways to handle the overflow, for example, using overflow: hidden, or auto.
New Chrome Browser Profile
In the CSS Overflow Spec, there's a new clip property that works similarly to hidden.
Using overflow: clip makes it possible for you to prevent any type of scrolling for the box, including programmatic scrolling. That means the box is not considered a scroll container; it does not start a new formatting context, which gives it better performance than overflow: hidden. And if you need it, you can apply clipping to a single axis via overflow-x and overflow-y.
Oh, and FYI - there's also overflow-clip-margin, which allows you to expand the clip border. This is useful for cases where there is ink overflow that should be visible.
See overflow: clip in action at https://petele-css-is-awesome.glitch.me/
Feature Policy is now Permissions Policy #
Back in Chrome 74, we introduced the Feature Policy API, which allows you to selectively enable, disable, and modify the behavior of certain APIs and web features in the browser. These policies are a contract between you and the browser. They inform the browser about what your intent is.
If your code, or any of the third party libraries you use violate your preselected rules, the browser overrides the behavior with better UX or just says, 'talk to the hand,' blocking the API altogether.
Starting in Chrome 90, the Feature Policy API will be renamed Permissions Policy, and the HTTP header has been renamed along with it. At the same time, the community has settled on a new syntax, based on Structured Field Values for HTTP.
Chrome 89 and earlier #
If you're interested in how to use this on your site, check out Introduction to Feature Policy.
Declarative Shadow DOM #
Shadow DOM, part of the Web Components standard, provides a way to scope CSS styles to a specific DOM subtree and isolate that subtree from the rest of the document. Until now, the only way to use Shadow DOM was to construct a shadow root using JavaScript.
New Chrome Update
This works fine for client-side rendering, but not so well in server side rendering where there is no built in way to express Shadow Roots in the server generated HTML. But, starting in Chrome 90, with the Declarative Shadow DOM, you're good to go. You can create shadow roots using only HTML.
A Declarative Shadow Root is a <template> element with a shadowroot attribute. It's detected by the HTML parser and immediately applied as the shadow root of its parent element.
Loading the pure HTML markup results in this DOM tree:
This gives us the benefits of Shadow DOM's encapsulation and slot projection in static HTML. No JavaScript is needed to produce the entire tree, including the Shadow Root.
Check out Declarative Shadow DOM on web.dev for more details.
And more #
And of course there's plenty more.
To help improve privacy, and even loading speeds for users visiting sites that support HTTPS, Chrome's address bar will use https:// by default. And if you haven't set up an automatic redirect from HTTP to HTTPS, now would be a great time to do that.
And an AV1 encoder is shipping in Chrome desktop that is specifically optimized for video conferencing with WebRTC integration.
Further reading #
This covers only some of the key highlights. Check the links below for additional changes in Chrome 90.
Subscribe #
Want to stay up to date with our videos, then subscribe to our Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.
I'm Pete LePage, and as soon as Chrome 91 is released, I'll be right here to tell you what's new in Chrome!
A special shout out #
I had a lot of fun shooting this 1990s themed episode of New in Chrome. Huge thanks to Sean Meehan for the idea and for bringing together the amazing folks who helped open the time warp to 1990.
GDS Design
- Fola Akinola
- Derek Bass
- Christopher Bodel
- Nick Krusick
- Chris Walker
And of course, Loren Borja, Lee Carruthers, and Lukas Holcek who work on all of my New in Chrome videos and make me look way better than I actually am. THANK YOU!
Last updated: •Improve article