Chrome 96 Beta: Conditional Focus, Priority Hints, and More

Chrome 96 Beta: Conditional Focus, Priority Hints, and More
2021-10-22 02:50:00 Author: www.blogger.com(查看原文) 阅读量:53 收藏

tag:blogger.com,1999:blog-2471378914199150966.post-74216776910357451592021-10-21T10:50:00.000-07:002021-10-21T10:50:46.956-07:00Chrome 96 Beta: Conditional Focus, Priority Hints, and More<p>Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on <a href="https://www.chromestatus.com/features#milestone%3D76">ChromeStatus.com</a>. Chrome 96 is beta as of October 21, 2021.</p> <h2>Preparing for a Three Digit Version Number</h2><p>Next year, Chrome will release version 100. This will add a digit to the version number reported in Chrome's user agent string. To help site owners test for the new string, Chrome 96 introduces a runtime flag that causes Chrome to return '100' in its user agent string. This new flag called <code>chrome://flags/#force-major-version-to-100</code> is available from Chrome 96 onward.</p> <h2>Origin Trials</h2><p>This version of Chrome introduces the origin trials described below. Origin trials allow you to try new features and give feedback on usability, practicality, and effectiveness to the web standards community. To register for any of the origin trials currently supported in Chrome, including the ones described below, visit the <a href="https://developers.chrome.com/origintrials/#/trials/active">Chrome Origin Trials dashboard</a>. To learn more about origin trials in Chrome, visit the <a href="https://web.dev/origin-trials/">Origin Trials Guide for Web Developers</a>. Microsoft Edge runs its own origin trials separate from Chrome. To learn more, see the <a href="https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/">Microsoft Edge Origin Trials Developer Console</a>. </p> <h3>New Origin Trials</h3> <h4>Conditional Focus</h4><p>Applications that capture other windows or tabs currently have no way to control whether the calling item or the captured item gets focus. (Think of a presentation feature in a video conference app.) <a href="https://developer.chrome.com/origintrials/#/view_trial/4329085141809889281">Chrome 96 makes this possible</a> with a subclass of <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack">MediaStreamTrack</a></code> called <code>FocusableMediaStreamTrack</code>, which supports a new <code>focus()</code> method. Consider the following code:</p> <pre>stream = await navigator.mediaDevices.getDisplayMedia();<br />let [track] = stream.getVideoTracks();<br /></pre> <p>Where formerly, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/getVideoTracks">getVideoTracks()</a></code> would return an array of <code>MediaStreamTrack</code> objects, it now returns <code>FocusableMediaStreamTrack</code> objects. (Note that this is expected to change to <code>BrowserCaptureMediaStreamTrack</code> in Chrome 97. At the time of this writing, Canary already does this.)</p> <p>To determine which display media gets focus, the next line of this code would call <code>track.focus()</code> with either <code>"focus-captured-surface"</code> to focus the newly captured window or tab, or with <code>"no-focus-change"</code> to keep the focus with the calling window. On Chrome 96 or later, you can step through our <a href="https://eladalon1983.github.io/conditional-focus/demo/">demo code</a> to see this in action. </p> <h4>Priority Hints</h4><p>Priority Hints <a href="https://web.dev/priority-hints/">introduces a developer-set <code>"importance"</code> attribute</a> to influence the computed priority of a resource. Supported importance values are <code>"auto"</code>, <code>"low"</code>, and <code>"high"</code>. Priority Hints indicate a resource's relative importance to the browser, allowing more control over the order resources are loaded. Many factors influence a resource's priority in browsers including type, visibility, and preload status of a resource.</p> <h2>Other Features in this Release</h2> <h3>Allow Simple Range Header Values Without Preflight</h3><p>Requests with simple range headers<a href="https://www.chromestatus.com/feature/5652396366626816"> can now be sent</a> without <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests">a preflight request</a>. CORS requests can use the Range header in limited ways (only one valid range) without triggering a preflight request.</p> <h3>Back-forward Cache on Desktop</h3><p>The <a href="https://www.chromestatus.com/feature/5815270035685376">back-forward cache</a> stores pages to allow for instant navigations to previously-visited pages after cross-site navigations.</p> <h3>Cross-Origin-Embedder-Policy: credentialless</h3><p><code>Cross-Origin-Embedder-Policy</code> has <a href="https://www.chromestatus.com/feature/4918234241302528">a new <code>credentialless</code> option</a> that causes cross-origin <code>no-cors</code> requests to omit credentials (cookies, client certificates, etc.). Similarly to <code>COEP:require-corp</code>, it can enable cross-origin isolation.</p> <p>Sites that want to continue using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">SharedArrayBuffer</a> must opt-in to cross-origin isolation. Doing so using <code>COEP: require-corp</code> is difficult to deploy at scale and requires all subresources to explicitly opt-in. This is fine for some sites, but creates dependency problems for sites that gather content from users (Google Earth, social media generally, forums, etc).</p> <h3>CSS</h3> <h4>:autofill Pseudo Class</h4><p>The new <a href="https://www.chromestatus.com/feature/5592445322526720"><code>autofill</code> pseudo class</a> enables styling autofilled form elements. This is a standardization of the <code>:-webkit-autofill</code> pseudo class which is already supported in WebKit. Firefox supports the standard version.</p> <h4>Disable Propagation of Body Style to Viewport when Contained</h4><p>Some properties like writing-mode, direction, and backgrounds are propagated from body to the viewport. To avoid infinite loops for CSS Container Queries, the<a href="https://www.chromestatus.com/feature/5663240823504896"> spec and implementation were changed</a> to not propagate those properties when containment is applied to HTML or BODY.</p> <h4>font-synthesis Property</h4><p>The <a href="https://www.chromestatus.com/feature/5640605355999232"><code>font-synthesis</code> CSS property</a> controls whether user agents are allowed to synthesize oblique, bold, and small-caps font faces when a font family lacks faces.</p> <h3>EME MediaKeySession Closed Reason</h3><p>The <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaKeySession/closed">MediaKeySession.closed</a></code> property <a href="https://www.chromestatus.com/feature/5632124143009792">now uses an enum to indicate the reason</a> the <code>MediaKeySession</code> object closed. The closed property returns a Promise that resolves when the session closes. Where previously, the Promise simply resolved, it <a href="https://www.google.com/url?q=https://googlechrome.github.io/samples/media/key-session-closed-reason.html&sa=D&source=docs&ust=1634547430725000&usg=AOvVaw3cXtJIna_rtEkWm9LLzyft">now resolves with a string</a> indicating the reason for closing. The returned string will be one of <code>"internal-error"</code>, <code>"closed-by-application"</code>, <code>"release-acknowledged"</code>, <code>"hardware-context-reset"</code>, or <code>"resource-evicted"</code>.</p> <h3>HTTP to HTTPS Redirect for HTTPS DNS Records</h3><p>Chrome will always <a href="https://www.chromestatus.com/feature/5485544526053376">connect to a website via HTTPS</a> when an HTTPS record is available from the domain name service (DNS).</p> <h3>InteractionID in EventTiming</h3><p>The <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming">PerformanceEventTiming</a></code> interface now includes an attribute called <code>interactiveID</code>. This is a browser-generated ID that enables <a href="https://www.chromestatus.com/feature/5674224959094784">linking multiple <code>PerformanceEventTiming</code> entries</a> when they correspond to the same user interaction. Developers can currently use the Event Timing API to gather performance data about events they care about. Unfortunately, it is hard to link events that correspond to the same user interaction. For instance, when a user taps, many events are generated, such as <code>pointerdown</code>, <code>mousedown</code>, <code>pointerup</code>, <code>mouseup</code>, and <code>click</code>. </p> <h3>New Media Query: prefers-contrast</h3><p>Chrome supports <a href="https://www.chromestatus.com/feature/5646323212615680">a new media query</a> called<code> 'prefers-contrast'</code>, which lets authors adapt web content to the user's contrast preference as set in the operating system (specifically, increased contrast mode on macOS and high contrast mode on Windows). Valid options are <code>'more'</code>, <code>'less'</code>, <code>'custom'</code>, or <code>'no-preference'</code>.</p> <h3>Unique id for Desktop PWAs</h3><p>Web app <a href="https://developer.chrome.com/blog/pwa-manifest-id/">manifests now support an optional <code>id</code> field</a> that globally identifies a web app. When the <code>id</code> field is not present, a PWA falls back to <code>start_url</code>. This field is currently only supported on desktop.</p> <h3>URL Protocol Handler Registration for PWAs </h3><p>Enable web applications to <a href="https://web.dev/url-protocol-handler/">register themselves as handlers of custom URL protocols/schemes</a> using their installation manifest. Operating system applications often register themselves as protocol handlers to increase discoverability and usage. Web sites can already register to handle schemes via <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler">registerProtocolHandler()</a></code>. The new feature takes this a step further by letting web apps be launched directly when a custom scheme link is invoked.</p> <h3>WebAssembly</h3> <h4>Content Security Policy</h4><p>Chrome has <a href="https://www.chromestatus.com/feature/5499765773041664">enhanced Content Security Policy</a> to improve interoperability with WebAssembly. The <code>wasm-unsafe-eval</code> controls WebAssembly execution (with no effect on JavaScript execution). Additionally, the <code>script-src</code> policies now include WebAssembly.</p> <h4>Reference Types</h4><p>WebAssembly modules can now <a href="https://www.chromestatus.com/feature/5166497248837632">hold references to JavaScript and DOM objects</a>. Specifically, they can be passed as arguments, stored in local and global variables, and stored in WebAssembly.Table objects.</p> <h2>Deprecations and Removals</h2><p>This version of Chrome introduces the deprecations and removals listed below. Visit ChromeStatus.com for lists of <a href="https://www.chromestatus.com/features#browsers.chrome.status%3A%22Deprecated%22">current deprecations</a> and <a href="https://www.chromestatus.com/features#browsers.chrome.status:%22Removed%22">previous removals</a>.</p> <h3>The "basic-card" Method of PaymentRequest API</h3><p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API">PaymentRequest API</a> has <a href="https://blog.chromium.org/2021/10/sunsetting-basic-card-payment-method-in.html">deprecated the basic card payment method</a>. Its usage is low and declining. It underperforms when compared to other payment methods in time-to-checkout and completion rate. Developers can switch to other payment methods as an alternative. Examples include Google Pay, Apple Pay, and Samsung Pay.<br /><br />Removal timeline:</p> <ul><li>Chrome 96: the basic-card method is deprecated in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Reporting_API">Reporting API</a>.</li><li>Chrome 100: the basic-card method will be removed.</li></ul>Chromium Bloghttps://www.blogger.com/profile/06394244468194711527[email protected]

文章来源: http://www.blogger.com/feeds/2471378914199150966/posts/default/7421677691035745159
如有侵权请联系:admin#unsafe.sh