diff --git a/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md b/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md index 8dffce4145b6664..80a43fd8430b0ae 100644 --- a/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md +++ b/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md @@ -1017,8 +1017,7 @@ The full example looks like this (press the **Play** button to run the example i Viscous, Bright Ridge, CA - +
diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_method_subpage_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_method_subpage_template/index.md index b2e0d6d02367f38..575b51ed1e52e10 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_method_subpage_template/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_method_subpage_template/index.md @@ -39,7 +39,6 @@ sidebar: mdnsidebar > If the method is static, then the slug must have a `_static` suffix, like: `Web/API/NameOfTheParentInterface/NameOfTheMethod_static`. This enables us to support instance and static methods which have the same name. > > Note that the name of the method in the slug omits the parenthesis (it ends in `NameOfTheMethod` not `NameOfTheMethod()`). -> > - **page-type** > - : The `page-type` key for Web/API methods is either `web-api-instance-method` (for instance methods) or `web-api-static-method` (for static methods). > - **status** diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md index 2e7d039816212e8..396cfc2fa28a39f 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_property_subpage_template/index.md @@ -40,7 +40,6 @@ sidebar: mdnsidebar > This will be formatted like `Web/API/NameOfTheParentInterface/NameOfTheProperty`. > > If the property is static, then the slug must have a `_static` suffix, like: `Web/API/NameOfTheParentInterface/NameOfTheProperty_static`. This enables us to support instance and static properties which have the same name. -> > - **page-type** > - : The `page-type` key for Web/API properties is either `web-api-instance-property` (for instance properties) or `web-api-static-property` (for static properties). > - **status** diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md index 6fe938061ad4f44..8df36fdddfb6486 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md @@ -45,7 +45,6 @@ sidebar: mdnsidebar > > Note that you may first need to create/update an entry for the selector and its specification in our Browser compat data repo. > See our [guide on how to do this](/en-US/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables). -> > - **sidebar** > - : This is `cssref` for all CSS guide and reference pages. > See [Page structures: Sidebars](/en-US/docs/MDN/Writing_guidelines/Page_structures/Sidebars) for details. diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_attribute_page_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_attribute_page_template/index.md index 27658691a28942f..4d690e56e9a7887 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_attribute_page_template/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_attribute_page_template/index.md @@ -61,7 +61,6 @@ Only add an article if the attribute has enough nuance to deserve its own exampl > The toolchain automatically uses the key to populate the compatibility and specification sections (replacing the `\{{Compat}}` and `\{{Specifications}}` macros). > Note that you may first need to create/update an entry for the attribute in our [Browser compat data repo](https://github.com/mdn/browser-compat-data), and the entry will need to include specification information. > See our [guide on how to do this](/en-US/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables). -> > - **sidebar** > - : Keep as `htmlsidebar` (all pages under `/web/html/` use this sidebar). > See [Page structures: Sidebars](/en-US/docs/MDN/Writing_guidelines/Page_structures/Sidebars) for details. diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md index dff4d43841ab32f..1ce6d1aac44c1db 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/http_header_page_template/index.md @@ -49,7 +49,6 @@ sidebar: mdnsidebar > > Browser compatibility does not apply for HTTP headers where no specific implementation is provided (such as automatically adding a request header to some requests or changing behavior based on data in a response header). > For these cases, remove the browser-compat key and value. -> > - **sidebar** > - : This is always `http`. > See [Page structures: Sidebars](/en-US/docs/MDN/Writing_guidelines/Page_structures/Sidebars) for details. diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md index 85db83423a50336..de4a3e789c7db12 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/svg_element_page_template/index.md @@ -46,7 +46,6 @@ sidebar: mdnsidebar > > Note that you may first need to create/update an entry for the element in our [Browser compat data repo](https://github.com/mdn/browser-compat-data), and the entry will need to include specification information. > See our [guide on how to do this](/en-US/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables). -> > - **sidebar** > - : This is `svgref` for all SVG guide and reference pages. > See [Page structures: Sidebars](/en-US/docs/MDN/Writing_guidelines/Page_structures/Sidebars) for details. diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index a27ab082d18116f..18dfca9cba746d4 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -495,6 +495,22 @@ These give developers more flexibility when structuring and loading JavaScript m ## APIs +### Crash Reporting + +Crash reports can now be sent through the [Reporting API](/en-US/docs/Web/API/Reporting_API) to the `default` endpoint. +Note that Firefox does not support providing {{domxref("CrashReportContext")}} in the report body. +([Firefox bug 2036160](https://bugzil.la/2036160)). + +| Release channel | Version added | Enabled by default? | +| ----------------- | ------------- | ------------------- | +| Nightly | 152 | Yes | +| Developer Edition | 152 | No | +| Beta | 152 | No | +| Release | 152 | No | + +- `dom.reporting.crash.enabled` + - : Set to `true` to enable (enabled by default in Nightly). + ### Scoped custom element registries Support for [scoped custom element registries](/en-US/docs/Web/API/Web_components/Using_custom_elements#scoped_custom_element_registries) is being implemented. diff --git a/files/en-us/mozilla/firefox/releases/152/index.md b/files/en-us/mozilla/firefox/releases/152/index.md index 573c65d0a969d78..8e80e6f0e22f819 100644 --- a/files/en-us/mozilla/firefox/releases/152/index.md +++ b/files/en-us/mozilla/firefox/releases/152/index.md @@ -121,3 +121,8 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil - **`` values in `@keyframes` selectors**: `layout.css.scroll-driven-animations.enabled` The {{cssxref("@keyframes")}} at-rule now supports [``](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) values. These [values](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names#timeline_range_names) let you specify the segment within which a scroll-driven animation takes place. ([Firefox bug 1824875](https://bugzil.la/1824875)). + +- **Crash Reporting** (Nightly): `dom.reporting.crash.enabled` + + Crash report can now be sent through the [Reporting API](/en-US/docs/Web/API/Reporting_API). + ([Firefox bug 2036160](https://bugzil.la/2036160)). diff --git a/files/en-us/web/accessibility/aria/reference/roles/figure_role/index.md b/files/en-us/web/accessibility/aria/reference/roles/figure_role/index.md index 5b06d267d3b80f9..8cedc7dd1d665fa 100644 --- a/files/en-us/web/accessibility/aria/reference/roles/figure_role/index.md +++ b/files/en-us/web/accessibility/aria/reference/roles/figure_role/index.md @@ -78,8 +78,7 @@ We could extend the initial example on the page to also identify a paragraph tha 
 `
         let awesome = ['music', 'cats', 'nature', 'ice cream'];
-      `
+ `

Figure 1: The four layers of awesome.

``` @@ -99,8 +98,7 @@ If at all possible, you should use the appropriate semantic HTML elements to mar 
 `
     let awesome = ['music', 'cats', 'nature', 'ice cream'];
-  `
+ `
Figure 1: The four layers of awesome.
``` diff --git a/files/en-us/web/api/authenticatorresponse/index.md b/files/en-us/web/api/authenticatorresponse/index.md index fb2b7bbaf9b25aa..250ee1a02a31f1d 100644 --- a/files/en-us/web/api/authenticatorresponse/index.md +++ b/files/en-us/web/api/authenticatorresponse/index.md @@ -31,9 +31,7 @@ None. ```js const options = { - challenge: new Uint8Array([ - /* bytes sent from the server */ - ]), + challenge: new Uint8Array([/* bytes sent from the server */]), }; navigator.credentials diff --git a/files/en-us/web/api/credentialscontainer/get/index.md b/files/en-us/web/api/credentialscontainer/get/index.md index 1bf097f574b2336..eddc542b5c81fdb 100644 --- a/files/en-us/web/api/credentialscontainer/get/index.md +++ b/files/en-us/web/api/credentialscontainer/get/index.md @@ -138,9 +138,7 @@ async function signIn() { { configURL: "https://accounts.idp.example/config.json", clientId: "********", - params: { - /* IdP-specific parameters */ - }, + params: {/* IdP-specific parameters */}, }, ], }, @@ -161,9 +159,7 @@ async function signIn() { { configURL: "https://accounts.idp.example/config.json", clientId: "********", - params: { - /* IdP-specific parameters */ - }, + params: {/* IdP-specific parameters */}, loginHint: "user1@example.com", }, ], @@ -183,9 +179,7 @@ async function signIn() { { configURL: "https://accounts.idp.example/config.json", clientId: "********", - params: { - /* IdP-specific parameters */ - }, + params: {/* IdP-specific parameters */}, }, ], }, diff --git a/files/en-us/web/api/cssfontpalettevaluesrule/fontfamily/index.md b/files/en-us/web/api/cssfontpalettevaluesrule/fontfamily/index.md index 929960638ffe5da..21debb753f510ee 100644 --- a/files/en-us/web/api/cssfontpalettevaluesrule/fontfamily/index.md +++ b/files/en-us/web/api/cssfontpalettevaluesrule/fontfamily/index.md @@ -24,8 +24,7 @@ This example first defines an {{cssxref("@import")}} and an {{cssxref("@font-pal ```html 
-The @font-palette-values at-rule's applies to the font families:
+The @font-palette-values at-rule's applies to the font families: ``` #### CSS diff --git a/files/en-us/web/api/cssstyledeclaration/index.md b/files/en-us/web/api/cssstyledeclaration/index.md index fcbb6d6e664ad74..4acee2dc2078a48 100644 --- a/files/en-us/web/api/cssstyledeclaration/index.md +++ b/files/en-us/web/api/cssstyledeclaration/index.md @@ -59,7 +59,7 @@ For example, it provides {{DOMxRef("CSSStyleDeclaration/getPropertyValue","getPr const styleObj = document.styleSheets[0].cssRules[0].style; console.log(styleObj.cssText); -for (let i = styleObj.length; i--; ) { +for (let i = styleObj.length; i--;) { const nameString = styleObj[i]; styleObj.removeProperty(nameString); } diff --git a/files/en-us/web/api/document/activeelement/index.md b/files/en-us/web/api/document/activeelement/index.md index 48f3ba942b35056..1bcfe3654addd47 100644 --- a/files/en-us/web/api/document/activeelement/index.md +++ b/files/en-us/web/api/document/activeelement/index.md @@ -34,11 +34,9 @@ The deepest {{domxref('Element')}} which currently has focus.
+This is Text Area One. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui. +This is Text Area Two. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.

Active element ID:

diff --git a/files/en-us/web/api/fedcm_api/rp_sign-in/index.md b/files/en-us/web/api/fedcm_api/rp_sign-in/index.md index b60fd3870915410..c4734bfb4c9ab89 100644 --- a/files/en-us/web/api/fedcm_api/rp_sign-in/index.md +++ b/files/en-us/web/api/fedcm_api/rp_sign-in/index.md @@ -39,9 +39,7 @@ async function signIn() { { configURL: "https://accounts.idp.example/config.json", clientId: "********", - params: { - /* IdP-specific parameters */ - }, + params: {/* IdP-specific parameters */}, loginHint: "user1@example.com", }, { diff --git a/files/en-us/web/api/hiddevice/sendreport/index.md b/files/en-us/web/api/hiddevice/sendreport/index.md index ca8970f31bd9280..7353d0cfcb39edd 100644 --- a/files/en-us/web/api/hiddevice/sendreport/index.md +++ b/files/en-us/web/api/hiddevice/sendreport/index.md @@ -48,9 +48,7 @@ await device.sendReport(0x01, new Uint8Array(enableVibrationData)); // Then, send a command to make the Joy-Con device rumble. // Actual bytes are available in the sample. -const rumbleData = [ - /* … */ -]; +const rumbleData = [/* … */]; await device.sendReport(0x10, new Uint8Array(rumbleData)); ``` diff --git a/files/en-us/web/api/identitycredential/configurl/index.md b/files/en-us/web/api/identitycredential/configurl/index.md index b8355af49de268d..6bba1b0b39df7ae 100644 --- a/files/en-us/web/api/identitycredential/configurl/index.md +++ b/files/en-us/web/api/identitycredential/configurl/index.md @@ -32,9 +32,7 @@ async function signIn() { { configURL: "https://accounts.idp.example/config.json", clientId: "********", - params: { - /* IdP-specific parameters */ - }, + params: {/* IdP-specific parameters */}, }, ], }, diff --git a/files/en-us/web/api/identitycredential/index.md b/files/en-us/web/api/identitycredential/index.md index 2244d7ad43a81c5..464cbc06aaf4ee7 100644 --- a/files/en-us/web/api/identitycredential/index.md +++ b/files/en-us/web/api/identitycredential/index.md @@ -45,9 +45,7 @@ async function signIn() { { configURL: "https://accounts.idp.example/config.json", clientId: "********", - params: { - /* IdP-specific parameters */ - }, + params: {/* IdP-specific parameters */}, }, ], }, diff --git a/files/en-us/web/api/identitycredential/token/index.md b/files/en-us/web/api/identitycredential/token/index.md index 6c719d5143d6764..8aa7ef234839424 100644 --- a/files/en-us/web/api/identitycredential/token/index.md +++ b/files/en-us/web/api/identitycredential/token/index.md @@ -34,9 +34,7 @@ async function signIn() { { configURL: "https://accounts.idp.example/config.json", clientId: "********", - params: { - /* IdP-specific parameters */ - }, + params: {/* IdP-specific parameters */}, }, ], }, diff --git a/files/en-us/web/api/payment_request_api/using_the_payment_request_api/index.md b/files/en-us/web/api/payment_request_api/using_the_payment_request_api/index.md index c03119eee0d82a3..c59b672f19409f4 100644 --- a/files/en-us/web/api/payment_request_api/using_the_payment_request_api/index.md +++ b/files/en-us/web/api/payment_request_api/using_the_payment_request_api/index.md @@ -190,9 +190,7 @@ If the checkout flow needs to know whether {{domxref("PaymentRequest.canMakePaym // The page has loaded. Should the page use PaymentRequest? // If PaymentRequest fails, should the page fallback to manual // web form checkout? -const supportedPaymentMethods = [ - /* supported methods */ -]; +const supportedPaymentMethods = [/* supported methods */]; let shouldCallPaymentRequest = true; let fallbackToLegacyOnPaymentRequestFailure = false; diff --git a/files/en-us/web/api/publickeycredential/index.md b/files/en-us/web/api/publickeycredential/index.md index 069865d7f9a7e46..f2a4da067a9dfd6 100644 --- a/files/en-us/web/api/publickeycredential/index.md +++ b/files/en-us/web/api/publickeycredential/index.md @@ -104,9 +104,7 @@ Here, we fetch an existing credential from an authenticator, using {{domxref("Cr ```js const requestCredentialOptions = { publicKey: { - challenge: new Uint8Array([ - /* bytes sent from the server */ - ]), + challenge: new Uint8Array([/* bytes sent from the server */]), }, }; diff --git a/files/en-us/web/api/request/duplex/index.md b/files/en-us/web/api/request/duplex/index.md index d63a4f3884878a0..db812faf9f8286d 100644 --- a/files/en-us/web/api/request/duplex/index.md +++ b/files/en-us/web/api/request/duplex/index.md @@ -28,9 +28,7 @@ Although `duplex` can be passed as an option when constructing a `Request`, it i ### Checking a request's duplex mode ```js -const stream = new ReadableStream({ - /* ... */ -}); +const stream = new ReadableStream({/* ... */}); const request = new Request("/upload", { method: "POST", body: stream, diff --git a/files/en-us/web/api/rtcicecandidate/candidate/index.md b/files/en-us/web/api/rtcicecandidate/candidate/index.md index 36ef1fabfe41d06..ecc0bd7ebe19009 100644 --- a/files/en-us/web/api/rtcicecandidate/candidate/index.md +++ b/files/en-us/web/api/rtcicecandidate/candidate/index.md @@ -50,9 +50,9 @@ ICE candidate received from the remote peer during the signaling process. function handleNewIceCandidate(candidateSDP) { const candidateObj = new RTCIceCandidate(candidateSDP); - myPeerConnection.addIceCandidate(candidateObj).catch({ - /* handle the error thrown by addIceCandidate() */ - }); + myPeerConnection + .addIceCandidate(candidateObj) + .catch({/* handle the error thrown by addIceCandidate() */}); } ``` diff --git a/files/en-us/web/api/securitypolicyviolationevent/securitypolicyviolationevent/index.md b/files/en-us/web/api/securitypolicyviolationevent/securitypolicyviolationevent/index.md index 4edc6e2f869f5eb..147abb945bb9baf 100644 --- a/files/en-us/web/api/securitypolicyviolationevent/securitypolicyviolationevent/index.md +++ b/files/en-us/web/api/securitypolicyviolationevent/securitypolicyviolationevent/index.md @@ -62,9 +62,7 @@ A new `SecurityPolicyViolationEvent` object. ## Examples ```js -let SPVEvt = new SecurityPolicyViolationEvent("foo", { - /* ... */ -}); +let SPVEvt = new SecurityPolicyViolationEvent("foo", {/* ... */}); ``` ## Specifications diff --git a/files/en-us/web/api/transformstream/index.md b/files/en-us/web/api/transformstream/index.md index b0743be4db941c4..47859ecf5edabc6 100644 --- a/files/en-us/web/api/transformstream/index.md +++ b/files/en-us/web/api/transformstream/index.md @@ -95,9 +95,7 @@ class AnyToU8Stream extends TransformStream { This is a useful one, where multiple streams can be conjoined. Examples include building a PWA with progressive loading and progressive streaming. ```js -let responses = [ - /* conjoined response tree */ -]; +let responses = [/* conjoined response tree */]; let { readable, writable } = new TransformStream(); responses.reduce( diff --git a/files/en-us/web/api/vrlayerinit/index.md b/files/en-us/web/api/vrlayerinit/index.md index f3f496dee6ac165..a09dc28c91bc488 100644 --- a/files/en-us/web/api/vrlayerinit/index.md +++ b/files/en-us/web/api/vrlayerinit/index.md @@ -60,12 +60,8 @@ if (navigator.getVRDisplays) { ```js const init = { - leftBounds: [ - /* … */ - ], - rightBounds: [ - /* … */ - ], + leftBounds: [/* … */], + rightBounds: [/* … */], source: canvasReference, }; ``` diff --git a/files/en-us/web/api/webxr_device_api/performance/index.md b/files/en-us/web/api/webxr_device_api/performance/index.md index 576474926d692d0..503986225867719 100644 --- a/files/en-us/web/api/webxr_device_api/performance/index.md +++ b/files/en-us/web/api/webxr_device_api/performance/index.md @@ -38,9 +38,7 @@ Consider the following: function drawScene(gl, view, programInfo, buffers, texture, deltaTime) { // … for (const object in scene) { - const vertexList = [ - /* … */ - ]; + const vertexList = [/* … */]; const normalMatrix = mat4.create(); const modelViewMatrix = mat4.create(); const objectMatrix = mat4.create(); @@ -57,9 +55,7 @@ This renders a scene. But it's inefficient, because it allocates as local variab A simple change can optimize this significantly: ```js -const vertexList = [ - /* … */ -]; +const vertexList = [/* … */]; const normalMatrix = mat4.create(); const modelViewMatrix = mat4.create(); diff --git a/files/en-us/web/api/xrcompositionlayer/miplevels/index.md b/files/en-us/web/api/xrcompositionlayer/miplevels/index.md index 6aecf762394f9a2..d5678a23c843d8b 100644 --- a/files/en-us/web/api/xrcompositionlayer/miplevels/index.md +++ b/files/en-us/web/api/xrcompositionlayer/miplevels/index.md @@ -35,9 +35,7 @@ let quadLayer = xrGLBinding.createQuadLayer({ width: 1.0, height: 1.0, mipLevels: 5, - transform: new XRRigidTransform({ - /* … */ - }), + transform: new XRRigidTransform({/* … */}), }); quadLayer.mipLevels; // 5 diff --git a/files/en-us/web/css/guides/gaps/index.md b/files/en-us/web/css/guides/gaps/index.md index dc4e70879e5fc08..b8788be3c680f37 100644 --- a/files/en-us/web/css/guides/gaps/index.md +++ b/files/en-us/web/css/guides/gaps/index.md @@ -350,13 +350,8 @@ When the column rule is larger than the column gap, the decorative line appears - {{cssxref("column-gap")}} - {{cssxref("column-rule")}} -- {{cssxref("column-rule-color")}} -- {{cssxref("column-rule-style")}} -- {{cssxref("column-rule-width")}} -- {{cssxref("gap")}} -- {{cssxref("row-gap")}} - +- {{cssxref("rule-width")}} ### Terms and glossary definitions @@ -430,6 +429,7 @@ When the column rule is larger than the column gap, the decorative line appears - {{CSSxRef("grid")}} - {{CSSxRef("grid-column")}} - {{CSSxRef("grid-row")}} +- {{cssxref("repeat()")}} [CSS multi-column layout](/en-US/docs/Web/CSS/Guides/Multicol_layout) module diff --git a/files/en-us/web/css/guides/scrollbars_styling/index.md b/files/en-us/web/css/guides/scrollbars_styling/index.md index cf630c2f0202a53..4ee78cf9f6aced7 100644 --- a/files/en-us/web/css/guides/scrollbars_styling/index.md +++ b/files/en-us/web/css/guides/scrollbars_styling/index.md @@ -48,8 +48,7 @@ like being pleasant to touch and smell, like converting sunlight into food, like making it easier for us to breathe. - +

- Ross Gay

diff --git a/files/en-us/web/css/reference/properties/column-rule-visibility-items/index.md b/files/en-us/web/css/reference/properties/column-rule-visibility-items/index.md new file mode 100644 index 000000000000000..b3df10b5b5a79f1 --- /dev/null +++ b/files/en-us/web/css/reference/properties/column-rule-visibility-items/index.md @@ -0,0 +1,179 @@ +--- +title: "`column-rule-visibility-items` CSS property" +short-title: column-rule-visibility-items +slug: Web/CSS/Reference/Properties/column-rule-visibility-items +page-type: css-property +browser-compat: css.properties.column-rule-visibility-items +sidebar: cssref +--- + +The **`column-rule-visibility-items`** [CSS](/en-US/docs/Web/CSS) property defines whether a column-rule segment is painted in gaps adjacent to empty areas. + +{{InteractiveExample("CSS Demo: column-rule-visibility-items")}} + +```css interactive-example-choice +column-rule-visibility-items: all; +``` + +```css interactive-example-choice +column-rule-visibility-items: around; +``` + +```css interactive-example-choice +column-rule-visibility-items: between; +``` + +```css interactive-example-choice +column-rule-visibility-items: normal; +``` + +```html interactive-example +
+
+

One fish

+

Two fish

+

Red fish

+

Blue fish

+ -- Dr. Seuss +
+
+``` + +```css interactive-example +#example-element { + display: grid; + column-rule: solid 5px red; + gap: 10px; + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); +} +cite { + grid-row: 3; + grid-column: 3; +} +``` + +## Syntax + +```css +/* Keywords */ +column-rule-visibility-items: all; +column-rule-visibility-items: around; +column-rule-visibility-items: between; +column-rule-visibility-items: normal; + +/* Global values */ +column-rule-visibility-items: inherit; +column-rule-visibility-items: initial; +column-rule-visibility-items: revert; +column-rule-visibility-items: revert-layer; +column-rule-visibility-items: unset; +``` + +### Values + +- `all` + - : The column rule should be painted in all gap segments, regardless of whether adjacent areas contain an item. + +- `around` + - : The column rule should be painted in a gap segment if at least one of the two adjacent areas is occupied by a item. + +- `between` + - : The column rule should be painted in a gap segment if both adjacent areas are occupied by items. + +- `normal` + - : With grid containers, behaves the same as `all`. In multicol layout, behaves the same as `between`. This is the default. + +## Description + +The `column-rule-visibility-items` property defines whether a column-rule segment is painted in column gaps adjacent to empty areas in [multi-row](/en-US/docs/Web/CSS/Guides/Multicol_layout) and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one column. + +The `column-rule-visibility-items` and {{cssxref("row-rule-visibility-items")}} properties can both be set using the {{cssxref("rule-visibility-items")}} shorthand. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic example + +In this example, we define a column rule to be drawn between two grid areas if at least one adjacent grid area contains a grid item. + +#### HTML + +We include a list of dynamic sports duos: + +```html +
    +
  1. Simone Biles + Jonathan Owens
    2. +
  2. Serena Williams + Venus Williams
    3. +
  3. Aaron Judge + Giancarlo Stanton
    4. +
  4. LeBron James + Dwyane Wade
    5. +
  5. Xavi Hernandez + Andres Iniesta
    6. +
  6. Kerri Walsh + Misty May Treanor
    7. +
+``` + +#### CSS + +We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 columns and 4 rows by setting both the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} properties to `repeat(4, 1fr)`, and move the last item to the bottom-right grid area using {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. We include a {{cssxref("gap")}} of `20px` to provide enough room between the columns to fit our `5px` dashed rule. + +Finally, we set `column-rule-visibility-items` to `between`, so that a column rule is painted in a column gap only if both adjacent grid areas contain a grid item. + +```css +ol { + display: grid; + grid-template-rows: repeat(4, 1fr); + grid-template-columns: repeat(4, 1fr); + gap: 10px; + + column-rule: dashed 5px blue; + column-rule-visibility-items: between; +} +li:last-child { + grid-row: 4; + grid-column: 4; +} +``` + +```css hidden +li { + margin-left: 1em; +} +@layer no-support { + @supports not (column-rule-visibility-items: around) { + body::before { + content: "Your browser doesn't support the column-rule-visibility-items property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +#### Result + +{{EmbedLiveSample("Basic", "", "230")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("rule-visibility-items")}} shorthand +- {{cssxref("row-rule-visibility-items")}} +- {{cssxref("column-rule")}} shorthand +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/row-rule-visibility-items/index.md b/files/en-us/web/css/reference/properties/row-rule-visibility-items/index.md new file mode 100644 index 000000000000000..2d48fe76954481c --- /dev/null +++ b/files/en-us/web/css/reference/properties/row-rule-visibility-items/index.md @@ -0,0 +1,179 @@ +--- +title: "`row-rule-visibility-items` CSS property" +short-title: row-rule-visibility-items +slug: Web/CSS/Reference/Properties/row-rule-visibility-items +page-type: css-property +browser-compat: css.properties.row-rule-visibility-items +sidebar: cssref +--- + +The **`row-rule-visibility-items`** [CSS](/en-US/docs/Web/CSS) property defines whether a row-rule segment is painted in gaps adjacent to empty areas. + +{{InteractiveExample("CSS Demo: row-rule-visibility-items")}} + +```css interactive-example-choice +row-rule-visibility-items: all; +``` + +```css interactive-example-choice +row-rule-visibility-items: around; +``` + +```css interactive-example-choice +row-rule-visibility-items: between; +``` + +```css interactive-example-choice +row-rule-visibility-items: normal; +``` + +```html interactive-example +
+
+

One fish

+

Two fish

+

Red fish

+

Blue fish

+ -- Dr. Seuss +
+
+``` + +```css interactive-example +#example-element { + display: grid; + row-rule: solid 5px red; + gap: 10px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} +cite { + grid-column: 3; + grid-row: 3; +} +``` + +## Syntax + +```css +/* Keywords */ +row-rule-visibility-items: all; +row-rule-visibility-items: around; +row-rule-visibility-items: between; +row-rule-visibility-items: normal; + +/* Global values */ +row-rule-visibility-items: inherit; +row-rule-visibility-items: initial; +row-rule-visibility-items: revert; +row-rule-visibility-items: revert-layer; +row-rule-visibility-items: unset; +``` + +### Values + +- `all` + - : The row rule should be painted in all gap segments, regardless of whether adjacent areas contain an item. + +- `around` + - : The row rule should be painted in a gap segment if at least one of the two adjacent areas is occupied by an item. + +- `between` + - : The row rule should be painted in a gap segment if both adjacent areas are occupied by items. + +- `normal` + - : Behaves the same as `all`. This is the default. + +## Description + +The `row-rule-visibility-items` property defines whether, in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout) and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row, row rule segments are painted in the gaps between two adjacent areas if one or both of the areas are empty. + +The `row-rule-visibility-items` and {{cssxref("row-rule-visibility-items")}} properties can both be set to the same values using the {{cssxref("rule-visibility-items")}} shorthand. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic example + +In this example, we define a row rules to be drawn between two grid areas if at least one adjacent grid area contains grid items. + +#### HTML + +We include a list of dynamic sports duos: + +```html +
    +
  1. Simone Biles + Jonathan Owens
    2. +
  2. Serena Williams + Venus Williams
    3. +
  3. Aaron Judge + Giancarlo Stanton
    4. +
  4. LeBron James + Dwyane Wade
    5. +
  5. Xavi Hernandez + Andres Iniesta
    6. +
  6. Kerri Walsh + Misty May Treanor
    7. +
+``` + +#### CSS + +We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 rows and 4 columns by setting both the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties to `repeat(4, 1fr)`, and move the last item to the bottom-right grid area using {{cssxref("grid-row")}} and {{cssxref("grid-column")}}. We include a {{cssxref("gap")}} of `20px` to provide enough room between the rows to fit our `5px` dashed rule. + +Finally, we set `row-rule-visibility-items` to `around`, so that a row rule segment is only painted in a row gap if one or both adjacent grid areas contain a grid item. + +```css +ol { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(4, 1fr); + gap: 10px; + + row-rule: dashed 5px blue; + row-rule-visibility-items: around; +} +li:last-child { + grid-column: 4; + grid-row: 4; +} +``` + +```css hidden +li { + margin-left: 1em; +} +@layer no-support { + @supports not (row-rule-visibility-items: around) { + body::before { + content: "Your browser doesn't support the row-rule-visibility-items property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +#### Result + +{{EmbedLiveSample("Basic", "", "230")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("rule-visibility-items")}} shorthand +- {{cssxref("column-rule-visibility-items")}} +- {{cssxref("row-rule")}} shorthand +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/rule-visibility-items/index.md b/files/en-us/web/css/reference/properties/rule-visibility-items/index.md new file mode 100644 index 000000000000000..f1386d8af377f6d --- /dev/null +++ b/files/en-us/web/css/reference/properties/rule-visibility-items/index.md @@ -0,0 +1,187 @@ +--- +title: "`rule-visibility-items` CSS property" +short-title: rule-visibility-items +slug: Web/CSS/Reference/Properties/rule-visibility-items +page-type: css-property +browser-compat: css.properties.rule-visibility-items +sidebar: cssref +--- + +The **`rule-visibility-items`** [CSS](/en-US/docs/Web/CSS) shorthand property defines whether rule segments are painted in both row and column gaps adjacent to empty areas. + +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{cssxref("column-rule-visibility-items")}} +- {{cssxref("row-rule-visibility-items")}} + +{{InteractiveExample("CSS Demo: rule-visibility-items")}} + +```css interactive-example-choice +rule-visibility-items: all; +``` + +```css interactive-example-choice +rule-visibility-items: around; +``` + +```css interactive-example-choice +rule-visibility-items: between; +``` + +```css interactive-example-choice +rule-visibility-items: normal; +``` + +```html interactive-example +
+
+

One fish

+

Two fish

+

Red fish

+

Blue fish

+ -- Dr. Seuss +
+
+``` + +```css interactive-example +#example-element { + display: grid; + rule: solid 5px red; + gap: 10px; + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); +} +cite { + grid-row: 3; + grid-column: 3; +} +``` + +## Syntax + +```css +/* Keywords */ +rule-visibility-items: all; +rule-visibility-items: around; +rule-visibility-items: between; +rule-visibility-items: normal; + +/* Global values */ +rule-visibility-items: inherit; +rule-visibility-items: initial; +rule-visibility-items: revert; +rule-visibility-items: revert-layer; +rule-visibility-items: unset; +``` + +### Values + +- `all` + - : Rules should be painted in all gap segments, regardless of whether adjacent areas contain an item. + +- `around` + - : A rule should be painted in a gap segment if at least one of the two adjacent areas is occupied by a item. + +- `between` + - : A rule should be painted in a gap segment only if both adjacent areas are occupied by items. + +- `normal` + - : With grid containers, behaves the same as `all`. In multicol layout, behaves the same as `between`. This is the default. + +## Description + +The `rule-visibility-items` property defines whether rule segments are painted in gaps adjacent to empty areas in the gaps between rows and columns in [multi-row](/en-US/docs/Web/CSS/Guides/Multicol_layout) and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row or column. + +The value is a single keyword that sets the same value for both the {{cssxref("column-rule-visibility-items")}} and {{cssxref("row-rule-visibility-items")}} properties. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic example + +In this example, we define a rule to be drawn between two grid areas if at least one adjacent grid area contains a grid item. + +#### HTML + +We include a list of dynamic sports duos: + +```html +
    +
  1. Simone Biles + Jonathan Owens
    2. +
  2. Serena Williams + Venus Williams
    3. +
  3. Aaron Judge + Giancarlo Stanton
    4. +
  4. LeBron James + Dwyane Wade
    5. +
  5. Xavi Hernandez + Andres Iniesta
    6. +
  6. Kerri Walsh + Misty May Treanor
    7. +
+``` + +#### CSS + +We define the ordered list ({{htmlelement("ol")}}) to be a grid container, creating 4 columns and 4 rows by setting both the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} properties to `repeat(4, 1fr)`, and move the last item to the bottom-right grid area using the {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. We include a {{cssxref("gap")}} of `20px` to provide enough room between the columns to fit our `5px` rules. We set the column rules to `dashed` and the row rules to `solid`. + +Finally, we set `rule-visibility-items` to `between`, so that row- and column-rules are painted only if both grid areas adjacent to them contain a grid item. + +```css +ol { + display: grid; + grid-template-rows: repeat(4, 1fr); + grid-template-columns: repeat(4, 1fr); + gap: 20px; + + column-rule: dashed 5px blue; + row-rule: solid 5px red; + + rule-visibility-items: around; +} +li:last-child { + grid-row: 4; + grid-column: 4; +} +``` + +```css hidden +li { + margin-left: 1em; +} +@layer no-support { + @supports not (rule-visibility-items: around) { + body::before { + content: "Your browser doesn't support the rule-visibility-items shorthand"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +#### Result + +{{EmbedLiveSample("Basic", "", "230")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("column-rule-visibility-items")}} shorthand +- {{cssxref("row-rule-visibility-items")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/selectors/_colon_read-only/index.md b/files/en-us/web/css/reference/selectors/_colon_read-only/index.md index 958b11fe6bc45b2..7a42fb2414a7f7e 100644 --- a/files/en-us/web/css/reference/selectors/_colon_read-only/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_read-only/index.md @@ -72,8 +72,7 @@ The `:read-only` pseudo-class is used to remove all the styling that makes the i Viscous, Bright Ridge, CA - +
diff --git a/files/en-us/web/css/reference/selectors/_colon_read-write/index.md b/files/en-us/web/css/reference/selectors/_colon_read-write/index.md index bdcf4d247d4cf38..2bb542643499935 100644 --- a/files/en-us/web/css/reference/selectors/_colon_read-write/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_read-write/index.md @@ -121,8 +121,7 @@ textarea:read-write { +CA
diff --git a/files/en-us/web/css/reference/values/fit-content_function/index.md b/files/en-us/web/css/reference/values/fit-content_function/index.md index d4e91cfbb6069b1..3006809bbc67551 100644 --- a/files/en-us/web/css/reference/values/fit-content_function/index.md +++ b/files/en-us/web/css/reference/values/fit-content_function/index.md @@ -11,6 +11,9 @@ sidebar: cssref The **`fit-content()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) clamps a given size to an available size according to the formula `min(maximum size, max(minimum size, argument))`. +It is distinct from the {{cssxref("fit-content")}} keyword, which takes no argument and sizes a box based on its content within the available space. +Only `fit-content()` is valid in grid track sizing properties such as {{cssxref("grid-template-columns")}}. + {{InteractiveExample("CSS Demo: fit-content()")}} ```css interactive-example-choice @@ -147,5 +150,6 @@ fit-content(40%) - {{cssxref("grid-auto-columns")}} - {{cssxref("grid-auto-rows")}} - {{cssxref("grid-auto-flow")}} +- {{cssxref("fit-content")}} keyterm - [Line-based placement with CSS grid](/en-US/docs/Web/CSS/Guides/Grid_layout/Line-based_placement) - [Grid template areas: grid definition shorthands](/en-US/docs/Web/CSS/Guides/Grid_layout/Grid_template_areas#grid_definition_shorthands) diff --git a/files/en-us/web/html/reference/attributes/form/index.md b/files/en-us/web/html/reference/attributes/form/index.md index 73cd30479565c48..f215653ebd23bc9 100644 --- a/files/en-us/web/html/reference/attributes/form/index.md +++ b/files/en-us/web/html/reference/attributes/form/index.md @@ -106,8 +106,7 @@ This example demonstrates how form-associated elements can be associated with a