WEB INCUBATOR COMMUNITY GROUP (WICG) Join our community! Join our community of developers and browser makers to define the next generation of web technologies. GitHub

WICG

April 6, 2021. Viewport-placement pseudo-element. CSS. 4. 569. April 2, 2021. New IFrame related features to foster large scale Micro Frontend solutions. 2. 492.

FIRST-PARTY SETS

The primary goal of this proposal is to standardize First-Party Sets as the web’s privacy boundary. In order to ensure privacy, security, and platform predictability, it may also be valuable to standardize the framework for: Assertion - The notion of letting sites opt-in to First-Party Sets by designating an “owner domain” and defining

DEFAULT BUTTON OF A

Currently a form’s default button is defined as follows: A form element’s default button is the first submit button in tree order whose form owner is that form element. This is not always practical. For example, consider something like a wizard (ie. a sequence of pages with a form on each) having “Previous” and “Next” buttons. The “Previous” button submits the form in order to ONE INCH IS NOT AN INCH Chromium’s response was to “engage with the CSS WG”. Sure, for the addition of a “real inch” unit. That’s different than changin 1in to be a real inch, which is what I was responding to.. The WG has in the past agreed not to add “true” physical units that require accurate lengths, because the use-cases appear minimal, and we can’t guarantee that it’s possible on any given AUTO-SIZING TEXT TO FIT CONTAINER POSITION AN ELEMENT RELATIVELY TO ANOTHER ELEMENT FROM Problem - I need to position a popup modal / tooltip / dialog relative to another element, perhaps the button that I clicked to trigger the popup or relative to a block of text that’s relevant to the popup’s information. Something like this: We want the positioned element relative to the target element at all times. Unfortunately, we really only have a couple of solutions and neither are ADDING A ATTRIBUTE TO S A fundamental principle of the Web architecture is the uniform interface, one implication of which is that if you don’t want to make an assertion about another page, you simply don’t present a link.In user interface design, this is called progressive disclosure.. Links (including , , and the Link: HTTP header) and buttons ( and )

are not generally

REQUIRE USER GESTURE FOR NOTIFICATION PERMISSION I’ve noticed some websites ask for permission to send notifications immediately on the first visit. This is annoying, enough that guides appear showing how to turn them off . It’s also surprising that these days a website often cannot even start autoplaying media upon visiting a page - to avoid annoying users - but it can still ask for you to permanently allow the website to send you WHY DOES DOCUMENT.ADDEVENTLISTENER('LOAD', HANDLER) NOT I’m trying document.addEventListener('load', handler) in Chrome 46 and Firefox 42, and it’s not working. I can get it to work if I try it on window, as in window.addEventListener('load', handler) The MDN documentation for the “load” event says Target: Document, Element So why doesn’t it work on the document? Do the docs need to be

updated?

WEB INCUBATOR COMMUNITY GROUP (WICG) Join our community! Join our community of developers and browser makers to define the next generation of web technologies. GitHub

WICG

April 6, 2021. Viewport-placement pseudo-element. CSS. 4. 569. April 2, 2021. New IFrame related features to foster large scale Micro Frontend solutions. 2. 492.

FIRST-PARTY SETS

The primary goal of this proposal is to standardize First-Party Sets as the web’s privacy boundary. In order to ensure privacy, security, and platform predictability, it may also be valuable to standardize the framework for: Assertion - The notion of letting sites opt-in to First-Party Sets by designating an “owner domain” and defining

DEFAULT BUTTON OF A

