diff --git a/files/en-us/web/css/anchor-name/index.md b/files/en-us/web/css/anchor-name/index.md index ff150612ddacaff..605f1cff9114dd6 100644 --- a/files/en-us/web/css/anchor-name/index.md +++ b/files/en-us/web/css/anchor-name/index.md @@ -135,7 +135,7 @@ body { We associate the second `
` with the anchor element by setting its anchor name as the value of the positioned element's {{cssxref("position-anchor")}} property. We then set the positioned element's: -- {{cssxref("position")}} property to `fixed`, converting it to an **anchor-positioned element** so it can be positioned relative to the anchor's position on the page. +- {{cssxref("position")}} property to `fixed`, converting it to an _anchor-positioned element_ so it can be positioned relative to the anchor's position on the page. - {{cssxref("left")}} and {{cssxref("top")}} properties to {{cssxref("anchor()")}} functions with values of `right` and `top` respectively. This positions the infobox's left edge flush to the right edge of its anchor, and its top edge relative to the top edge of its anchor. - {{cssxref("margin-left")}} to `10px`, creating space between the anchor positioned element and its anchor. diff --git a/files/en-us/web/css/anchor-size/index.md b/files/en-us/web/css/anchor-size/index.md index ec10c3c43b08e26..e5ce269aff4f90e 100644 --- a/files/en-us/web/css/anchor-size/index.md +++ b/files/en-us/web/css/anchor-size/index.md @@ -7,22 +7,23 @@ browser-compat: css.types.anchor-size {{CSSRef}} -The **`anchor-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) can be used as a value for an **anchor-positioned** element's [sizing properties](#properties_that_accept_anchor-size_function_values), to size it relative to the dimensions of its associated **anchor element**. +The **`anchor-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) returns the `` of target anchor element size dimension passed as a parameter. It 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 and is only valid within the value of anchor-positioned elements' [sizing 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 -/* property: anchor-size(anchor-size) */ +/* size of anchor side */ width: anchor-size(width); block-size: anchor-size(block); +height: calc(anchor-size(self-inline) + 2em); -/* property: anchor-size(anchor-element anchor-size) */ +/* size of named anchor size */ width: anchor-size(--myAnchor width); block-size: anchor-size(--myAnchor block); -/* property: anchor-size(anchor-element anchor-size, length-percentage) */ +/* size of named anchor side with fallback */ width: anchor-size(--myAnchor width, 50%); block-size: anchor-size(--myAnchor block, 200px); ``` @@ -38,27 +39,34 @@ anchor-size( , ) The parameters are: - `` {{optional_inline}} - - : The `` name set as the value of the {{cssxref("anchor-name")}} property of the anchor element you want to size the element relative to. If omitted, the element's default anchor, which is the anchor referenced in the {{cssxref("position-anchor")}} property, is used. + + - : 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. + + > **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. + - `` - : Specifies the dimension of the anchor element that the positioned element will be sized relative to. Valid values include: - - `width` - - : The width of the anchor element. - - `height` - - : The height of the anchor element. - - `block` - - : The length of the anchor element's [containing block](/en-US/docs/Web/CSS/Containing_block) in the block direction. - - `inline` - - : The length of the anchor element's containing block in the inline direction. - - `self-block` - - : The length of the anchor element in the block direction. - - `self-inline` - -: The length of the anchor element in the inline direction. + + - `width`: The width of the anchor element. + + - `height` : The height of the anchor element. + + - `block` : The length of the anchor element's [containing block](/en-US/docs/Web/CSS/Containing_block) in the block direction. + + - `inline`: The length of the anchor element's containing block in the inline direction. + + - `self-block`: The length of the anchor element in the block direction. + + - `self-inline`: The length of the anchor element in the inline direction. + + If this parameter is omitted, the dimension defaults to the `` keyterm that matches the axis of the property in which the function is included. For example, `width: anchor-size();` is equivalent to `width: anchor-size(width);`. - {{cssxref("length-percentage")}} {{optional_inline}} - - : 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. -> **Note:** The anchor size 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. + - : 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 omitted 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. ### Return value @@ -66,9 +74,19 @@ Returns a {{cssxref("length")}} value. ## Description -The `anchor()` function enables a positioned element's sizing values to be expressed in terms of an anchor element's dimensions. It is a valid value for each of the sizing properties. When used, the function sets the size relative to the anchor element by defining the anchor element and the dimension of the anchor element the positioned element is being sized relative to. +The `anchor()` function enables a positioned element's sizing values to be expressed in terms of an anchor element's dimension by defining the anchor element and the dimension of the 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. When used, the function returns the {{cssxref("length")}} dimension of an anchor element; with both the anchor element and the dimension being optional parameters. -If the positioned element does not have an anchor associated with it (i.e. via the {{cssxref("position-anchor")}} property) and it has sizing properties with `anchor-size()` values set on it, the fallback value is used if one is available. If no fallback is available, the sizing properties have no effect. +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 is will match the axis of the sizing property of the declaration. + +The anchor element used as the basis for the dimension length is the element with the `anchor-name` property value containing the `` listed 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. + +If no `` parameter is included in the function call, the element's **default anchor**, referenced in its [`position-anchor`](/en-US/docs/Web/CSS/position-anchor) property, or associated with the element via the [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) HTML attribute, is used. + +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 the elment is not an anchor positioned element, for example, if the element does not have its {{cssxref("position")}} property set to `absolute` or `fixed` or does not have an anchor associated with it via its {{cssxref("position-anchor")}} property, if it has sizing properties with `anchor-size()` values set on it, 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`. @@ -123,9 +141,9 @@ This example shows two elements positioned relative to an anchor and sized using #### HTML -We specify three {{htmlelement("div")}} elements, one `anchor` element and the two `infobox` elements we'll position relative to the anchor. We also add filler text to make the {{htmlelement("body")}} tall enough to require scrolling. +We specify three {{htmlelement("div")}} elements, one `anchor` element and the two `infobox` elements we'll position relative to the anchor. The filler text included to make the {{htmlelement("body")}} tall enough to require scrolling has been hidden for the sake of brevity. -```html +```html hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

@@ -133,7 +151,9 @@ We specify three {{htmlelement("div")}} elements, one `anchor` element and the t cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet aliquam.

+``` +```html
⚓︎
@@ -143,7 +163,9 @@ We specify three {{htmlelement("div")}} elements, one `anchor` element and the t

This is the second infobox.

+``` +```html hidden

Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi @@ -156,7 +178,7 @@ We specify three {{htmlelement("div")}} elements, one `anchor` element and the t #### CSS -We first declare the `anchor` `

` as an anchor element by giving it an anchor name using the {{cssxref("anchor-name")}} property: +We declare the `anchor` `
` as an anchor element by giving it an anchor name using the {{cssxref("anchor-name")}} property. The positioned elements, with their {{cssxref("position")}} properties set to `fixed`, are associated with the anchor element via their `position-anchor` properties. We also set absolute {{cssxref("height")}} and {{cssxref("width")}} dimensions on the anchor provide a reference point if when checking the positioned elements dimension with browser tools: ```css hidden .anchor { @@ -164,63 +186,56 @@ We first declare the `anchor` `
` as an anchor element by giving it an ancho color: white; text-shadow: 1px 1px 1px black; background-color: hsl(240 100% 75%); - width: 100px; - height: 100px; text-align: center; - line-height: 100px; - border-radius: 10px; - border: 1px solid black; - padding: 3px; + align-content: center; + outline: 1px solid black; } body { width: 80%; margin: 0 auto; } -``` - -```css -.anchor { - anchor-name: --myAnchor; -} -``` -The positioned elements are then associated with the anchor element by setting its anchor name as the value of the positioned elements' `position-anchor` properties. We also set the positioned elements' {{cssxref("position")}} properties to `fixed`, so they can be positioned relative to the anchor's position on the page. - -```css hidden .infobox { + align-content: center; color: darkblue; background-color: azure; - border: 1px solid #ddd; - padding: 10px; - border-radius: 10px; + outline: 1px solid #ddd; font-size: 1rem; text-align: center; } ``` ```css +.anchor { + anchor-name: --myAnchor; + width: 100px; + height: 100px; +} + .infobox { position-anchor: --myAnchor; position: fixed; } ``` -Finally, we set some distinct property values on the positioned elements: +We set some distinct property values on the positioned elements: -- Different {{cssxref("inset-area")}} values position the elements in different places around the anchor element. -- The {{cssxref("width")}} of the first infobox is set to double the anchor element's width. `anchor-size(width)` retrieves the anchor element width, and this is multiplied by two inside a {{cssxref("calc()")}} function. The {{cssxref("height")}} of the second infobox is set to two-thirds of the anchor element's height, using a similar technique. -- Appropriate margin values are set on the positioned elements to give them some separation from the anchor element. +- The positioned elements are tethered to the anchor with different {{cssxref("inset-area")}} values that position the elements in different places around the anchor element. +- The {{cssxref("height")}} of the first infobox is set to the height of the anchor height. `anchor-size(height)` returns the anchor element's width. Using the `anchor-size()` function within a {{cssxref("calc()")}} function, the {{cssxref("width")}} is set to double the anchor element's width; `anchor-size(width)` retrieves the anchor element's width, which is then multiplied by two. +- The {{cssxref("height")}} of the second infobox is set to two-thirds of the anchor element's height, using a similar technique. +- Margin values are included to provide some separation from the anchor element. ```css #infobox1 { inset-area: right; + height: anchor-size(height); width: calc(anchor-size(width) * 2); margin-left: 5px; } #infobox2 { - inset-area: top span-left; + inset-area: top span-right; height: calc(anchor-size(height) / 1.5); margin-bottom: 5px; } @@ -228,10 +243,10 @@ Finally, we set some distinct property values on the positioned elements: #### Result -The result is as follows. - {{EmbedLiveSample("Basic `anchor-size()` usage", "100%", "240")}} +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")}}. + ## Specifications {{Specifications}} @@ -245,5 +260,5 @@ The result is as follows. - {{cssxref("anchor-name")}} - {{cssxref("position-anchor")}} - {{cssxref("anchor()")}} function -- [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module - [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) guide +- [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module diff --git a/files/en-us/web/css/anchor/index.md b/files/en-us/web/css/anchor/index.md index 3588da45dab881c..748bc0d95bf0bf4 100644 --- a/files/en-us/web/css/anchor/index.md +++ b/files/en-us/web/css/anchor/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.anchor {{CSSRef}} -The **`anchor()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) can be used within an **anchor-positioned** element's [inset property](#properties_that_accept_anchor_function_values) values, returning a length value relative to the position of the edges of its associated **anchor element**. +The **`anchor()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) can be used within an **anchor-positioned** element's [inset property](#properties_that_accept_anchor_function_values) values, returning a length value relative to the position of the edges of its associated anchor element. ## Syntax diff --git a/files/en-us/web/css/block-size/index.md b/files/en-us/web/css/block-size/index.md index 3e5d356613423e0..3e23586d3f3a878 100644 --- a/files/en-us/web/css/block-size/index.md +++ b/files/en-us/web/css/block-size/index.md @@ -19,6 +19,8 @@ If the writing mode is vertically oriented, the value of `block-size` relates to /* values */ block-size: 300px; block-size: 25em; +block-size: anchor-size(height); +block-size: calc(anchor-size(--myAnchor block) * 0.75); /* values */ block-size: 75%; @@ -30,10 +32,6 @@ block-size: fit-content; block-size: fit-content(20em); block-size: auto; -/* anchor-size() function values */ -block-size: anchor-size(height); -block-size: calc(anchor-size(--myAnchor block) * 0.75); - /* Global values */ block-size: inherit; block-size: initial; diff --git a/files/en-us/web/css/height/index.md b/files/en-us/web/css/height/index.md index 0405521979e5965..a9b419fae91a1b7 100644 --- a/files/en-us/web/css/height/index.md +++ b/files/en-us/web/css/height/index.md @@ -20,6 +20,9 @@ The {{cssxref("min-height")}} and {{cssxref("max-height")}} properties override height: 120px; height: 10em; height: 100vh; +height: anchor-size(height); +height: anchor-size(--myAnchor self-block, 250px); +height: clamp(200px, anchor-size(width)); /* value */ height: 75%; @@ -30,10 +33,7 @@ height: min-content; height: fit-content; height: fit-content(20em); height: auto; - -/* anchor-size() function values */ -height: anchor-size(height); -height: anchor-size(--myAnchor self-block, 250px); +height: minmax(min-content, anchor-size(width)); /* Global values */ height: inherit; @@ -59,10 +59,6 @@ height: unset; - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. - `fit-content({{cssxref("<length-percentage>")}})` - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, ))`. -- {{cssxref("clamp", "clamp()")}} - - : Enables selecting a middle value within a range of values between a defined minimum and maximum. -- {{cssxref("anchor-size()")}} {{experimental_inline}} - - : Resolves to a {{cssxref("<length>")}} value relative to a dimension of an element's associated **anchor element**. ## Accessibility concerns @@ -139,3 +135,6 @@ div { - {{cssxref("box-sizing")}} - {{cssxref("min-height")}}, {{cssxref("max-height")}} - The mapped logical properties: {{cssxref("block-size")}}, {{cssxref("inline-size")}} +- {{cssxref("anchor-size()")}} +- {{cssxref("clamp", "clamp()")}} +- {{cssxref("clamp", "minmax()")}} diff --git a/files/en-us/web/css/inline-size/index.md b/files/en-us/web/css/inline-size/index.md index b660ef0868b0a4a..602f59eff9a13b0 100644 --- a/files/en-us/web/css/inline-size/index.md +++ b/files/en-us/web/css/inline-size/index.md @@ -19,6 +19,8 @@ If the writing mode is vertically oriented, the value of `inline-size` relates t /* values */ inline-size: 300px; inline-size: 25em; +inline-size: anchor-size(width); +inline-size: anchor-size(--myAnchor inline); /* values */ inline-size: 75%; @@ -30,10 +32,6 @@ inline-size: fit-content; inline-size: fit-content(20em); inline-size: auto; -/* anchor-size() function values */ -inline-size: anchor-size(width); -inline-size: anchor-size(--myAnchor inline); - /* Global values */ inline-size: inherit; inline-size: initial; diff --git a/files/en-us/web/css/inset-area/index.md b/files/en-us/web/css/inset-area/index.md index 25eb54a9bd1744b..7c19295b7b5e2f6 100644 --- a/files/en-us/web/css/inset-area/index.md +++ b/files/en-us/web/css/inset-area/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.inset-area {{CSSRef}}{{seecompattable}} -The **`inset-area`** [CSS](/en-US/docs/Web/CSS) property enables an **anchor-positioned** element to be positioned relative to the edges of its associated **anchor element** by placing the positioned element on one or more tiles of an implicit 3x3 grid called the **inset-area grid**. This provides an alternative to positioning an element relative to its anchor via {{glossary("inset properties")}} and the {{cssxref("anchor()")}} function. +The **`inset-area`** [CSS](/en-US/docs/Web/CSS) property enables an **anchor-positioned** element to be positioned relative to the edges of its associated anchor element by placing the positioned element on one or more tiles of an implicit 3x3 grid called the **inset-area grid**. This provides an alternative to positioning an element relative to its anchor via {{glossary("inset properties")}} and the {{cssxref("anchor()")}} function. ## Syntax diff --git a/files/en-us/web/css/inset-area_value/index.md b/files/en-us/web/css/inset-area_value/index.md index 71e424d14ff1e67..02ffbe5bb2721b9 100644 --- a/files/en-us/web/css/inset-area_value/index.md +++ b/files/en-us/web/css/inset-area_value/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.inset-area {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) specifies an area of the implicit 3x3 grid known as the **inset-area grid**. It can be set as the value of the {{cssxref("inset-area")}} property to place an **anchor-positioned element** in a specific location relative to its associated **anchor element**. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) specifies an area of the implicit 3x3 grid known as the **inset-area grid**. It can be set as the value of the {{cssxref("inset-area")}} property to place an anchor-positioned element in a specific location relative to its associated anchor element. 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. diff --git a/files/en-us/web/css/max-block-size/index.md b/files/en-us/web/css/max-block-size/index.md index f91e0e1e0c9de23..72a8ce9923685e6 100644 --- a/files/en-us/web/css/max-block-size/index.md +++ b/files/en-us/web/css/max-block-size/index.md @@ -23,6 +23,8 @@ Any time you would normally use `max-height` or `max-width`, you should instead /* values */ max-block-size: 300px; max-block-size: 25em; +max-block-size: anchor-size(--myAnchor self-inline, 250px); +max-block-size: calc(anchor-size(width) / 2); /* values */ max-block-size: 75%; @@ -34,10 +36,6 @@ max-block-size: min-content; max-block-size: fit-content; max-block-size: fit-content(20em); -/* anchor-size() function values */ -max-block-size: anchor-size(self-inline); -max-block-size: anchor-size(--myAnchor block, 120%); - /* Global values */ max-block-size: inherit; max-block-size: initial; @@ -64,8 +62,6 @@ The `max-block-size` property's value can be any value that's legal for the {{cs - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. - `fit-content({{cssxref("<length-percentage>")}})` - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. -- {{cssxref("anchor-size()")}} {{experimental_inline}} - - : Resolves to a {{cssxref("<length>")}} value relative to a dimension of an element's associated **anchor element**. ### How writing-mode affects directionality diff --git a/files/en-us/web/css/max-height/index.md b/files/en-us/web/css/max-height/index.md index eda96b1ce2c9ae9..5ae1dd420c1074d 100644 --- a/files/en-us/web/css/max-height/index.md +++ b/files/en-us/web/css/max-height/index.md @@ -18,6 +18,8 @@ The **`max-height`** [CSS](/en-US/docs/Web/CSS) property sets the maximum height ```css /* value */ max-height: 3.5em; +max-height: anchor-size(height); +max-height: calc(anchor-size(--myAnchor self-block, 250px) + 2em); /* value */ max-height: 75%; @@ -29,10 +31,6 @@ max-height: min-content; max-height: fit-content; max-height: fit-content(20em); -/* anchor-size() function values */ -max-height: anchor-size(height); -max-height: anchor-size(--myAnchor block, 200%); - /* Global values */ max-height: inherit; max-height: initial; @@ -57,8 +55,6 @@ max-height: unset; - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. - `fit-content({{cssxref("<length-percentage>")}})` - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. -- {{cssxref("anchor-size()")}} {{experimental_inline}} - - : Resolves to a {{cssxref("<length>")}} value relative to a dimension of an element's associated **anchor element**. ## Accessibility concerns diff --git a/files/en-us/web/css/max-inline-size/index.md b/files/en-us/web/css/max-inline-size/index.md index 6840aa0f5abe38d..0c2d8f7aef88c07 100644 --- a/files/en-us/web/css/max-inline-size/index.md +++ b/files/en-us/web/css/max-inline-size/index.md @@ -19,6 +19,8 @@ If the writing mode is vertically oriented, the value of `max-inline-size` relat /* values */ max-inline-size: 300px; max-inline-size: 25em; +max-inline-size: anchor-size(width); +max-inline-size: anchor-size(--myAnchor self-block, 200px); /* values */ max-inline-size: 75%; @@ -30,10 +32,6 @@ max-inline-size: min-content; max-inline-size: fit-content; max-inline-size: fit-content(20em); -/* anchor-size() function values */ -max-inline-size: anchor-size(width); -max-inline-size: anchor-size(--myAnchor self-block, 200px); - /* Global values */ max-inline-size: inherit; max-inline-size: initial; diff --git a/files/en-us/web/css/max-width/index.md b/files/en-us/web/css/max-width/index.md index 740285a2315d9ed..b319fe9aa3928d4 100644 --- a/files/en-us/web/css/max-width/index.md +++ b/files/en-us/web/css/max-width/index.md @@ -18,6 +18,8 @@ The **`max-width`** [CSS](/en-US/docs/Web/CSS) property sets the maximum width o ```css /* value */ max-width: 3.5em; +max-width: anchor-size(--myAnchor inline, 245px); +max-width: calc(anchor-size(width) + 4em); /* value */ max-width: 75%; @@ -29,10 +31,6 @@ max-width: min-content; max-width: fit-content; max-width: fit-content(20em); -/* anchor-size() function values */ -max-width: anchor-size(width); -max-width: anchor-size(--myAnchor inline, 245px); - /* Global values */ max-width: inherit; max-width: initial; @@ -57,8 +55,6 @@ max-width: unset; - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. - `fit-content({{cssxref("<length-percentage>")}})` - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. -- {{cssxref("anchor-size()")}} {{experimental_inline}} - - : Resolves to a {{cssxref("<length>")}} value relative to a dimension of an element's associated **anchor element**. ## Accessibility concerns diff --git a/files/en-us/web/css/min-block-size/index.md b/files/en-us/web/css/min-block-size/index.md index e54b8f0dd5bd820..483fc0595a29ebc 100644 --- a/files/en-us/web/css/min-block-size/index.md +++ b/files/en-us/web/css/min-block-size/index.md @@ -19,6 +19,7 @@ If the writing mode is vertically oriented, the value of `min-block-size` relate /* values */ min-block-size: 100px; min-block-size: 5em; +min-block-size: anchor-size(self-inline); /* values */ min-block-size: 10%; @@ -29,10 +30,6 @@ min-block-size: min-content; min-block-size: fit-content; min-block-size: fit-content(20em); -/* anchor-size() function values */ -min-block-size: anchor-size(self-inline); -min-block-size: anchor-size(--myAnchor block, 150px); - /* Global values */ min-block-size: inherit; min-block-size: initial; diff --git a/files/en-us/web/css/min-height/index.md b/files/en-us/web/css/min-height/index.md index 85626ed08a20aed..0ff2fcebb026c0c 100644 --- a/files/en-us/web/css/min-height/index.md +++ b/files/en-us/web/css/min-height/index.md @@ -18,6 +18,8 @@ The element's height is set to the value of `min-height` whenever `min-height` i ```css /* value */ min-height: 3.5em; +min-height: anchor-size(height); +min-height: anchor-size(--myAnchor block, 200px); /* value */ min-height: 10%; @@ -28,10 +30,6 @@ min-height: min-content; min-height: fit-content; min-height: fit-content(20em); -/* anchor-size() function values */ -min-height: anchor-size(height); -min-height: anchor-size(--myAnchor block, 200px); - /* Global values */ min-height: inherit; min-height: initial; @@ -56,8 +54,6 @@ min-height: unset; - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. - `fit-content({{cssxref("<length-percentage>")}})` - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. -- {{cssxref("anchor-size()")}} {{experimental_inline}} - - : Resolves to a {{cssxref("<length>")}} value relative to a dimension of an element's associated **anchor element**. ## Formal definition diff --git a/files/en-us/web/css/min-inline-size/index.md b/files/en-us/web/css/min-inline-size/index.md index de514aca386ef00..c8dffebd4b680b5 100644 --- a/files/en-us/web/css/min-inline-size/index.md +++ b/files/en-us/web/css/min-inline-size/index.md @@ -17,6 +17,7 @@ The **`min-inline-size`** [CSS](/en-US/docs/Web/CSS) property defines the horizo /* values */ min-inline-size: 100px; min-inline-size: 5em; +min-inline-size: anchor-size(width); /* values */ min-inline-size: 10%; @@ -27,10 +28,6 @@ min-inline-size: min-content; min-inline-size: fit-content; min-inline-size: fit-content(20em); -/* anchor-size() function values */ -min-inline-size: anchor-size(width); -min-inline-size: anchor-size(--myAnchor inline, 300%); - /* Global values */ min-inline-size: inherit; min-inline-size: initial; diff --git a/files/en-us/web/css/min-width/index.md b/files/en-us/web/css/min-width/index.md index 2378770306d4e40..681ab44ce8de15e 100644 --- a/files/en-us/web/css/min-width/index.md +++ b/files/en-us/web/css/min-width/index.md @@ -18,6 +18,8 @@ The element's width is set to the value of `min-width` whenever `min-width` is l ```css /* value */ min-width: 3.5em; +min-width: anchor-size(width); +min-width: anchor-size(--myAnchor self-inline, 200%); /* value */ min-width: 10%; @@ -28,10 +30,6 @@ min-width: min-content; min-width: fit-content; min-width: fit-content(20em); -/* anchor-size() function values */ -min-width: anchor-size(width); -min-width: anchor-size(--myAnchor self-inline, 200%); - /* Global values */ min-width: inherit; min-width: initial; @@ -56,8 +54,6 @@ min-width: unset; - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. - `fit-content({{cssxref("<length-percentage>")}})` - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. -- {{cssxref("anchor-size()")}} {{experimental_inline}} - - : Resolves to a {{cssxref("<length>")}} value relative to a dimension of an element's associated **anchor element**. ## Formal definition diff --git a/files/en-us/web/css/position-visibility/index.md b/files/en-us/web/css/position-visibility/index.md index 1ed164e1cf6561e..d875c98275ca6ff 100644 --- a/files/en-us/web/css/position-visibility/index.md +++ b/files/en-us/web/css/position-visibility/index.md @@ -9,7 +9,7 @@ browser-compat: css.properties.position-visibility {{CSSRef}}{{seecompattable}} -The **`position-visibility`** [CSS](/en-US/docs/Web/CSS) property enables conditionally hiding an **anchor-positioned element** depending on, for example, whether it is overflowing its containing element or the viewport. +The **`position-visibility`** [CSS](/en-US/docs/Web/CSS) property enables conditionally hiding an anchor-positioned element depending on, for example, whether it is overflowing its containing element or the viewport. ## Syntax diff --git a/files/en-us/web/css/width/index.md b/files/en-us/web/css/width/index.md index c422da9732719e3..8835957a4e461e3 100644 --- a/files/en-us/web/css/width/index.md +++ b/files/en-us/web/css/width/index.md @@ -22,6 +22,8 @@ The specified value of `width` applies to the content area so long as its value /* values */ width: 300px; width: 25em; +width: anchor-size(--myAnchor inline, 120%); +width: minmax(100px, anchor-size(width)); /* value */ width: 75%; @@ -33,10 +35,6 @@ width: fit-content; width: fit-content(20em); width: auto; -/* anchor-size() function values */ -width: anchor-size(width); -width: anchor-size(--myAnchor inline, 120%); - /* Global values */ width: inherit; width: initial; @@ -61,8 +59,6 @@ width: unset; - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. - `fit-content({{cssxref("<length-percentage>")}})` - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, ))`. -- {{cssxref("anchor-size()")}} {{experimental_inline}} - - : Resolves to a {{cssxref("<length>")}} value relative to a dimension of an element's associated **anchor element**. ## Accessibility concerns @@ -90,7 +86,7 @@ p.goldie { ``` ```html -

The Mozilla community produces a lot of great software.

+

The MDN community writes really great documentation.

``` {{EmbedLiveSample('Default_width', '500px', '64px')}} @@ -146,7 +142,7 @@ p.maxgreen { ``` ```html -

The Mozilla community produces a lot of great software.

+

The MDN community writes really great documentation.

``` {{EmbedLiveSample('Example using "max-content"', '500px', '64px')}} @@ -161,7 +157,7 @@ p.minblue { ``` ```html -

The Mozilla community produces a lot of great software.

+

The MDN community writes really great documentation.

``` {{EmbedLiveSample('Example using "min-content"', '500px', '155px')}} @@ -181,3 +177,4 @@ p.minblue { - {{cssxref("box-sizing")}} - {{cssxref("min-width")}}, {{cssxref("max-width")}} - The mapped logical properties: {{cssxref("block-size")}}, {{cssxref("inline-size")}} +- {{cssxref("anchor-size()")}} diff --git a/files/en-us/web/html/global_attributes/anchor/index.md b/files/en-us/web/html/global_attributes/anchor/index.md index 519898c769d335e..06012d46cd54a82 100644 --- a/files/en-us/web/html/global_attributes/anchor/index.md +++ b/files/en-us/web/html/global_attributes/anchor/index.md @@ -83,7 +83,7 @@ body { } ``` -We use CSS to convert the `infobox` element into an **anchor-positioned element** and position it relative to its anchor. We set its: +We use CSS to convert the `infobox` element into an _anchor-positioned element_ and position it relative to its anchor. We set its: - {{cssxref("position")}} property to `fixed`, converting it to a positioned element so it can be positioned relative to the anchor's position. - {{cssxref("left")}} property to an {{cssxref("anchor()")}} function with a value of `right`. This tethers the positioned element to its anchor, positioning its left edge flush to the anchor's right edge.