diff --git a/files/en-us/web/css/reference/properties/scroll-margin-block/index.md b/files/en-us/web/css/reference/properties/scroll-margin-block/index.md index 16d9e828a3c84eb..f139faac250689f 100644 --- a/files/en-us/web/css/reference/properties/scroll-margin-block/index.md +++ b/files/en-us/web/css/reference/properties/scroll-margin-block/index.md @@ -74,8 +74,8 @@ scroll-margin-block: 2em; This property is a shorthand for the following CSS properties: -- [`scroll-margin-block-end`](/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-block-end) -- [`scroll-margin-block-start`](/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-block-start) +- {{cssxref("scroll-margin-block-end")}} +- {{cssxref("scroll-margin-block-start")}} ## Syntax diff --git a/files/en-us/web/css/reference/properties/scroll-margin-inline/index.md b/files/en-us/web/css/reference/properties/scroll-margin-inline/index.md index 76f1600c4718bad..7a1e971033777f2 100644 --- a/files/en-us/web/css/reference/properties/scroll-margin-inline/index.md +++ b/files/en-us/web/css/reference/properties/scroll-margin-inline/index.md @@ -81,8 +81,8 @@ scroll-margin-inline: 0px 3em; This property is a shorthand for the following CSS properties: -- [`scroll-margin-inline-end`](/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-inline-end) -- [`scroll-margin-inline-start`](/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-inline-start) +- {{cssxref("scroll-margin-inline-end")}} +- {{cssxref("scroll-margin-inline-start")}} ## Syntax diff --git a/files/en-us/web/css/reference/properties/scroll-margin/index.md b/files/en-us/web/css/reference/properties/scroll-margin/index.md index bce324248d3cc0f..1b85281852abb65 100644 --- a/files/en-us/web/css/reference/properties/scroll-margin/index.md +++ b/files/en-us/web/css/reference/properties/scroll-margin/index.md @@ -6,7 +6,7 @@ browser-compat: css.properties.scroll-margin sidebar: cssref --- -The **`scroll-margin`** [shorthand property](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) sets all of the scroll margins of an element at once, assigning values much like the [`margin`](/en-US/docs/Web/CSS/Reference/Properties/margin) property does for margins of an element. +The **`scroll-margin`** [shorthand property](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) sets all of the scroll margins of an element at once, assigning values much like the {{cssxref("margin")}} property does for margins of an element. {{InteractiveExample("CSS Demo: scroll-margin")}} @@ -74,10 +74,10 @@ scroll-margin: 2em; This property is a shorthand for the following CSS properties: -- [`scroll-margin-bottom`](/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-bottom) -- [`scroll-margin-left`](/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-left) -- [`scroll-margin-right`](/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-right) -- [`scroll-margin-top`](/en-US/docs/Web/CSS/Reference/Properties/scroll-margin-top) +- {{cssxref("scroll-margin-bottom")}} +- {{cssxref("scroll-margin-left")}} +- {{cssxref("scroll-margin-right")}} +- {{cssxref("scroll-margin-top")}} ## Syntax diff --git a/files/en-us/web/css/reference/properties/scroll-padding-block/index.md b/files/en-us/web/css/reference/properties/scroll-padding-block/index.md index 2b2725fc5bba13d..8fe2a2142f9babc 100644 --- a/files/en-us/web/css/reference/properties/scroll-padding-block/index.md +++ b/files/en-us/web/css/reference/properties/scroll-padding-block/index.md @@ -76,8 +76,8 @@ The scroll-padding properties define offsets for the _optimal viewing region_ of This property is a shorthand for the following CSS properties: -- [`scroll-padding-block-end`](/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-block-end) -- [`scroll-padding-block-start`](/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-block-start) +- {{cssxref("scroll-padding-block-end")}} +- {{cssxref("scroll-padding-block-start")}} ## Syntax diff --git a/files/en-us/web/css/reference/properties/scroll-padding-inline/index.md b/files/en-us/web/css/reference/properties/scroll-padding-inline/index.md index ca9fe64f296d77f..7a1dac66468a689 100644 --- a/files/en-us/web/css/reference/properties/scroll-padding-inline/index.md +++ b/files/en-us/web/css/reference/properties/scroll-padding-inline/index.md @@ -79,8 +79,8 @@ The scroll-padding properties define offsets for the _optimal viewing region_ of This property is a shorthand for the following CSS properties: -- [`scroll-padding-inline-end`](/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-inline-end) -- [`scroll-padding-inline-start`](/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-inline-start) +- {{cssxref("scroll-padding-inline-end")}} +- {{cssxref("scroll-padding-inline-start")}} ## Syntax diff --git a/files/en-us/web/css/reference/properties/scroll-timeline-axis/index.md b/files/en-us/web/css/reference/properties/scroll-timeline-axis/index.md index 12d45c5d9cee906..8aede24a70963f2 100644 --- a/files/en-us/web/css/reference/properties/scroll-timeline-axis/index.md +++ b/files/en-us/web/css/reference/properties/scroll-timeline-axis/index.md @@ -11,7 +11,7 @@ The **`scroll-timeline-axis`** [CSS](/en-US/docs/Web/CSS) property is used to sp > [!NOTE] > If the scroller element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created. -The `scroll-timeline-axis` and {{cssxref("scroll-timeline-name")}} properties can also be set using the [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline) shorthand property. +The `scroll-timeline-axis` and {{cssxref("scroll-timeline-name")}} properties can also be set using the {{cssxref("scroll-timeline")}} shorthand property. ## Syntax @@ -138,7 +138,7 @@ Scroll the horizontal bar at the bottom to see the square animate as you scroll. ## See also -- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline) -- [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline), [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name) +- {{cssxref("animation-timeline")}} +- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-name")}} - {{cssxref("timeline-scope")}} - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) diff --git a/files/en-us/web/css/reference/properties/scroll-timeline-name/index.md b/files/en-us/web/css/reference/properties/scroll-timeline-name/index.md index 9f5ccd91c646af4..f6c5a598bace251 100644 --- a/files/en-us/web/css/reference/properties/scroll-timeline-name/index.md +++ b/files/en-us/web/css/reference/properties/scroll-timeline-name/index.md @@ -8,12 +8,12 @@ sidebar: cssref The **`scroll-timeline-name`** [CSS](/en-US/docs/Web/CSS) property is used to define the name of a _named scroll progress timeline_, which is progressed through by scrolling a scrollable element (_scroller_) between top and bottom (or left and right). `scroll-timeline-name` is set on the scroller that will provide the timeline. -The name is then referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline) declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action. +The name is then referenced in an {{cssxref("animation-timeline")}} declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action. > [!NOTE] > If the element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created. -The {{cssxref("scroll-timeline-axis")}} and `scroll-timeline-name` properties can also be set using the [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline) shorthand property. +The {{cssxref("scroll-timeline-axis")}} and `scroll-timeline-name` properties can also be set using the {{cssxref("scroll-timeline")}} shorthand property. ## Syntax @@ -29,10 +29,10 @@ Allowed values for `scroll-timeline-name` are: - `none` - : The timeline has no name. - `` - - : An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline) property. + - : An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an {{cssxref("animation-timeline")}} property. > [!NOTE] - > [``](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) values must start with `--`, which helps avoid name clashes with standard CSS keywords. + > {{cssxref("<dashed-ident>")}} values must start with `--`, which helps avoid name clashes with standard CSS keywords. ## Formal definition @@ -125,7 +125,7 @@ Scroll the vertical bar to see the square animate as you scroll. ## See also -- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline) -- [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline), [`scroll-timeline-axis`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-axis) +- {{cssxref("animation-timeline")}} +- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-axis")}} - {{cssxref("timeline-scope")}} - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) diff --git a/files/en-us/web/css/reference/properties/scroll-timeline/index.md b/files/en-us/web/css/reference/properties/scroll-timeline/index.md index 4859eba97c24aa9..71e010c23d195dd 100644 --- a/files/en-us/web/css/reference/properties/scroll-timeline/index.md +++ b/files/en-us/web/css/reference/properties/scroll-timeline/index.md @@ -10,7 +10,7 @@ The **`scroll-timeline`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US `scroll-timeline` can contain two constituent values — a name for the named scroll progress timeline, and an optional scroll axis value. -The name is then referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline) declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action. +The name is then referenced in an {{cssxref("animation-timeline")}} declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action. > [!NOTE] > If the scroller does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created. @@ -19,8 +19,8 @@ The name is then referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/Ref This property is a shorthand for the following CSS properties: -- [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name) -- [`scroll-timeline-axis`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-axis) +- {{cssxref("scroll-timeline-name")}} +- {{cssxref("scroll-timeline-axis")}} ## Syntax @@ -43,15 +43,15 @@ scroll-timeline: --custom_name_for_timeline; The `scroll-timeline` shorthand property can be applied to a container element as a combination of the `` and `` values. At least one of the values must be specified. If both the values are specified, the order followed must be the `` value followed by the `` value. > [!NOTE] -> ``s must be [``](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) values, which means they must start with `--`. This helps avoid name clashes with standard CSS keywords. +> ``s must be {{cssxref("<dashed-ident>")}} values, which means they must start with `--`. This helps avoid name clashes with standard CSS keywords. ### Values - `` - - : See [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name). + - : See {{cssxref("scroll-timeline-name")}}. - `` - - : See [`scroll-timeline-axis`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-axis). The default value is `block`. + - : See {{cssxref("scroll-timeline-axis")}}. The default value is `block`. ## Formal definition @@ -148,7 +148,7 @@ The square animates as you scroll, and the animation duration when using `scroll ## See also -- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline) -- [`scroll-timeline-axis`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-axis), [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name) +- {{cssxref("animation-timeline")}} +- {{cssxref("scroll-timeline-axis")}}, {{cssxref("scroll-timeline-name")}} - {{cssxref("timeline-scope")}} - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) diff --git a/files/en-us/web/css/reference/properties/table-layout/index.md b/files/en-us/web/css/reference/properties/table-layout/index.md index a5fd7226aecbc83..542ecea43218f0e 100644 --- a/files/en-us/web/css/reference/properties/table-layout/index.md +++ b/files/en-us/web/css/reference/properties/table-layout/index.md @@ -92,7 +92,7 @@ table-layout: unset; - : The automatic table layout algorithm is used. The widths of the table and its cells are adjusted to fit the content. Most browsers use this algorithm by default. - `fixed` - - : The fixed table layout algorithm is used. When using this keyword, the table's width _needs to be specified explicitly_ using the [`width`](/en-US/docs/Web/CSS/Reference/Properties/width) property. If the value of the `width` property is set to `auto` or is not specified, the browser uses the automatic table layout algorithm, in which case the `fixed` value has no effect.\ + - : The fixed table layout algorithm is used. When using this keyword, the table's width _needs to be specified explicitly_ using the {{cssxref("width")}} property. If the value of the `width` property is set to `auto` or is not specified, the browser uses the automatic table layout algorithm, in which case the `fixed` value has no effect.\ The fixed table layout algorithm is faster than the automatic layout algorithm because the horizontal layout of the table depends only on the table's width, the width of the columns, and borders or cell spacing. The horizontal layout doesn't depend on the contents of the cells because it depends only on explicitly set widths. In the fixed table layout algorithm, the width of each column is determined as follows: diff --git a/files/en-us/web/css/reference/properties/text-decoration-skip/index.md b/files/en-us/web/css/reference/properties/text-decoration-skip/index.md index 72c77cae84ba2d9..5f1c6bdf2bef009 100644 --- a/files/en-us/web/css/reference/properties/text-decoration-skip/index.md +++ b/files/en-us/web/css/reference/properties/text-decoration-skip/index.md @@ -101,4 +101,4 @@ p { ## See also -- [`text-decoration-skip-ink`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration-skip-ink) +- {{cssxref("text-decoration-skip-ink")}} diff --git a/files/en-us/web/css/reference/properties/text-decoration/index.md b/files/en-us/web/css/reference/properties/text-decoration/index.md index eb5af05454a8ee5..13c52b81affce29 100644 --- a/files/en-us/web/css/reference/properties/text-decoration/index.md +++ b/files/en-us/web/css/reference/properties/text-decoration/index.md @@ -52,10 +52,10 @@ Text decorations are drawn across descendant text elements. This means that if a This property is a shorthand for the following CSS properties: -- [`text-decoration-color`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration-color) -- [`text-decoration-line`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration-line) -- [`text-decoration-style`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration-style) -- [`text-decoration-thickness`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration-thickness) +- {{cssxref("text-decoration-color")}} +- {{cssxref("text-decoration-line")}} +- {{cssxref("text-decoration-style")}} +- {{cssxref("text-decoration-thickness")}} ## Syntax diff --git a/files/en-us/web/css/reference/properties/text-emphasis/index.md b/files/en-us/web/css/reference/properties/text-emphasis/index.md index 0659d244343ae70..a52c09b94ea13dc 100644 --- a/files/en-us/web/css/reference/properties/text-emphasis/index.md +++ b/files/en-us/web/css/reference/properties/text-emphasis/index.md @@ -53,8 +53,8 @@ The size of the emphasis symbol, like ruby symbols, is about 50% of the size of This property is a shorthand for the following CSS properties: -- [`text-emphasis-color`](/en-US/docs/Web/CSS/Reference/Properties/text-emphasis-color) -- [`text-emphasis-style`](/en-US/docs/Web/CSS/Reference/Properties/text-emphasis-style) +- {{cssxref("text-emphasis-color")}} +- {{cssxref("text-emphasis-style")}} ## Syntax diff --git a/files/en-us/web/css/reference/properties/text-indent/index.md b/files/en-us/web/css/reference/properties/text-indent/index.md index 2b28174c3c8f62c..589b40877cb5c44 100644 --- a/files/en-us/web/css/reference/properties/text-indent/index.md +++ b/files/en-us/web/css/reference/properties/text-indent/index.md @@ -247,11 +247,11 @@ p { - [Learn to style HTML using CSS](/en-US/docs/Learn_web_development/Core/Styling_basics) - Related CSS properties: - - [`text-justify`](/en-US/docs/Web/CSS/Reference/Properties/text-justify) - - [`text-orientation`](/en-US/docs/Web/CSS/Reference/Properties/text-orientation) - - [`text-overflow`](/en-US/docs/Web/CSS/Reference/Properties/text-overflow) - - [`text-rendering`](/en-US/docs/Web/CSS/Reference/Properties/text-rendering) - - [`text-transform`](/en-US/docs/Web/CSS/Reference/Properties/text-transform) + - {{cssxref("text-justify")}} + - {{cssxref("text-orientation")}} + - {{cssxref("text-overflow")}} + - {{cssxref("text-rendering")}} + - {{cssxref("text-transform")}} - {{cssxref('hanging-punctuation')}} - [CSS Text Decoration](/en-US/docs/Web/CSS/Guides/Text_decoration) CSS module diff --git a/files/en-us/web/css/reference/properties/text-rendering/index.md b/files/en-us/web/css/reference/properties/text-rendering/index.md index b2cb026f1532d9b..86ffa9ef7e53f48 100644 --- a/files/en-us/web/css/reference/properties/text-rendering/index.md +++ b/files/en-us/web/css/reference/properties/text-rendering/index.md @@ -155,10 +155,10 @@ p { - [Drawing text in a ``](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - [CSS Text Decoration](/en-US/docs/Web/CSS/Guides/Text_decoration) CSS module - Related CSS properties - - [`text-decoration`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration) (and its longhand properties, such as [`text-decoration-line`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration-line), [`text-decoration-style`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration-style), and [`text-decoration-thickness`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration-thickness)) - - [`text-emphasis`](/en-US/docs/Web/CSS/Reference/Properties/text-emphasis) (and its longhand properties, including [`text-emphasis-color`](/en-US/docs/Web/CSS/Reference/Properties/text-emphasis-color), [`text-emphasis-position`](/en-US/docs/Web/CSS/Reference/Properties/text-emphasis-position), and [`text-emphasis-style`](/en-US/docs/Web/CSS/Reference/Properties/text-emphasis-style)) - - [`text-shadow`](/en-US/docs/Web/CSS/Reference/Properties/text-shadow) - - [`text-transform`](/en-US/docs/Web/CSS/Reference/Properties/text-transform) + - {{cssxref("text-decoration")}} (and its longhand properties, such as {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("text-decoration-thickness")}}) + - {{cssxref("text-emphasis")}} (and its longhand properties, including {{cssxref("text-emphasis-color")}}, {{cssxref("text-emphasis-position")}}, and {{cssxref("text-emphasis-style")}}) + - {{cssxref("text-shadow")}} + - {{cssxref("text-transform")}} - The [SVG](/en-US/docs/Web/SVG) {{SVGAttr("text-rendering")}} attribute - [SVG and CSS](/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/SVG_and_CSS) diff --git a/files/en-us/web/css/reference/properties/text-shadow/index.md b/files/en-us/web/css/reference/properties/text-shadow/index.md index 51d6749e3f97cea..52db675bff46fc7 100644 --- a/files/en-us/web/css/reference/properties/text-shadow/index.md +++ b/files/en-us/web/css/reference/properties/text-shadow/index.md @@ -6,7 +6,7 @@ browser-compat: css.properties.text-shadow sidebar: cssref --- -The **`text-shadow`** [CSS](/en-US/docs/Web/CSS) property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its [`decorations`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration). Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color. +The **`text-shadow`** [CSS](/en-US/docs/Web/CSS) property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its {{cssxref("decorations")}}. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color. {{InteractiveExample("CSS Demo: text-shadow")}} diff --git a/files/en-us/web/css/reference/properties/text-underline-position/index.md b/files/en-us/web/css/reference/properties/text-underline-position/index.md index a4ede973c4efea1..9fe0260a1647160 100644 --- a/files/en-us/web/css/reference/properties/text-underline-position/index.md +++ b/files/en-us/web/css/reference/properties/text-underline-position/index.md @@ -123,7 +123,7 @@ p { In this example we set both the paragraphs to have a thick underline. In the horizontal text we use `text-underline-position: under;` to put the underline below all the descenders. -In the text with a vertical [`writing-mode`](/en-US/docs/Web/CSS/Reference/Properties/writing-mode) set, we can then use values of `left` or `right` to make the underline appear on the left or right of the text as required. +In the text with a vertical {{cssxref("writing-mode")}} set, we can then use values of `left` or `right` to make the underline appear on the left or right of the text as required. The live example looks like this: diff --git a/files/en-us/web/css/reference/properties/text-wrap/index.md b/files/en-us/web/css/reference/properties/text-wrap/index.md index 5dddcd082f133ef..65fdc6592e6a872 100644 --- a/files/en-us/web/css/reference/properties/text-wrap/index.md +++ b/files/en-us/web/css/reference/properties/text-wrap/index.md @@ -65,8 +65,8 @@ text-wrap: stable; This property is a shorthand for the following CSS properties: -- [`text-wrap-mode`](/en-US/docs/Web/CSS/Reference/Properties/text-wrap-mode) -- [`text-wrap-style`](/en-US/docs/Web/CSS/Reference/Properties/text-wrap-style) +- {{cssxref("text-wrap-mode")}} +- {{cssxref("text-wrap-style")}} ## Syntax diff --git a/files/en-us/web/css/reference/properties/timeline-scope/index.md b/files/en-us/web/css/reference/properties/timeline-scope/index.md index 738f9f68ddac15c..ac1794a249c1a03 100644 --- a/files/en-us/web/css/reference/properties/timeline-scope/index.md +++ b/files/en-us/web/css/reference/properties/timeline-scope/index.md @@ -32,7 +32,7 @@ Allowed values for `timeline-scope` are: - : Specifies the name of an existing named timeline (i.e., declared using {{cssxref("scroll-timeline-name")}} or {{cssxref("view-timeline-name")}}) defined on a descendant element. This causes the timeline scope to be increased to the element that `timeline-scope` is set on and any of its descendants. > [!NOTE] - > [``](/en-US/docs/Web/CSS/Reference/Values/custom-ident) values must start with `--`, which helps to avoid name clashes with standard CSS keywords. + > {{cssxref("<dashed-ident>")}} values must start with `--`, which helps to avoid name clashes with standard CSS keywords. ## Formal definition @@ -144,7 +144,7 @@ Scroll the vertical bar on the pink area to see the square animate. ## See also -- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline) -- [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline), [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name) -- [`view-timeline`](/en-US/docs/Web/CSS/Reference/Properties/view-timeline), [`view-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/view-timeline-name) +- {{cssxref("animation-timeline")}} +- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-name")}} +- {{cssxref("view-timeline")}}, {{cssxref("view-timeline-name")}} - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) diff --git a/files/en-us/web/css/reference/properties/transform-origin/index.md b/files/en-us/web/css/reference/properties/transform-origin/index.md index 61343e33581cb4a..b4f3a1e691e3159 100644 --- a/files/en-us/web/css/reference/properties/transform-origin/index.md +++ b/files/en-us/web/css/reference/properties/transform-origin/index.md @@ -142,7 +142,7 @@ update(); crosshair.style.opacity = "1"; ``` -The transform origin is the point around which a transformation is applied. For example, the transform origin of the [`rotate()`](/en-US/docs/Web/CSS/Reference/Values/transform-function/rotate) function is the center of rotation. +The transform origin is the point around which a transformation is applied. For example, the transform origin of the {{cssxref("rotate()")}} function is the center of rotation. In effect, this property wraps a pair of translations around the element's other transformations. The first translation moves the transform origin to the true origin at (0,0). Then the other transformations are applied, and because the transform origin is at (0,0), those transformations act about the transform origin. Finally, the opposite translation is applied, moving the transform origin back to its original location. Consequently, this definition @@ -248,7 +248,7 @@ The keywords are convenience shorthands and match the following {{cssxref("<p {{CSSInfo}} > [!NOTE] -> The initial value of `transform-origin` is `0 0` for all SVG elements except for root `` elements and `` elements that are a direct child of a [foreignObject](/en-US/docs/Web/SVG/Reference/Element/foreignObject), and whose `transform-origin` is `50% 50%`, like other CSS elements. See the [SVG transform-origin](/en-US/docs/Web/SVG/Reference/Attribute/transform-origin) attribute for more information. +> The initial value of `transform-origin` is `0 0` for all SVG elements except for root `` elements and `` elements that are a direct child of a {{svgelement("foreignObject")}}, and whose `transform-origin` is `50% 50%`, like other CSS elements. See the [SVG transform-origin](/en-US/docs/Web/SVG/Reference/Attribute/transform-origin) attribute for more information. ## Formal syntax diff --git a/files/en-us/web/css/reference/properties/transition-behavior/index.md b/files/en-us/web/css/reference/properties/transition-behavior/index.md index 7f2b9dbd21caa45..a601acedad21321 100644 --- a/files/en-us/web/css/reference/properties/transition-behavior/index.md +++ b/files/en-us/web/css/reference/properties/transition-behavior/index.md @@ -146,14 +146,14 @@ html { } ``` -The two properties we want to animate are [`opacity`](/en-US/docs/Web/CSS/Reference/Properties/opacity) and [`transform`](/en-US/docs/Web/CSS/Reference/Properties/transform): we want the popover to fade in and out while growing and shrinking in the horizontal direction. We set a starting state for these properties on the default hidden state of the popover element (selected via `[popover]`), and an end state on the open state of the popover (selected via the [`:popover-open`](/en-US/docs/Web/CSS/Reference/Selectors/:popover-open) pseudo-class). We then set a [`transition`](/en-US/docs/Web/CSS/Reference/Properties/transition) property to animate between the two. +The two properties we want to animate are {{cssxref("opacity")}} and {{cssxref("transform")}}: we want the popover to fade in and out while growing and shrinking in the horizontal direction. We set a starting state for these properties on the default hidden state of the popover element (selected via `[popover]`), and an end state on the open state of the popover (selected via the [`:popover-open`](/en-US/docs/Web/CSS/Reference/Selectors/:popover-open) pseudo-class). We then set a {{cssxref("transition")}} property to animate between the two. Because the animated element is being promoted to the [top layer](/en-US/docs/Glossary/Top_layer) when shown and removed from the top layer when hidden — which also means that its hidden state has [`display: none`](/en-US/docs/Web/CSS/Reference/Properties/display) set on it — the following properties are added to the list of transitioned elements to get the animation working in both directions. In both cases, `transition-behavior: allow-discrete` is set in the shorthand to enable discrete animation. - `display`: Required so that the animated element is visible (set to `display: block`) throughout both the entry and exit animation. Without this, the exit animation would not be visible; in effect, the popover would just disappear. -- [`overlay`](/en-US/docs/Web/CSS/Reference/Properties/overlay): Required to make sure that the removal of the element from the top layer is deferred until the animation has been completed. This doesn't make a huge difference for basic animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. +- {{cssxref("overlay")}}: Required to make sure that the removal of the element from the top layer is deferred until the animation has been completed. This doesn't make a huge difference for basic animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. -In addition, a starting state for the animation is set inside the [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type. `@starting-style` allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear. +In addition, a starting state for the animation is set inside the {{cssxref("@starting-style")}} at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type. `@starting-style` allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear. #### Result @@ -176,7 +176,7 @@ The code renders as follows: ## See also -- [`overlay`](/en-US/docs/Web/CSS/Reference/Properties/overlay) -- [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) +- {{cssxref("overlay")}} +- {{cssxref("@starting-style")}} - [CSS transitions](/en-US/docs/Web/CSS/Guides/Transitions) module - [Four new CSS features for smooth entry and exit animations](https://developer.chrome.com/blog/entry-exit-animations/) on developer.chrome.com (2023) diff --git a/files/en-us/web/css/reference/properties/transition-property/index.md b/files/en-us/web/css/reference/properties/transition-property/index.md index 91c92056d62084c..668ec2adeeab0dc 100644 --- a/files/en-us/web/css/reference/properties/transition-property/index.md +++ b/files/en-us/web/css/reference/properties/transition-property/index.md @@ -101,7 +101,7 @@ transition-property: unset; ### Basic example -When the button is hovered or focused, it undergoes a one-second color transition; the `transition-property` is [`background-color`](/en-US/docs/Web/CSS/Reference/Properties/background-color). +When the button is hovered or focused, it undergoes a one-second color transition; the `transition-property` is {{cssxref("background-color")}}. #### HTML diff --git a/files/en-us/web/css/reference/properties/transition-timing-function/index.md b/files/en-us/web/css/reference/properties/transition-timing-function/index.md index d3064b4a381ee72..28ea3a48a961a81 100644 --- a/files/en-us/web/css/reference/properties/transition-timing-function/index.md +++ b/files/en-us/web/css/reference/properties/transition-timing-function/index.md @@ -298,7 +298,7 @@ const intervalID = setInterval(updateTransition, 10000); ## See also - [Using CSS transitions](/en-US/docs/Web/CSS/Guides/Transitions/Using) -- [``](/en-US/docs/Web/CSS/Reference/Values/easing-function) +- {{cssxref("<easing-function>")}} - [CSS easing functions](/en-US/docs/Web/CSS/Guides/Easing_functions) module - {{cssxref('transition')}} - {{cssxref('transition-property')}} diff --git a/files/en-us/web/css/reference/properties/transition/index.md b/files/en-us/web/css/reference/properties/transition/index.md index 8befba5bfd11e94..a774120bd1e7c0c 100644 --- a/files/en-us/web/css/reference/properties/transition/index.md +++ b/files/en-us/web/css/reference/properties/transition/index.md @@ -66,11 +66,11 @@ Transitions enable you to define the transition between two states of an element This property is a shorthand for the following CSS properties: -- [`transition-behavior`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior) -- [`transition-delay`](/en-US/docs/Web/CSS/Reference/Properties/transition-delay) -- [`transition-duration`](/en-US/docs/Web/CSS/Reference/Properties/transition-duration) -- [`transition-property`](/en-US/docs/Web/CSS/Reference/Properties/transition-property) -- [`transition-timing-function`](/en-US/docs/Web/CSS/Reference/Properties/transition-timing-function) +- {{cssxref("transition-behavior")}} +- {{cssxref("transition-delay")}} +- {{cssxref("transition-duration")}} +- {{cssxref("transition-property")}} +- {{cssxref("transition-timing-function")}} ## Syntax