Currently a form’s default button is defined as follows: A form element’s default button is the first submit button in tree order whose form owner is that form element. This is not always practical. For example, consider something like a wizard (ie. a sequence of pages with a form on each) having “Previous” and “Next” buttons. The “Previous” button submits the form in order to ONE INCH IS NOT AN INCH Chromium’s response was to “engage with the CSS WG”. Sure, for the addition of a “real inch” unit. That’s different than changin 1in to be a real inch, which is what I was responding to.. The WG has in the past agreed not to add “true” physical units that require accurate lengths, because the use-cases appear minimal, and we can’t guarantee that it’s possible on any given AUTO-SIZING TEXT TO FIT CONTAINER POSITION AN ELEMENT RELATIVELY TO ANOTHER ELEMENT FROM Problem - I need to position a popup modal / tooltip / dialog relative to another element, perhaps the button that I clicked to trigger the popup or relative to a block of text that’s relevant to the popup’s information. Something like this: We want the positioned element relative to the target element at all times. Unfortunately, we really only have a couple of solutions and neither are ADDING A ATTRIBUTE TO S A fundamental principle of the Web architecture is the uniform interface, one implication of which is that if you don’t want to make an assertion about another page, you simply don’t present a link.In user interface design, this is called progressive disclosure.. Links (including , , and the Link: HTTP header) and buttons ( and )

are not generally

REQUIRE USER GESTURE FOR NOTIFICATION PERMISSION I’ve noticed some websites ask for permission to send notifications immediately on the first visit. This is annoying, enough that guides appear showing how to turn them off . It’s also surprising that these days a website often cannot even start autoplaying media upon visiting a page - to avoid annoying users - but it can still ask for you to permanently allow the website to send you WHY DOES DOCUMENT.ADDEVENTLISTENER('LOAD', HANDLER) NOT I’m trying document.addEventListener('load', handler) in Chrome 46 and Firefox 42, and it’s not working. I can get it to work if I try it on window, as in window.addEventListener('load', handler) The MDN documentation for the “load” event says Target: Document, Element So why doesn’t it work on the document? Do the docs need to be

updated?

