Experimental Chromium Web Platform Features
source link: https://polypane.app/experimental-web-platform-features/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Experimental Chromium Web Platform Features
Experimental web platform features are not yet part of the official web platform specifications and are marked as "experimental" in Chromium.
Polypane ships with these features (and more) enabled by default. Other Chromium browsers let you enable these on a "flags" settings page.
New in Chromium 120 currentPolypane 17
- Clipboard Supported Types
ClipboardSupportedTypeschromestatus.comCurrently during async clipboard write operation, there is no way for the web authors to detect if a particular mime type is supported by the UAs or not before attempting to actually write the formats to the clipboard. This not only affects developer ergonomics as now web authors have to attempt to write to the clipboard first in order to find out whether write failed due to a particular mime type not supported by the UAs (or sometimes add version checks that are unreliable at best), but also leads to unnecessary cost in terms of CPU cycles, COGS etc in order to produce an expensive web custom format which may not be supported by a particular browser.
- Clipboard Well Formed Html Sanitization Write
ClipboardWellFormedHtmlSanitizationWritechromestatus.comUsing DataTransfer object’s setData and async clipboard write method, there are interop differences in how the HTML content is sanitized and written to the clipboard. The Async clipboard writer API uses sanitizers to strip out content such as `<head>`, `<meta>`, `<style>`, `<script>` tags from the HTML and inline styles into the markup. In this proposal, writing to the clipboard for `text/html` MIME type using the navigator.clipboard.write() API will write a higher fidelity sanitized, well-formed HTML markup instead of a more strictly sanitized HTML fragment. It will also preserve the tags such as `<meta>`, `<style>`, `<head>` etc that were stripped out by the fragment parser.
Roundtripping of HTML content using the async clipboard API within the web doesn’t change as the async clipboard read() method still produces a sanitized HTML fragment.
- Css Field Sizing
CssFieldSizingchromestatus.comBy 'field-sizing' property, web authors can disable fixed default sizes of form controls, and make their size depend on their content. It's very easy to provide automatically-growing text fields.
- Fetch Later API
FetchLaterAPIchromestatus.comfetchLater() is a JavaScript API to request a deferred fetch. Once called, the request is queued by the browser, and will be invoked in one of the following scenarios:
• The document is destroyed. • After a certain time.
The API returns a FetchLaterResult that contains a boolean field "activated" that may be updated to tell whether the deferred request has been sent out or not. On successful sending, the whole response will be ignored by browser, including body and headers. Nothing at all should be processed or updated, as the page may have already be gone.
Note that from the point of view of the API user, the exact send time is unknown.
- Media Session Enter Picture In Picture
MediaSessionEnterPictureInPicturechromestatus.comAdds an 'enterpictureinpicture' action to the Media Session API. Websites can register an action handler which can be used to open a Picture-in-Picture or Document Picture-in-Picture window.
- Web Codecs Content Hint
WebCodecsContentHintchromestatus.comAdding a contentHint field to VideoEncoderConfig
Content hint takes values that are already used for MediaStreamTrack: "motion", "text", "detail". This gives web developers a way to communicate to VideoEncoder the expected type video frames they intend to encode.
Explainer: https://gist.github.com/Djuffin/c3742404b7c53ada227849c8b2b76b4c
- New features in Chromium 120 with missing descriptionCSS Text Auto Space
CSSTextAutoSpaceHTML Invoke Target AttributeHTMLInvokeTargetAttributeHTML Unsafe MethodsHTMLUnsafeMethodsMedia Capture Camera ControlsMediaCaptureCameraControlsPassword Strong LabelPasswordStrongLabelPermission ElementPermissionElementPrivate Network Access Permission PromptPrivateNetworkAccessPermissionPromptStorage Access API Beyond CookiesStorageAccessAPIBeyondCookiesStorage Buckets DurabilityStorageBucketsDurabilityWeb App Scope ExtensionsWebAppScopeExtensions
New in Chromium 119
- Database
Databasechromestatus.comSince M104 cookies newly created or updated with an expiration date would have that date capped at no more than 400 days in the future. This same limit will now be retroactively applied to cookies already in storage to cap their expiration dates to no more than 400 days after the first time Chrome M119+ starts up and does a one time database migration. The impact of this change will not be felt by users until at least 400 days after M119 is released, and then only for existing cookies that have not been updated in that period.
- Font Palette Animation
FontPaletteAnimationchromestatus.comThe CSS font-palette property allows selection of a specific palette used to render a font. The CSS Fonts 4 spec defines the animation behaviour of this property as discrete, which is insufficient to achieve a smooth transition between two selected palettes. Instead, animating the font-palette property should happen by interpolating each of the colour record values from the defined palette, i.e. if the start or the end of the animation has a different colour value for some record in the palette, such colour value should be interpolated.
- Highlight Inheritance
HighlightInheritancechromestatus.comWith CSS Highlight Inheritance, the CSS Highlight pseudo classes, such as ::selection and ::highlight, inherit their properties through the pseudo highlight chain, rather than the element chain. The result is a more intuitive model for inheritance of properties in highlights. Specifically, "When any supported property is not given a value by the cascade ... its specified value is determined by inheritance from the corresponding highlight pseudo-element of its originating element’s parent element." (https://drafts.csswg.org/css-pseudo-4/#highlight-cascade)
- HTML Select Element Show Picker
HTMLSelectElementShowPickerchromestatus.comDevelopers have been asking for a way to programmatically open the option picker of a select element. See https://www.google.com/search?q=programmatically+open+select+site%3Astackoverflow.com
This is currently impossible in almost every browser. Providing showPicker() gives developers a supported way to do this. Following the pattern of input.showPicker().
- Intersection Observer Scroll Margin
IntersectionObserverScrollMarginchromestatus.comIntersection Observer scrollMargin allows developers to observe targets inside nested scroll containers that are currently clipped away by the scroll containers. This is achieved by expanding the container's clipping rect by the scrollMargin when calculating the intersection.
- Page Reveal Event
PageRevealEventchromestatus.comThe `firstrender` event is fired on a Document's window object at the first render opportunity after a Document is: initially loaded, restored from the back-forward cache, activated from a prerender.
It can be used by a page author to setup a page entry UX - such as a ViewTransition from a previous state.
This feature is split out from the larger ViewTransition-on-Navigation project.
- Tpcd
Tpcdchromestatus.comThis experiment exposes a temporary set of APIs which provide access to browser-determined treatment and control groups to support opt-in server side testing of the third-party cookie deprecation.
- New features in Chromium 119 with missing descriptionBackdrop Inherit Originating
BackdropInheritOriginatingCss Form SizingCssFormSizingExclude Broken Image Icon From Being Lcp EligibleExcludeBrokenImageIconFromBeingLcpEligibleHit Test OpaquenessHitTestOpaquenessNavigate Event Source ElementNavigateEventSourceElementObservable APIObservableAPIScoped Custom Element RegistryScopedCustomElementRegistrySet Sequential Focus Starting PointSetSequentialFocusStartingPointWeb Assembly JS String BuiltinsWebAssemblyJSStringBuiltins
New in Chromium 118 Polypane 16
- Clip Path Geometry Box
ClipPathGeometryBoxchromestatus.comClip-path supports <geometry-box> values to control the clip's reference box, making clip-path easier to use. These box values can be used alongside basic shapes (for example, clip-path: circle(50%) margin-box), or they can be used alone to clip to the specified box (for example, clip-path: content-box).
- Form Controls Vertical Writing Mode Text Support
FormControlsVerticalWritingModeTextSupportchromestatus.comCSS property writing-mode should be enabled for form controls elements as it will allow lines of text to be laid out horizontally or vertically and it sets the direction in which blocks progress.
With this feature, we are allowing the form control elements select, meter, progress, button, textarea and input to have vertical-rl or vertical-lr writing mode. As needed for Web compatibility, we will slowly rollout the change for a number of form controls in 118 and continue in future milestones. * --enable-features= FormControlsVerticalWritingModeSupport * --enable-features= FormControlsVerticalWritingModeTextSupport
- RTC Rtp Encoding Parameters Codec
RTCRtpEncodingParametersCodecchromestatus.comThis new API extends WebRTC encoding parameters to allow developers to choose a specific negotiated codec to be used for encoding an RTP stream.
- Scrollbar Color
ScrollbarColorchromestatus.comThe CSS Scrollbars spec allows authors to style scrollbars by specifying their colors and thickness. This spec adds the following two properties.
The scrollbar-color property provides the capability of changing the color scheme of scrollbars so they fit better into the particular style of a web page.
The scrollbar-width property allows the use of narrower scrollbars that may be more suitable for some use cases, or even to hide the scrollbars completely without affecting scrollability.
- User Valid User Invalid
UserValidUserInvalidchromestatus.comThe :user-invalid and the :user-valid pseudo-classes represent an element with incorrect or correct input, respectively, but only after the user has significantly interacted with it. This is similar to :valid and :invalid, but with the added constraint that these pseudo-classes only match after the user has interacted with the element.
- New features in Chromium 118 with missing descriptionCSS Dynamic Range Limit
CSSDynamicRangeLimitCSS Relative ColorCSSRelativeColorCSS Snap Container QueriesCSSSnapContainerQueriesFile System Access Access Handle Locking SchemeFileSystemAccessAccessHandleLockingSchemeHTML Select List ElementHTMLSelectListElementRTC Encoded Frame Set MetadataRTCEncodedFrameSetMetadataSolid Color LayersSolidColorLayers
New in Chromium 117
- CSS Cap Font Units
CSSCapFontUnitschromestatus.com'cap' is equal to the used cap-height of the first available font. 'rcap' is equal to the value of the cap unit on the root element.
- CSS Font Size Adjust
CSSFontSizeAdjustchromestatus.comThe font-size-adjust CSS property adjusts the font size based on the height of lowercase letters rather than that of uppercase letters for consistency in readability. However, there have been voices that the adjusting metric is obscure and impractical. This new two-value syntax reflects such voices by allowing developers to specify a font metric for adjusting the size. This feature is standardized in CSS Font Module Level 5.
- CSS Transform Box Additional Keywords
CSSTransformBoxAdditionalKeywordschromestatus.comAllows changing how the reference box for the 'transform' property is computed. This adds additional capabilities that will allow creating transforms/graphical effects where - for example - the width of the border of an element does not influence the result (e.g rotation around a point in the content box) or the stroke of an (SVG) element should influence the result (e.g rotating a stroked shape around its center - including the stroke).
- File System Observer
FileSystemObserverchromestatus.comThe FileSystemObserver interface makes it easy for a website to be notified of changes to the file system.
The file system is a shared resource that can be modified from several contexts. A Bucket File System spans numerous agents - tabs, workers, etc - within the same storage key. The local file system also spans across origins and other applications on the host operating system.
Prior to this interface, a given agent must poll the file system to detect changes - which may be made either by itself or from some external context. This is inefficient and does not scale well.
- Inverted Colors
InvertedColorschromestatus.comAdds the `inverted-colors` media feature, an indication that the user agent or underlying operating system has forcibly inverted all colors, not a request to do so. This is sometimes provided as a simple accessibility feature, allowing users to switch between light-on-dark and dark-on-light text.
Valid options are 'inverted' or 'none'.
- Prefers Reduced Transparency
PrefersReducedTransparencychromestatus.comAdds the `prefers-reduced-transparency` feature, which lets authors adapt web content to user-selected preference for reduced transparency in the OS, such as the 'Reduce transparency' setting on macOS.
Valid options are 'reduce' or 'no-preference'.
- New features in Chromium 117 with missing descriptionCSS Phrase Line Break
CSSPhraseLineBreakDetails StylingDetailsStylingIntersection OptimizationIntersectionOptimizationPretty Print JSON DocumentPrettyPrintJSONDocument
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK