From 000726d71e4bae5780e9fe787555aed8cf38e316 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 21 Dec 2024 01:02:37 +0800 Subject: [PATCH 001/123] Remove the note about long gone font-variant descriptor (#37291) --- files/en-us/web/css/@font-face/index.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/files/en-us/web/css/@font-face/index.md b/files/en-us/web/css/@font-face/index.md index c15f1ad800bdf77..a2cc498998123a5 100644 --- a/files/en-us/web/css/@font-face/index.md +++ b/files/en-us/web/css/@font-face/index.md @@ -37,12 +37,7 @@ The **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At - {{cssxref("@font-face/font-style", "font-style")}} - : A {{cssxref("font-style")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-style: oblique 20deg 50deg;` - {{cssxref("@font-face/font-weight", "font-weight")}} - - : A {{cssxref("font-weight")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-weight: 100 400;` - - > [!NOTE] - > The font-variant descriptor was removed from the specification in 2018. The {{cssxref("font-variant")}} value property is supported, but there is no descriptor equivalent. - - {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} - : Allows control over advanced typographic features in OpenType fonts. - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} From da659b5d4f75b66804d97c80ec7c89b8792d7389 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Fri, 20 Dec 2024 17:08:42 +0000 Subject: [PATCH 002/123] anchor-size() support in inset and margin property values (#37246) * anchor-size() support in inset and margin property values * Fixes for estelle review comments --- files/en-us/web/css/anchor-size/index.md | 93 ++++++++---- files/en-us/web/css/bottom/index.md | 11 +- .../web/css/css_anchor_positioning/index.md | 13 +- .../css/css_anchor_positioning/using/index.md | 134 ++++++++++++++++++ files/en-us/web/css/inset-block-end/index.md | 2 +- .../en-us/web/css/inset-block-start/index.md | 2 +- files/en-us/web/css/inset-block/index.md | 2 +- files/en-us/web/css/inset-inline-end/index.md | 2 +- .../en-us/web/css/inset-inline-start/index.md | 2 +- files/en-us/web/css/inset-inline/index.md | 2 +- files/en-us/web/css/inset/index.md | 3 +- files/en-us/web/css/left/index.md | 10 +- files/en-us/web/css/margin-block-end/index.md | 2 + .../en-us/web/css/margin-block-start/index.md | 2 + files/en-us/web/css/margin-block/index.md | 2 + files/en-us/web/css/margin-bottom/index.md | 6 + .../en-us/web/css/margin-inline-end/index.md | 2 + .../web/css/margin-inline-start/index.md | 2 + files/en-us/web/css/margin-inline/index.md | 2 + files/en-us/web/css/margin-left/index.md | 6 + files/en-us/web/css/margin-right/index.md | 6 + files/en-us/web/css/margin-top/index.md | 6 + files/en-us/web/css/margin/index.md | 14 +- files/en-us/web/css/right/index.md | 10 +- files/en-us/web/css/top/index.md | 10 +- 25 files changed, 290 insertions(+), 56 deletions(-) diff --git a/files/en-us/web/css/anchor-size/index.md b/files/en-us/web/css/anchor-size/index.md index fd60dd40df41b60..4a796c1b6f0c7dc 100644 --- a/files/en-us/web/css/anchor-size/index.md +++ b/files/en-us/web/css/anchor-size/index.md @@ -9,25 +9,33 @@ browser-compat: css.types.anchor-size {{CSSRef}}{{SeeCompatTable}} -The **`anchor-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) enables [sizing anchor-positioned elements](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#sizing_elements_based_on_anchor_size) relative to the dimensions of anchor elements. It returns the `` of a specified side of the target anchor element. `anchor-size()` is only valid when used within the value of anchor-positioned elements' [sizing properties](#properties_that_accept_anchor-size_function_values). +The **`anchor-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) enables setting anchor-positioned element's [size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#sizing_elements_based_on_anchor_size), [position](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_position_based_on_anchor_size), and [margins](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_margin_based_on_anchor_size) relative to the dimensions of anchor elements. It returns the `` of a specified side of the target anchor element. `anchor-size()` is only valid when used within the value of anchor-positioned elements' [sizing, inset, and margin properties](#properties_that_accept_anchor-size_function_values). For detailed information on anchor features and usage, see the [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page and the [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) guide. ## Syntax ```css -/* size of anchor side */ +/* sizing relative to anchor side */ width: anchor-size(width); block-size: anchor-size(block); height: calc(anchor-size(self-inline) + 2em); -/* size of named anchor side */ +/* sizing relative to named anchor's side */ width: anchor-size(--myAnchor width); block-size: anchor-size(--myAnchor block); -/* size of named anchor side with fallback */ +/* sizing relative to named anchor's side with fallback */ width: anchor-size(--myAnchor width, 50%); block-size: anchor-size(--myAnchor block, 200px); + +/* positioning relative to anchor side */ +left: anchor-size(width); +inset-inline-end: anchor-size(--myAnchor height, 100px); + +/* setting margin relative to anchor side */ +margin-left: calc(anchor-size(width) / 4); +margin-block-start: anchor-size(--myAnchor self-block, 20px); ``` ### Parameters @@ -42,14 +50,14 @@ The parameters are: - `` {{optional_inline}} - - : The [`anchor-name`](/en-US/docs/Web/CSS/anchor-name) property value of an anchor element you want to size the element relative to. This is a `` value. If omitted, the element's default anchor is used. + - : The [`anchor-name`](/en-US/docs/Web/CSS/anchor-name) property value of an anchor element you want to set the element's size, position, or margins relative to. This is a `` value. If omitted, the element's default anchor is used. > [!NOTE] - > Specifying an `` inside an `anchor-size()` function neither associates nor tethers an element to an anchor; it only sizes the element relative to that anchor. + > Specifying an `` inside an `anchor-size()` function neither associates nor tethers an element to an anchor; it only defines which anchor the element's property values should be set relative to. - `` {{optional_inline}} - - : Specifies the dimension of the anchor element that the positioned element will be sized relative to. Valid values include: + - : Specifies the dimension of the anchor element that the positioned element's property values will be set relative to. Valid values include: - `width` @@ -82,7 +90,7 @@ The parameters are: - : Specifies the size to use as a fallback value if the element is not absolutely or fixed positioned, or the anchor element doesn't exist. If this parameter is omitted in a case when the fallback would otherwise be used, the declaration is invalid. > [!NOTE] -> The anchor dimension you size the positioned element relative to does not have to be along the same axis as the sizing value being set. For example, `width: anchor-size(height)` is valid. +> The anchor dimension you set the positioned element's property values relative to does not have to be along the same axis as the sizing value being set. For example, `width: anchor-size(height)` is valid. ### Return value @@ -90,9 +98,13 @@ Returns a {{cssxref("length")}} value. ## Description -The `anchor-size()` function enables a positioned element's sizing values to be expressed in terms of an anchor element's dimensions; it returns a {{cssxref("length")}} value representing the dimension of a specific anchor element the positioned element is being sized relative to. It is a valid value for [sizing properties](#properties_that_accept_anchor-size_function_values) set on anchor-positioned elements. +The `anchor-size()` function enables a positioned element's sizing, position, and margin values to be expressed in terms of an anchor element's dimensions; it returns a {{cssxref("length")}} value representing the dimension of a specific anchor element the positioned element's property values are set relative to. It is a valid value for [sizing, inset, and margin properties](#properties_that_accept_anchor-size_function_values) set on anchor-positioned elements. + +The length returned is the vertical or horizontal size of an anchor element or its containing block. The dimension used is defined by the `` parameter. If that parameter is omitted, the dimension used will match the axis of the sizing, position, or margin property is it set on. So for example: -The length returned is the vertical or horizontal size of an anchor element or its containing block. The dimension used is defined by the `` parameter. If that parameter is omitted, the dimension used will match the axis of the sizing property is it set on. +- `width: anchor-size()` is equivalent to `width: anchor-size(width)`. +- `top: anchor-size()` is equivalent to `top: anchor-size(height)`. +- `margin-inline-end: anchor-size()` is equivalent to `margin-inline-end: anchor-size(self-inline)`. `margin-inline-end: anchor-size()` is also equivalent to `margin-inline-end: anchor-size(width)` in horizontal writing modes, or `margin-inline-end: anchor-size(height)` in vertical writing modes. The anchor element used as the basis for the dimension length is the element with the `anchor-name` specified in the `` parameter. If more than one element has the same anchor name, the last element with that anchor name in the DOM order is used. @@ -100,7 +112,7 @@ If no `` parameter is included in the function call, the element's If an `` parameter is included and there are no elements matching that anchor name, the fallback value is used. If no fallback was included, the declaration is ignored. For example, if `width: anchor-size(--foo width, 50px); height: anchor-size(--foo width);` were specified on the positioned element but no anchor named `--foo` exists in the DOM, the `width` would be `50px` and the `height` declaration would have no effect. -If an element has sizing properties with `anchor-size()` values set on them, but it is not an anchor-positioned element (it does not have its {{cssxref("position")}} property set to `absolute` or `fixed` or does not have an anchor associated with it via its `position-anchor` property), the fallback value will be used if one is available. If no fallback is available, the declaration is ignored. +If an element has sizing, position, or margin properties with `anchor-size()` values set on them, but it is not an anchor-positioned element (it does not have its {{cssxref("position")}} property set to `absolute` or `fixed` or does not have an anchor associated with it via its `position-anchor` property), the fallback value will be used if one is available. If no fallback is available, the declaration is ignored. For example, if `width: anchor-size(width, 50px);` were specified on the positioned element but no anchor was associated with it, the fallback value would be used, so `width` would get a computed value of `50px`. @@ -108,24 +120,49 @@ For detailed information on anchor features and usage, see the [CSS anchor posit ### Properties that accept `anchor-size()` function values -The sizing properties that accept an `anchor-size()` function as a value include: - -- {{cssxref("width")}} -- {{cssxref("height")}} -- {{cssxref("min-width")}} -- {{cssxref("min-height")}} -- {{cssxref("max-width")}} -- {{cssxref("max-height")}} -- {{cssxref("block-size")}} -- {{cssxref("inline-size")}} -- {{cssxref("min-block-size")}} -- {{cssxref("min-inline-size")}} -- {{cssxref("max-block-size")}} -- {{cssxref("max-inline-size")}} +The properties that accept an `anchor-size()` function as a value include: + +- Sizing properties: + - {{cssxref("width")}} + - {{cssxref("height")}} + - {{cssxref("min-width")}} + - {{cssxref("min-height")}} + - {{cssxref("max-width")}} + - {{cssxref("max-height")}} + - {{cssxref("block-size")}} + - {{cssxref("inline-size")}} + - {{cssxref("min-block-size")}} + - {{cssxref("min-inline-size")}} + - {{cssxref("max-block-size")}} + - {{cssxref("max-inline-size")}} +- Inset properties: + - {{cssxref("bottom")}} + - {{cssxref("left")}} + - {{cssxref("right")}} + - {{cssxref("top")}} + - {{cssxref("inset")}} shorthand + - {{cssxref("inset-block")}} shorthand + - {{cssxref("inset-block-end")}} + - {{cssxref("inset-block-start")}} + - {{cssxref("inset-inline")}} shorthand + - {{cssxref("inset-inline-end")}} + - {{cssxref("inset-inline-start")}} +- Margin properties: + - {{cssxref("margin")}} shorthand + - {{cssxref("margin-bottom")}} + - {{cssxref("margin-left")}} + - {{cssxref("margin-right")}} + - {{cssxref("margin-top")}} + - {{cssxref("margin-block")}} shorthand + - {{cssxref("margin-block-end")}} + - {{cssxref("margin-block-start")}} + - {{cssxref("margin-inline")}} shorthand + - {{cssxref("margin-inline-end")}} + - {{cssxref("margin-inline-start")}} ### Using `anchor-size()` inside `calc()` -The most common `anchor-size()` functions you'll use will just refer to a dimension of the default anchor. Alternative, include the `anchor-size()` function inside a {{cssxref("calc")}} functions to modify the size applied to the positioned element. +The most common `anchor-size()` functions you'll use will just refer to a dimension of the default anchor. Alternative, include the `anchor-size()` function inside a {{cssxref("calc")}} function to modify the size applied to the positioned element. For example, this rule sizes the positioned element's width equal to the default anchor element's width: @@ -261,6 +298,10 @@ We set some distinct property values on the positioned elements: Use your browser tools to inspect the anchor-positioned elements. The first infobox will be `100px` tall and `200px` wide, while the second infobox will have a height of approximately `66.7px`, with the `width` defaulting to {{cssxref("max-content")}}. +### Position and margin example + +See [`anchor-size()` position and margin example](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#anchor-size_position_and_margin_example). + ## Specifications {{Specifications}} diff --git a/files/en-us/web/css/bottom/index.md b/files/en-us/web/css/bottom/index.md index 4e4c19523f7907e..7ea40b0bfe24e77 100644 --- a/files/en-us/web/css/bottom/index.md +++ b/files/en-us/web/css/bottom/index.md @@ -26,8 +26,8 @@ When both {{cssxref("top")}} and `bottom` are specified, `position` is set to `a /* values */ bottom: 3px; bottom: 2.4em; -bottom: anchor(top); bottom: calc(anchor(--myAnchor 50%) + 5px); +bottom: anchor-size(width); /* s of the height of the containing block */ bottom: 10%; @@ -47,11 +47,11 @@ bottom: unset; - {{cssxref("<length>")}} - - : A negative, null, or positive {{cssxref("<length>")}} that represents: + - : A negative, null, or positive {{cssxref("<length>")}}: - - for _absolutely positioned elements_, the distance to the bottom edge of the containing block. - - for _relatively positioned elements_, the distance that the element is moved above its normal position. - - for [_anchor-positioned elements_](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#using_inset_properties_with_anchor_function_values), the {{cssxref("anchor()")}} function resolves to a {{cssxref("<length>")}} value relative to the position of the associated _anchor element_'s top or bottom edge. + - for _absolutely positioned elements_, it represents the distance to the bottom edge of the containing block. + - for _relatively positioned elements_, it represents the distance that the element is moved above its normal position. + - for _anchor-positioned elements_, the {{cssxref("anchor()")}} function resolves to a {{cssxref("<length>")}} value relative to the position of the associated _anchor element_'s top or bottom edge (see [Using inset properties with `anchor()` function values](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#using_inset_properties_with_anchor_function_values)), and the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated anchor element's width or height (see [Setting element position based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_position_based_on_anchor_size)). - {{cssxref("<percentage>")}} - : A {{cssxref("<percentage>")}} of the containing block's height. @@ -60,7 +60,6 @@ bottom: unset; - : Specifies that: - for _absolutely positioned elements_, the position of the element is based on the {{Cssxref("top")}} property, while `height: auto` is treated as a height based on the content; or if `top` is also `auto`, the element is positioned where it should vertically be positioned if it were a static element. - - for _anchor positioned elements_, a percentage within the {{cssxref("anchor()")}} function specifies the distance, as a percentage, from the start of the element's content along the block axis. - for _relatively positioned elements_, the distance of the element from its normal position is based on the {{Cssxref("top")}} property; or if `top` is also `auto`, the element is not moved vertically at all. - `inherit` diff --git a/files/en-us/web/css/css_anchor_positioning/index.md b/files/en-us/web/css/css_anchor_positioning/index.md index 2c4d405bb73161a..4d7758f8ceef2a6 100644 --- a/files/en-us/web/css/css_anchor_positioning/index.md +++ b/files/en-us/web/css/css_anchor_positioning/index.md @@ -80,8 +80,15 @@ In addition, the specification provides CSS-only mechanisms to: - {{cssxref("inline-size")}} - {{cssxref("min-block-size")}} - {{cssxref("min-inline-size")}} + - {{cssxref("block-size")}} - {{cssxref("max-block-size")}} - {{cssxref("max-inline-size")}} + - {{cssxref("margin-block")}} + - {{cssxref("margin-block-end")}} + - {{cssxref("margin-block-start")}} + - {{cssxref("margin-inline")}} + - {{cssxref("margin-inline-end")}} + - {{cssxref("margin-inline-start")}} - [Inset properties](/en-US/docs/Glossary/Inset_properties) glossary term - [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module: - {{cssxref("top")}} @@ -95,7 +102,11 @@ In addition, the specification provides CSS-only mechanisms to: - {{cssxref("min-height")}} - {{cssxref("max-width")}} - {{cssxref("max-height")}} - - {{cssxref("block-size")}} + - {{cssxref("margin")}} + - {{cssxref("margin-bottom")}} + - {{cssxref("margin-left")}} + - {{cssxref("margin-right")}} + - {{cssxref("margin-top")}} - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module: - {{cssxref("align-items")}} - {{cssxref("align-self")}} diff --git a/files/en-us/web/css/css_anchor_positioning/using/index.md b/files/en-us/web/css/css_anchor_positioning/using/index.md index debd59207253397..9dec787c48cd7bd 100644 --- a/files/en-us/web/css/css_anchor_positioning/using/index.md +++ b/files/en-us/web/css/css_anchor_positioning/using/index.md @@ -692,6 +692,140 @@ Hover over or tab to the anchor element — the positioned element grows as the {{ EmbedLiveSample("Sizing elements based on anchor size", "100%", "250") }} +## Other uses of `anchor-size()` + +You can also use `anchor-size()` in physical and logical inset and margin properties. The sections below explore these uses in more detail, before providing a usage example. + +### Setting element position based on anchor size + +You can use the [`anchor-size()`](/en-US/docs/Web/CSS/anchor-size) function within an [inset property](/en-US/docs/Glossary/Inset_properties) value to position elements based on their anchor element's size, for example: + +```css +left: anchor-size(width); +inset-inline-end: anchor-size(--myAnchor height, 100px); +``` + +This doesn't position an element relative to the position of its anchor like the [`anchor()`](/en-US/docs/Web/CSS/anchor) function or {{cssxref("position-area")}} property do (see [Positioning elements relative to their anchor](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#positioning_elements_relative_to_their_anchor), above); the element won't change its position when its anchor does. Instead, the element will be positioned according to the normal rules of [`absolute`](/en-US/docs/Web/CSS/position#absolute) or [`fixed`](/en-US/docs/Web/CSS/position#fixed) positioning. + +This can be useful in some situations. For example, if your anchor element can only move vertically, and always remains next to the edge of its closest positioned ancestor horizontally, you could use `left: anchor-size(width)` to cause the anchor-positioned element to always be positioned to the right of its anchor, even if the anchor width changes. + +### Setting element margin based on anchor size + +You can use the [`anchor-size()`](/en-US/docs/Web/CSS/anchor-size) function within a `margin-*` property value to set element margins based on their anchor element's size, for example: + +```css +margin-left: calc(anchor-size(width) / 4); +margin-block-start: anchor-size(--myAnchor self-block, 20px); +``` + +This can be useful in cases where you want to set an anchor-positioned element's margin to be always equal to the same percentage of the anchor element's width, even when the width changes. + +### `anchor-size()` position and margin example + +Let's look at an example where we set an anchor-positioned element's margin and position relative to the anchor element's width. + +In the HTML, we specify two {{htmlelement("div")}} elements, one `anchor` element and one `infobox` element that we'll position relative to the anchor. We give the anchor element a [`tabindex`](/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute so that it can be focused via the keyboard. We also include filler text to make the {{htmlelement("body")}} tall enough to require scrolling, but this has been hidden for the sake of brevity. + +```html hidden +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

+ Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu + cursus euismod quis viverra nibh cras pulvinar. +

+``` + +```html +
⚓︎
+ +
+

Infobox.

+
+``` + +```html hidden +

Vulputate ut pharetra sit amet aliquam.

+ +

+ Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit + scelerisque mauris pellentesque pulvinar pellentesque habitant morbi + tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac + habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit. + Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus + accumsan. +

+``` + +In the CSS, we first declare the `anchor` `
` as an anchor element by giving it an {{cssxref("anchor-name")}}. The positioned element has its {{cssxref("position")}} property set to `absolute`, and is associated with the anchor element via its {{cssxref("position-anchor")}} property. We also set absolute {{cssxref("height")}} and {{cssxref("width")}} dimensions on the anchor and infobox, and include a {{cssxref("transition")}} on the anchor so that width changes are smoothly animated when its state changes: + +```css hidden +.anchor { + font-size: 2rem; + color: white; + text-shadow: 1px 1px 1px black; + background-color: hsl(240 100% 75%); + text-align: center; + align-content: center; + outline: 1px solid black; +} + +body { + width: 80%; + margin: 0 auto; + position: relative; +} + +.infobox { + align-content: center; + color: darkblue; + background-color: azure; + outline: 1px solid #ddd; + font-size: 1rem; + text-align: center; +} +``` + +```css +.anchor { + anchor-name: --myAnchor; + width: 100px; + height: 100px; + transition: 1s all; +} + +.infobox { + position-anchor: --myAnchor; + position: absolute; + height: 100px; + width: 100px; +} +``` + +Now onto the most interesting part. Here we set the anchor's `width` to `300px` when it is hovered or focused. We then set the infobox's: + +- `top` value to `anchor(top)`. This causes the top of the infobox to always stay in line with the top of the anchor. +- `left` value to `anchor-size(width)`. This causes the left of the infobox to be positioned the specified distance away from the left edge of its nearest positioned ancestor. In this case, the specified distance is equal to the anchor element's width and the nearest positioned ancestor is the `` element, so the infobox appears to the right of the anchor. +- `margin-left` value to `calc(anchor-size(width)/4)`. This cases the infobox to always have a left margin separating it and the anchor, equal to a quarter of the anchor's width. + +```css +.anchor:hover, +.anchor:focus { + width: 300px; +} + +.infobox { + top: anchor(top); + left: anchor-size(width); + margin-left: calc(anchor-size(width) / 4); +} +``` + +The rendered result is as follows: + +{{EmbedLiveSample("Basic `anchor-size()` usage", "100%", "240")}} + +Try tabbing to the anchor or hovering over it with the mouse pointer, and note how the infobox's position and left margin grow in proportion to the anchor element's width. + ## See also - [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module diff --git a/files/en-us/web/css/inset-block-end/index.md b/files/en-us/web/css/inset-block-end/index.md index 5262624518634be..9b1cac9a538c986 100644 --- a/files/en-us/web/css/inset-block-end/index.md +++ b/files/en-us/web/css/inset-block-end/index.md @@ -20,7 +20,7 @@ This {{glossary("inset properties", "inset property")}} has no effect on non-pos inset-block-end: 3px; inset-block-end: 2.4em; inset-block-end: calc(anchor(start) + 20px); -inset-block-end: anchor(--myAnchor 50%); +inset-block-end: anchor-size(--myAnchor width, 10%); /* s of the width or height of the containing block */ inset-block-end: 10%; diff --git a/files/en-us/web/css/inset-block-start/index.md b/files/en-us/web/css/inset-block-start/index.md index 075d778f027f561..b64a133d8589839 100644 --- a/files/en-us/web/css/inset-block-start/index.md +++ b/files/en-us/web/css/inset-block-start/index.md @@ -20,7 +20,7 @@ This {{glossary("inset properties", "inset property")}} has no effect on non-pos inset-block-start: 3px; inset-block-start: 2.4em; inset-block-start: anchor(end); -inset-block-start: calc(anchor(--myAnchor 50%) + 5px); +inset-block-start: calc(anchor-size(--myAnchor height, 70px) * 2); /* s of the width or height of the containing block */ inset-block-start: 10%; diff --git a/files/en-us/web/css/inset-block/index.md b/files/en-us/web/css/inset-block/index.md index e0e4b15893dcb4b..91f6691d6f4beaf 100644 --- a/files/en-us/web/css/inset-block/index.md +++ b/files/en-us/web/css/inset-block/index.md @@ -28,7 +28,7 @@ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ inset-block: auto anchor(start); -inset-block: calc(anchor(--myAnchor 50%) + 10px) auto; +inset-block: 10em anchor-size(--myAnchor height, 10%); /* s of the width or height of the containing block */ inset-block: 10% 5%; diff --git a/files/en-us/web/css/inset-inline-end/index.md b/files/en-us/web/css/inset-inline-end/index.md index 4fa6b29b76e3e67..f86ddd509e0e010 100644 --- a/files/en-us/web/css/inset-inline-end/index.md +++ b/files/en-us/web/css/inset-inline-end/index.md @@ -20,7 +20,7 @@ This {{glossary("inset properties", "inset property")}} has no effect on non-pos inset-inline-end: 3px; inset-inline-end: 2.4em; inset-inline-end: calc(anchor(self-start) + 5px); -inset-inline-end: anchor(--myAnchor 50%); +inset-inline-end: anchor-size(height); /* s of the width or height of the containing block */ inset-inline-end: 10%; diff --git a/files/en-us/web/css/inset-inline-start/index.md b/files/en-us/web/css/inset-inline-start/index.md index 82bdad3d099b146..ad727958441d8f2 100644 --- a/files/en-us/web/css/inset-inline-start/index.md +++ b/files/en-us/web/css/inset-inline-start/index.md @@ -19,8 +19,8 @@ This {{glossary("inset properties", "inset property")}} has no effect on non-pos /* values */ inset-inline-start: 3px; inset-inline-start: 2.4em; -inset-inline-start: anchor(self-end); inset-inline-start: calc(anchor(--myAnchor 50%) + 10px); +inset-inline-start: anchor-size(width); /* s of the width or height of the containing block */ inset-inline-start: 10%; diff --git a/files/en-us/web/css/inset-inline/index.md b/files/en-us/web/css/inset-inline/index.md index e7d6bde77466ef4..ae4d7e22e6b7451 100644 --- a/files/en-us/web/css/inset-inline/index.md +++ b/files/en-us/web/css/inset-inline/index.md @@ -28,7 +28,7 @@ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ inset-inline: auto calc(anchor(self-start) + 20px); -inset-inline: anchor(--myAnchor 50%) auto; +inset-inline: 400px anchor-size(--myAnchor height, 100px); /* s of the width or height of the containing block */ inset-inline: 10% 5%; diff --git a/files/en-us/web/css/inset/index.md b/files/en-us/web/css/inset/index.md index 20067a196b56b32..7238094c9fd8da7 100644 --- a/files/en-us/web/css/inset/index.md +++ b/files/en-us/web/css/inset/index.md @@ -33,7 +33,8 @@ inset: 4px 8px; /* top/bottom left/right */ inset: 5px 15px 10px; /* top left/right bottom */ inset: 2.4em 3em 3em 3em; /* top right bottom left */ inset: calc(anchor(50%) + 10px) anchor(self-start) auto auto; -inset: auto auto anchor(center) anchor(self-end); +inset: anchor-size(block) calc(anchor(50%) + 10px) auto + calc(anchor-size(width) / 4); /* s of the width (left/right) or height (top/bottom) of the containing block */ inset: 10% 5% 5% 5%; diff --git a/files/en-us/web/css/left/index.md b/files/en-us/web/css/left/index.md index e172b6546b58b2f..51667850653f6ce 100644 --- a/files/en-us/web/css/left/index.md +++ b/files/en-us/web/css/left/index.md @@ -17,8 +17,8 @@ The **`left`** [CSS](/en-US/docs/Web/CSS) property participates in specifying th /* values */ left: 3px; left: 2.4em; -left: calc(anchor(right) + 20px); left: anchor(--myAnchor 50%); +left: calc(anchor-size(--myAnchor inline, 100px) * 2); /* s of the width of the containing block */ left: 10%; @@ -38,11 +38,11 @@ left: unset; - {{cssxref("<length>")}} - - : A negative, null, or positive {{cssxref("<length>")}} that represents: + - : A negative, null, or positive {{cssxref("<length>")}}: - - for _absolutely positioned elements_, the distance to the left edge of the containing block. - - for [_anchor-positioned elements_](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#using_inset_properties_with_anchor_function_values), the {{cssxref("anchor()")}} function resolves to a {{cssxref("<length>")}} value relative to the position of the associated _anchor element_'s left or right edge. - - for _relatively positioned elements_, the distance that the element is moved to the right of its normal position. + - for _absolutely positioned elements_, it represents the distance to the left edge of the containing block. + - for _anchor-positioned elements_, the {{cssxref("anchor()")}} function resolves to a {{cssxref("<length>")}} value relative to the position of the associated _anchor element_'s left or right edge (see [Using inset properties with `anchor()` function values](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#using_inset_properties_with_anchor_function_values)), and the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated anchor element's width or height (see [Setting element position based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_position_based_on_anchor_size)). + - for _relatively positioned elements_, it represents the distance that the element is moved to the right of its normal position. - {{cssxref("<percentage>")}} - : A {{cssxref("<percentage>")}} of the containing block's width. diff --git a/files/en-us/web/css/margin-block-end/index.md b/files/en-us/web/css/margin-block-end/index.md index 0ea1c9f8c82245e..bb14b5293f14fc4 100644 --- a/files/en-us/web/css/margin-block-end/index.md +++ b/files/en-us/web/css/margin-block-end/index.md @@ -18,6 +18,8 @@ The **`margin-block-end`** [CSS](/en-US/docs/Web/CSS) property defines the logic margin-block-end: 10px; /* An absolute length */ margin-block-end: 1em; /* relative to the text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ +margin-block-end: anchor-size(inline); +margin-block-end: calc(anchor-size(--myAnchor block, 20px) / 4); /* Keyword values */ margin-block-end: auto; diff --git a/files/en-us/web/css/margin-block-start/index.md b/files/en-us/web/css/margin-block-start/index.md index 0e47f159ee6b9fe..2b3b94f549baf3a 100644 --- a/files/en-us/web/css/margin-block-start/index.md +++ b/files/en-us/web/css/margin-block-start/index.md @@ -18,6 +18,8 @@ The **`margin-block-start`** [CSS](/en-US/docs/Web/CSS) property defines the log margin-block-start: 10px; /* An absolute length */ margin-block-start: 1em; /* relative to the text size */ margin-block-start: 5%; /* relative to the nearest block container's width */ +margin-block-start: anchor-size(width); +margin-block-start: calc(anchor-size(--myAnchor block, 20px) / 3); /* Keyword values */ margin-block-start: auto; diff --git a/files/en-us/web/css/margin-block/index.md b/files/en-us/web/css/margin-block/index.md index d8c74b7cf2472bf..1d7dcea29a586a3 100644 --- a/files/en-us/web/css/margin-block/index.md +++ b/files/en-us/web/css/margin-block/index.md @@ -26,6 +26,8 @@ margin-block: 10px 20px; /* An absolute length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ +margin-block: anchor-size(inline); +margin-block: calc(anchor-size(width) / 4) 1em; /* Keyword values */ margin-block: auto; diff --git a/files/en-us/web/css/margin-bottom/index.md b/files/en-us/web/css/margin-bottom/index.md index b2e278f090a8cdd..1372f641e8293e7 100644 --- a/files/en-us/web/css/margin-bottom/index.md +++ b/files/en-us/web/css/margin-bottom/index.md @@ -22,6 +22,8 @@ This property has no effect on _non-[replaced](/en-US/docs/Web/CSS/Replaced_elem margin-bottom: 10px; /* An absolute length */ margin-bottom: 1em; /* relative to the text size */ margin-bottom: 5%; /* relative to the nearest block container's width */ +margin-bottom: anchor-size(width); +margin-bottom: calc(anchor-size(--myAnchor self-block, 20px) / 3); /* Keyword values */ margin-bottom: auto; @@ -39,7 +41,11 @@ The `margin-bottom` property is specified as the keyword `auto`, or a `` ### Values - {{cssxref("<length>")}} + - : The size of the margin as a fixed value. + + - For _anchor-positioned elements_, the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated _anchor element_'s width or height (see [Setting element margin based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_margin_based_on_anchor_size)). + - {{cssxref("<percentage>")}} - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref("writing-mode")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). - `auto` diff --git a/files/en-us/web/css/margin-inline-end/index.md b/files/en-us/web/css/margin-inline-end/index.md index 359e76844dfcb5a..a2f197f0a51b063 100644 --- a/files/en-us/web/css/margin-inline-end/index.md +++ b/files/en-us/web/css/margin-inline-end/index.md @@ -18,6 +18,8 @@ The **`margin-inline-end`** [CSS](/en-US/docs/Web/CSS) property defines the logi margin-inline-end: 10px; /* An absolute length */ margin-inline-end: 1em; /* relative to the text size */ margin-inline-end: 5%; /* relative to the nearest block container's width */ +margin-inline-end: anchor-size(height); +margin-inline-end: calc(anchor-size(--myAnchor self-inline, 25px) / 5); /* Keyword values */ margin-inline-end: auto; diff --git a/files/en-us/web/css/margin-inline-start/index.md b/files/en-us/web/css/margin-inline-start/index.md index fcfd85c2db4ff27..7e26f78e39aa70e 100644 --- a/files/en-us/web/css/margin-inline-start/index.md +++ b/files/en-us/web/css/margin-inline-start/index.md @@ -18,6 +18,8 @@ The **`margin-inline-start`** [CSS](/en-US/docs/Web/CSS) property defines the lo margin-inline-start: 10px; /* An absolute length */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ +margin-inline-start: anchor-size(block); +margin-inline-start: calc(anchor-size(--myAnchor width, 30px) / 4); /* Keyword values */ margin-inline-start: auto; diff --git a/files/en-us/web/css/margin-inline/index.md b/files/en-us/web/css/margin-inline/index.md index ed3757dde1da7e5..ef0d2db13279a79 100644 --- a/files/en-us/web/css/margin-inline/index.md +++ b/files/en-us/web/css/margin-inline/index.md @@ -26,6 +26,8 @@ margin-inline: 10px 20px; /* An absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ +margin-inline: anchor-size(width); +margin-inline: calc(anchor-size(self-block) / 5) auto; /* Keyword values */ margin-inline: auto; diff --git a/files/en-us/web/css/margin-left/index.md b/files/en-us/web/css/margin-left/index.md index fe3ebda0d85dc2e..241f1652b1ead54 100644 --- a/files/en-us/web/css/margin-left/index.md +++ b/files/en-us/web/css/margin-left/index.md @@ -22,6 +22,8 @@ In the rare cases where width is overconstrained (i.e., when all of `width`, `ma margin-left: 10px; /* An absolute length */ margin-left: 1em; /* relative to the text size */ margin-left: 5%; /* relative to the nearest block container's width */ +margin-left: anchor-size(self-inline); +margin-left: calc(anchor-size(--myAnchor width, 20px) / 4); /* Keyword values */ margin-left: auto; @@ -39,7 +41,11 @@ The `margin-left` property is specified as the keyword `auto`, or a ``, ### Values - {{cssxref("<length>")}} + - : The size of the margin as a fixed value. + + - For _anchor-positioned elements_, the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated _anchor element_'s width or height (see [Setting element margin based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_margin_based_on_anchor_size)). + - {{cssxref("<percentage>")}} - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref("writing-mode")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). - `auto` diff --git a/files/en-us/web/css/margin-right/index.md b/files/en-us/web/css/margin-right/index.md index 3c98e3f185cfc7b..1bd348953c856f1 100644 --- a/files/en-us/web/css/margin-right/index.md +++ b/files/en-us/web/css/margin-right/index.md @@ -20,6 +20,8 @@ The vertical margins of two adjacent boxes may fuse. This is called [_margin col margin-right: 20px; /* An absolute length */ margin-right: 1em; /* relative to the text size */ margin-right: 5%; /* relative to the nearest block container's width */ +margin-right: anchor-size(self-block); +margin-right: calc(anchor-size(--myAnchor height, 20px) / 4); /* Keyword values */ margin-right: auto; @@ -37,7 +39,11 @@ The `margin-right` property is specified as the keyword `auto`, or a ``, ### Values - {{cssxref("<length>")}} + - : The size of the margin as a fixed value. + + - For _anchor-positioned elements_, the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated _anchor element_'s width or height (see [Setting element margin based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_margin_based_on_anchor_size)). + - {{cssxref("<percentage>")}} - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref("writing-mode")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). - `auto` diff --git a/files/en-us/web/css/margin-top/index.md b/files/en-us/web/css/margin-top/index.md index d54c26b7be850dd..35386961ed99282 100644 --- a/files/en-us/web/css/margin-top/index.md +++ b/files/en-us/web/css/margin-top/index.md @@ -20,6 +20,8 @@ This property has no effect on _non-[replaced](/en-US/docs/Web/CSS/Replaced_elem margin-top: 10px; /* An absolute length */ margin-top: 1em; /* relative to the text size */ margin-top: 5%; /* relative to the nearest block container's width */ +margin-top: anchor-size(height); +margin-top: calc(anchor-size(--myAnchor self-inline, 25px) / 4); /* Keyword values */ margin-top: auto; @@ -37,7 +39,11 @@ The `margin-top` property is specified as the keyword `auto`, or a ``, o ### Values - {{cssxref("<length>")}} + - : The size of the margin as a fixed value. + + - For _anchor-positioned elements_, the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated _anchor element_'s width or height (see [Setting element margin based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_margin_based_on_anchor_size)). + - {{cssxref("<percentage>")}} - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref("writing-mode")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). - `auto` diff --git a/files/en-us/web/css/margin/index.md b/files/en-us/web/css/margin/index.md index 2fa422e3d29b545..2213d57f32f81dc 100644 --- a/files/en-us/web/css/margin/index.md +++ b/files/en-us/web/css/margin/index.md @@ -23,7 +23,7 @@ This property is a shorthand for the following CSS properties: ## Syntax ```css -/* Apply to all four sides */ +/* apply to all four sides */ margin: 1em; margin: -3px; @@ -36,6 +36,14 @@ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; +/* anchor-size() values */ +margin: 5% anchor-size(width); +margin: calc(anchor-size(width) / 4) 1em 0 + anchor-size(--myAnchor self-inline, 50px); + +/* Keyword values */ +margin: auto; + /* Global values */ margin: inherit; margin: initial; @@ -54,7 +62,11 @@ The `margin` property may be specified using one, two, three, or four values. Ea ### Values - {{cssxref("length")}} + - : The size of the margin as a fixed value. + + - For _anchor-positioned elements_, the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated _anchor element_'s width or height (see [Setting element margin based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_margin_based_on_anchor_size)). + - {{cssxref("percentage")}} - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref("writing-mode")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). - `auto` diff --git a/files/en-us/web/css/right/index.md b/files/en-us/web/css/right/index.md index 9d0cb218fa65ad9..00821f2d910dbdc 100644 --- a/files/en-us/web/css/right/index.md +++ b/files/en-us/web/css/right/index.md @@ -17,8 +17,8 @@ The **`right`** [CSS](/en-US/docs/Web/CSS) property participates in specifying t /* values */ right: 3px; right: 2.4em; -right: calc(anchor(left) + 10px); right: anchor(--myAnchor 50%); +right: anchor-size(--myAnchor height, 65px); /* s of the width of the containing block */ right: 10%; @@ -38,11 +38,11 @@ right: unset; - {{cssxref("<length>")}} - - : A negative, null, or positive {{cssxref("<length>")}} that represents: + - : A negative, null, or positive {{cssxref("<length>")}}: - - for _absolutely positioned elements_, the distance to the right edge of the containing block. - - for [_anchor-positioned elements_](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#using_inset_properties_with_anchor_function_values), the {{cssxref("anchor()")}} function resolves to a {{cssxref("<length>")}} value relative to the position of the associated _anchor element_'s left or right edge. - - for _relatively positioned elements_, the distance that the element is moved to the left of its normal position. + - for _absolutely positioned elements_, it represents the distance to the right edge of the containing block. + - for _anchor-positioned elements_, the {{cssxref("anchor()")}} function resolves to a {{cssxref("<length>")}} value relative to the position of the associated _anchor element_'s left or right edge (see [Using inset properties with `anchor()` function values](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#using_inset_properties_with_anchor_function_values)), and the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated anchor element's width or height (see [Setting element position based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_position_based_on_anchor_size)). + - for _relatively positioned elements_, it represents the distance that the element is moved to the left of its normal position. - {{cssxref("<percentage>")}} - : A {{cssxref("<percentage>")}} of the containing block's width. diff --git a/files/en-us/web/css/top/index.md b/files/en-us/web/css/top/index.md index d7e1dfa6e8e687d..35679ac214dbf47 100644 --- a/files/en-us/web/css/top/index.md +++ b/files/en-us/web/css/top/index.md @@ -31,7 +31,7 @@ When both `top` and {{cssxref("bottom")}} values are specified, there are three top: 3px; top: 2.4em; top: anchor(bottom); -top: calc(anchor(--myAnchor 50%) + 10px); +top: anchor-size(--myAnchor self-block, 10%); /* s of the height of the containing block */ top: 10%; @@ -51,11 +51,11 @@ top: unset; - {{cssxref("<length>")}} - - : A negative, null, or positive {{cssxref("<length>")}} that represents: + - : A negative, null, or positive {{cssxref("<length>")}}: - - for _absolutely positioned elements_, the distance to the top edge of the containing block. - - for [_anchor-positioned elements_](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#using_inset_properties_with_anchor_function_values), the {{cssxref("anchor()")}} function resolves to a {{cssxref("<length>")}} value relative to the position of the associated _anchor element_'s top or bottom edge. - - for _relatively positioned elements_, the distance that the element is moved below its normal position. + - for _absolutely positioned elements_, it represents the distance to the top edge of the containing block. + - for _anchor-positioned elements_, the {{cssxref("anchor()")}} function resolves to a {{cssxref("<length>")}} value relative to the position of the associated _anchor element_'s top or bottom edge (see [Using inset properties with `anchor()` function values](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#using_inset_properties_with_anchor_function_values)), and the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated anchor element's width or height (see [Setting element position based on anchor size](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_element_position_based_on_anchor_size)). + - for _relatively positioned elements_, it represents the distance that the element is moved below its normal position. - {{cssxref("<percentage>")}} - : A {{cssxref("<percentage>")}} of the containing block's height. From 3aaeeb6d6289c973477d4d4cc92b1d77c91c0b50 Mon Sep 17 00:00:00 2001 From: Cong Nguyen Date: Sat, 21 Dec 2024 02:10:04 +0900 Subject: [PATCH 003/123] Fix a typo in flex-grow documentation (#37270) * Update index.md * Update files/en-us/web/css/flex-grow/index.md --------- Co-authored-by: Estelle Weyl --- files/en-us/web/css/flex-grow/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index 5e2d108d33ce8f8..33b42c95612bf51 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -45,7 +45,7 @@ The remaining space, or positive free space, is the size of the flex container m If the `flex-grow` values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors. The `flex-grow` factor values of all the sibling flex items are added together. The flex container's positive free space, if any, is then divided by that total. The main size of each flex item with a `flex-grow` value greater than `0` will grow by this quotient multiplied by its own growth factor. -For example, if four `100px` flex items are in a `700px` container and the flex items have `flex-grow` factors of `0`, `1`, `2`, and `3`, respectively, the total main size of the three items is `400px`, meaning there is `300px` of positive free space to be distributed. There are a total of 6 grow factors (`3 + 2 + 1`), therefore each grow factor is equal to `50px` (`(300px / 6 )`. Each flex item is given an amount of positive free space equal to this amount multiplied by its `flex-grow` value — so `0`, `50px`, `100px`, and `150px` respectively. The total flex item sizes are therefore `100px`, `150px`, `200px`, and `250px` respectively. +For example, if four `100px` flex items are in a `700px` container and the flex items have `flex-grow` factors of `0`, `1`, `2`, and `3`, respectively, the total main size of the four items is `400px`, meaning there is `300px` of positive free space to be distributed. There are a total of 6 grow factors (`0 + 1 + 2 + 3`). Therefore, each grow factor is equal to `50px` (`(300px / 6 )`. Each flex item is given an amount of positive free space equal to this amount multiplied by its `flex-grow` value — so `0`, `50px`, `100px`, and `150px` respectively. The total flex item sizes are, therefore, `100px`, `150px`, `200px`, and `250px`, respectively. `flex-grow` is generally used alongside the other {{cssxref("flex")}} shorthand properties, {{cssxref("flex-shrink")}} and {{cssxref("flex-basis")}}. Using the `flex` shorthand property is recommended to ensure all values are set. From 0dd1289ceeb9c2f7abd20c50069ef6603447813f Mon Sep 17 00:00:00 2001 From: Luca Etienne Schulz Date: Fri, 20 Dec 2024 18:11:55 +0100 Subject: [PATCH 004/123] Switch to `
    ` for breadcrumb (#37273) * Switch to `
      ` for breadcrumb The Breadcrumb Glossary page notes > _Note: While there's no dedicated semantic HTML element for breadcrumb navigation menus, the
        element is commonly used to represent their hierarchical structure._ I suggest following our own advice. From a semantically standpoint, it just makes to use an ordered list. * Update corresponding CSS Requested changes from #37273 to update corresponding CSS. --- .../web/css/layout_cookbook/breadcrumb_navigation/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md index c6791b54d198306..c106bf4471f5219 100644 --- a/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md +++ b/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md @@ -20,13 +20,13 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground: ```html live-sample___breadcrumb-example
      ``` @@ -39,7 +39,7 @@ body { padding: 0 0.5rem; } -.breadcrumb ul { +.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; From 4238ce5fbb56cd9953a558b8243a5623b98a2f18 Mon Sep 17 00:00:00 2001 From: Asadullah Ehsan <95845203+asadullahehsan@users.noreply.github.com> Date: Fri, 20 Dec 2024 22:20:21 +0500 Subject: [PATCH 005/123] Deleted the Node version manager link (#37298) As discussed before, in accordance with https://github.com/mdn/content/pull/37239#issuecomment-2555499694 --- .../extensions/server-side/express_nodejs/introduction/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md index 07b638248c9e67b..d72175f90711af5 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md @@ -536,7 +536,6 @@ Of course Express is deliberately a very lightweight web application framework, ## See also -- [Venkat.R - Manage Multiple Node versions](https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44) - [Modules](https://nodejs.org/api/modules.html#modules_modules) (Node API docs) - [Express](https://expressjs.com/) (home page) - [Basic routing](https://expressjs.com/en/starter/basic-routing.html) (Express docs) From e114a6686e813abfcb8f071b18987eb4c1f17ce6 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Sat, 21 Dec 2024 01:35:57 +0100 Subject: [PATCH 006/123] chore(http): Origin-Isolation -> Origin-Agent-Cluster header (#37297) --- files/en-us/web/api/document/domain/index.md | 2 +- files/en-us/web/http/headers/index.md | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/document/domain/index.md b/files/en-us/web/api/document/domain/index.md index 71cf96c59e19c65..2431b94e14a0096 100644 --- a/files/en-us/web/api/document/domain/index.md +++ b/files/en-us/web/api/document/domain/index.md @@ -136,7 +136,7 @@ modern isolation features: for the {{httpheader("Cross-Origin-Opener-Policy")}} and {{httpheader("Cross-Origin-Embedder-Policy")}} HTTP headers - If used on an origin-isolated page, i.e. one that uses the - {{httpheader("Origin-Isolation")}} HTTP header + {{httpheader("Origin-Agent-Cluster")}} {{experimental_inline}} HTTP header Finally, setting `document.domain` does not change the origin used for origin-checks by some Web APIs, preventing sub-domain access via this mechanism. diff --git a/files/en-us/web/http/headers/index.md b/files/en-us/web/http/headers/index.md index 546aa0c0ac9de44..27e0e8c9af1efc5 100644 --- a/files/en-us/web/http/headers/index.md +++ b/files/en-us/web/http/headers/index.md @@ -430,8 +430,9 @@ Network client hints allow a server to choose what information is sent based on ### Security -- {{HTTPHeader("Origin-Isolation")}} {{experimental_inline}} - - : Provides a mechanism to allow web applications to isolate their origins. +- {{HTTPHeader("Origin-Agent-Cluster")}} {{experimental_inline}} + - : Response header used to indicate that the associated {{domxref("Document")}} should be placed in an _origin-keyed [agent cluster](https://tc39.es/ecma262/#sec-agent-clusters)_. + This isolation allows user agents to allocate implementation-specific resources for agent clusters, such as processes or threads, more efficiently. ### Server-sent events @@ -454,9 +455,6 @@ See the [Topics API](/en-US/docs/Web/API/Topics_API) documentation for more info - : A client can send the [`Accept-Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#name-the-accept-signature-header) header field to indicate intention to take advantage of any available signatures and to indicate what kinds of signatures it supports. - {{HTTPHeader("Early-Data")}} {{experimental_inline}} - : Indicates that the request has been conveyed in TLS early data. -- {{HTTPHeader("Origin-Agent-Cluster")}} {{experimental_inline}} - - : Response header used to indicate that the associated {{domxref("Document")}} should be placed in an _origin-keyed [agent cluster](https://tc39.es/ecma262/#sec-agent-clusters)_. - This isolation allows user agents to allocate implementation-specific resources for agent clusters, such as processes or threads, more efficiently. - {{HTTPHeader("Set-Login")}} {{experimental_inline}} - : Response header sent by a federated identity provider (IdP) to set its login status, meaning whether any users are logged into the IdP on the current browser or not. This is stored by the browser and used by the [FedCM API](/en-US/docs/Web/API/FedCM_API). From a527310da8c12c3fec8749902c67df2fc7e24cb4 Mon Sep 17 00:00:00 2001 From: Jaime Still Date: Fri, 20 Dec 2024 19:37:42 -0500 Subject: [PATCH 007/123] Typo: pipe should be pump (#37296) Co-authored-by: Brian Smith --- files/en-us/web/api/streams_api/using_readable_streams/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/streams_api/using_readable_streams/index.md b/files/en-us/web/api/streams_api/using_readable_streams/index.md index e480e4935f7dc7a..dd3be5cbd3c8824 100644 --- a/files/en-us/web/api/streams_api/using_readable_streams/index.md +++ b/files/en-us/web/api/streams_api/using_readable_streams/index.md @@ -140,7 +140,7 @@ This is the standard pattern you'll see when using stream readers: 1. You write a function that starts off by reading the stream. 2. If there is no more stream to read, you return out of the function. 3. If there is more stream to read, you process the current chunk then run the function again. -4. You keep chaining the `pipe` function until there is no more stream to read, in which case step 2 is followed. +4. You keep chaining the `pump()` function until there is no more stream to read, in which case step 2 is followed. Removing all the code to actually perform a "pump", the code might be generalized to something like this: From 8a080078e909142e25573bd24cd5c5c3a9f05a04 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Sat, 21 Dec 2024 00:42:29 +0000 Subject: [PATCH 008/123] fix: auto-cleanup by bot (#37316) --- files/en-us/web/css/css_anchor_positioning/using/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_anchor_positioning/using/index.md b/files/en-us/web/css/css_anchor_positioning/using/index.md index 9dec787c48cd7bd..3274123c8b3e9d3 100644 --- a/files/en-us/web/css/css_anchor_positioning/using/index.md +++ b/files/en-us/web/css/css_anchor_positioning/using/index.md @@ -705,7 +705,7 @@ left: anchor-size(width); inset-inline-end: anchor-size(--myAnchor height, 100px); ``` -This doesn't position an element relative to the position of its anchor like the [`anchor()`](/en-US/docs/Web/CSS/anchor) function or {{cssxref("position-area")}} property do (see [Positioning elements relative to their anchor](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#positioning_elements_relative_to_their_anchor), above); the element won't change its position when its anchor does. Instead, the element will be positioned according to the normal rules of [`absolute`](/en-US/docs/Web/CSS/position#absolute) or [`fixed`](/en-US/docs/Web/CSS/position#fixed) positioning. +This doesn't position an element relative to the position of its anchor like the [`anchor()`](/en-US/docs/Web/CSS/anchor) function or {{cssxref("position-area")}} property do (see [Positioning elements relative to their anchor](#positioning_elements_relative_to_their_anchor), above); the element won't change its position when its anchor does. Instead, the element will be positioned according to the normal rules of [`absolute`](/en-US/docs/Web/CSS/position#absolute) or [`fixed`](/en-US/docs/Web/CSS/position#fixed) positioning. This can be useful in some situations. For example, if your anchor element can only move vertically, and always remains next to the edge of its closest positioned ancestor horizontally, you could use `left: anchor-size(width)` to cause the anchor-positioned element to always be positioned to the right of its anchor, even if the anchor width changes. From 494edeb208c312a26b7f5efb0902799d89a2bb33 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 20 Dec 2024 20:29:05 -0800 Subject: [PATCH 009/123] New pages: DOMTokenList and MediaList toString() method (#37052) * New pages: DOMTokenList and MediaList toString() method * landing page links to the new pages * Update index.md * Update index.md * Update files/en-us/web/api/domtokenlist/tostring/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/domtokenlist/tostring/index.md Co-authored-by: wbamberg * Update files/en-us/web/api/domtokenlist/tostring/index.md * Update files/en-us/web/api/medialist/index.md Co-authored-by: wbamberg * Apply suggestions from code review Co-authored-by: wbamberg * Update files/en-us/web/api/medialist/tostring/index.md Co-authored-by: wbamberg * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/medialist/tostring/index.md * Apply suggestions from code review Co-authored-by: wbamberg --------- Co-authored-by: wbamberg Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/domtokenlist/index.md | 2 + .../web/api/domtokenlist/tostring/index.md | 51 +++++++++++++++ files/en-us/web/api/medialist/index.md | 2 + .../en-us/web/api/medialist/tostring/index.md | 63 +++++++++++++++++++ 4 files changed, 118 insertions(+) create mode 100644 files/en-us/web/api/domtokenlist/tostring/index.md create mode 100644 files/en-us/web/api/medialist/tostring/index.md diff --git a/files/en-us/web/api/domtokenlist/index.md b/files/en-us/web/api/domtokenlist/index.md index 19b453339c8e445..179b5f9b7e83fcd 100644 --- a/files/en-us/web/api/domtokenlist/index.md +++ b/files/en-us/web/api/domtokenlist/index.md @@ -40,6 +40,8 @@ A `DOMTokenList` is indexed beginning with `0` as with JavaScript {{jsxref("Arra - : Executes a provided callback function once for each `DOMTokenList` element. - {{domxref("DOMTokenList.keys()")}} - : Returns an {{jsxref("Iteration_protocols", "iterator", "", 1)}}, allowing you to go through all keys of the key/value pairs contained in this object. +- {{domxref("DOMTokenList.toString()")}} + - : Returns the {{domxref("DOMTokenList.value")}}, the space-separated values of the list as a string. - {{domxref("DOMTokenList.values()")}} - : Returns an {{jsxref("Iteration_protocols", "iterator", "", 1)}}, allowing you to go through all values of the key/value pairs contained in this object. diff --git a/files/en-us/web/api/domtokenlist/tostring/index.md b/files/en-us/web/api/domtokenlist/tostring/index.md new file mode 100644 index 000000000000000..7c883918a31daaf --- /dev/null +++ b/files/en-us/web/api/domtokenlist/tostring/index.md @@ -0,0 +1,51 @@ +--- +title: "DOMTokenList: toString() method" +short-title: toString() +slug: Web/API/DOMTokenList/toString +page-type: web-api-instance-method +browser-compat: api.DOMTokenList.toString +--- + +{{APIRef("DOM")}} + +The **`toString()`** {{Glossary("stringifier")}} method of the {{domxref("DOMTokenList")}} interface returns the values of the token list serialized as a string. The return value is a space-separated list of tokens equal to the {{domxref("DOMTokenList.value")}} property. + +## Syntax + +```js-nolint +toString() +``` + +### Parameters + +None. + +### Return value + +A string. + +## Examples + +```js +const element = document.createElement("div"); +const classes = element.classList; + +element.className = "shop empty-cart"; +classes.add("logged-in", "dark-mode"); + +console.log(classes.toString()); +// "shop empty-cart logged-in dark-mode" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Element.classList")}} +- {{domxref("DOMTokenList.add()")}} diff --git a/files/en-us/web/api/medialist/index.md b/files/en-us/web/api/medialist/index.md index 142211753c03371..d1b1ab86862f2ee 100644 --- a/files/en-us/web/api/medialist/index.md +++ b/files/en-us/web/api/medialist/index.md @@ -26,6 +26,8 @@ The **`MediaList`** interface represents the media queries of a stylesheet, e.g. - : Removes a media query from the `MediaList`. - {{domxref("MediaList.item()")}} - : A getter that returns a string representing a media query as text, given the media query's index value inside the `MediaList`. This method can also be called using the bracket (`[]`) syntax. +- {{domxref("MediaList.toString()")}} + - : Returns a string representation of this media list in the same format as the object's {{domxref("MediaList.mediaText")}} property. ## Examples diff --git a/files/en-us/web/api/medialist/tostring/index.md b/files/en-us/web/api/medialist/tostring/index.md new file mode 100644 index 000000000000000..f8ade4d54d68f52 --- /dev/null +++ b/files/en-us/web/api/medialist/tostring/index.md @@ -0,0 +1,63 @@ +--- +title: "MediaList: toString() method" +short-title: toString() +slug: Web/API/MediaList/toString +page-type: web-api-instance-method +browser-compat: api.MediaList.toString +--- + +{{APIRef("CSSOM")}} + +The **`toString()`** {{Glossary("stringifier")}} method of the {{domxref("MediaList")}} interface returns a string representing the object's values. The value is a comma-separated list of media values in the same format as the {{domxref("MediaList.mediaText")}} property. + +## Syntax + +```js-nolint +toString() +``` + +### Parameters + +None. + +### Return value + +A string. + +## Examples + +```js +const firstStyleSheet = document.styleSheets[0]; // the document's first stylesheet +const mediaList = firstStyleSheet.media; // the mediaList of the stylesheet + +// set the `media` text to a media query value +mediaList.mediaText = "SCREEN AND (140PX <= WIDTH <= 380PX)"; + +// add a second media value +mediaList.appendMedium( + "SCREEN AND (MAX-HEIGHT: 400PX) AND (ORIENTATION: LANDSCAPE))", +); + +// erroneously, add the same media query again +mediaList.appendMedium( + "SCREEN AND (MAX-HEIGHT: 400PX) AND (ORIENTATION: LANDSCAPE))", +); + +console.log(mediaList.toString()); +// "screen and (140px <= width <= 380px), screen and (max-height: 400px) and (orientation: landscape)" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("MediaList.mediaText")}} +- {{domxref("MediaList.appendMedium()")}} +- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries) +- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) From 13443ea62ac2fa0f4cac134f17d0f9d2c21f2515 Mon Sep 17 00:00:00 2001 From: Andi Pieper Date: Sat, 21 Dec 2024 12:08:41 +0100 Subject: [PATCH 010/123] some edits on the contributing doc for rari (#37295) --- CONTRIBUTING.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e7253fa3db0db2b..506a5236d633524 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -200,12 +200,7 @@ This will make it easier to submit a pull request for your changes. 2. Open a browser and navigate to the equivalent pages you've changed. If you changed `files/en-us/web/javascript/index.md`, you would navigate to `http://localhost:5042/en-us/docs/web/javascript` in your browser, for example. -3. Check for errors by clicking `Show flaws` on each previewed page. - You may be able to fix flaws by running: - - ```bash - yarn content flaws - ``` +3. Check for detected flaws at the top of the previewed page. Some flaws may be automatically fixable. 4. Commit your changes to the branch (our example is using the `fix-typo` branch) and push the changes to your fork's remote: @@ -254,7 +249,8 @@ yarn content move [locale] > See the [Redirecting a document](#redirecting-a-document) section for more information. To use `yarn content move`, provide the slug of the document you'd like to move (e.g., `Learn/Accessibility`), and the slug of its new location (e.g., `Learn/A11y`). -The locale of the existing document can be provided as an optional third argument (this defaults to `en-US`). +The locale of the existing document can be provided as an optional third argument (this defaults to `en-US`). For other locales, +`CONTENT_TRANSLATED_ROOT` has to be set correctly in your environment. If the document you'd like to move contains child documents (i.e. it represents a document tree), the `yarn content move` command will move the entire tree. Let's say you want to move the entire `/en-US/Learn/Accessibility` tree to `/en-US/Learn/A11y`, you can do so as follows: From 3ee9f29834b30a6865d75db0feff7c61af14e8dd Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 21 Dec 2024 22:05:46 +0800 Subject: [PATCH 011/123] style: use code block for descriptors for `@font-palette-values` (#37293) --- files/en-us/web/css/@font-palette-values/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/@font-palette-values/index.md b/files/en-us/web/css/@font-palette-values/index.md index c880c6a1f4eef68..6b2f143d75c88c4 100644 --- a/files/en-us/web/css/@font-palette-values/index.md +++ b/files/en-us/web/css/@font-palette-values/index.md @@ -24,11 +24,11 @@ The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined i ### Descriptors -- [font-family](/en-US/docs/Web/CSS/@font-palette-values/font-family) - - : Specifies the name of the font family that this palette can be applied to. -- [base-palette](/en-US/docs/Web/CSS/@font-palette-values/base-palette) +- {{cssxref("@font-palette-values/base-palette", "base-palette")}} - : Specifies the name or index of the base-palette, created by the font-maker, to use. -- [override-colors](/en-US/docs/Web/CSS/@font-palette-values/override-colors) +- {{cssxref("@font-palette-values/font-family", "font-family")}} + - : Specifies the name of the font family that this palette can be applied to. +- {{cssxref("@font-palette-values/override-colors", "override-colors")}} - : Specifies the colors in the base palette to override. ## Formal syntax From a7c51be4aa79186586c9f8133f551bbdc4a9ddec Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Sat, 21 Dec 2024 14:21:27 +0000 Subject: [PATCH 012/123] Update CSP practical guide for consistency (#37227) * Update CSP practical guide for consistency * Fix linter weirdness * Fixes for wbamberg review comments * More fixes for wbamberg review comments * Run Prettier to fix linting error * Update files/en-us/web/security/practical_implementation_guides/csp/index.md Co-authored-by: wbamberg * More fixes for wbamberg review comments --------- Co-authored-by: wbamberg --- .../default-src/index.md | 7 +- .../csp/index.md | 140 +++++------------- .../practical_implementation_guides/index.md | 40 ++--- 3 files changed, 65 insertions(+), 122 deletions(-) diff --git a/files/en-us/web/http/headers/content-security-policy/default-src/index.md b/files/en-us/web/http/headers/content-security-policy/default-src/index.md index f8b287a23276838..50ce0c280963cee 100644 --- a/files/en-us/web/http/headers/content-security-policy/default-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/default-src/index.md @@ -81,7 +81,10 @@ Content-Security-Policy: connect-src 'self'; ### Firefox `default-src: none` SVG sprite blocking issue -CSP guidelines often recommend starting with `default-src 'none'` to lock down all resource loading and then adding further directives to open up the policy, allowing you to load just the resources you need. For example, to allow same-origin loading of images only: +> [!NOTE] +> This issue was fixed in Firefox 132; see [bug 1773976](https://bugzil.la/1773976). + +When creating a CSP, you can start with `default-src 'none'` to lock down all resource loading and then add further directives to open up the policy, allowing you to load just the resources you need. For example, to allow same-origin loading of images only: ```http Content-Security-Policy: default-src 'none'; img-src 'self' @@ -95,7 +98,7 @@ However, there is a problem here. If you are embedding SVG sprites defined in ex ``` -your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox (see [bug 1773976](https://bugzil.la/1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information). +your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox. Alternatively, if the `default-src 'none'` policy is a hard requirement, you can include the SVG sprites inline in the HTML page: diff --git a/files/en-us/web/security/practical_implementation_guides/csp/index.md b/files/en-us/web/security/practical_implementation_guides/csp/index.md index e35a58183a63f9c..da65d54bf94157f 100644 --- a/files/en-us/web/security/practical_implementation_guides/csp/index.md +++ b/files/en-us/web/security/practical_implementation_guides/csp/index.md @@ -6,134 +6,72 @@ page-type: guide {{QuickLinksWithSubpages("/en-US/docs/Web/Security")}} -The [`Content-Security-Policy`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) HTTP header provides fine-grained control over the locations from which resources on a site can be loaded. +The [`Content-Security-Policy`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) HTTP header provides fine-grained control over the code that can be loaded on a site, and what it is allowed to do. ## Problem -The main problem this article focuses on is Cross-site scripting ({{Glossary("Cross-site_scripting", "XSS")}}) attacks. These are generally due to a lack of control and awareness of the sources from which site resources are loaded. This problem gets more difficult to manage as sites become larger and more complex and increasingly rely on third-party resources such as JavaScript libraries. +The main problem this article focuses on is cross-site scripting ({{Glossary("Cross-site_scripting", "XSS")}}) attacks. These are generally due to a lack of control and awareness of the sources from which site resources are loaded. This problem gets more difficult to manage as sites become larger and more complex and increasingly rely on third-party resources such as JavaScript libraries. + +> [!NOTE] +> CSP is one part of a complete strategy for protecting against XSS attacks. There are other factors involved, such as [output encoding](/en-US/docs/Web/Security/Attacks/XSS#output_encoding) and [sanitization](/en-US/docs/Web/Security/Attacks/XSS#sanitization), which are also important. CSP can also help to fix other problems, which are covered in other articles: - [Preventing clickjacking](/en-US/docs/Web/Security/Practical_implementation_guides/Clickjacking) by stopping your site being embedded into {{htmlelement("iframe")}} elements. This is done using the CSP [`frame-ancestors`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive. -- Preventing [manipulator-in-the-middle](/en-US/docs/Glossary/MitM) (MiTM) attacks by upgrading any HTTP connections to HTTPS. This is helped by the CSP [`upgrade-insecure-requests`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive. See [HSTS implementation](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_strict_transport_security_implementation) for more details. +- Preventing [manipulator-in-the-middle](/en-US/docs/Glossary/MitM) (MiTM) attacks by upgrading any HTTP connections to HTTPS. This is helped by the CSP [`upgrade-insecure-requests`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive. See [Upgrading insecure requests](/en-US/docs/Web/HTTP/CSP#upgrading_insecure_requests). ## Solution -Implementing a robust CSP is the best way to prevent XSS vulnerabilities. - -The primary benefit of CSP comes from disabling the use of unsafe inline JavaScript. Inline JavaScript, whether reflected or stored, enables improperly-escaped user inputs to generate code that is interpreted by the web browser as JavaScript. By using CSP to disable inline JavaScript, you can eliminate almost all XSS attacks against your site. - -Disabling inline JavaScript means that _all_ JavaScript must be loaded from external files via {{htmlelement("script")}} elements with `src` attributes. Inline [event handler attributes](/en-US/docs/Web/HTML/Attributes#event_handler_attributes), such as `onclick`, and JavaScript inserted directly inside ` -``` +If you are unable to get a strict CSP to work, an allowlist-based CSP is much better than none, and a CSP like `default-src https:` still provides some protection, disabling unsafe inline/`eval()` and only allowing loading of resources (images, fonts, scripts, etc.) over HTTPS. -```http -Content-Security-Policy: script-src 'strict-dynamic' 'nonce-2726c7f26c' -``` +> [!WARNING] +> If at all possible, avoid including unsafe sources inside your CSP. Examples include: +> +> - `unsafe-inline`. +> - `data:` URIs inside `script-src`, `object-src`, or `default-src`. +> - overly broad sources or form submission targets. +> +> Similarly, the use of `script-src 'self'` can be unsafe for sites with JSONP endpoints. These sites should use a `script-src` that includes the path to their JavaScript source folder(s). -Don't implement the policy yet; only report the violations that would have occurred: +If you are unable to use the `Content-Security-Policy` header, pages can instead include a [``](/en-US/docs/Web/HTML/Element/meta#http-equiv) element. This should be the first {{htmlelement("meta")}} element that appears inside the document {{htmlelement("head")}}. -```http-nolint -Reporting-Endpoints: csp-endpoint="https://example.com/csp-reports" +### Report-only CSPs -Content-Security-Policy-Report-Only: default-src https:; - report-uri /csp-violation-report-endpoint/; - report-to csp-endpoint; -``` +Before implementing any actual CSP with the `Content-Security-Policy` header, you are advised to first test it out using the [`Content-Security-Policy-Report-Only`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only) HTTP header. This allows you to see if any violations would have occurred with that policy. -Disable resource loading and embedding. APIs should use a policy like this: +Sites should use the [`report-to`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-to) and [`report-uri`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri) [reporting directives](/en-US/docs/Glossary/Reporting_directive). These cause the browser to [`POST`](/en-US/docs/Web/HTTP/Methods/POST) JSON reports about CSP violations to endpoints (specified in the {{httpheader("Reporting-Endpoints")}} header in the case of `report-to`). This allows CSP violations to be caught and repaired quickly. -```http -Content-Security-Policy: default-src 'none'; frame-ancestors 'none' -``` +> [!NOTE] +> The `report-to` directive is preferred over the deprecated `report-uri` directive. However, both are still needed because `report-to` does not yet have full cross-browser support. ## See also - [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) +- [Cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) - [CSP evaluator](https://csp-evaluator.withgoogle.com/) diff --git a/files/en-us/web/security/practical_implementation_guides/index.md b/files/en-us/web/security/practical_implementation_guides/index.md index 7d9f33e11cbff7d..bdcbe084aa38d8b 100644 --- a/files/en-us/web/security/practical_implementation_guides/index.md +++ b/files/en-us/web/security/practical_implementation_guides/index.md @@ -8,30 +8,32 @@ page-type: guide Users frequently input sensitive data on websites, such as names, addresses, passwords, and banking details. As a web developer, it's crucial to protect this information from bad actors who use a wide range of exploits to steal such information and use it for personal gain. The focus of [web security](/en-US/docs/Web/Security) is to help you protect your website against these exploits and secure your users' sensitive data. -This page lists guides that detail the best practices for implementing security features on websites. While these guides do not cover all possible security scenarios and cannot guarantee complete security of your website, following the information and best practices in these guides will make your sites significantly more secure. +This page lists guides that summarize some best practices for implementing security features on websites. While these guides do not cover all possible security scenarios and cannot guarantee complete security of your website, following the information and best practices in these guides will make your sites significantly more secure. -## Content security fundamentals +## HTTP security fundamentals -Most of these guides are directly related to the [HTTP Observatory](/en-US/observatory) tool. Observatory performs security audits on a website and provides a grade and score along with recommendations for fixing the security issues it finds. These guides explain how to resolve issues surfaced by the HTTP Observatory tests: the tool links to the relevant guide for each issue, helping guide you towards an effective resolution. Interestingly, Mozilla's internal developer teams use this guidance when implementing websites to ensure that security best practices are applied. +The guides in this section summarize best practices for implementing HTTP headers correctly to mitigate security issues, and are directly related to the [HTTP Observatory](/en-US/observatory) tool. + +Observatory performs security audits on a website and provides a grade and score along with recommendations for fixing the security issues it finds. These guides explain how to resolve issues surfaced by the HTTP Observatory tests: the tool links to the relevant guide for each issue, helping guide you towards an effective resolution. Interestingly, Mozilla's internal developer teams use this guidance when implementing websites to ensure that security best practices are applied. The guides in the table below are listed in the order that we recommend implementing the security features they describe. This order is based on a combination of each feature's security impact and the ease of its implementation from both operational and developmental perspectives. The table provides information about each feature's impact, difficulty of implementation, whether or not it is required, and a brief description. -| Guide | Impact | Difficulty | Required | Description | -| -------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [TLS configuration](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#tls_configuration) | Medium | Medium | Yes | Use the most secure [Transport Layer Security](/en-US/docs/Glossary/TLS) (TLS) configuration available for your user base. | -| TLS: [Resource loading](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#resource_loading) | Maximum | Low | Yes | Load both passive and active resources via HTTPS. | -| TLS: [HTTP redirection](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_redirection) | Maximum | Low | Yes | Websites must redirect to HTTPS; API endpoints should disable HTTP entirely. | -| TLS: [HSTS implementation](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_strict_transport_security_implementation) | High | Low | Yes | Notify user agents to connect to sites only over HTTPS, even if the original scheme chosen was HTTP, by using HTTP Strict transport security (HSTS). | -| [Clickjacking prevention](/en-US/docs/Web/Security/Practical_implementation_guides/Clickjacking) | High | Low | Yes | Control how your site may be framed within an {{htmlelement("iframe")}} to prevent [clickjacking](/en-US/docs/Web/Security/Attacks/Clickjacking). | -| [CSRF prevention](/en-US/docs/Web/Security/Practical_implementation_guides/CSRF_prevention) | High | Unknown | Varies | Protect against [Cross-site request forgery](/en-US/docs/Glossary/CSRF) (CSRF) using `SameSite` cookies and anti-CSRF tokens. | -| [Secure cookie configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Cookies) | High | Medium | Yes | Set all cookies as restrictively as possible. | -| [CORP implementation](/en-US/docs/Web/Security/Practical_implementation_guides/CORP) | High | Medium | Yes | Protect against speculative side-channel attacks by using Cross-Origin Resource Policy (CORP). | -| [MIME type verification](/en-US/docs/Web/Security/Practical_implementation_guides/MIME_types) | Low | Low | No | Verify that all your websites are setting the proper [MIME types](/en-US/docs/Glossary/MIME_type) for all resources. | -| [CSP implementation](/en-US/docs/Web/Security/Practical_implementation_guides/CSP) | High | High | Yes | Provide fine-grained control over where site resources can be loaded from with [Content Security Policy](/en-US/docs/Glossary/CSP) (CSP). | -| [CORS configuration](/en-US/docs/Web/Security/Practical_implementation_guides/CORS) | High | Low | Yes | Define the non-same origins that are allowed to access the content of pages and have resources loaded from them by using [Cross-Origin Resource Sharing](/en-US/docs/Glossary/CORS) (CORS). | -| [Referrer policy configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Referrer_policy) | Low | Low | Yes | Improve privacy for users and prevent leaking of internal URLs via the {{httpheader("Referer")}} header. | -| [robots.txt configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Robots_txt) | Low | Low | No | Tell robots (such as search engine indexers) how to behave by instructing them not to crawl certain paths on the website. | -| [SRI implementation](/en-US/docs/Web/Security/Practical_implementation_guides/SRI) | Low | Low | No | Verify that fetched resources (for example, from a CDN) are delivered without unexpected manipulation by using [Subresource Integrity](/en-US/docs/Glossary/SRI) (SRI). | +| Guide | Impact | Difficulty | Required | Description | +| -------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [TLS configuration](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#tls_configuration) | Medium | Medium | Yes | Use the most secure [Transport Layer Security](/en-US/docs/Glossary/TLS) (TLS) configuration available for your user base. | +| TLS: [Resource loading](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#resource_loading) | Maximum | Low | Yes | Load both passive and active resources via HTTPS. | +| TLS: [HTTP redirection](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_redirection) | Maximum | Low | Yes | Websites must redirect to HTTPS; API endpoints should disable HTTP entirely. | +| TLS: [HSTS implementation](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_strict_transport_security_implementation) | High | Low | Yes | Notify user agents to connect to sites only over HTTPS, even if the original scheme chosen was HTTP, by using HTTP Strict transport security (HSTS). | +| [Clickjacking prevention](/en-US/docs/Web/Security/Practical_implementation_guides/Clickjacking) | High | Low | Yes | Control how your site may be framed within an {{htmlelement("iframe")}} to prevent [clickjacking](/en-US/docs/Web/Security/Attacks/Clickjacking). | +| [CSRF prevention](/en-US/docs/Web/Security/Practical_implementation_guides/CSRF_prevention) | High | Unknown | Varies | Protect against [Cross-site request forgery](/en-US/docs/Glossary/CSRF) (CSRF) using `SameSite` cookies and anti-CSRF tokens. | +| [Secure cookie configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Cookies) | High | Medium | Yes | Set all cookies as restrictively as possible. | +| [CORP implementation](/en-US/docs/Web/Security/Practical_implementation_guides/CORP) | High | Medium | Yes | Protect against speculative side-channel attacks by using Cross-Origin Resource Policy (CORP). | +| [MIME type verification](/en-US/docs/Web/Security/Practical_implementation_guides/MIME_types) | Low | Low | No | Verify that all your websites are setting the proper [MIME types](/en-US/docs/Glossary/MIME_type) for all resources. | +| [CSP implementation](/en-US/docs/Web/Security/Practical_implementation_guides/CSP) | High | High | Yes | Provide fine-grained control over the code that can be loaded on a site and what it is allowed to do with a [Content Security Policy](/en-US/docs/Glossary/CSP) (CSP), thereby mitigating Cross-site scripting ({{Glossary("Cross-site_scripting", "XSS")}}) vulnerabilities. | +| [CORS configuration](/en-US/docs/Web/Security/Practical_implementation_guides/CORS) | High | Low | Yes | Define the non-same origins that are allowed to access the content of pages and have resources loaded from them by using [Cross-Origin Resource Sharing](/en-US/docs/Glossary/CORS) (CORS). | +| [Referrer policy configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Referrer_policy) | Low | Low | Yes | Improve privacy for users and prevent leaking of internal URLs via the {{httpheader("Referer")}} header. | +| [robots.txt configuration](/en-US/docs/Web/Security/Practical_implementation_guides/Robots_txt) | Low | Low | No | Tell robots (such as search engine indexers) how to behave by instructing them not to crawl certain paths on the website. | +| [SRI implementation](/en-US/docs/Web/Security/Practical_implementation_guides/SRI) | Low | Low | No | Verify that fetched resources (for example, from a CDN) are delivered without unexpected manipulation by using [Subresource Integrity](/en-US/docs/Glossary/SRI) (SRI). | ## User information security From 9b80c652eda0b516f3ed7f9be3b90f59aa9982e1 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Sat, 21 Dec 2024 15:29:16 +0000 Subject: [PATCH 013/123] Two small typo fixes on Learn web development (#37332) --- .../getting_started/environment_setup/index.md | 2 +- files/en-us/learn_web_development/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/index.md index 120101d774845f3..30b20b54c6c5674 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/index.md @@ -8,7 +8,7 @@ page-type: landing-page {{NextMenu("Learn_web_development/Getting_started/Environment_setup/Installing_software", "Learn_web_development/Getting_started")}} -In the _Environment_setup_ module, we show you what tools you need to do simple web development and how to install them properly and help you understand important aspects of your environment such as file systems and the command line. +In the _Environment setup_ module, we show you what tools you need to do simple web development and how to install them properly and help you understand important aspects of your environment such as file systems and the command line. ## Prerequisites diff --git a/files/en-us/learn_web_development/index.md b/files/en-us/learn_web_development/index.md index c98dcfd7f76b8ee..3b4884719f7cfa4 100644 --- a/files/en-us/learn_web_development/index.md +++ b/files/en-us/learn_web_development/index.md @@ -24,7 +24,7 @@ Welcome to MDN **Learning Web Development** (also known as **Learn**). This reso ## Don't know where to get started? - Never coded before? - - : Our [Getting started modules](/en-US/docs/Learn_web_development/Getting_started), provide setup tutorials and essential concepts and background information for complete beginners. You should start here if you are a complete beginner (i.e. you've not installed a code editor or written any code yet). + - : Our [Getting started modules](/en-US/docs/Learn_web_development/Getting_started) provide setup tutorials and essential concepts and background information for complete beginners. You should start here if you are a complete beginner (i.e. you've not installed a code editor or written any code yet). - Want to master the essentials? - : Our [Core modules](/en-US/docs/Learn_web_development/Core) provide a structured set of tutorials teaching the essential skills and practices for being a successful front-end developer. - Beyond the basics? From 948f86c2251aa5234f075211fcaeb072e09cc75d Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 22 Dec 2024 06:48:15 +0800 Subject: [PATCH 014/123] WebExt: fix a typo (#37327) --- .../add-ons/webextensions/api/sidebaraction/seticon/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md b/files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md index 2fa192a733af81f..02a6adb07378efd 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md @@ -43,7 +43,7 @@ let settingIcon = browser.sidebarAction.setIcon( - `imageData` {{optional_inline}} - - : `{{WebExtAPIRef('sidebarAction.ImageDataType')}}` or `object`. This is either a single `ImageData` object or a dictionary object. + - : {{WebExtAPIRef('sidebarAction.ImageDataType')}} or `object`. This is either a single `ImageData` object or a dictionary object. Use a dictionary object to specify multiple `ImageData` objects in different sizes, so the icon does not have to be scaled for a device with a different pixel density. If `imageData` is a dictionary, the value of each property is an `ImageData` object, and its name is its size, like this: From 269f85437e265cdb7bbb2bdbc43c20dea694813c Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Sun, 22 Dec 2024 14:12:48 +0530 Subject: [PATCH 015/123] Synchronize with BCD v5.6.26 (#37321) Co-authored-by: OnkarRuikar --- files/en-us/web/api/document/index.md | 2 +- files/en-us/web/api/document/write/index.md | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/document/index.md b/files/en-us/web/api/document/index.md index f5a7f227e7e2993..062548fa760558b 100644 --- a/files/en-us/web/api/document/index.md +++ b/files/en-us/web/api/document/index.md @@ -300,7 +300,7 @@ The `Document` interface for HTML documents inherit from the {{DOMxRef("HTMLDocu - : Returns true if the formatting command is supported on the current range. - {{DOMxRef("Document.queryCommandValue()")}} {{Deprecated_Inline}} - : Returns the current value of the current range for a formatting command. -- {{DOMxRef("Document.write()")}} +- {{DOMxRef("Document.write()")}} {{deprecated_inline}} - : Writes text in a document. - {{DOMxRef("Document.writeln()")}} - : Writes a line of text in a document. diff --git a/files/en-us/web/api/document/write/index.md b/files/en-us/web/api/document/write/index.md index 3a7f556fdc0c0ff..ad7437453693066 100644 --- a/files/en-us/web/api/document/write/index.md +++ b/files/en-us/web/api/document/write/index.md @@ -3,10 +3,12 @@ title: "Document: write() method" short-title: write() slug: Web/API/Document/write page-type: web-api-instance-method +status: + - deprecated browser-compat: api.Document.write --- -{{ApiRef("DOM")}} +{{ApiRef("DOM")}}{{deprecated_header}} > [!WARNING] > Use of the `document.write()` method is strongly discouraged. From bb0286344d812030e05e43214159f0740828190b Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 22 Dec 2024 23:08:23 +0800 Subject: [PATCH 016/123] WebExt: fix broken url (#37328) Update index.md --- .../api/notifications/notificationoptions/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/api/notifications/notificationoptions/index.md b/files/en-us/mozilla/add-ons/webextensions/api/notifications/notificationoptions/index.md index 45f7bb44425d1e4..82640d0136024fa 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/notifications/notificationoptions/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/notifications/notificationoptions/index.md @@ -43,7 +43,7 @@ The first three properties - `type`, `title`, `message` - are mandatory in {{Web - `imageUrl` - - : `string`. A URL pointing to an image to use in the notification. The URL can be: a data URL, a blob URL, or the [relative URL](/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#relative_urls) of a file within the extension. When using an SVG image, ensure that the image includes height and width attributes, for example, ` Date: Sun, 22 Dec 2024 22:49:44 +0000 Subject: [PATCH 017/123] Prev next (#37330) * chore: Update prev/next since Learn move * chore: Update macro since Learn move --------- Co-authored-by: Brian Thomas Smith --- .../design_and_accessibility/common_web_layouts/index.md | 2 +- .../design_for_all_types_of_users/index.md | 2 +- .../html_features_for_accessibility/index.md | 2 +- .../design_and_accessibility/thinking_before_coding/index.md | 2 +- .../design_and_accessibility/what_is_accessibility/index.md | 2 +- .../howto/tools_and_setup/available_text_editors/index.md | 2 +- .../checking_that_your_web_site_is_working_properly/index.md | 2 +- .../index.md | 2 +- .../howto/tools_and_setup/how_much_does_it_cost/index.md | 2 +- .../tools_and_setup/set_up_a_local_testing_server/index.md | 2 +- .../tools_and_setup/upload_files_to_a_web_server/index.md | 2 +- .../howto/tools_and_setup/using_github_pages/index.md | 2 +- .../tools_and_setup/what_are_browser_developer_tools/index.md | 2 +- .../howto/tools_and_setup/what_software_do_i_need/index.md | 2 +- .../howto/web_mechanics/how_does_the_internet_work/index.md | 2 +- .../howto/web_mechanics/what_are_hyperlinks/index.md | 2 +- .../howto/web_mechanics/what_is_a_domain_name/index.md | 2 +- .../howto/web_mechanics/what_is_a_url/index.md | 2 +- .../howto/web_mechanics/what_is_a_web_server/index.md | 2 +- .../web/api/webgl_api/by_example/basic_scissoring/index.md | 4 ++-- .../en-us/web/api/webgl_api/by_example/boilerplate_1/index.md | 4 ++-- .../api/webgl_api/by_example/canvas_size_and_webgl/index.md | 4 ++-- .../api/webgl_api/by_example/clearing_by_clicking/index.md | 4 ++-- .../api/webgl_api/by_example/clearing_with_colors/index.md | 4 ++-- .../en-us/web/api/webgl_api/by_example/color_masking/index.md | 4 ++-- .../en-us/web/api/webgl_api/by_example/detect_webgl/index.md | 4 ++-- files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md | 4 ++-- .../api/webgl_api/by_example/hello_vertex_attributes/index.md | 4 ++-- files/en-us/web/api/webgl_api/by_example/index.md | 4 ++-- .../web/api/webgl_api/by_example/raining_rectangles/index.md | 4 ++-- .../web/api/webgl_api/by_example/scissor_animation/index.md | 4 ++-- .../api/webgl_api/by_example/simple_color_animation/index.md | 4 ++-- .../web/api/webgl_api/by_example/textures_from_code/index.md | 4 ++-- .../web/api/webgl_api/by_example/video_textures/index.md | 4 ++-- 34 files changed, 49 insertions(+), 49 deletions(-) diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/common_web_layouts/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/common_web_layouts/index.md index 59f8e93b3154982..4713df53059cb35 100644 --- a/files/en-us/learn_web_development/howto/design_and_accessibility/common_web_layouts/index.md +++ b/files/en-us/learn_web_development/howto/design_and_accessibility/common_web_layouts/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Design_and_accessibility/Common_web_layouts page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} When designing pages for your website, it's good to have an idea of the most common layouts. diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/design_for_all_types_of_users/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/design_for_all_types_of_users/index.md index 16fe8c816232177..6c9144167128e51 100644 --- a/files/en-us/learn_web_development/howto/design_and_accessibility/design_for_all_types_of_users/index.md +++ b/files/en-us/learn_web_development/howto/design_and_accessibility/design_for_all_types_of_users/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Design_and_accessibility/Design_for_all_types_ page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} This article provides basic tips to help you design websites for any kind of user. diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md index 8d7b81fccc75fe2..9a2f2288c4d5211 100644 --- a/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md +++ b/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Design_and_accessibility/HTML_features_for_acc page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} The following content describes specific features of HTML that should be used to make a web page more accessible to people with different disabilities. diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/thinking_before_coding/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/thinking_before_coding/index.md index cdc64e9989488de..49a501dc93f34b7 100644 --- a/files/en-us/learn_web_development/howto/design_and_accessibility/thinking_before_coding/index.md +++ b/files/en-us/learn_web_development/howto/design_and_accessibility/thinking_before_coding/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Design_and_accessibility/Thinking_before_codin page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} This article covers the all-important first step of every project: define what you want to accomplish with it. diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/what_is_accessibility/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/what_is_accessibility/index.md index 63ffae439a0547a..0f246166cf6ca72 100644 --- a/files/en-us/learn_web_development/howto/design_and_accessibility/what_is_accessibility/index.md +++ b/files/en-us/learn_web_development/howto/design_and_accessibility/what_is_accessibility/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Design_and_accessibility/What_is_accessibility page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} This article introduces the basic concepts behind web accessibility. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md index 9f4d9636e76a691..66b1b2dd58c72ff 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/Available_text_editors page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} In this article we highlight some things to think about when installing a text editor for web development. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md index f1e689f0691d7e3..6b004f5bdff8f2f 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/Checking_that_your_web_site_is page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} In this article, we go over various troubleshooting steps for a website and some basic actions to take in order to solve these issues. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md index a0434ae784cb454..b49847c4e064401 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_o page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} [Google App Engine](https://cloud.google.com/appengine/) is a powerful platform that lets you build and run applications on Google's infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. Here's a step-by-step guide to hosting your website on Google App Engine. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md index 2746ddf3aea956d..0169bd3447dc49b 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} Getting involved on the Web isn't as cheap as it looks. In this article we discuss how much you may have to spend, and why. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md index 3450c126ef181d7..74451dfee5520f0 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} This article explains how to set up a simple local testing server on your machine, and the basics of how to use it. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md index 010cb39641b4927..3bee6822ba5d04f 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} This article shows you how to publish your site online using file transfer tools. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/using_github_pages/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/using_github_pages/index.md index 86c8f2d14abf02f..8a8747abf32166c 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/using_github_pages/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/using_github_pages/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/Using_GitHub_pages page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} [GitHub](https://github.com/) is a "social coding" site. It allows you to upload code repositories for storage in the [Git](https://git-scm.com/) **version control system.** You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. You can do that with other people's code too! This article provides a basic guide to publishing content using GitHub's gh-pages feature. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/what_are_browser_developer_tools/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/what_are_browser_developer_tools/index.md index 94fb523cf91c129..cb2bdb690a0ab12 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/what_are_browser_developer_tools/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_too page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools. diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md index d3bc134b0feb329..02abe208b77145c 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Tools_and_setup/What_software_do_I_need page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} In this article, we lay out which software components you need when you're editing, uploading, or viewing a website. diff --git a/files/en-us/learn_web_development/howto/web_mechanics/how_does_the_internet_work/index.md b/files/en-us/learn_web_development/howto/web_mechanics/how_does_the_internet_work/index.md index 9862d4e6e9dc2db..74c8fc6f5e92483 100644 --- a/files/en-us/learn_web_development/howto/web_mechanics/how_does_the_internet_work/index.md +++ b/files/en-us/learn_web_development/howto/web_mechanics/how_does_the_internet_work/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} This article discusses what the Internet is and how it works. diff --git a/files/en-us/learn_web_development/howto/web_mechanics/what_are_hyperlinks/index.md b/files/en-us/learn_web_development/howto/web_mechanics/what_are_hyperlinks/index.md index 61be68454e3a8b7..5e308311c872301 100644 --- a/files/en-us/learn_web_development/howto/web_mechanics/what_are_hyperlinks/index.md +++ b/files/en-us/learn_web_development/howto/web_mechanics/what_are_hyperlinks/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Web_mechanics/What_are_hyperlinks page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} In this article, we'll go over what hyperlinks are and why they matter. diff --git a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_domain_name/index.md b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_domain_name/index.md index c274542a6636296..a5c95a0f4fdfc4a 100644 --- a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_domain_name/index.md +++ b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_domain_name/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} diff --git a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_url/index.md b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_url/index.md index c859976ecb4d790..359deb4f8453f85 100644 --- a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_url/index.md +++ b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_url/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Web_mechanics/What_is_a_URL page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}} This article discusses Uniform Resource Locators (URLs), explaining what they are and how they're structured. diff --git a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md index db1561b892f0f0b..7238cc055e325b7 100644 --- a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md +++ b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md @@ -4,7 +4,7 @@ slug: Learn_web_development/Howto/Web_mechanics/What_is_a_web_server page-type: learn-faq --- -{{QuicklinksWithSubPages("Learn/Common_questions")}} +{{QuicklinksWithSubPages("Learn_web_development/Howto")}} In this article, we explain what web servers are, how web servers work, and why they are important. diff --git a/files/en-us/web/api/webgl_api/by_example/basic_scissoring/index.md b/files/en-us/web/api/webgl_api/by_example/basic_scissoring/index.md index 25b41e1050f8799..551fc5d6837090b 100644 --- a/files/en-us/web/api/webgl_api/by_example/basic_scissoring/index.md +++ b/files/en-us/web/api/webgl_api/by_example/basic_scissoring/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Basic_scissoring page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Color_masking","Learn/WebGL/By_example/Canvas_size_and_WebGL")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Color_masking","Web/API/WebGL_API/By_example/Canvas_size_and_WebGL")}} In this example, we see how to draw rectangles and squares using WebGL scissoring operations. Scissoring establishes a clipping region outside which drawing will not occur. @@ -83,4 +83,4 @@ window.addEventListener( The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/basic-scissoring). -{{PreviousNext("Learn/WebGL/By_example/Color_masking","Learn/WebGL/By_example/Canvas_size_and_WebGL")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Color_masking","Web/API/WebGL_API/By_example/Canvas_size_and_WebGL")}} diff --git a/files/en-us/web/api/webgl_api/by_example/boilerplate_1/index.md b/files/en-us/web/api/webgl_api/by_example/boilerplate_1/index.md index d2c7d2a5a03e22e..e5589015597695c 100644 --- a/files/en-us/web/api/webgl_api/by_example/boilerplate_1/index.md +++ b/files/en-us/web/api/webgl_api/by_example/boilerplate_1/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Boilerplate_1 page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Canvas_size_and_WebGL","Learn/WebGL/By_example/Scissor_animation")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Canvas_size_and_WebGL","Web/API/WebGL_API/By_example/Scissor_animation")}} This example describes repeated pieces of code that will be hidden from now on, as well as defining a JavaScript utility function to make WebGL initialization easier. @@ -73,4 +73,4 @@ function getRenderingContext() { The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1). -{{PreviousNext("Learn/WebGL/By_example/Canvas_size_and_WebGL","Learn/WebGL/By_example/Scissor_animation")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Canvas_size_and_WebGL","Web/API/WebGL_API/By_example/Scissor_animation")}} diff --git a/files/en-us/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md b/files/en-us/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md index 7dfdf636ea5b201..f66e93f2021084e 100644 --- a/files/en-us/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md +++ b/files/en-us/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Basic_scissoring","Learn/WebGL/By_example/Boilerplate_1")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Basic_scissoring","Web/API/WebGL_API/By_example/Boilerplate_1")}} This WebGL example explores the effect of setting (or not setting) the canvas size to its element size in {{Glossary("CSS")}} pixels, as it appears in the browser window. @@ -69,4 +69,4 @@ window.addEventListener( The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/canvas-size-and-webgl). -{{PreviousNext("Learn/WebGL/By_example/Basic_scissoring","Learn/WebGL/By_example/Boilerplate_1")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Basic_scissoring","Web/API/WebGL_API/By_example/Boilerplate_1")}} diff --git a/files/en-us/web/api/webgl_api/by_example/clearing_by_clicking/index.md b/files/en-us/web/api/webgl_api/by_example/clearing_by_clicking/index.md index ec92df4f4ae3fcf..3c9bc17fcd32653 100644 --- a/files/en-us/web/api/webgl_api/by_example/clearing_by_clicking/index.md +++ b/files/en-us/web/api/webgl_api/by_example/clearing_by_clicking/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Clearing_by_clicking page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Clearing_with_colors","Web/API/WebGL_API/By_example/Simple_color_animation")}} This example demonstrates how to combine user interaction with WebGL graphics operations by clearing the rendering context with a random color when the user clicks. @@ -108,4 +108,4 @@ window.addEventListener( The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking). -{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Clearing_with_colors","Web/API/WebGL_API/By_example/Simple_color_animation")}} diff --git a/files/en-us/web/api/webgl_api/by_example/clearing_with_colors/index.md b/files/en-us/web/api/webgl_api/by_example/clearing_with_colors/index.md index b000cc822451479..055fcf66b0db63e 100644 --- a/files/en-us/web/api/webgl_api/by_example/clearing_with_colors/index.md +++ b/files/en-us/web/api/webgl_api/by_example/clearing_with_colors/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Clearing_with_colors page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Detect_WebGL","Learn/WebGL/By_example/Clearing_by_clicking")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Detect_WebGL","Web/API/WebGL_API/By_example/Clearing_by_clicking")}} An example showing how to clear a WebGL rendering context to a solid color. @@ -87,4 +87,4 @@ window.addEventListener( The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/clearing-with-colors). -{{PreviousNext("Learn/WebGL/By_example/Detect_WebGL","Learn/WebGL/By_example/Clearing_by_clicking")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Detect_WebGL","Web/API/WebGL_API/By_example/Clearing_by_clicking")}} diff --git a/files/en-us/web/api/webgl_api/by_example/color_masking/index.md b/files/en-us/web/api/webgl_api/by_example/color_masking/index.md index db389f493a10a82..08779e7d5fb0f1e 100644 --- a/files/en-us/web/api/webgl_api/by_example/color_masking/index.md +++ b/files/en-us/web/api/webgl_api/by_example/color_masking/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Color_masking page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Simple_color_animation","Learn/WebGL/By_example/Basic_scissoring")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Simple_color_animation","Web/API/WebGL_API/By_example/Basic_scissoring")}} This WebGL example modifies random colors by applying color masking to limit the range of displayed colors to specific shades. @@ -117,4 +117,4 @@ window.addEventListener( The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/color-masking). -{{PreviousNext("Learn/WebGL/By_example/Simple_color_animation","Learn/WebGL/By_example/Basic_scissoring")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Simple_color_animation","Web/API/WebGL_API/By_example/Basic_scissoring")}} diff --git a/files/en-us/web/api/webgl_api/by_example/detect_webgl/index.md b/files/en-us/web/api/webgl_api/by_example/detect_webgl/index.md index 749b7e88921a5b9..280d17accfdac9b 100644 --- a/files/en-us/web/api/webgl_api/by_example/detect_webgl/index.md +++ b/files/en-us/web/api/webgl_api/by_example/detect_webgl/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Detect_WebGL page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example","Learn/WebGL/By_example/Clearing_with_colors")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example","Web/API/WebGL_API/By_example/Clearing_with_colors")}} This example demonstrates how to detect a {{Glossary("WebGL")}} rendering context and reports the result to the user. @@ -67,4 +67,4 @@ window.addEventListener( The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl). -{{PreviousNext("Learn/WebGL/By_example","Learn/WebGL/By_example/Clearing_with_colors")}} +{{PreviousNext("Web/API/WebGL_API/By_example","Web/API/WebGL_API/By_example/Clearing_with_colors")}} diff --git a/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md b/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md index 51a7fd3f3b95320..eef6e7980793248 100644 --- a/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md +++ b/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Hello_GLSL page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Raining_rectangles","Learn/WebGL/By_example/Hello_vertex_attributes")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Raining_rectangles","Web/API/WebGL_API/By_example/Hello_vertex_attributes")}} This WebGL example demonstrates a very basic GLSL shader program that draws a solid color square. @@ -156,4 +156,4 @@ function getRenderingContext() { The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl). -{{PreviousNext("Learn/WebGL/By_example/Raining_rectangles","Learn/WebGL/By_example/Hello_vertex_attributes")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Raining_rectangles","Web/API/WebGL_API/By_example/Hello_vertex_attributes")}} diff --git a/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md b/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md index 5dcddda99a83acb..acfa44056cf786d 100644 --- a/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md +++ b/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Hello_vertex_attributes page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Hello_GLSL","Learn/WebGL/By_example/Textures_from_code")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Hello_GLSL","Web/API/WebGL_API/By_example/Textures_from_code")}} This WebGL example demonstrates how to combine shader programming and user interaction by sending user input to the shader using vertex attributes. @@ -176,4 +176,4 @@ function getRenderingContext() { The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes). -{{PreviousNext("Learn/WebGL/By_example/Hello_GLSL","Learn/WebGL/By_example/Textures_from_code")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Hello_GLSL","Web/API/WebGL_API/By_example/Textures_from_code")}} diff --git a/files/en-us/web/api/webgl_api/by_example/index.md b/files/en-us/web/api/webgl_api/by_example/index.md index fd374cba47aa299..81e91bbdcad5d8e 100644 --- a/files/en-us/web/api/webgl_api/by_example/index.md +++ b/files/en-us/web/api/webgl_api/by_example/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{Next("Learn/WebGL/By_example/Detect_WebGL")}} +{{DefaultAPISidebar("WebGL")}}{{Next("Web/API/WebGL_API/By_example/Detect_WebGL")}} _WebGL by example_ is a series of live samples with short explanations that showcase WebGL concepts and capabilities. @@ -55,4 +55,4 @@ Explanations about the examples are found in both the main text and in comments - [Video textures](/en-US/docs/Web/API/WebGL_API/By_example/Video_textures) - : This example demonstrates how to use video files as textures. -{{Next("Learn/WebGL/By_example/Detect_WebGL")}} +{{Next("Web/API/WebGL_API/By_example/Detect_WebGL")}} diff --git a/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md index 19696f77553bab6..d21c393b8bc9c54 100644 --- a/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md +++ b/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Raining_rectangles page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Scissor_animation","Learn/WebGL/By_example/Hello_GLSL")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Scissor_animation","Web/API/WebGL_API/By_example/Hello_GLSL")}} A simple WebGL game that demonstrates clearing with solid colors, scissoring, animation, and user interaction. @@ -172,4 +172,4 @@ function getRenderingContext() { The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles). -{{PreviousNext("Learn/WebGL/By_example/Scissor_animation","Learn/WebGL/By_example/Hello_GLSL")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Scissor_animation","Web/API/WebGL_API/By_example/Hello_GLSL")}} diff --git a/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md b/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md index 9e7c4cfc811a14a..fa4f77782668338 100644 --- a/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md +++ b/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Scissor_animation page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Boilerplate_1","Web/API/WebGL_API/By_example/Raining_rectangles")}} A simple WebGL example in which we have some animation fun using scissoring and clearing operations. @@ -154,4 +154,4 @@ function getRenderingContext() { The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation). -{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Boilerplate_1","Web/API/WebGL_API/By_example/Raining_rectangles")}} diff --git a/files/en-us/web/api/webgl_api/by_example/simple_color_animation/index.md b/files/en-us/web/api/webgl_api/by_example/simple_color_animation/index.md index 6b972ce0c256421..5f84d485b37c528 100644 --- a/files/en-us/web/api/webgl_api/by_example/simple_color_animation/index.md +++ b/files/en-us/web/api/webgl_api/by_example/simple_color_animation/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Simple_color_animation page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Clearing_by_clicking","Learn/WebGL/By_example/Color_masking")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Clearing_by_clicking","Web/API/WebGL_API/By_example/Color_masking")}} A very basic color animation created using {{Glossary("WebGL")}}, performed by clearing the drawing buffer with a different random color every second. @@ -121,4 +121,4 @@ window.addEventListener( The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation). -{{PreviousNext("Learn/WebGL/By_example/Clearing_by_clicking","Learn/WebGL/By_example/Color_masking")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Clearing_by_clicking","Web/API/WebGL_API/By_example/Color_masking")}} diff --git a/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md b/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md index be72f67c2d1f8e2..8a5ebb47a32f47c 100644 --- a/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md +++ b/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Textures_from_code page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Learn/WebGL/By_example/Hello_vertex_attributes","Learn/WebGL/By_example/Video_textures")}} +{{DefaultAPISidebar("WebGL")}}{{PreviousNext("Web/API/WebGL_API/By_example/Hello_vertex_attributes","Web/API/WebGL_API/By_example/Video_textures")}} This WebGL example provides a simple demonstration of procedural texturing with fragment shaders. That is, using code to generate textures for use in shading WebGL objects. @@ -164,4 +164,4 @@ function getRenderingContext() { The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code). -{{PreviousNext("Learn/WebGL/By_example/Hello_vertex_attributes","Learn/WebGL/By_example/Video_textures")}} +{{PreviousNext("Web/API/WebGL_API/By_example/Hello_vertex_attributes","Web/API/WebGL_API/By_example/Video_textures")}} diff --git a/files/en-us/web/api/webgl_api/by_example/video_textures/index.md b/files/en-us/web/api/webgl_api/by_example/video_textures/index.md index f5843866a176eab..4e88fcab729ae28 100644 --- a/files/en-us/web/api/webgl_api/by_example/video_textures/index.md +++ b/files/en-us/web/api/webgl_api/by_example/video_textures/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebGL_API/By_example/Video_textures page-type: guide --- -{{DefaultAPISidebar("WebGL")}}{{Previous("Learn/WebGL/By_example/Textures_from_code")}} +{{DefaultAPISidebar("WebGL")}}{{Previous("Web/API/WebGL_API/By_example/Textures_from_code")}} This example demonstrates how to use video files as textures for WebGL surfaces. @@ -14,4 +14,4 @@ This example demonstrates how to use video files as textures for WebGL surfaces. The source code of this example is available on [GitHub](https://github.com/mdn/dom-examples/tree/main/webgl-examples/tutorial/sample8). -{{Previous("Learn/WebGL/By_example/Textures_from_code")}} +{{Previous("Web/API/WebGL_API/By_example/Textures_from_code")}} From bc780f1de369fc7f14c73bbdccdeeb8e375cc93e Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Mon, 23 Dec 2024 06:57:14 +0800 Subject: [PATCH 018/123] Fix info for svg `