ONE INCH IS NOT AN INCH Chromium’s response was to “engage with the CSS WG”. Sure, for the addition of a “real inch” unit. That’s different than changin 1in to be a real inch, which is what I was responding to.. The WG has in the past agreed not to add “true” physical units that require accurate lengths, because the use-cases appear minimal, and we can’t guarantee that it’s possible on any given FEDERATED LEARNING OF COHORTS (FLOC) This is an API to enable interest-based advertising on the web without the need for third-party cookies. With FLoC, companies who today observe the browsing behavior of individuals instead observe the behavior of a cohort (or “flock”) of similar people. This increases user privacy while providing relevant ads to users. See the explainer for more detailed information. Text length is typically measured in characters while file size is measured in bytes.. Let’s imagine a user uploads a UTF-8-encoded text file. Should maxlength be applied to the file size or to the number of characters in the file? While it’s somewhat obvious for us, in the context of this topic, that it’s about bytes, it may be confusing for authors in general. LOCAL DEVICES API (LAN SERVICES) The local network is no longer a first class citizen of the web world. It’s easier to trust a faraway server than your NAS, TV or thermostat sitting right next to you. This is sad and could be different. Before committing to writing a full spec I want to pitch the general idea. This due to the sheer amount of seemingly stalled efforts in this space (Network Service Discovery API, FlyWeb, raw

WEBCODECS PROPOSAL

WebCodecs API that allows web applications to encode and decode audio and video Many Web APIs use media codecs internally to support APIs for particular uses: HTMLMediaElement and Media Source Extensions WebAudio (decodeAudioData) MediaRecorder WebRTC But there’s no general way to flexibly configure and use these media codecs. Because of this, many web applications have HOW CAN I SYNCHRONOUSLY DETERMINE A JAVASCRIPT PROMISE'S Implementing a performant promisified reduce/fold function requires synchronous state inspection. Say I implement a reduce function with signature: Promise.reduce (array, accumulator, fn) where fn is of the form: function (accumulator, item) { return promise_or_value; } If fn returns a value then reduce can immediately continue with the next

item.

MULTIPLE NUMBER RANGE INPUT A frustration I’ve had is that there’s no “native” way for users to input a range of numbers, without using to number inputs. HTML5’s , I assumed would deal with this but it only allows selection of a single value. I would propose to extend this element using the multiple attribute already used for . This would create the FLEXBOX JUSTIFY-SELF PROPERTY It is quite difficult to recreate a layout similar to the iOS navigation bar UI on the web without a justify-self property. Consider the following screenshots from iOS: The nav UI in the screenshot above can be achieved by setting flex: 1 0 0 to elements at the start and end of the main axis, the middle item would be set to flex: none. However, for this same UI to accommodate the layout logic CSS VARIABLES AND ::BEFORE/::AFTER CONTENT Currently, it seems the following is not possible: .x { --color: #3acfb6; background-color: var(--color); } .x::after { content: var(--color); } The reason is it produces content: #3acfb6 instead of content: '#3acfb6' — which makes sense. However it seems there is no way to add quotes or otherwise convert --color to string within content: definition. Something similar is provided by attr FOLLOWREDIRECTS IN XMLHTTPREQUEST This is a work-in-progress section covering a new API that handles slightly more modes of fetching than XMLHttpRequest. @annevk perhaps you would be able to clear up some of the CORS issues; I did quite a bit of digging before writing the above article back in November however its not always clear the motives and issues causes whilst trying to implement features into the spec - hence

WEB INCUBATOR CG

JOIN OUR COMMUNITY!

Join our community of developers and browser makers to define the next generation of web technologies.

* GitHub

* Join

* Discourse

GETTING STARTED

npm install -g wicg wicg init "The Awesome API"

INCUBATIONS

* turtledove

* app-history

* ua-client-hints

* floc

* conversion-measurement-api * file-system-access

* webcomponents

* webpackage

* sanitizer-api

* webmonetization

* WebID

* serial

* private-network-access

* import-maps

* scroll-to-text-fragment

* local-font-access

* portals

* client-hints-infrastructure

* focus-visible

* layout-instability

* trust-token-api

* canvas-color-space

* webhid

* cookie-store

* shared-element-transitions

* urlpattern

* proposals

* scheduling-apis

* document-policy

* inert

* uuid

* file-handling

* privacy-preserving-ads

* storage-buckets

* js-self-profiling

* construct-stylesheets

* resource-bundles

* largest-contentful-paint

* speech-api

* handwriting-recognition * storage-foundation-api-explainer

* display-locking

* raw-sockets

* video-rvfc

* aom

* idle-detection

* event-timing

* performance-measure-memory

* background-sync

* element-timing

* background-fetch

* window-controls-overlay

* webusb

* CHIPS

* WebApiDevice

* pwa-url-handler

* canvas-formatted-text

* digital-goods

* datacue

* web-otp

* contact-api

* compression

* is-input-pending

* manifest-incubations * periodic-background-sync

* visual-viewport

* responsive-image-client-hints * spatial-navigation

* virtual-scroller

* sw-launch

* shape-detection-api * get-installed-related-apps * sms-one-time-codes

* interventions

* wicg.github.io

* sparrow

* keyboard-lock

* content-index

* media-feeds

* css-parser-api

* web-locks

* origin-policy

* netinfo

* frame-timing

* request-post-animation-frame

* lock-screen

* controls-list

* hdcp-detection

* keyboard-map

* indexed-db-observers

* audio-focus

* priority-hints

* media-source

* custom-state-pseudo-class

* kv-storage

* cq-usecases

* page-lifecycle

* video-editing

* ink-enhancement

* deprecation-reporting * accessible-loading-and-searching-of-content

* display-override

* overscroll-scrollend-events * capability-delegation

* crash-reporting

* reducing-memory-copies

* entries-api

* lang-client-hint

* input-device-capabilities * intervention-reporting

* devtools-protocol

* container-queries

* input-for-workers

* raw-clipboard-access

* savedata

* permissions-request * media-latency-hint

* encrypted-media

* discourse-wicg-theme

* image-output

* permissions-revoke

USEFUL RESOURCES

* Charter

* Participants

* Join

* Mailing list

*

*

*

ATTRIBUTIONS

Icons: Document by Icons8 , Link made by SimpleIcon , from Flaticon . Header font is "Nexa", from Fontfabric

.

Site has been updated! refresh? No thanks!