diff --git a/files/en-us/web/css/guides/animations/index.md b/files/en-us/web/css/guides/animations/index.md index 05e5f4adb076be3..b36b99e62feb5d8 100644 --- a/files/en-us/web/css/guides/animations/index.md +++ b/files/en-us/web/css/guides/animations/index.md @@ -280,7 +280,7 @@ All animations, even those with 0 seconds duration, throw animation events. ## Related concepts - {{cssxref("will-change")}} CSS property -- [``](/en-US/docs/Web/CSS/Reference/Values/easing-function) data type +- {{cssxref("easing-function")}} data type - [`prefers-reduced-motion`](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) media query - {{glossary("Bezier curve")}} glossary term diff --git a/files/en-us/web/css/guides/borders_and_box_decorations/index.md b/files/en-us/web/css/guides/borders_and_box_decorations/index.md index 270ad9f6318edbf..560b5b918ce50c3 100644 --- a/files/en-us/web/css/guides/borders_and_box_decorations/index.md +++ b/files/en-us/web/css/guides/borders_and_box_decorations/index.md @@ -219,10 +219,10 @@ The CSS borders and box decorations module level 4 also introduces the `border-s - {{cssxref("box-sizing")}} property - {{cssxref("box-decoration-break")}} property - {{cssxref("text-shadow")}} property -- {{cssxref("url_value", "<url>")}} CSS type -- [``](/en-US/docs/Web/CSS/Reference/Properties/color) data type -- [``](/en-US/docs/Web/CSS/Reference/Values/image) data type -- [``](/en-US/docs/Web/CSS/Reference/Properties/position) data type +- {{cssxref("url_value", "<url>")}} data type +- {{cssxref("<color>")}} data type +- {{cssxref("image")}} data type +- {{cssxref("<position>")}} data type - [`currentColor`](/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword) keyword [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module diff --git a/files/en-us/web/css/guides/box_model/index.md b/files/en-us/web/css/guides/box_model/index.md index 205bb2cae4a29ed..cca9e217a6f0593 100644 --- a/files/en-us/web/css/guides/box_model/index.md +++ b/files/en-us/web/css/guides/box_model/index.md @@ -35,7 +35,7 @@ The CSS box model module defines physical (or "page relative") properties such a ### Data types -- [``](/en-US/docs/Web/CSS/Reference/Values/box-edge) +- {{cssxref("box-edge")}} - [``](/en-US/docs/Web/CSS/Reference/Values/box-edge#visual-box) - [``](/en-US/docs/Web/CSS/Reference/Values/box-edge#layout-box) - [``](/en-US/docs/Web/CSS/Reference/Values/box-edge#paint-box) diff --git a/files/en-us/web/css/guides/cascade/inheritance/index.md b/files/en-us/web/css/guides/cascade/inheritance/index.md index 85d367175f3c2e8..378d2de331602b9 100644 --- a/files/en-us/web/css/guides/cascade/inheritance/index.md +++ b/files/en-us/web/css/guides/cascade/inheritance/index.md @@ -57,7 +57,7 @@ The words "emphasized text" will not have another border (since the initial valu ## Notes -The [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit) keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties. +The {{cssxref("inherit")}} keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties. You can control inheritance for all properties at once using the {{cssxref("all")}} shorthand property, which applies its value to all properties. For example: @@ -99,7 +99,7 @@ We can see here another border around the word "emphasized text". ## See also -- CSS values for controlling inheritance: [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer), and [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset) +- CSS values for controlling inheritance: {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}} - [CSS cascading and inheritance](/en-US/docs/Web/CSS/Guides/Cascade) module - [CSS error handling](/en-US/docs/Web/CSS/Guides/Syntax/Error_handling) - [Introduction to the CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction) diff --git a/files/en-us/web/css/guides/cascade/introduction/index.md b/files/en-us/web/css/guides/cascade/introduction/index.md index 9ff3a653990cf28..4f00990d0cfc585 100644 --- a/files/en-us/web/css/guides/cascade/introduction/index.md +++ b/files/en-us/web/css/guides/cascade/introduction/index.md @@ -39,7 +39,7 @@ In most browsers, the user (or reader) of the website can choose to override sty ### Cascade layers -The cascade order is based on origin type. The cascade within each origin type is based on the declaration order of [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer) within that type. For all origins - user-agent, author, or user - styles can be declared within or outside of named or anonymous layers. When declared using [`layer`, `layer()`](/en-US/docs/Web/CSS/Reference/At-rules/@import) or [`@layer`](/en-US/docs/Web/CSS/Reference/At-rules/@layer), styles are placed into the specified named layer, or into an anonymous layer if no name is provided. Styles declared outside of a layer are treated as being part of an anonymous last declared layer. +The cascade order is based on origin type. The cascade within each origin type is based on the declaration order of [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer) within that type. For all origins - user-agent, author, or user - styles can be declared within or outside of named or anonymous layers. When declared using [`layer`, `layer()`](/en-US/docs/Web/CSS/Reference/At-rules/@import) or {{cssxref("@layer")}}, styles are placed into the specified named layer, or into an anonymous layer if no name is provided. Styles declared outside of a layer are treated as being part of an anonymous last declared layer. Let's take a look at cascading origin type before diving into cascade layers within each origin type. diff --git a/files/en-us/web/css/guides/cascade/property_value_processing/index.md b/files/en-us/web/css/guides/cascade/property_value_processing/index.md index 5f58a3de644b506..408da4b066ac2e6 100644 --- a/files/en-us/web/css/guides/cascade/property_value_processing/index.md +++ b/files/en-us/web/css/guides/cascade/property_value_processing/index.md @@ -77,7 +77,7 @@ This involves: As a result of defaulting, every property is guaranteed to have a [specified value](#specified_value). -Note that explicit defaulting keywords ([`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer)) are also resolved to their corresponding values to determine the [specified value](#specified_value). +Note that explicit defaulting keywords ({{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}) are also resolved to their corresponding values to determine the [specified value](#specified_value). ## Processing stages @@ -282,6 +282,6 @@ CSS 2.0 defined _computed value_ as the last step in a property's calculation. C ## See also -- CSS values for controlling inheritance: [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer), and [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset) +- CSS values for controlling inheritance: {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}} - [CSS cascading and inheritance](/en-US/docs/Web/CSS/Guides/Cascade) module - [CSS syntax](/en-US/docs/Web/CSS/Guides/Syntax) module diff --git a/files/en-us/web/css/guides/cascade/specificity/index.md b/files/en-us/web/css/guides/cascade/specificity/index.md index 99dcfec289e6be4..53a084b9da111cf 100644 --- a/files/en-us/web/css/guides/cascade/specificity/index.md +++ b/files/en-us/web/css/guides/cascade/specificity/index.md @@ -28,13 +28,13 @@ The selector weight categories are listed here in the order of decreasing specif - TYPE column - : Includes [type selectors](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors), such as `p`, `h1`, and `td`, and pseudo-elements like `::before`, `::placeholder`, and all other selectors with double-colon notation. For each type or pseudo-element in a matching selector, add 0-0-1 to the weight value. - No value - - : The universal selector ({{CSSxRef("Universal_selectors", "*")}}) and the pseudo-class {{CSSxRef(":where", ":where()")}} and its parameters aren't counted when calculating the weight so their value is 0-0-0, but they do match elements. These selectors do not impact the specificity weight value. + - : The universal selector ({{CSSxRef("Universal_selectors", "*")}}) and the pseudo-class {{cssxref(":where()")}} and its parameters aren't counted when calculating the weight so their value is 0-0-0, but they do match elements. These selectors do not impact the specificity weight value. Combinators, such as {{CSSxRef("Next-sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("Subsequent-sibling_combinator", "~")}}, [" "](/en-US/docs/Web/CSS/Reference/Selectors/Descendant_combinator), and {{CSSxRef("Column_combinator", "||")}}, may make a selector more specific in what is selected but they don't add any value to the specificity weight. -The `&` nesting combinator doesn't add specificity weight, but nested rules do. In terms of specificity, and functionality, nesting is very similar to the {{CSSxRef(":is", ":is()")}} pseudo-class. +The `&` nesting combinator doesn't add specificity weight, but nested rules do. In terms of specificity, and functionality, nesting is very similar to the {{cssxref(":is()")}} pseudo-class. -Like nesting, the {{CSSxRef(":is", ":is()")}}, {{CSSxRef(":has", ":has()")}}, and negation ({{CSSxRef(":not", ":not()")}}) pseudo-classes themselves add no weight. The parameters in these selectors, however, do. The specificity weight of each comes from the selector parameter in the list of selectors with the highest specificity. Similarly, with nested selectors, the specificity weight added by the nested selector component is the selector in the comma-separated list of nested selectors with the highest specificity. +Like nesting, the {{cssxref(":is()")}}, {{cssxref(":has()")}}, and negation ({{cssxref(":not()")}}) pseudo-classes themselves add no weight. The parameters in these selectors, however, do. The specificity weight of each comes from the selector parameter in the list of selectors with the highest specificity. Similarly, with nested selectors, the specificity weight added by the nested selector component is the selector in the comma-separated list of nested selectors with the highest specificity. The [`:not()`, `:is()`, `:has()` and CSS nesting exceptions](#the_is_not_has_and_css_nesting_exceptions) are discussed below. @@ -122,7 +122,7 @@ input.myClass { ### The `:is()`, `:not()`, `:has()` and CSS nesting exceptions -The matches-any pseudo-class {{CSSxRef(":is", ":is()")}}, the relational pseudo-class {{CSSxRef(":has", ":has()")}}, and the negation pseudo-class {{CSSxRef(":not", ":not()")}} are _not_ considered as pseudo-classes in the specificity weight calculation. They themselves don't add any weight to the specificity equation. However, the selector parameters passed into the pseudo-class parenthesis are part of the specificity algorithm; the weight of the matches-any and negation pseudo-class in the specificity value calculation is the weight of the parameter's [weight](#selector_weight_categories). +The matches-any pseudo-class {{cssxref(":is()")}}, the relational pseudo-class {{cssxref(":has()")}}, and the negation pseudo-class {{cssxref(":not()")}} are _not_ considered as pseudo-classes in the specificity weight calculation. They themselves don't add any weight to the specificity equation. However, the selector parameters passed into the pseudo-class parenthesis are part of the specificity algorithm; the weight of the matches-any and negation pseudo-class in the specificity value calculation is the weight of the parameter's [weight](#selector_weight_categories). ```css p { @@ -223,7 +223,7 @@ Instead of using `!important` to override foreign CSS (from external libraries, ### The `:where()` exception -The specificity-adjustment pseudo-class {{CSSxRef(":where", ":where()")}} always has its specificity replaced with zero, `0-0-0`. It enables making CSS selectors very specific in what element is targeted without any increase to specificity. +The specificity-adjustment pseudo-class {{cssxref(":where()")}} always has its specificity replaced with zero, `0-0-0`. It enables making CSS selectors very specific in what element is targeted without any increase to specificity. In creating third-party CSS to be used by developers who don't have access to edit your CSS, it's considered a good practice to create CSS with the lowest possible specificity. For example, if your theme includes the following CSS: diff --git a/files/en-us/web/css/guides/cascading_variables/index.md b/files/en-us/web/css/guides/cascading_variables/index.md index c031428f4fe84e2..8e27bd29ad236aa 100644 --- a/files/en-us/web/css/guides/cascading_variables/index.md +++ b/files/en-us/web/css/guides/cascading_variables/index.md @@ -118,7 +118,7 @@ As the slider's value changes from 0 up to 360, the value of the `--hue` [custom ## Related concepts - [CSS Properties and Values API](/en-US/docs/Web/CSS/Guides/Properties_and_values_API) module - - [`@property`](/en-US/docs/Web/CSS/Reference/At-rules/@property) at-rule + - {{cssxref("@property")}} at-rule - [`CSS.registerProperty()`](/en-US/docs/Web/API/CSS/registerProperty_static) method ## Specifications diff --git a/files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md b/files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md index 75ebb614101de6d..0bc99e966996a4f 100644 --- a/files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md +++ b/files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md @@ -6,7 +6,7 @@ page-type: guide sidebar: cssref --- -**Custom properties** (sometimes referred to as **CSS variables** or **cascading variables**) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the {{cssxref("@property")}} at-rule or by [custom property syntax](/en-US/docs/Web/CSS/Reference/Properties/--*) (e.g., **`--primary-color: blue;`**). Custom properties are accessed using the CSS {{cssxref("var", "var()")}} function (e.g., **`color: var(--primary-color);`**). +**Custom properties** (sometimes referred to as **CSS variables** or **cascading variables**) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the {{cssxref("@property")}} at-rule or by [custom property syntax](/en-US/docs/Web/CSS/Reference/Properties/--*) (e.g., **`--primary-color: blue;`**). Custom properties are accessed using the CSS {{cssxref("var()")}} function (e.g., **`color: var(--primary-color);`**). Complex websites have very large amounts of CSS, and this often results in a lot of repeated CSS values. For example, it's common to see the same color used in hundreds of different places in stylesheets. Changing a color that's been duplicated in many places requires a search and replace across all rules and CSS files. Custom properties allow a value to be defined in one place, then referenced in multiple other places so that it's easier to work with. Another benefit is readability and semantics. For example, `--main-text-color` is easier to understand than the hexadecimal color `#00ff00`, especially if the color is used in different contexts. @@ -15,8 +15,8 @@ The {{cssxref("@property")}} at-rule allows more control over the custom propert > [!NOTE] > Variables do not work inside media queries and container queries. -> You can use the {{cssxref("var", "var()")}} function in any part of a value in any property on an element. -> You cannot use {{cssxref("var", "var()")}} for property names, selectors, or anything aside from property values, which means you can't use it in a media query or container query. +> You can use the {{cssxref("var()")}} function in any part of a value in any property on an element. +> You cannot use {{cssxref("var()")}} for property names, selectors, or anything aside from property values, which means you can't use it in a media query or container query. ## Declaring custom properties @@ -27,7 +27,7 @@ The following sections describe how to use these two methods. A custom property prefixed with two dashes begins with `--`, followed by the property name (e.g., `--my-property`), and a property value that can be any [valid CSS value](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units). Like any other property, this is written inside a ruleset. -The following example shows how to create a custom property `--main-bg-color` and uses a [``](/en-US/docs/Web/CSS/Reference/Values/named-color) value of `brown`: +The following example shows how to create a custom property `--main-bg-color` and uses a {{cssxref("named-color")}} value of `brown`: ```css section { @@ -52,7 +52,7 @@ This doesn't always have to be the case: you maybe have a good reason for limiti ### Using the `@property` at-rule The {{cssxref("@property")}} at-rule allows you to be more expressive with the definition of a custom property with the ability to associate a type with the property, set default values, and control inheritance. -The following example creates a custom property called `--logo-color` which expects a [``](/en-US/docs/Web/CSS/Reference/Values/color_value): +The following example creates a custom property called `--logo-color` which expects a {{cssxref("<color>")}}: ```css @property --logo-color { @@ -67,7 +67,7 @@ You can read about how this works in the [CSS Properties and Values API](/en-US/ ### Referencing custom properties with `var()` -Regardless of which method you choose to define a custom property, you use them by referencing the property in a {{cssxref("var", "var()")}} function in place of a standard property value: +Regardless of which method you choose to define a custom property, you use them by referencing the property in a {{cssxref("var()")}} function in place of a standard property value: ```css details { @@ -293,7 +293,7 @@ The property is only set for the matching selector and its descendants. The `@property` at-rule lets you explicitly state whether the property inherits or not. The following example creates a custom property using the `@property` at-rule. -Inheritance is disabled, there's a [``](/en-US/docs/Web/CSS/Reference/Values/color_value) data type defined, and an initial value of `teal`. +Inheritance is disabled, there's a {{cssxref("<color>")}} data type defined, and an initial value of `teal`. The parent element sets `--box-color` to a value of `green` and uses `--box-color` as a value for its background color. The child element also uses `background-color: var(--box-color)`, and we would expect it to have the color `green` if inheritance was enabled (or if it was defined using the double dash syntax). diff --git a/files/en-us/web/css/guides/colors/applying_color/index.md b/files/en-us/web/css/guides/colors/applying_color/index.md index 2239c1d2b700b8f..be9ec2acf391488 100644 --- a/files/en-us/web/css/guides/colors/applying_color/index.md +++ b/files/en-us/web/css/guides/colors/applying_color/index.md @@ -190,7 +190,7 @@ CSS isn't the only web technology that supports color. Other examples include: ## See also -- [``](/en-US/docs/Web/CSS/Reference/Values/color_value) data type +- {{cssxref("<color>")}} data type - [CSS color values](/en-US/docs/Web/CSS/Guides/Colors/Color_values) guide - [Using color wisely](/en-US/docs/Web/CSS/Guides/Colors/Using_color_wisely) - [CSS color module](/en-US/docs/Web/CSS/Guides/Colors) diff --git a/files/en-us/web/css/guides/colors/color_mixer/index.md b/files/en-us/web/css/guides/colors/color_mixer/index.md index d796eb4fbb76029..a56bd14abfeaebb 100644 --- a/files/en-us/web/css/guides/colors/color_mixer/index.md +++ b/files/en-us/web/css/guides/colors/color_mixer/index.md @@ -887,5 +887,5 @@ init(); - {{CSSXref("<color>")}} - {{CSSXref("<color-interpolation-method>")}} -- {{cssxref("<hue>")}} +- {{cssxref("hue")}} - [CSS relative colors](/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors) diff --git a/files/en-us/web/css/guides/colors/color_values/index.md b/files/en-us/web/css/guides/colors/color_values/index.md index 4c6c203cd697e02..9adffb4c2316d4d 100644 --- a/files/en-us/web/css/guides/colors/color_values/index.md +++ b/files/en-us/web/css/guides/colors/color_values/index.md @@ -141,20 +141,20 @@ See the {{cssxref("color_value/rgb", "rgb()")}} color function for more informat ## Color functions with a hue component -The color functions that have a [``](/en-US/docs/Web/CSS/Reference/Values/hue) component — an [``](/en-US/docs/Web/CSS/Reference/Values/angle) from that color model's {{glossary("color wheel")}} — include the `srgb` color functions `hsl()` and `hwb()`, CIElab's `lch()` function, and OKLab's `oklch()` color function. These color functions are more intuitive as the hue allows us to tell the difference or similarity between colors like red, orange, yellow, green, blue, etc. +The color functions that have a {{cssxref("hue")}} component — an {{cssxref("angle")}} from that color model's {{glossary("color wheel")}} — include the `srgb` color functions `hsl()` and `hwb()`, CIElab's `lch()` function, and OKLab's `oklch()` color function. These color functions are more intuitive as the hue allows us to tell the difference or similarity between colors like red, orange, yellow, green, blue, etc. ### HSL functional notation The `hsl()` CSS color function was the first hue-based color function to be supported in browsers. `hsl()` is more intuitive than `rgb()` — it is easier to determine the effect of varying hue (`h`), saturation (`s`), and lightness (`l`) values than it is to declare specific colors via red, green, and blue channel values. In addition, HSL is similar to the HSB (hue, saturation, and brightness) color picker in Photoshop, which made it immediately familiar to many people when first supported. -The `hsl()` and `hwb()` sRGB color functions are both cylindrical. Hue defines the color as an [``](/en-US/docs/Web/CSS/Reference/Values/angle) on a circular {{glossary("color wheel")}}. The diagram below shows an HSL color cylinder. Saturation is a percentage that defines how far the color is along a scale between completely grayscale and having the maximum possible amount of the given hue. +The `hsl()` and `hwb()` sRGB color functions are both cylindrical. Hue defines the color as an {{cssxref("angle")}} on a circular {{glossary("color wheel")}}. The diagram below shows an HSL color cylinder. Saturation is a percentage that defines how far the color is along a scale between completely grayscale and having the maximum possible amount of the given hue. As the value of lightness increases, the color transitions from the darkest to the lightest possible color (from black to white). ![HSL color cylinder](640px-hsl_color_solid_cylinder.png) Image courtesy of user [SharkD](https://commons.wikimedia.org/wiki/User:SharkD) on [Wikipedia](https://en.wikipedia.org/), distributed under the [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/) license. -The value of the hue (`H`) component of an HSL (or HWB) color is an angle that starts at 0° as red, then moves through yellow, green, cyan, blue, and magenta, before ending up back at red again at 360°. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (`deg`), radians (`rad`), gradians (`grad`), or turns (`turn`). The hue value identifies what the base shade of the color is, but it doesn't control how vivid or dull, or how light or dark the color is. +The value of the hue (`H`) component of an HSL (or HWB) color is an angle that starts at 0° as red, then moves through yellow, green, cyan, blue, and magenta, before ending up back at red again at 360°. The value can be specified in any {{cssxref("angle")}} unit supported by CSS, including degrees (`deg`), radians (`rad`), gradians (`grad`), or turns (`turn`). The hue value identifies what the base shade of the color is, but it doesn't control how vivid or dull, or how light or dark the color is. The saturation (`S`) component of the color specifies the percentage of the final color comprised of the specified hue, with 100% being fully saturated and 0% being a complete lack of color (greyscale). The lightness (`L`) component specifies how light the color is along a sliding scale between completely black (`0%`) and completely white (`100%`). You can also optionally include an alpha channel, preceded by a slash (`/`) to make the color less than 100% opaque. diff --git a/files/en-us/web/css/guides/colors/index.md b/files/en-us/web/css/guides/colors/index.md index 34e55697c6e1214..6557ee003cec809 100644 --- a/files/en-us/web/css/guides/colors/index.md +++ b/files/en-us/web/css/guides/colors/index.md @@ -120,8 +120,8 @@ The CSS color module also introduces the `CSSColorProfileRule` interface. Curren - SVG [`color`](/en-US/docs/Web/SVG/Reference/Attribute/color) attribute - {{glossary("Color wheel")}} glossary term - {{glossary("Interpolation")}} glossary term -- The [`@font-palette-values`](/en-US/docs/Web/CSS/Reference/At-rules/@font-palette-values) at-rule [`override-colors`](/en-US/docs/Web/CSS/Reference/At-rules/@font-palette-values/override-colors) descriptor -- The [`@color-profile`](/en-US/docs/Web/CSS/Reference/At-rules/@color-profile) at-rule +- The {{cssxref("@font-palette-values")}} at-rule [`override-colors`](/en-US/docs/Web/CSS/Reference/At-rules/@font-palette-values/override-colors) descriptor +- The {{cssxref("@color-profile")}} at-rule - The [`color-gamut`](/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut) @media feature - The [`forced-colors`](/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors) @media feature @@ -132,7 +132,7 @@ The CSS color module also introduces the `CSSColorProfileRule` interface. Curren ## See also - [CSS color adjustment](/en-US/docs/Web/CSS/Guides/Color_adjustment) module and {{cssxref("print-color-adjust")}} -- [``](/en-US/docs/Web/CSS/Reference/Values/gradient) defined in [CSS images](/en-US/docs/Web/CSS/Guides/Images) module +- {{cssxref("gradient")}} defined in [CSS images](/en-US/docs/Web/CSS/Guides/Images) module - The [`VideoColorSpace`](/en-US/docs/Web/API/VideoColorSpace) interface - [``](/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) SVG element - [Canvas API: applying styles and colors](/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#colors) diff --git a/files/en-us/web/css/guides/colors/using_relative_colors/index.md b/files/en-us/web/css/guides/colors/using_relative_colors/index.md index ec2da21190b6daf..3e6acfbe1588e27 100644 --- a/files/en-us/web/css/guides/colors/using_relative_colors/index.md +++ b/files/en-us/web/css/guides/colors/using_relative_colors/index.md @@ -339,7 +339,7 @@ The output is as follows: To make channel value calculations work in relative colors, all origin color channel values resolve to appropriate {{cssxref("<number>")}} values. For example, in the `lch()` examples above, we are calculating new lightness values by adding or subtracting numbers from the origin color's `l` channel value. If we tried to do `calc(l + 20%)`, that would result in an invalid color — `l` is a `` and cannot have a {{cssxref("<percentage>")}} added to it. - Channel values originally specified as a `` resolve to a `` appropriate for the output color function. -- Channel values originally specified as a {{cssxref("<hue>")}} angle resolve to a number of degrees in a range of `0` to `360`, inclusive. +- Channel values originally specified as a {{cssxref("hue")}} angle resolve to a number of degrees in a range of `0` to `360`, inclusive. Check the different [color function pages](/en-US/docs/Web/CSS/Guides/Colors#functions) for the specifics of what their origin channel values resolve to. @@ -364,7 +364,7 @@ For example: This example allows you to choose a base color and a color palette type. The browser will then show an appropriate palette of colors based on the chosen base color. The color palette choices are as follows: -- **Complementary**: Includes two colors that are at opposite sides of a color wheel, or to put it another way, _opposite hues_ (see the {{cssxref("<hue>")}} data type for more information on hues and color wheels). The two colors are defined as a base color, and the base color with hue channel +180 degrees. +- **Complementary**: Includes two colors that are at opposite sides of a color wheel, or to put it another way, _opposite hues_ (see the {{cssxref("hue")}} data type for more information on hues and color wheels). The two colors are defined as a base color, and the base color with hue channel +180 degrees. - **Triadic**: Includes three colors equal distances apart around the color wheel. The three colors are defined as a base color, base color with hue channel -120 degrees, and base color with hue channel +120 degrees. - **Tetradic**: Includes four colors equal distances apart around the color wheel. The four colors are defined as a base color, and base color with hue channel +90, +180, and +270 degrees. - **Monochrome**: Includes multiple colors with the same hue but varying lightness values. In our example we've defined five colors in a monochrome palette — base color, and base color with lightness channel -20, -10, +10, and +20. diff --git a/files/en-us/web/css/guides/conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/guides/conditional_rules/using_feature_queries/index.md index ba6dc37f1ff5a7a..e8cfd4c718e188e 100644 --- a/files/en-us/web/css/guides/conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/guides/conditional_rules/using_feature_queries/index.md @@ -7,11 +7,11 @@ sidebar: cssref **Feature queries** are conditional group rules that test whether the user agent supports or doesn't support one or more CSS features, such as CSS properties and property values. Feature queries give web developers a way to test to see if a browser has support for a certain feature, and then provide CSS that will only run based on the result of that test. In this guide, you will learn how to implement progressive enhancement using feature queries. -Feature queries are created using the CSS at-rule [`@supports`](/en-US/docs/Web/CSS/Reference/At-rules/@supports) (or the `supports()` function within [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) at-rules). +Feature queries are created using the CSS at-rule {{cssxref("@supports")}} (or the `supports()` function within {{cssxref("@import")}} at-rules). ## Syntax -CSS feature queries are part of the [CSS conditional rules](/en-US/docs/Web/CSS/Guides/Conditional_rules) module, which also defines the media query [`@media`](/en-US/docs/Web/CSS/Reference/At-rules/@media) at-rule. Feature queries behave similarly to [media queries](/en-US/docs/Web/CSS/Guides/Media_queries/Using). The difference is that with a media query, you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for CSS features. +CSS feature queries are part of the [CSS conditional rules](/en-US/docs/Web/CSS/Guides/Conditional_rules) module, which also defines the media query {{cssxref("@media")}} at-rule. Feature queries behave similarly to [media queries](/en-US/docs/Web/CSS/Guides/Media_queries/Using). The difference is that with a media query, you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for CSS features. A feature query consists of the `@supports` at-rule followed by the support condition or a `supports()` function and declaration parameter within an `@import` at-rule declaration: diff --git a/files/en-us/web/css/guides/containment/container_size_and_style_queries/index.md b/files/en-us/web/css/guides/containment/container_size_and_style_queries/index.md index 37b12a75bc27479..2e5cfd877a4b6fe 100644 --- a/files/en-us/web/css/guides/containment/container_size_and_style_queries/index.md +++ b/files/en-us/web/css/guides/containment/container_size_and_style_queries/index.md @@ -52,7 +52,7 @@ Elements are declared as _size query containers_ by setting their {{cssxref("con Declaring size query containers adds [containment](/en-US/docs/Web/CSS/Guides/Containment/Using) to them. This is a performance necessity — querying the size of every element in the DOM, all the time, would be bad for performance and user experience. Additionally, if a descendant style changed the size of the container element, an infinite loop could occur. -In a container size query, the `` includes one or more ``s. Each size query includes a size feature name, a comparison operator, and a value. The size features that can be queried are limited to `width`, `height`, `inline-size`, `block-size`, `aspect-ratio`, and `orientation`. The boolean syntax and logic combining one or more ``s is the same as for [`@media`](/en-US/docs/Web/CSS/Reference/At-rules/@media) size feature queries. +In a container size query, the `` includes one or more ``s. Each size query includes a size feature name, a comparison operator, and a value. The size features that can be queried are limited to `width`, `height`, `inline-size`, `block-size`, `aspect-ratio`, and `orientation`. The boolean syntax and logic combining one or more ``s is the same as for {{cssxref("@media")}} size feature queries. ```css form { diff --git a/files/en-us/web/css/guides/counter_styles/index.md b/files/en-us/web/css/guides/counter_styles/index.md index b2bfc52f48cb377..76c4e50c3202719 100644 --- a/files/en-us/web/css/guides/counter_styles/index.md +++ b/files/en-us/web/css/guides/counter_styles/index.md @@ -19,7 +19,7 @@ No properties are defined in this module ### Functions -- {{cssxref("symbols", "symbols()")}} +- {{cssxref("symbols()")}} ### Data types @@ -59,8 +59,8 @@ No properties are defined in this module - {{cssxref("counter-set")}} property - {{cssxref("list-style-type")}} property - {{cssxref("list-style")}} shorthand property -- {{cssxref("counter", "counter()")}} function -- {{cssxref("counters", "counters()")}} function +- {{cssxref("counter()")}} function +- {{cssxref("counters()")}} function [CSS pseudo-elements](/en-US/docs/Web/CSS/Guides/Pseudo-elements) module: diff --git a/files/en-us/web/css/guides/counter_styles/using_counters/index.md b/files/en-us/web/css/guides/counter_styles/using_counters/index.md index 445886e5e26cecc..99ba28b5ddad704 100644 --- a/files/en-us/web/css/guides/counter_styles/using_counters/index.md +++ b/files/en-us/web/css/guides/counter_styles/using_counters/index.md @@ -23,7 +23,7 @@ You can define your own named counters, and you can also manipulate the `list-it To use a counter it must first be initialized to a value with the {{cssxref("counter-reset")}} property. The counter's value can be increased or decreased using the {{cssxref("counter-increment")}} property and can be directly set to a specific value using the {{cssxref("counter-set")}} property. -The current value of a counter is displayed using the {{cssxref("counter", "counter()")}} or {{cssxref("counters", "counters()")}} function, typically within a [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) {{CSSxRef("content")}} property. +The current value of a counter is displayed using the {{cssxref("counter()")}} or {{cssxref("counters()")}} function, typically within a [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) {{CSSxRef("content")}} property. Counters can only be set, reset, or incremented in elements that generate boxes. For example, if an element is set to `display: none` then any counter operation on that element will be ignored. @@ -71,7 +71,7 @@ The counter's name must not be `none`, `inherit`, or `initial`; otherwise the de ### Displaying a counter -The value of a counter can be displayed using either the {{cssxref("counter", "counter()")}} or {{cssxref("counters", "counters()")}} function in a {{cssxref("content")}} property. +The value of a counter can be displayed using either the {{cssxref("counter()")}} or {{cssxref("counters()")}} function in a {{cssxref("content")}} property. For example, the following declaration uses `counter()` to prefix each `h3` heading with the text `Section :`, where `` is the value of the count in decimal (the default display style): @@ -86,7 +86,7 @@ h3::before { } ``` -The {{cssxref("counter", "counter()")}} function is used when the numbering of nesting levels does not include the context of parent levels. +The {{cssxref("counter()")}} function is used when the numbering of nesting levels does not include the context of parent levels. For example, here each nested level restarts from one: ```plain @@ -100,7 +100,7 @@ For example, here each nested level restarts from one: 3 Three ``` -The {{cssxref("counters", "counters()")}} function is used when the count for nested levels must include the count from parent levels. +The {{cssxref("counters()")}} function is used when the count for nested levels must include the count from parent levels. For example, you might use this to lay out sections as shown: ```plain @@ -114,10 +114,10 @@ For example, you might use this to lay out sections as shown: 3 Three ``` -The {{cssxref("counter", "counter()")}} function has two forms: `counter()` and `counter(, )`. +The {{cssxref("counter()")}} function has two forms: `counter()` and `counter(, )`. The generated text is the value of the innermost counter of the given name in scope at the pseudo-element. -The {{cssxref("counters", "counters()")}} function also has two forms: `counters(, )` and `counters(, , )`. +The {{cssxref("counters()")}} function also has two forms: `counters(, )` and `counters(, , )`. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string (``). The counter is rendered in the specified `` for both methods (`decimal` by default). @@ -153,7 +153,7 @@ Each element or pseudo-element has a set of counters in the scope of that elemen When an element declares a counter, the counter is nested inside the counter with the same name received from the parent. If the parent doesn't have a counter with the same name then the counter is added to the element's counters set as it is. A counter with the same name received from the previous sibling is removed from the counters set. -The {{cssxref("counter", "counter()")}} function retrieves the innermost counter with the provided name. And the {{cssxref("counters", "counters()")}} function retrieves the entire counter tree with the given name. +The {{cssxref("counter()")}} function retrieves the innermost counter with the provided name. And the {{cssxref("counters()")}} function retrieves the entire counter tree with the given name. In the following example, we are demoing an inherited counter named `primary` and a sibling counter named `secondary`. All the `
` elements display their counters using the `counters()` function. Note that all the counters have been created using `counter-reset` property, and none of the counters have been incremented. @@ -408,7 +408,7 @@ a[href]:empty::after { ### Example of a nested counter A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. -Using the {{cssxref("counters", "counters()")}} function, separating text can be inserted between different levels of nested counters. +Using the {{cssxref("counters()")}} function, separating text can be inserted between different levels of nested counters. #### CSS diff --git a/files/en-us/web/css/guides/custom_highlight_api/index.md b/files/en-us/web/css/guides/custom_highlight_api/index.md index 3f5dcb2c6b7fa5a..3f22c5a84e0271e 100644 --- a/files/en-us/web/css/guides/custom_highlight_api/index.md +++ b/files/en-us/web/css/guides/custom_highlight_api/index.md @@ -13,7 +13,7 @@ The CSS Custom Highlight API extends the concept of other highlight pseudo-eleme ## Custom highlight API in action -To enable styling text ranges on a webpage using the CSS Custom Highlight API, you create a {{domxref("Range")}} object, then a {{domxref("Highlight")}} object for the range. After registering the highlight using the {{domxref("HighlightRegistry.set()")}} method, you can then select the range using the {{cssxref("::highlight", "::highlight()")}} pseudo-element. The name defined in the `set()` method is used as the parameter of the `::highlight()` pseudo-element selector to select that range.The range selected by the `::highlight()` pseudo-element can be styled using a [limited number of properties](/en-US/docs/Web/CSS/Reference/Selectors/::highlight#allowable_properties). +To enable styling text ranges on a webpage using the CSS Custom Highlight API, you create a {{domxref("Range")}} object, then a {{domxref("Highlight")}} object for the range. After registering the highlight using the {{domxref("HighlightRegistry.set()")}} method, you can then select the range using the {{cssxref("::highlight()")}} pseudo-element. The name defined in the `set()` method is used as the parameter of the `::highlight()` pseudo-element selector to select that range.The range selected by the `::highlight()` pseudo-element can be styled using a [limited number of properties](/en-US/docs/Web/CSS/Reference/Selectors/::highlight#allowable_properties). ```html-nolint hidden

Directions

diff --git a/files/en-us/web/css/guides/filter_effects/index.md b/files/en-us/web/css/guides/filter_effects/index.md index 9990871b04a2b29..5920e4c87550de4 100644 --- a/files/en-us/web/css/guides/filter_effects/index.md +++ b/files/en-us/web/css/guides/filter_effects/index.md @@ -264,8 +264,8 @@ function sepia() { ## Related concepts -- {{CSSxRef("<image>")}} data type -- {{cssxref("<filter-function>")}} data type +- {{cssxref("image")}} data type +- {{cssxref("filter-function")}} data type - {{cssxref("background-image")}} CSS property - {{cssxref("background-blend-mode")}} CSS property diff --git a/files/en-us/web/css/guides/filter_effects/using/index.md b/files/en-us/web/css/guides/filter_effects/using/index.md index e810996480c9263..8d574298ec2196d 100644 --- a/files/en-us/web/css/guides/filter_effects/using/index.md +++ b/files/en-us/web/css/guides/filter_effects/using/index.md @@ -11,7 +11,7 @@ Have you ever hovered over a black-and-white or sepia image and the full-color i The [Filter effects](/en-US/docs/Web/CSS/Guides/Filter_effects) module in CSS provides properties and functions that let you apply the visual effects described above without using Photoshop or sending extra HTTP requests. The only software required is the user's browser. Moreover, unlike pre-set image effects, CSS filter effects are responsive and animatable. -The CSS filter effects module provides the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties that you can use to impact the rendering of text, images, backgrounds, and borders, or any element on which you apply these properties. This module also defines the {{cssxref("<filter-function>")}} data type that lets you add graphical effects such as blurring or color shifting. Using the filter functions, you can not only alter the appearance of an element but also reference an SVG filter using a filter that you create. +The CSS filter effects module provides the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties that you can use to impact the rendering of text, images, backgrounds, and borders, or any element on which you apply these properties. This module also defines the {{cssxref("filter-function")}} data type that lets you add graphical effects such as blurring or color shifting. Using the filter functions, you can not only alter the appearance of an element but also reference an SVG filter using a filter that you create. ## Filter effect properties @@ -25,7 +25,7 @@ The `filter` and `backdrop-filter` properties accept a space-separated list of f ## Filter functions -The CSS filter effects module provides 10 [``](/en-US/docs/Web/CSS/Reference/Properties/filter#functions) functions, as well as the ability to define an almost endless array of effects using SVG filters applied via a `url()` reference. +The CSS filter effects module provides 10 {{cssxref("filter-function")}} functions, as well as the ability to define an almost endless array of effects using SVG filters applied via a `url()` reference. The following table lists the 10 filter functions, along with their value types, the minimum valid value if applicable, the largest value that creates an effect, and the initial value used for [interpolation](/en-US/docs/Glossary/Interpolation). @@ -36,7 +36,7 @@ The following table lists the 10 filter functions, along with their value types, | {{cssxref("filter-function/contrast", "contrast()")}} | {{cssxref("<length>")}} | `0` | | `1` or `100%` | | {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} | `` | | | `0 0 0 currentColor` | | {{cssxref("filter-function/grayscale", "grayscale()")}} | {{cssxref("<number>")}} or {{cssxref("<percentage>")}} | `0` | `100%` | `0` or `0%` | -| {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} | {{cssxref("<angle>")}} | | | `0deg` | +| {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} | {{cssxref("angle")}} | | | `0deg` | | {{cssxref("filter-function/invert", "invert()")}} | {{cssxref("<number>")}} or {{cssxref("<percentage>")}} | `0` | `100%` | `0` or `0%` | | {{cssxref("filter-function/opacity", "opacity()")}} | {{cssxref("<number>")}} or {{cssxref("<percentage>")}} | `0` | `100%` | `1` or `100%` | | {{cssxref("filter-function/saturate", "saturate()")}} | {{cssxref("<number>")}} or {{cssxref("<percentage>")}} | `0` | `100%` | `100%` | @@ -56,7 +56,7 @@ The `filter` and `backdrop-filter` properties accept a filter function list, whi If you hover over the sepia image below, you'll see the full-color image come into view instantly. -The image is set to be sepia by specifying the value of the `filter` property as the [`sepia()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/sepia) filter function. The filter is removed on [`:hover`](/en-US/docs/Web/CSS/Reference/Selectors/:hover) and [`:focus`](/en-US/docs/Web/CSS/Reference/Selectors/:focus) by setting `filter: none`. +The image is set to be sepia by specifying the value of the `filter` property as the [`sepia()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/sepia) filter function. The filter is removed on {{cssxref(":hover")}} and {{cssxref(":focus")}} by setting `filter: none`. ```html Four trans-people, circa 1912 diff --git a/files/en-us/web/css/guides/generated_content/index.md b/files/en-us/web/css/guides/generated_content/index.md index 3a20c9df25c5908..7015ea41d0fd4a2 100644 --- a/files/en-us/web/css/guides/generated_content/index.md +++ b/files/en-us/web/css/guides/generated_content/index.md @@ -119,7 +119,7 @@ The CSS generated content module introduces six yet-to-be implemented CSS functi ### Data types -- [``](/en-US/docs/Web/CSS/Reference/Properties/content) +- [``](/en-US/docs/Web/CSS/Reference/Properties/content#values) - `` (see {{cssxref("image")}}) - {{cssxref("image")}} - [``](/en-US/docs/Web/CSS/Reference/Properties/content#counter) @@ -142,8 +142,8 @@ The CSS generated content module introduces six yet-to-be implemented CSS functi - {{cssxref("::marker")}} pseudo-element - [CSS lists and counters](/en-US/docs/Web/CSS/Guides/Lists) module - - {{cssxref("counter", "counter()")}} function - - {{cssxref("counters", "counters()")}} function + - {{cssxref("counter()")}} function + - {{cssxref("counters()")}} function - {{cssxref("counter-increment")}} property - {{cssxref("counter-reset")}} property @@ -153,7 +153,7 @@ The CSS generated content module introduces six yet-to-be implemented CSS functi - {{cssxref(":target-current")}} pseudo-class - [CSS values and units](/en-US/docs/Web/CSS/Guides/Values_and_units) module - - {{cssxref("attr", "attr()")}} function + - {{cssxref("attr()")}} function - {{cssxref("string")}} data type - {{cssxref("image")}} data type diff --git a/files/en-us/web/css/guides/grid_layout/basic_concepts/index.md b/files/en-us/web/css/guides/grid_layout/basic_concepts/index.md index 808e249529d8cd3..b051920989e9606 100644 --- a/files/en-us/web/css/guides/grid_layout/basic_concepts/index.md +++ b/files/en-us/web/css/guides/grid_layout/basic_concepts/index.md @@ -363,7 +363,7 @@ In this example, we set `grid-auto-rows: 200px`, ensuring the tracks created in ### Track sizing and minmax -When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, we may want our rows to never collapse smaller than 100 pixels, but if our content stretches to 300 pixels in height, then we would like the row to stretch to that height. This is solved by the {{cssxref("minmax", "minmax()")}} function. +When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, we may want our rows to never collapse smaller than 100 pixels, but if our content stretches to 300 pixels in height, then we would like the row to stretch to that height. This is solved by the {{cssxref("minmax()")}} function. In this example, we use `minmax()` within the `grid-auto-rows` property value. By setting `grid-auto-rows: minmax(100px, auto);`, automatically created rows will be a minimum of `100px` tall, and have a maximum of `auto`. Setting `auto` as the maximum value allows the track to grow to accommodate its content (up to its `max-content` size) while also sharing any available free space within the grid container. diff --git a/files/en-us/web/css/guides/grid_layout/index.md b/files/en-us/web/css/guides/grid_layout/index.md index 9fa9a979fa111d2..4c05e13fe923d1d 100644 --- a/files/en-us/web/css/guides/grid_layout/index.md +++ b/files/en-us/web/css/guides/grid_layout/index.md @@ -99,9 +99,9 @@ This sample animation uses {{cssxref("display")}}, {{cssxref("grid-template-colu ### Functions -- {{CSSxRef("repeat", "repeat()")}} -- {{CSSxRef("minmax", "minmax()")}} -- {{CSSxRef("fit-content_function", "fit-content()")}} +- {{cssxref("repeat()")}} +- {{cssxref("minmax()")}} +- {{cssxref("fit-content()")}} ### Data types and values @@ -197,7 +197,7 @@ This sample animation uses {{cssxref("display")}}, {{cssxref("grid-template-colu - {{cssxref("min-content")}} value - {{cssxref("max-content")}} value - {{cssxref("fit-content")}} value -- {{cssxref("fit-content_function", "fit-content()")}} function +- {{cssxref("fit-content()")}} function ## Specifications diff --git a/files/en-us/web/css/guides/grid_layout/relationship_with_other_layout_methods/index.md b/files/en-us/web/css/guides/grid_layout/relationship_with_other_layout_methods/index.md index f698cea04502314..5cffdf0489a6288 100644 --- a/files/en-us/web/css/guides/grid_layout/relationship_with_other_layout_methods/index.md +++ b/files/en-us/web/css/guides/grid_layout/relationship_with_other_layout_methods/index.md @@ -226,7 +226,7 @@ This example uses a grid to create the same layout. We use the box alignment pro ### The `fr` unit and `flex-basis` -We have already seen how the `fr` unit works to assign a proportion of available space in the grid container to our grid tracks. The `fr` unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the `flex` properties in flexbox while still enabling the creation of a layout in two dimensions. +We have already seen how the `fr` unit works to assign a proportion of available space in the grid container to our grid tracks. The `fr` unit, when combined with the {{cssxref("minmax()")}} function can give us very similar behavior to the `flex` properties in flexbox while still enabling the creation of a layout in two dimensions. If we look back at the example where we demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way that the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one. @@ -277,7 +277,7 @@ In this next example, we have used the `auto-fill` keyword in place of an intege ### A flexible number of tracks -This isn't quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining `auto-fit` and the {{cssxref("minmax", "minmax()")}} function. +This isn't quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining `auto-fit` and the {{cssxref("minmax()")}} function. In this example, we create auto filled tracks with `minmax`. We want our tracks to be a minimum of 200 pixels, so we set the maximum to be `1fr`. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the `1fr` maximum as an instruction to share out the remaining space between the items. diff --git a/files/en-us/web/css/guides/images/index.md b/files/en-us/web/css/guides/images/index.md index 0645b72422f29c7..8e8a071ab54455b 100644 --- a/files/en-us/web/css/guides/images/index.md +++ b/files/en-us/web/css/guides/images/index.md @@ -10,7 +10,7 @@ spec-urls: sidebar: cssref --- -The **CSS images** module defines the types of images that can be used (the {{CSSxRef("<image>")}} type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models. +The **CSS images** module defines the types of images that can be used (the {{cssxref("image")}} type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models. ## Reference @@ -32,16 +32,16 @@ The CSS images module also defines the {{CSSxRef("image-resolution")}} property. - {{CSSxRef("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} - {{CSSxRef("gradient/conic-gradient", "conic-gradient()")}} - {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} -- {{CSSxRef("cross-fade", "cross-fade()")}} -- {{CSSxRef("element", "element()")}} +- {{cssxref("cross-fade()")}} +- {{cssxref("element()")}} - {{CSSxRef("image/image-set", "image-set()")}} The CSS images module also defines the {{CSSxRef("image/image", "image()")}} function. Currently, no browsers support this feature. ### Data types -- {{CSSxRef("<gradient>")}} -- {{CSSxRef("<image>")}} +- {{cssxref("gradient")}} +- {{cssxref("image")}} ## Guides diff --git a/files/en-us/web/css/guides/images/using_gradients/index.md b/files/en-us/web/css/guides/images/using_gradients/index.md index 29181c77bfe86f5..dae1ef8e27f80dc 100644 --- a/files/en-us/web/css/guides/images/using_gradients/index.md +++ b/files/en-us/web/css/guides/images/using_gradients/index.md @@ -6,7 +6,7 @@ page-type: guide sidebar: cssref --- -**CSS gradients** are represented by the {{cssxref("<gradient>")}} data type, a special type of {{cssxref("<image>")}} made of a progressive transition between two or more colors. You can choose between three types of gradients: _linear_ (created with the {{cssxref("gradient/linear-gradient", "linear-gradient()")}} function), _radial_ (created with the {{cssxref("gradient/radial-gradient", "radial-gradient()")}} function), and _conic_ (created with the {{cssxref("gradient/conic-gradient", "conic-gradient()")}} function). You can also create repeating gradients with the {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, and {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} functions. +**CSS gradients** are represented by the {{cssxref("gradient")}} data type, a special type of {{cssxref("image")}} made of a progressive transition between two or more colors. You can choose between three types of gradients: _linear_ (created with the {{cssxref("gradient/linear-gradient", "linear-gradient()")}} function), _radial_ (created with the {{cssxref("gradient/radial-gradient", "radial-gradient()")}} function), and _conic_ (created with the {{cssxref("gradient/conic-gradient", "conic-gradient()")}} function). You can also create repeating gradients with the {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, and {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} functions. Gradients can be used anywhere you would use an ``, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly. @@ -1059,7 +1059,7 @@ div { ## See also - Gradient functions: {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} -- Gradient-related CSS data types: {{cssxref("<gradient>")}}, {{cssxref("<image>")}} +- Gradient-related CSS data types: {{cssxref("gradient")}}, {{cssxref("image")}} - Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}} - [CSS Gradients Patterns Gallery, by Lea Verou](https://projects.verou.me/css3patterns/) - [Gradient CSS Generator](https://cssgenerator.org/gradient-css-generator.html) diff --git a/files/en-us/web/css/guides/lists/index.md b/files/en-us/web/css/guides/lists/index.md index f908bae4a4bb2f6..ff5735450b85101 100644 --- a/files/en-us/web/css/guides/lists/index.md +++ b/files/en-us/web/css/guides/lists/index.md @@ -56,7 +56,7 @@ There is also a `marker-side` property, which is yet to be fully defined or impl - {{cssxref("@counter-style")}} at-rule - [``](/en-US/docs/Web/CSS/Reference/At-rules/@counter-style#counter-style-name) data type - [``](/en-US/docs/Web/CSS/Reference/At-rules/@counter-style/symbols#values) data type - - {{cssxref("symbols", "symbols()")}} function + - {{cssxref("symbols()")}} function - {{HTMLElement("ol")}} `start`, `reversed`, and `type` attributes - {{HTMLElement("ul")}} `type` attribute diff --git a/files/en-us/web/css/guides/masking/index.md b/files/en-us/web/css/guides/masking/index.md index dc9fd936742d4cd..c1e5b1ac077b909 100644 --- a/files/en-us/web/css/guides/masking/index.md +++ b/files/en-us/web/css/guides/masking/index.md @@ -9,7 +9,7 @@ sidebar: cssref The **CSS masking** module defines masking and clipping, two different graphical operations that are used to partially or fully hide portions of visual elements. -**Clipping** involves defining a closed vector path, shape, or polygon as a **clipping path**. Everything inside the clipping path region remains visible while everything outside is hidden, or "clipped out". The {{cssxref("clip-path")}} property specifies a {{cssxref("<basic-shape>")}} or references an SVG {{SVGElement("clipPath")}} element to be used as a clipping path. +**Clipping** involves defining a closed vector path, shape, or polygon as a **clipping path**. Everything inside the clipping path region remains visible while everything outside is hidden, or "clipped out". The {{cssxref("clip-path")}} property specifies a {{cssxref("basic-shape")}} or references an SVG {{SVGElement("clipPath")}} element to be used as a clipping path. CSS **masking** properties are used to apply a mask to an element or its border. A graphical object is then painted onto the background or border, completely or partially masking out parts of the element or its border, depending on the opacity or luminance of the mask. @@ -75,7 +75,7 @@ While masking provides more control and options, clipping can perform better if ## Related concepts - [``](/en-US/docs/Web/CSS/Reference/Values/box-edge#values) -- {{cssxref("<image>")}} +- {{cssxref("image")}} - {{cssxref("<position>")}} - {{cssxref("<url>")}} @@ -93,7 +93,7 @@ While masking provides more control and options, clipping can perform better if - [``](/en-US/docs/Web/CSS/Reference/Properties/background-repeat#values) data type - [CSS shapes](/en-US/docs/Web/CSS/Guides/Shapes) module - - {{cssxref("<basic-shape>")}} data type + - {{cssxref("basic-shape")}} data type - {{cssxref("basic-shape/polygon","polygon()")}} function - [``](/en-US/docs/Web/CSS/Reference/Properties/shape-outside#shape-box) data type diff --git a/files/en-us/web/css/guides/media_queries/index.md b/files/en-us/web/css/guides/media_queries/index.md index 3dd40f8a41cad6a..c80786b49ecce70 100644 --- a/files/en-us/web/css/guides/media_queries/index.md +++ b/files/en-us/web/css/guides/media_queries/index.md @@ -71,7 +71,7 @@ The CSS media queries level 5 module also introduces the `environment-blending`, - [``](/en-US/docs/Web/CSS/Reference/At-rules/@media#media_types) - [``](/en-US/docs/Web/CSS/Reference/At-rules/@media#media_features) -- [``](/en-US/docs/Web/CSS/Reference/Values/resolution) +- {{cssxref("resolution")}} - [Logical operators](/en-US/docs/Web/CSS/Reference/At-rules/@media#logical_operators) ### Glossary terms diff --git a/files/en-us/web/css/guides/motion_path/index.md b/files/en-us/web/css/guides/motion_path/index.md index f09a029642574d7..43e6a1963dda4c3 100644 --- a/files/en-us/web/css/guides/motion_path/index.md +++ b/files/en-us/web/css/guides/motion_path/index.md @@ -94,7 +94,7 @@ In this example, we used [CSS masking](/en-US/docs/Web/CSS/Guides/Masking) and [ [CSS shapes](/en-US/docs/Web/CSS/Guides/Shapes) module -- {{cssxref("<basic-shape>")}} +- {{cssxref("basic-shape")}} - {{cssxref("basic-shape/circle","circle()")}} - {{cssxref("basic-shape/ellipse","ellipse()")}} - {{cssxref("basic-shape/inset","inset()")}} @@ -120,7 +120,7 @@ In this example, we used [CSS masking](/en-US/docs/Web/CSS/Guides/Masking) and [ ## See also - {{cssxref("position_value", "<position>")}} -- [``](/en-US/docs/Web/CSS/Reference/Values/easing-function) +- {{cssxref("easing-function")}} - {{cssxref("radial-gradient")}} function - [`prefers-reduced-motion`](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) media query - {{cssxref("will-change")}} CSS property diff --git a/files/en-us/web/css/guides/namespaces/index.md b/files/en-us/web/css/guides/namespaces/index.md index 678d0e5478c3787..c19a355052605f8 100644 --- a/files/en-us/web/css/guides/namespaces/index.md +++ b/files/en-us/web/css/guides/namespaces/index.md @@ -11,7 +11,7 @@ The **CSS namespaces** module defines the syntax for using {{glossary("namespace CSS isn't just for styling HTML. A stylesheet may be used to style SVG, MathML, XML, or HTML, each of which has a different namespace or a document containing multiple namespaces. -The [`@namespace`](/en-US/docs/Web/CSS/Reference/At-rules/@namespace) at-rule defined in this module enables distinguishing between same-named elements in different namespaces. Element tag names are not unique to a single language. For example, the `` element isn't limited to HTML. You may want to style the ``s within your SVGs differently from the links in your HTML. You also will likely want to ensure that {{domxref("Document.querySelectorAll", "querySelectorAll(\"a\")")}} selects the right kind of element. Namespacing can help. +The {{cssxref("@namespace")}} at-rule defined in this module enables distinguishing between same-named elements in different namespaces. Element tag names are not unique to a single language. For example, the `` element isn't limited to HTML. You may want to style the ``s within your SVGs differently from the links in your HTML. You also will likely want to ensure that {{domxref("Document.querySelectorAll", "querySelectorAll(\"a\")")}} selects the right kind of element. Namespacing can help. The `@namespace` rule is used for declaring a default namespace and for binding namespaces to namespace prefixes. The namespaces module also defines the syntax for using these prefixes to represent namespace-qualified names. That's it. What a name means or if the name is even valid depends on the context and host language. @@ -57,7 +57,7 @@ The `@namespace` rule is used for declaring a default namespace and for binding ## See also - [``](/en-US/docs/Web/SVG/Reference/Element/a#example) SVG element -- [CSS `` type](/en-US/docs/Web/CSS/Reference/Values/url_value) +- {{cssxref("url_value", "<url>")}} data type - [CSS at-rules](/en-US/docs/Web/CSS/Guides/Syntax/At-rules) - [CSS at-rule functions](/en-US/docs/Web/CSS/Reference/At-rules/At-rule_functions) - [CSS selectors](/en-US/docs/Web/CSS/Guides/Selectors) diff --git a/files/en-us/web/css/guides/overflow/index.md b/files/en-us/web/css/guides/overflow/index.md index 649b1bd4f206f13..fd3165435d590c7 100644 --- a/files/en-us/web/css/guides/overflow/index.md +++ b/files/en-us/web/css/guides/overflow/index.md @@ -245,7 +245,7 @@ The CSS overflow level 4 module also introduces the `block-ellipsis`, `continue` ### Data types -- [``](/en-US/docs/Web/CSS/Reference/Values/overflow_value) enumerated values +- {{cssxref("<overflow>")}} enumerated values ### Glossary terms and definitions diff --git a/files/en-us/web/css/guides/properties_and_values_api/index.md b/files/en-us/web/css/guides/properties_and_values_api/index.md index 17b53ec3ffeca2f..8d228247fa9a6bf 100644 --- a/files/en-us/web/css/guides/properties_and_values_api/index.md +++ b/files/en-us/web/css/guides/properties_and_values_api/index.md @@ -13,7 +13,7 @@ The CSS properties and values API is part of the [CSS Houdini](/en-US/docs/Web/A Custom properties let you reuse values across a project to simplify complex or repetitive stylesheets. Basic custom properties are defined in the [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/Guides/Cascading_variables) module. -The CSS properties and values API expands on that module, enabling adding metadata to custom properties using CSS with the [`@property`](/en-US/docs/Web/CSS/Reference/At-rules/@property) at-rule or, alternatively, using JavaScript's {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} method. +The CSS properties and values API expands on that module, enabling adding metadata to custom properties using CSS with the {{cssxref("@property")}} at-rule or, alternatively, using JavaScript's {{domxref('CSS/registerProperty_static', 'CSS.registerProperty')}} method. Whether registered with CSS or JavaScript, setting metadata on custom properties provides for an expected data type that the browser can use depending on the context, defines an initial value, and lets you control inheritance. diff --git a/files/en-us/web/css/guides/pseudo-elements/index.md b/files/en-us/web/css/guides/pseudo-elements/index.md index 622db232cf81864..5159837895ce6f5 100644 --- a/files/en-us/web/css/guides/pseudo-elements/index.md +++ b/files/en-us/web/css/guides/pseudo-elements/index.md @@ -62,7 +62,7 @@ The specification also defines the `::details-content` and `::search-text` pseud - Web Video Text Tracks Format (WebVTT) cues: - {{cssxref("::cue")}} - - {{cssxref("::cue", "::cue()")}} + - {{cssxref("::cue()")}} - [CSS multi-column layout](/en-US/docs/Web/CSS/Guides/Multicol_layout) module - {{cssxref("::column")}} @@ -75,9 +75,9 @@ The specification also defines the `::details-content` and `::search-text` pseud - [CSS scoping](/en-US/docs/Web/CSS/Guides/Scoping) module - {{CSSXref(":host")}} - - {{CSSXref(":host_function", ":host()")}} - - {{CSSXref(":host-context", ":host-context()")}} - - {{CSSXref("::slotted", "::slotted()")}} + - {{cssxref(":host()")}} + - {{cssxref(":host-context()")}} + - {{cssxref("::slotted()")}} - [CSS shadow parts](/en-US/docs/Web/CSS/Guides/Shadow_parts) module - {{CSSXref("::part")}} @@ -99,7 +99,7 @@ The specification also defines the `::details-content` and `::search-text` pseud - [Universal selectors](/en-US/docs/Web/CSS/Reference/Selectors/Universal_selectors) - [`placeholder`](/en-US/docs/Web/HTML/Reference/Elements/input#placeholder) attribute of the `` element -- [`:placeholder-shown`](/en-US/docs/Web/CSS/Reference/Selectors/:placeholder-shown) selector +- {{cssxref(":placeholder-shown")}} selector - [CSS generated content](/en-US/docs/Web/CSS/Guides/Generated_content) - {{cssxref("content")}} property diff --git a/files/en-us/web/css/guides/scoping/index.md b/files/en-us/web/css/guides/scoping/index.md index 7e74cc80b5b26b2..0624c2a75cf8041 100644 --- a/files/en-us/web/css/guides/scoping/index.md +++ b/files/en-us/web/css/guides/scoping/index.md @@ -23,8 +23,8 @@ Sometimes it's useful to be able to style a host from inside the shadow tree con ### Selectors - {{CSSXref(":host")}} -- {{CSSXref(":host_function", ":host()")}} -- {{CSSXref(":host-context", ":host-context()")}} +- {{CSSXref(":host()")}} +- {{cssxref(":host-context()")}} - {{CSSXref("::slotted")}} ## Guides diff --git a/files/en-us/web/css/guides/scroll-driven_animations/index.md b/files/en-us/web/css/guides/scroll-driven_animations/index.md index 80cb39570ff2e4c..aef8f330dff69f8 100644 --- a/files/en-us/web/css/guides/scroll-driven_animations/index.md +++ b/files/en-us/web/css/guides/scroll-driven_animations/index.md @@ -124,13 +124,13 @@ Scroll the element in the inline direction to see its background color change. S ### Data types and values -- [``](/en-US/docs/Web/CSS/Reference/Values/axis) -- [``](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) +- {{cssxref("axis")}} +- {{cssxref("timeline-range-name")}} ### Functions -- [`scroll()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/scroll) -- [`view()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/view) +- {{cssxref("animation-timeline/scroll", "scroll()")}} +- {{cssxref("animation-timeline/view", "view()")}} ### Interfaces diff --git a/files/en-us/web/css/guides/selectors/index.md b/files/en-us/web/css/guides/selectors/index.md index 5bf378c732bb3c8..3386f18fec30210 100644 --- a/files/en-us/web/css/guides/selectors/index.md +++ b/files/en-us/web/css/guides/selectors/index.md @@ -38,7 +38,7 @@ The CSS selectors module also introduces the [column combinator](/en-US/docs/Web - {{CSSXref(":checked")}} - {{CSSXref(":default")}} - {{CSSXref(":defined")}} -- {{CSSXref(":dir", ":dir()")}} +- {{cssxref(":dir()")}} - {{CSSXref(":disabled")}} - {{CSSXref(":empty")}} - {{CSSXref(":enabled")}} @@ -49,26 +49,26 @@ The CSS selectors module also introduces the [column combinator](/en-US/docs/Web - {{CSSXref(":focus-within")}} - {{CSSXref(":fullscreen")}} - {{CSSXref(":future")}} -- {{CSSXref(":has", ":has()")}} +- {{cssxref(":has()")}} - {{CSSXref(":hover")}} - {{CSSXref(":in-range")}} - {{CSSXref(":indeterminate")}} - {{CSSXref(":interest-source")}} - {{CSSXref(":interest-target")}} - {{CSSXref(":invalid")}} -- {{CSSXref(":is", ":is()")}} -- {{CSSXref(":lang", ":lang()")}} +- {{cssxref(":is()")}} +- {{cssxref(":lang()")}} - {{CSSXref(":last-child")}} - {{CSSXref(":last-of-type")}} - {{CSSXref(":link")}} - `:matches()` (obsolete legacy selector alias for {{CSSXref( ":is", ":is()")}}) - {{CSSXref(":modal")}} - {{CSSXref(":muted")}} -- {{CSSXref(":not", ":not()")}} -- {{CSSXref(":nth-child", ":nth-child()")}} -- {{CSSXref(":nth-of-type", ":nth-of-type()")}} -- {{CSSXref(":nth-last-child", ":nth-last-child()")}} -- {{CSSXref(":nth-last-of-type", ":nth-last-of-type()")}} +- {{cssxref(":not()")}} +- {{cssxref(":nth-child()")}} +- {{cssxref(":nth-of-type()")}} +- {{cssxref(":nth-last-child()")}} +- {{cssxref(":nth-last-of-type()")}} - {{CSSXref(":only-child")}} - {{CSSXref(":only-of-type")}} - {{CSSXref(":open")}} @@ -93,7 +93,7 @@ The CSS selectors module also introduces the [column combinator](/en-US/docs/Web - {{CSSXref(":valid")}} - {{CSSXref(":visited")}} - {{CSSXref(":volume-locked")}} -- {{CSSXref(":where", ":where()")}} +- {{cssxref(":where()")}} - [`:-webkit-` pseudo-classes](/en-US/docs/Web/CSS/Reference/Webkit_extensions#pseudo-classes) - [Attribute selectors](/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors) - [Class selector](/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors) @@ -147,8 +147,8 @@ The CSS selectors module also introduces the {{CSSXref(":blank")}}, {{CSSXref(": - [`&` nesting selector](/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector) - [CSS scoping](/en-US/docs/Web/CSS/Guides/Scoping) module - {{CSSXref(":host")}} pseudo-class - - {{CSSXref(":host_function", ":host()")}} pseudo-class - - {{CSSXref(":host-context", ":host-context()")}} pseudo-class + - {{cssxref(":host()")}} pseudo-class + - {{cssxref(":host-context()")}} pseudo-class - {{CSSXref(":has-slotted")}} pseudo-class - {{CSSXref("::slotted")}} pseudo-element diff --git a/files/en-us/web/css/guides/selectors/selector_structure/index.md b/files/en-us/web/css/guides/selectors/selector_structure/index.md index 96a111a996d470f..07c1cce9e7a2e42 100644 --- a/files/en-us/web/css/guides/selectors/selector_structure/index.md +++ b/files/en-us/web/css/guides/selectors/selector_structure/index.md @@ -73,13 +73,13 @@ If any selector in a [non-forgiving selector](/en-US/docs/Web/CSS/Reference/Sele } ``` -The {{cssxref(":is", ":is()")}} and {{cssxref(":where", ":where()")}} pseudo-classes can be used to construct [forgiving selector lists](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list). +The {{cssxref(":is()")}} and {{cssxref(":where()")}} pseudo-classes can be used to construct [forgiving selector lists](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list). ## Relative selector A **relative selector** is a selector representing an element relative to one or more anchor elements preceded by a combinator. Relative selectors that don't begin with an explicit combinator have an implied [descendant combinator](/en-US/docs/Web/CSS/Reference/Selectors/Descendant_combinator). -Relative selectors cannot be used in a selector list. Rather, it is accepted within certain contexts, such as the {{cssxref(":has", ":has()")}} pseudo-class. +Relative selectors cannot be used in a selector list. Rather, it is accepted within certain contexts, such as the {{cssxref(":has()")}} pseudo-class. ```css :has(+ div#topic > #reference) { diff --git a/files/en-us/web/css/guides/shadow_parts/index.md b/files/en-us/web/css/guides/shadow_parts/index.md index 6bb495f0ca81c0a..d2c83e42b852286 100644 --- a/files/en-us/web/css/guides/shadow_parts/index.md +++ b/files/en-us/web/css/guides/shadow_parts/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-shadow-parts/ sidebar: cssref --- -The **CSS shadow parts** module defines the {{CSSXref("::part", "::part()")}} pseudo-element that can be set on a [shadow host](/en-US/docs/Glossary/Shadow_tree). Using this pseudo-element, you can enable shadow hosts to expose the selected element in the shadow tree to the outside page for styling purposes. +The **CSS shadow parts** module defines the {{cssxref("::part()")}} pseudo-element that can be set on a [shadow host](/en-US/docs/Glossary/Shadow_tree). Using this pseudo-element, you can enable shadow hosts to expose the selected element in the shadow tree to the outside page for styling purposes. By default, elements in a shadow tree can be styled only within their respective shadow roots. The CSS shadow parts module enables including a [`part`](/en-US/docs/Web/HTML/Reference/Global_attributes/part) attribute on {{HTMLElement("template")}} descendants that make up the custom element, exposing the shadow tree node to external styling via the `::part()` pseudo-element. @@ -15,7 +15,7 @@ By default, elements in a shadow tree can be styled only within their respective ### Selectors -- {{CSSXref("::part", "::part()")}} +- {{cssxref("::part()")}} ### HTML attributes @@ -44,8 +44,8 @@ By default, elements in a shadow tree can be styled only within their respective - {{domxref("ShadowRoot")}} interface - [CSS scoping](/en-US/docs/Web/CSS/Guides/Scoping) module - {{CSSXref(":host")}} - - {{CSSXref(":host_function", ":host()")}} - - {{CSSXref(":host-context", ":host-context()")}} + - {{cssxref(":host()")}} + - {{cssxref(":host-context()")}} - {{CSSXref("::slotted")}} ## Specifications diff --git a/files/en-us/web/css/guides/shapes/index.md b/files/en-us/web/css/guides/shapes/index.md index bf2a430a57b1527..d3fa8d0cfe77de6 100644 --- a/files/en-us/web/css/guides/shapes/index.md +++ b/files/en-us/web/css/guides/shapes/index.md @@ -62,7 +62,7 @@ The CSS shapes module also introduces the `shape-inside` and `shape-padding` pro ### Data types -- {{cssxref("<basic-shape>")}} +- {{cssxref("basic-shape")}} ### Functions diff --git a/files/en-us/web/css/guides/shapes/overview/index.md b/files/en-us/web/css/guides/shapes/overview/index.md index 306762261b77294..650f638103a2449 100644 --- a/files/en-us/web/css/guides/shapes/overview/index.md +++ b/files/en-us/web/css/guides/shapes/overview/index.md @@ -22,7 +22,7 @@ The specification defines a few properties, including: ## Defining basic shapes -The `shape-outside` property allows us to define a shape. It takes a variety of values that define different shapes specified in the {{cssxref("<basic-shape>")}} data type. +The `shape-outside` property allows us to define a shape. It takes a variety of values that define different shapes specified in the {{cssxref("basic-shape")}} data type. In the following example, an image is floated to the left. We apply the `shape-outside` property with a `circle(50%)` value. The result is that the content now curves around the circular shape rather than following the rectangle created by the box of the image. diff --git a/files/en-us/web/css/guides/shapes/shape_generator/index.md b/files/en-us/web/css/guides/shapes/shape_generator/index.md index 21c5112a81c7565..75bded842a509c2 100644 --- a/files/en-us/web/css/guides/shapes/shape_generator/index.md +++ b/files/en-us/web/css/guides/shapes/shape_generator/index.md @@ -5,7 +5,7 @@ page-type: guide sidebar: cssref --- -This shape generator tool can be used to define the coordinates and syntax for features that use {{cssxref("<basic-shape>")}} +This shape generator tool can be used to define the coordinates and syntax for features that use {{cssxref("basic-shape")}} - The [`coords`](/en-US/docs/Web/HTML/Reference/Elements/area#coords) attribute of the {{HTMLElement("area")}} element - The CSS {{cssxref("basic-shape/inset()")}}, {{cssxref("basic-shape/xywh()")}}, {{cssxref("basic-shape/rect()")}}, {{cssxref("basic-shape/circle()")}}, {{cssxref("basic-shape/polygon()")}} functions diff --git a/files/en-us/web/css/guides/shapes/using_shape-outside/index.md b/files/en-us/web/css/guides/shapes/using_shape-outside/index.md index 7f63d882b6cb098..7e2ae0335b880ab 100644 --- a/files/en-us/web/css/guides/shapes/using_shape-outside/index.md +++ b/files/en-us/web/css/guides/shapes/using_shape-outside/index.md @@ -6,7 +6,7 @@ page-type: guide sidebar: cssref --- -CSS shapes can be defined using the {{cssxref("<basic-shape>")}} type. In this guide, we discuss creating rectangles, circles, ellipses, and polygons with the {{cssxref("shape-outside")}} property. These are features defined in the [CSS shapes module](/en-US/docs/Web/CSS/Guides/Shapes). +CSS shapes can be defined using the {{cssxref("basic-shape")}} type. In this guide, we discuss creating rectangles, circles, ellipses, and polygons with the {{cssxref("shape-outside")}} property. These are features defined in the [CSS shapes module](/en-US/docs/Web/CSS/Guides/Shapes). Before looking at shapes, it is worth understanding two pieces of information that go together to make these shapes possible: @@ -15,7 +15,7 @@ Before looking at shapes, it is worth understanding two pieces of information th ## The \ type -The [``](/en-US/docs/Web/CSS/Reference/Values/basic-shape) type is used as the value for all of our basic shapes. This type is a functional notation: the function parentheses contain arguments used to describe the shape. +The {{cssxref("basic-shape")}} type is used as the value for all of our basic shapes. This type is a functional notation: the function parentheses contain arguments used to describe the shape. The accepted arguments vary depending on the shape you are creating. We will cover these in the examples below. @@ -164,7 +164,7 @@ The `circle()` and `ellipse()` `shape-outside` values both accept [``](/en-US/docs/Web/CSS/Reference/Values/position_value) value, to indicate the position of the center of the circle. This is specified the same way as {{cssxref("background-position")}}; if one or both values are omitted, the values default to `center`. +The second argument is a `position`, which accepts a one- or two-keyword {{cssxref("<position>")}} value, to indicate the position of the center of the circle. This is specified the same way as {{cssxref("background-position")}}; if one or both values are omitted, the values default to `center`. To create a circle, we include a single radius value, optionally followed by the keyword **at** followed by a position value. This example has a circle applied to an {{htmlelement("img")}} with a `width` and `height` of `210px` and a `margin` of `20px`. This gives a total width for the reference box of `250px`. The `50%` value for the `` means the radius is `125px`. The position value is set to `30%`, which is `30%` from the left and at the default vertical `center`. diff --git a/files/en-us/web/css/guides/transforms/index.md b/files/en-us/web/css/guides/transforms/index.md index f8a4871edddf63b..cdc61cae73ee58f 100644 --- a/files/en-us/web/css/guides/transforms/index.md +++ b/files/en-us/web/css/guides/transforms/index.md @@ -739,15 +739,15 @@ The cube in the above example is comprised of six `
` elements, all of which - {{cssxref("transition")}} - {{cssxref("visibility")}} - Data types: - - [``](/en-US/docs/Web/CSS/Reference/Values/angle) + - {{cssxref("angle")}} - {{cssxref("length-percentage")}} - {{cssxref("length")}} - - [``](/en-US/docs/Web/CSS/Reference/Values/number) + - {{cssxref("number")}} - {{cssxref("percentage")}} - - [``](/en-US/docs/Web/CSS/Reference/Values/position_value) + - {{cssxref("position")}} - Glossary terms: - - [Interpolation](/en-US/docs/Glossary/Interpolation) - - [Stacking context](/en-US/docs/Glossary/Stacking_context) + - {{glossary("Interpolation")}} + - {{glossary("Stacking context")}} - [SVG](/en-US/docs/Web/SVG) concepts: - [``](/en-US/docs/Web/SVG/Reference/Element/animate) element - [``](/en-US/docs/Web/SVG/Reference/Element/animateTransform) element diff --git a/files/en-us/web/css/guides/transitions/index.md b/files/en-us/web/css/guides/transitions/index.md index ceadda73908ef47..1c686bf672161ad 100644 --- a/files/en-us/web/css/guides/transitions/index.md +++ b/files/en-us/web/css/guides/transitions/index.md @@ -60,10 +60,10 @@ In certain cases, there is no originating "from" value for a transition. For exa - {{cssxref("calc-size()")}} function - {{Glossary("Intrinsic size")}} glossary term -- [CSS easing functions](/en-US/docs/Web/CSS/Guides/Easing_functions) module - - [``](/en-US/docs/Web/CSS/Reference/Values/easing-function) data-type +- [CSS easing functions](/en-US/docs/Web/CSS/Guides/Easing_functions) module: + - {{cssxref("easing-function")}} data-type -- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module. +- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module: - {{cssxref("animation")}} shorthand - {{cssxref("animation-delay")}} - {{cssxref("animation-direction")}} @@ -74,13 +74,13 @@ In certain cases, there is no originating "from" value for a transition. For exa - {{cssxref("animation-play-state")}} - {{cssxref("animation-timing-function")}} -- [CSS transforms](/en-US/docs/Web/CSS/Guides/Transforms) module. +- [CSS transforms](/en-US/docs/Web/CSS/Guides/Transforms) module: - {{cssxref("transform")}} - {{cssxref("transform-box")}} - {{cssxref("transform-origin")}} - {{cssxref("transform-style")}} -- [CSS scroll snap](/en-US/docs/Web/CSS/Guides/Scroll_snap) module +- [CSS scroll snap](/en-US/docs/Web/CSS/Guides/Scroll_snap) module: - {{cssxref("scroll-snap-type")}} - {{cssxref("scroll-padding")}} - {{cssxref("scroll-snap-align")}} diff --git a/files/en-us/web/css/guides/transitions/using/index.md b/files/en-us/web/css/guides/transitions/using/index.md index 19f73874e2ae800..a6ba2945d7027f9 100644 --- a/files/en-us/web/css/guides/transitions/using/index.md +++ b/files/en-us/web/css/guides/transitions/using/index.md @@ -199,7 +199,7 @@ So for example: When transitioning these properties [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior) needs to be set on the transitions. This effectively enables `display`/`content-visibility` transitions. -When transitioning `display`, [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) is needed to provide a set of starting values for properties set on an element that you want to transition from when the element receives its first style update. This is needed to avoid unexpected behavior. By default, CSS transitions are not triggered on elements' first style updates when they first appear in the DOM, which includes when `display` changes from `none` to another state. `content-visibility` animations do not need starting values specified in a `@starting-style` block. This is because `content-visibility` doesn't hide an element from the DOM like `display` does: it just skips rendering the element's content. +When transitioning `display`, {{cssxref("@starting-style")}} is needed to provide a set of starting values for properties set on an element that you want to transition from when the element receives its first style update. This is needed to avoid unexpected behavior. By default, CSS transitions are not triggered on elements' first style updates when they first appear in the DOM, which includes when `display` changes from `none` to another state. `content-visibility` animations do not need starting values specified in a `@starting-style` block. This is because `content-visibility` doesn't hide an element from the DOM like `display` does: it just skips rendering the element's content. #### HTML diff --git a/files/en-us/web/css/guides/values_and_units/index.md b/files/en-us/web/css/guides/values_and_units/index.md index 393959375a980cf..28e55f9c0e29288 100644 --- a/files/en-us/web/css/guides/values_and_units/index.md +++ b/files/en-us/web/css/guides/values_and_units/index.md @@ -58,38 +58,35 @@ The CSS values and units module also introduces the `calc-mix()`, `crossorigin() ### Data types -- [``](/en-US/docs/Web/CSS/Reference/Values/angle-percentage) -- [``](/en-US/docs/Web/CSS/Reference/Values/angle) -- [``](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline) +- {{cssxref("angle-percentage")}} +- {{cssxref("angle")}} - [``](/en-US/docs/Web/CSS/Reference/Values/attr#attr-name) - [``](/en-US/docs/Web/CSS/Reference/Values/attr#attr-type) - {{CSSxRef("<calc-keyword>")}} (`e`, `pi`, `infinity`, {{glossary("NaN")}}) - [``](/en-US/docs/Web/CSS/Reference/Values/calc-size#calc-size-basis) -- [``](/en-US/docs/Web/CSS/Reference/Values/calc-sum) -- [``](/en-US/docs/Web/CSS/Reference/Values/custom-ident) -- [``](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) -- [``](/en-US/docs/Web/CSS/Reference/Values/dimension) -- [``](/en-US/docs/Web/CSS/Reference/Values/easing-function) -- [``](/en-US/docs/Web/CSS) -- [``](/en-US/docs/Web/CSS/Reference/Values/ident) -- [``](/en-US/docs/Web/CSS/Reference/Values/integer) -- [``](/en-US/docs/Web/CSS/Reference/Values/length-percentage) -- [``](/en-US/docs/Web/CSS/Reference/Values/length) -- [``](/en-US/docs/Web/CSS/Reference/Values/number) -- [``](/en-US/docs/Web/CSS/Reference/Values/percentage) -- [``](/en-US/docs/Web/CSS/Reference/Properties/position) -- [``](/en-US/docs/Web/CSS/Reference/Values/ratio) -- [``](/en-US/docs/Web/CSS/Reference/Values/resolution) +- {{cssxref("calc-sum")}} +- {{cssxref("custom-ident")}} +- {{cssxref("dashed-ident")}} +- {{cssxref("dimension")}} +- {{cssxref("easing-function")}} +- {{cssxref("ident")}} +- {{cssxref("integer")}} +- {{cssxref("length-percentage")}} +- {{cssxref("length")}} +- {{cssxref("number")}} +- {{cssxref("percentage")}} +- {{cssxref("<position>")}} +- {{cssxref("ratio")}} +- {{cssxref("resolution")}} - [``](/en-US/docs/Web/CSS/Reference/Values/round#rounding-strategy) (`down`, `up`, `to-zero`) -- [``](/en-US/docs/Web/CSS/Reference/Values/string) +- {{cssxref("string")}} - [``](/en-US/docs/Web/CSS/Guides/Syntax/Introduction) -- [``](/en-US/docs/Web/CSS/Reference/Values/time-percentage) -- [`
diff --git a/files/en-us/web/css/reference/properties/offset-position/index.md b/files/en-us/web/css/reference/properties/offset-position/index.md index e80f7b9d1b0c0a5..7313db0f914162b 100644 --- a/files/en-us/web/css/reference/properties/offset-position/index.md +++ b/files/en-us/web/css/reference/properties/offset-position/index.md @@ -113,7 +113,7 @@ In this example, the {{cssxref("offset-path")}} property is used to define the p ### Comparing various offset starting positions -This example visually compares various initial offset starting position of an element when {{cssxref("ray", "ray()")}} is used to specify a value for the {{cssxref("offset-path")}} property. The number inside the element box indicates the element to which CSS is applied as well as the element's anchor point. +This example visually compares various initial offset starting position of an element when {{cssxref("ray()")}} is used to specify a value for the {{cssxref("offset-path")}} property. The number inside the element box indicates the element to which CSS is applied as well as the element's anchor point. ```html hidden
diff --git a/files/en-us/web/css/reference/properties/offset-rotate/index.md b/files/en-us/web/css/reference/properties/offset-rotate/index.md index 32f89da830834c9..3b79e4b740e3ee2 100644 --- a/files/en-us/web/css/reference/properties/offset-rotate/index.md +++ b/files/en-us/web/css/reference/properties/offset-rotate/index.md @@ -115,10 +115,10 @@ offset-rotate: unset; - `auto` - : The element is rotated by the angle of the direction of the {{cssxref("offset-path")}}, relative to the positive x-axis. This is the default value. -- {{cssxref("<angle>")}} +- {{cssxref("angle")}} - : The element has a constant clockwise rotation transformation applied to it by the specified rotation angle. - `auto ` - - : If `auto` is followed by an {{cssxref("<angle>")}}, the computed value of the angle is added to the computed value of `auto`. + - : If `auto` is followed by an {{cssxref("angle")}}, the computed value of the angle is added to the computed value of `auto`. - `reverse` - : The element is rotated similar to `auto`, except it faces the opposite direction. It is the same as specifying a value of `auto 180deg`. diff --git a/files/en-us/web/css/reference/properties/opacity/index.md b/files/en-us/web/css/reference/properties/opacity/index.md index 02567eb1b4be675..647c339c28bc9f9 100644 --- a/files/en-us/web/css/reference/properties/opacity/index.md +++ b/files/en-us/web/css/reference/properties/opacity/index.md @@ -85,7 +85,7 @@ Opacity alone should not be used to provide information to screen readers. Use t ### Transitioning opacity -When [transitioning](/en-US/docs/Web/CSS/Guides/Transitions) the opacity of elements as you add them to the page when content was formerly hidden with [`visibility: hidden`](/en-US/docs/Web/CSS/Reference/Properties/visibility#hidden), [`display: none`](/en-US/docs/Web/CSS/Reference/Properties/display#none), or [`content-visibility: hidden`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility#hidden), you need to include both a [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) and [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#allow-discrete): +When [transitioning](/en-US/docs/Web/CSS/Guides/Transitions) the opacity of elements as you add them to the page when content was formerly hidden with [`visibility: hidden`](/en-US/docs/Web/CSS/Reference/Properties/visibility#hidden), [`display: none`](/en-US/docs/Web/CSS/Reference/Properties/display#none), or [`content-visibility: hidden`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility#hidden), you need to include both a {{cssxref("@starting-style")}} and [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#allow-discrete): ```css .card { @@ -106,7 +106,7 @@ When [transitioning](/en-US/docs/Web/CSS/Guides/Transitions) the opacity of elem } ``` -To enable first-style transitions, `@starting-style` rules are needed. In the above code, setting `opacity: 0` in `@starting-style` provides a starting point for the transition when the element receives its initial style update. For more details, see [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style). +To enable first-style transitions, `@starting-style` rules are needed. In the above code, setting `opacity: 0` in `@starting-style` provides a starting point for the transition when the element receives its initial style update. For more details, see {{cssxref("@starting-style")}}. Setting `transition-behavior: allow-discrete` is required to transition to `display: none`. See the {{cssxref("transition-behavior")}} property for more details. diff --git a/files/en-us/web/css/reference/properties/overlay/index.md b/files/en-us/web/css/reference/properties/overlay/index.md index 0904d2069efbe90..385729fef1fff68 100644 --- a/files/en-us/web/css/reference/properties/overlay/index.md +++ b/files/en-us/web/css/reference/properties/overlay/index.md @@ -128,16 +128,16 @@ html { } ``` -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. +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 {{cssxref(":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, `overlay` is added to the list of transitioned elements. This ensures that the removal of the element from the top layer is deferred until the animation has ended. 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. Note that the [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior) value is also set in the shorthand to enable discrete transitions. The following steps are also required to get the animation working in both directions: -- 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. +- 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. - `display` is also added to the list of transitioned elements 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. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur. -You'll note that we've also included a transition on the [`::backdrop`](/en-US/docs/Web/CSS/Reference/Selectors/::backdrop) that appears behind the popover when it opens, to provide a nice darkening animation. `[popover]:popover-open::backdrop` is needed to select the backdrop when the popover is open. +You'll note that we've also included a transition on the {{cssxref("::backdrop")}} that appears behind the popover when it opens, to provide a nice darkening animation. `[popover]:popover-open::backdrop` is needed to select the backdrop when the popover is open. #### Result @@ -161,6 +161,6 @@ The code renders as follows: ## See also - [CSS transitions](/en-US/docs/Web/CSS/Guides/Transitions) module -- [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) +- {{cssxref("@starting-style")}} - {{cssxref("transition-behavior")}} - [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/page/index.md b/files/en-us/web/css/reference/properties/page/index.md index 0a690e586fae3b6..d5e04ad9207f826 100644 --- a/files/en-us/web/css/reference/properties/page/index.md +++ b/files/en-us/web/css/reference/properties/page/index.md @@ -33,7 +33,7 @@ page: unset; - `auto` - : Default value. Use the value of the nearest ancestor with a non-`auto` value. If no ancestor has a named page value set, the used value for auto is the empty string. - {{cssxref("custom-ident")}} - - : Case-sensitive name defined in a [`@page`](/en-US/docs/Web/CSS/Reference/At-rules/@page) at-rule. + - : Case-sensitive name defined in a {{cssxref("@page")}} at-rule. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/position-anchor/index.md b/files/en-us/web/css/reference/properties/position-anchor/index.md index 86e6e506f86ef98..7893a8d70b9567f 100644 --- a/files/en-us/web/css/reference/properties/position-anchor/index.md +++ b/files/en-us/web/css/reference/properties/position-anchor/index.md @@ -77,7 +77,7 @@ We include an [``](/en-US/docs/Web/HTML/Reference/Elements/i #### CSS -We give the thumb, represented by the [`::-webkit-slider-thumb`](/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-slider-thumb) pseudo-element, an anchor name of `--thumb`. We then set that name as the value of the `` element's `position-anchor` property, and give it a {{cssxref("position")}} value of `fixed`. These steps associated the `` with the thumb. +We give the thumb, represented by the {{cssxref("::-webkit-slider-thumb")}} pseudo-element, an anchor name of `--thumb`. We then set that name as the value of the `` element's `position-anchor` property, and give it a {{cssxref("position")}} value of `fixed`. These steps associated the `` with the thumb. Finally, we use {{cssxref("left")}} and {{cssxref("top")}} properties with {{cssxref("anchor()")}} values to position the `` relative to the thumb. diff --git a/files/en-us/web/css/reference/properties/rotate/index.md b/files/en-us/web/css/reference/properties/rotate/index.md index b3349c6914cac2e..31099575d65ebe0 100644 --- a/files/en-us/web/css/reference/properties/rotate/index.md +++ b/files/en-us/web/css/reference/properties/rotate/index.md @@ -132,11 +132,11 @@ rotate: unset; ### Values - angle value - - : An {{CSSxRef("<angle>")}} specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a `rotate()` (2D rotation) function. + - : An {{cssxref("angle")}} specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a `rotate()` (2D rotation) function. - x, y, or z axis name plus angle value - - : The name of the axis you want to rotate the affected element around (`x`, `y`, or `z`), plus an {{CSSxRef("<angle>")}} specifying the angle to rotate the element through. Equivalent to a `rotateX()`/`rotateY()`/`rotateZ()` (3D rotation) function. + - : The name of the axis you want to rotate the affected element around (`x`, `y`, or `z`), plus an {{cssxref("angle")}} specifying the angle to rotate the element through. Equivalent to a `rotateX()`/`rotateY()`/`rotateZ()` (3D rotation) function. - vector plus angle value - - : Three {{CSSxRef("<number>")}}s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an {{CSSxRef("<angle>")}} specifying the angle to rotate the element through. Equivalent to a `rotate3d()` (3D rotation) function. + - : Three {{CSSxRef("<number>")}}s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an {{cssxref("angle")}} specifying the angle to rotate the element through. Equivalent to a `rotate3d()` (3D rotation) function. - `none` - : Specifies that no rotation should be applied. 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 121e67f856e726b..1b2fce6521b337b 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 @@ -32,7 +32,7 @@ Allowed values for `scroll-timeline-name` are: - : 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 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 218e86e4eca9a08..7da80aa7f220402 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 @@ -48,7 +48,7 @@ scroll-timeline: unset; The `scroll-timeline` shorthand property can be applied to a container element to set both the `scroll-timeline-name` and `scroll-timeline-axis` properties. It is set on the scroller that will provide the timeline. If the container has no overflow to scroll or if the overflow is hidden or clipped, no timeline will be created. -The value for the {{cssxref("scroll-timeline-name")}}, if not set to `none`, must be a [``](/en-US/docs/Web/CSS/Reference/Values/dashed-ident), which means it must start with `--`. This helps avoid name clashes with standard CSS keywords. The name can then be used as the value of an element's {{cssxref("animation-timeline")}} property to define the scrolling container element that will define its [animation timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_scroll_progress_timelines), driving the animation progress as it scrolls. +The value for the {{cssxref("scroll-timeline-name")}}, if not set to `none`, must be a {{cssxref("dashed-ident")}}, which means it must start with `--`. This helps avoid name clashes with standard CSS keywords. The name can then be used as the value of an element's {{cssxref("animation-timeline")}} property to define the scrolling container element that will define its [animation timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_scroll_progress_timelines), driving the animation progress as it scrolls. The optional scroll {{cssxref("axis")}} value defines the {{cssxref("scroll-timeline-axis")}}, which defaults to `block` if omitted. If both a name and axis are specified, the order must be the `` value followed by the `` value. If the `` is listed first, the declaration is invalid and will be ignored. diff --git a/files/en-us/web/css/reference/properties/shape-image-threshold/index.md b/files/en-us/web/css/reference/properties/shape-image-threshold/index.md index 2687bbe058c0fa8..19a1e3cf1e3b20e 100644 --- a/files/en-us/web/css/reference/properties/shape-image-threshold/index.md +++ b/files/en-us/web/css/reference/properties/shape-image-threshold/index.md @@ -163,6 +163,6 @@ The 20% opacity threshold for treating gradient pixels as part of the shape is t - [CSS Shapes](/en-US/docs/Web/CSS/Guides/Shapes) - [Overview of CSS Shapes](/en-US/docs/Web/CSS/Guides/Shapes/Overview) -- {{cssxref("<basic-shape>")}} +- {{cssxref("basic-shape")}} - {{cssxref("shape-outside")}} - {{cssxref("shape-margin")}} diff --git a/files/en-us/web/css/reference/properties/shape-margin/index.md b/files/en-us/web/css/reference/properties/shape-margin/index.md index 74c8b4a6122d968..a546c46f5a834ad 100644 --- a/files/en-us/web/css/reference/properties/shape-margin/index.md +++ b/files/en-us/web/css/reference/properties/shape-margin/index.md @@ -147,4 +147,4 @@ section { - [Overview of CSS Shapes](/en-US/docs/Web/CSS/Guides/Shapes/Overview) - {{cssxref("shape-outside")}} - {{cssxref("shape-image-threshold")}} -- {{cssxref("<basic-shape>")}} +- {{cssxref("basic-shape")}} diff --git a/files/en-us/web/css/reference/properties/shape-outside/index.md b/files/en-us/web/css/reference/properties/shape-outside/index.md index 6dc5151f2f69799..ebb2b6b10670612 100644 --- a/files/en-us/web/css/reference/properties/shape-outside/index.md +++ b/files/en-us/web/css/reference/properties/shape-outside/index.md @@ -110,10 +110,10 @@ The `shape-outside` property is specified using the values from the list below, - `content-box` - : Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of `0` or `border-radius - border-width - padding`. -- {{cssxref("<basic-shape>")}} +- {{cssxref("basic-shape")}} - : The float area is computed based on the shape created by an {{cssxref("basic-shape/inset","inset()")}}, {{cssxref("basic-shape/circle","circle()")}}, {{cssxref("basic-shape/ellipse","ellipse()")}}, or {{cssxref("basic-shape/polygon","polygon()")}} function; other `` functions are invalid. If a `` is also supplied, it defines the reference box for the `` function. Otherwise, the reference box defaults to `margin-box`. -- {{cssxref("<image>")}} - - : The float area is extracted and computed based on the alpha channel of the specified {{cssxref("<image>")}} as defined by {{cssxref("shape-image-threshold")}}. +- {{cssxref("image")}} + - : The float area is extracted and computed based on the alpha channel of the specified {{cssxref("image")}} as defined by {{cssxref("shape-image-threshold")}}. > [!NOTE] > If the image is invalid, the effect is as if the keyword `none` had been specified. Additionally, the image must be served with {{Glossary("CORS")}} headers allowing its use. @@ -191,6 +191,6 @@ p { - [CSS shapes](/en-US/docs/Web/CSS/Guides/Shapes) - [Overview of shapes](/en-US/docs/Web/CSS/Guides/Shapes/Overview) -- {{cssxref("<basic-shape>")}} +- {{cssxref("basic-shape")}} - {{cssxref("shape-margin")}} - {{cssxref("shape-image-threshold")}} 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 807d9d56978b1fb..3d9a1a0c4733501 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 {{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. +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 {{cssxref(":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. - {{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 @@ -177,6 +177,6 @@ The code renders as follows: ## See also - {{cssxref("overlay")}} -- [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) +- {{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-timing-function/index.md b/files/en-us/web/css/reference/properties/transition-timing-function/index.md index d3064b4a381ee72..a4665175ff90379 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 @@ -52,7 +52,7 @@ transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68); This, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration. -This acceleration curve is defined using one {{cssxref("<easing-function>")}} for each property to be transitioned. +This acceleration curve is defined using one {{cssxref("easing-function")}} for each property to be transitioned. You may specify multiple easing functions; each one will be applied to the corresponding property as specified by the {{ cssxref("transition-property") }} property, which acts as a `transition-property` list. If there are fewer easing functions specified than in the `transition-property` list, the user agent must calculate which value is used by repeating the list of values until there is one for each transition property. If there are more easing functions, the list is truncated to the right size. In both cases, the CSS declaration stays valid. @@ -94,7 +94,7 @@ transition-timing-function: unset; ### Values - `` - - : Each {{cssxref("<easing-function>")}} represents the easing function to link to the corresponding property to transition, as defined in {{ cssxref("transition-property") }}. + - : Each {{cssxref("easing-function")}} represents the easing function to link to the corresponding property to transition, as defined in {{ cssxref("transition-property") }}. The non-step keyword values (ease, linear, ease-in-out, etc.) each represent cubic Bézier curve with fixed four point values, with the cubic-bezier() function value allowing for a non-predefined value. The step easing functions divide the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position. - `ease` @@ -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 a774120bd1e7c0c..79a24975a4ad1a9 100644 --- a/files/en-us/web/css/reference/properties/transition/index.md +++ b/files/en-us/web/css/reference/properties/transition/index.md @@ -119,7 +119,7 @@ Each single-property transition describes the transition that should be applied - A {{cssxref("<custom-ident>")}} representing a single property. - The special value `all`, which specifies that the transition will be applied to all properties that change as the element changes state. - No value, in which case a value of `all` will be inferred and the specified transition will still apply to all changing properties. -- zero or one {{cssxref("<easing-function>")}} value representing the easing function to use +- zero or one {{cssxref("easing-function")}} value representing the easing function to use - zero, one, or two {{cssxref("<time>")}} values. The first value that can be parsed as a time is assigned to the {{cssxref("transition-duration")}}, and the second value that can be parsed as a time is assigned to {{cssxref("transition-delay")}}. - zero or one value declaring whether to start transitions for properties whose animation behavior is [discrete](/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete). The value, if present, is either the keyword `allow-discrete` or the keyword `normal`. diff --git a/files/en-us/web/css/reference/properties/view-timeline/index.md b/files/en-us/web/css/reference/properties/view-timeline/index.md index 2a18991ca19118a..3bbdd05842c8283 100644 --- a/files/en-us/web/css/reference/properties/view-timeline/index.md +++ b/files/en-us/web/css/reference/properties/view-timeline/index.md @@ -209,6 +209,6 @@ Scroll to see the subject element being animated. - {{cssxref("animation-timeline")}} - {{cssxref("view-timeline-axis")}}, {{cssxref("view-timeline-inset")}}, {{cssxref("view-timeline-name")}} -- [`view()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/view) +- {{cssxref("animation-timeline/view", "view()")}} - [Guide: CSS scroll driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_view_progress_timeline) - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) diff --git a/files/en-us/web/css/reference/selectors/_colon_-moz-window-inactive/index.md b/files/en-us/web/css/reference/selectors/_colon_-moz-window-inactive/index.md index 22c4e4aced1d2e9..dab770ed8288eda 100644 --- a/files/en-us/web/css/reference/selectors/_colon_-moz-window-inactive/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_-moz-window-inactive/index.md @@ -69,6 +69,6 @@ Not part of any standard. - [Mozilla CSS extensions](/en-US/docs/Web/CSS/Reference/Mozilla_extensions) - Related CSS selectors: - - [`:active`](/en-US/docs/Web/CSS/Reference/Selectors/:active) + - {{cssxref(":active")}} - The {{domxref("Document.activeElement")}} property for regular DOM, and the {{domxref("ShadowRoot.activeElement")}} property for [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) roots. diff --git a/files/en-us/web/css/reference/selectors/_colon_active-view-transition/index.md b/files/en-us/web/css/reference/selectors/_colon_active-view-transition/index.md index c9475ad44c8ae3e..7d5288b15535223 100644 --- a/files/en-us/web/css/reference/selectors/_colon_active-view-transition/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_active-view-transition/index.md @@ -103,7 +103,7 @@ changeColorButton.addEventListener("keypress", changeColor); ## See also -- {{CSSXRef(":active-view-transition-type", ":active-view-transition-type()")}} pseudo-class +- {{cssxref(":active-view-transition-type()")}} pseudo-class - [`startViewTransition()`](/en-US/docs/Web/API/Document/startViewTransition) method - {{domxref("Document.activeViewTransition")}} - [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/css/reference/selectors/_colon_any-link/index.md b/files/en-us/web/css/reference/selectors/_colon_any-link/index.md index e95e1bb94b6ef81..fcb713736c16130 100644 --- a/files/en-us/web/css/reference/selectors/_colon_any-link/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_any-link/index.md @@ -92,5 +92,5 @@ a:-webkit-any-link { - [Creating links](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) - Matches HTML elements: [``](/en-US/docs/Web/HTML/Reference/Elements/a) and [``](/en-US/docs/Web/HTML/Reference/Elements/area) with an [`href`](/en-US/docs/Web/HTML/Reference/Elements/a#href) attribute - Related CSS selectors: - - [`:visited`](/en-US/docs/Web/CSS/Reference/Selectors/:visited) - - [`:link`](/en-US/docs/Web/CSS/Reference/Selectors/:link) + - {{cssxref(":visited")}} + - {{cssxref(":link")}} diff --git a/files/en-us/web/css/reference/selectors/_colon_defined/index.md b/files/en-us/web/css/reference/selectors/_colon_defined/index.md index ab2cbf541978b0f..1697da4d879b818 100644 --- a/files/en-us/web/css/reference/selectors/_colon_defined/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_defined/index.md @@ -105,7 +105,7 @@ custom-element:defined::before { } ``` -We have also used the [`::before`](/en-US/docs/Web/CSS/Reference/Selectors/::before) pseudo-element to show a "Loading..." overlay message until the element is defined. After definition, it is removed by setting the {{cssxref("content")}} to an empty string. +We have also used the {{cssxref("::before")}} pseudo-element to show a "Loading..." overlay message until the element is defined. After definition, it is removed by setting the {{cssxref("content")}} to an empty string. The following JavaScript has been used to define the custom element. To allow you to see the state of the custom element before and after definition we run the {{domxref("CustomElementRegistry.define", "define()")}} method when the button is clicked. diff --git a/files/en-us/web/css/reference/selectors/_colon_first-child/index.md b/files/en-us/web/css/reference/selectors/_colon_first-child/index.md index 722db911092fb12..a59081536de3468 100644 --- a/files/en-us/web/css/reference/selectors/_colon_first-child/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_first-child/index.md @@ -133,4 +133,4 @@ ul li:first-child { - {{CSSxRef(":-moz-first-node")}} - {{CSSxRef(":first-of-type")}} - {{CSSxRef(":last-child")}} -- {{CSSxRef(":nth-child", ":nth-child()")}} +- {{cssxref(":nth-child()")}} diff --git a/files/en-us/web/css/reference/selectors/_colon_focus-visible/index.md b/files/en-us/web/css/reference/selectors/_colon_focus-visible/index.md index 4fceed75225a9c3..530abd66d1ed331 100644 --- a/files/en-us/web/css/reference/selectors/_colon_focus-visible/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_focus-visible/index.md @@ -62,7 +62,7 @@ Browsers no longer visibly indicate focus (such as by drawing a "focus ring"), a The `:focus` pseudo-class always matches the currently-focused element. The `:focus-visible` pseudo-class also matches the focused element, but only if the user needs to be informed where the focus currently is. Because the `:focus-visible` pseudo-class matches the focused element when needed, using the `:focus-visible` (instead of the `:focus` pseudo-class) allows authors to change the appearance of the focus indicator without changing when the focus indicator appears. -When the [`:focus`](/en-US/docs/Web/CSS/Reference/Selectors/:focus) pseudo-class is used, it always targets the currently focused element. This means that when a user employs a pointing device, a visible focus ring appears around the focused element, which some consider obtrusive. The `:focus-visible` pseudo-class respects user agents' selective focus indication behavior while still allowing focus indicator customization. +When the {{cssxref(":focus")}} pseudo-class is used, it always targets the currently focused element. This means that when a user employs a pointing device, a visible focus ring appears around the focused element, which some consider obtrusive. The `:focus-visible` pseudo-class respects user agents' selective focus indication behavior while still allowing focus indicator customization. ## Accessibility diff --git a/files/en-us/web/css/reference/selectors/_colon_has/index.md b/files/en-us/web/css/reference/selectors/_colon_has/index.md index 26c0b913c4fa8fc..d65e58953314291 100644 --- a/files/en-us/web/css/reference/selectors/_colon_has/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_has/index.md @@ -17,7 +17,7 @@ h1:has(+ p) { } ``` -The `:has()` pseudo-class takes on the [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity) of the most specific selector in its arguments the same way as {{CSSxRef(":is", ":is()")}} and {{CSSxRef(":not", ":not()")}} do. +The `:has()` pseudo-class takes on the [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity) of the most specific selector in its arguments the same way as {{cssxref(":is()")}} and {{cssxref(":not()")}} do. ## Syntax diff --git a/files/en-us/web/css/reference/selectors/_colon_heading_function/index.md b/files/en-us/web/css/reference/selectors/_colon_heading_function/index.md index 00066bbe70c0adc..a7c6f679cec9fc7 100644 --- a/files/en-us/web/css/reference/selectors/_colon_heading_function/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_heading_function/index.md @@ -67,4 +67,4 @@ In this example, a comma-separated list of values is used to target headings at ## See also -- [`:heading`](/en-US/docs/Web/CSS/Reference/Selectors/:heading) +- {{cssxref(":heading")}} diff --git a/files/en-us/web/css/reference/selectors/_colon_host-context/index.md b/files/en-us/web/css/reference/selectors/_colon_host-context/index.md index 98293f3e1622241..c4e0916b2e5eb8f 100644 --- a/files/en-us/web/css/reference/selectors/_colon_host-context/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_host-context/index.md @@ -18,7 +18,7 @@ Think of it like this: Imagine you have a `` custom element, that ha This selector pierces through all shadow boundaries. It will look for the sunny or shady theme applied directly to the `` or on any of the host's ancestors and ancestor DOMs all the way up until it reaches the document root. -To limit the selector to only the `` host directly or limit the selection to host's DOM, use the {{cssxref(":host")}} or {{cssxref(":host_function", ":host()")}} pseudo-class instead. +To limit the selector to only the `` host directly or limit the selection to host's DOM, use the {{cssxref(":host")}} or {{cssxref(":host()")}} pseudo-class instead. > [!NOTE] > This has no effect when used outside a shadow DOM. @@ -144,7 +144,7 @@ The `:host-context(h1) { font-style: italic; }` and `:host-context(h1)::after { - [Web components](/en-US/docs/Web/API/Web_components) - CSS {{cssxref(":host")}} pseudo-class -- CSS {{cssxref(":host_function", ":host()")}} pseudo-class +- CSS {{cssxref(":host()")}} pseudo-class - CSS {{cssxref(":state",":state()")}} pseudo-class - CSS {{CSSXref("::slotted")}} pseudo-element - HTML {{HTMLElement("template")}} element diff --git a/files/en-us/web/css/reference/selectors/_colon_host/index.md b/files/en-us/web/css/reference/selectors/_colon_host/index.md index 323ea51109ae777..36486a2e5e0eb05 100644 --- a/files/en-us/web/css/reference/selectors/_colon_host/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_host/index.md @@ -112,8 +112,8 @@ The `:host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }` rule styles all ## See also - [Web components](/en-US/docs/Web/API/Web_components) -- {{cssxref(":host_function", ":host()")}} -- {{cssxref(":host-context", ":host-context()")}} +- {{cssxref(":host()")}} +- {{cssxref(":host-context()")}} - {{CSSxref("::slotted")}} - {{CSSxRef(":state",":state()")}} - [CSS scoping](/en-US/docs/Web/CSS/Guides/Scoping) module diff --git a/files/en-us/web/css/reference/selectors/_colon_host_function/index.md b/files/en-us/web/css/reference/selectors/_colon_host_function/index.md index 9b152bf7377e212..29bbe6dfa3dfc29 100644 --- a/files/en-us/web/css/reference/selectors/_colon_host_function/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_host_function/index.md @@ -8,10 +8,10 @@ sidebar: cssref The **`:host()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) function selects the shadow host of the [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host. **`:host()`** has no effect when used outside a shadow DOM. -The most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of {{CSSxRef(":host-context", ":host-context()")}}. +The most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of {{cssxref(":host-context()")}}. > [!NOTE] -> While other functional pseudo-classes such as {{CSSxRef(":is", ":is()")}} and {{CSSxRef(":not", ":not()")}} accept a list of selectors as their parameters, `:host()` takes a single compound selector as its parameter. In addition, while `:is()` and `:not()` only take into account the specificity of their argument, the specificity of `:host()` is both the specificity of the pseudo-class **and** the specificity of its argument. +> While other functional pseudo-classes such as {{cssxref(":is()")}} and {{cssxref(":not()")}} accept a list of selectors as their parameters, `:host()` takes a single compound selector as its parameter. In addition, while `:is()` and `:not()` only take into account the specificity of their argument, the specificity of `:host()` is both the specificity of the pseudo-class **and** the specificity of its argument. {{InteractiveExample("CSS Demo: :host()", "tabbed-shorter")}} @@ -123,5 +123,5 @@ The `:host(.footer) { color : red; }` rule styles all instances of the ` [!NOTE] -> An empty `` does not count as out of range, and will not be selected using the `:out-of-range` pseudo-class selector. The [`:blank`](/en-US/docs/Web/CSS/Reference/Selectors/:blank) pseudo-class exists to select blank inputs, although at the time of writing this is experimental and not well-supported. You could also use the `required` attribute and the [`:invalid`](/en-US/docs/Web/CSS/Reference/Selectors/:invalid) pseudo-class to provide more general logic and styling for making inputs mandatory (`:invalid` will style blank _and_ out-of-range inputs). +> An empty `` does not count as out of range, and will not be selected using the `:out-of-range` pseudo-class selector. The {{cssxref(":blank")}} pseudo-class exists to select blank inputs, although at the time of writing this is experimental and not well-supported. You could also use the `required` attribute and the {{cssxref(":invalid")}} pseudo-class to provide more general logic and styling for making inputs mandatory (`:invalid` will style blank _and_ out-of-range inputs). ## Specifications diff --git a/files/en-us/web/css/reference/selectors/_colon_is/index.md b/files/en-us/web/css/reference/selectors/_colon_is/index.md index e53ed689d8a7c45..c5ed4d08962b5a0 100644 --- a/files/en-us/web/css/reference/selectors/_colon_is/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_is/index.md @@ -268,6 +268,6 @@ some-element::after { ## See also -- {{CSSxRef(":where", ":where()")}} - Like `:is()`, but with 0 [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity). +- {{cssxref(":where()")}} - Like `:is()`, but with 0 [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity). - [Selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list) - [Web components](/en-US/docs/Web/API/Web_components) diff --git a/files/en-us/web/css/reference/selectors/_colon_link/index.md b/files/en-us/web/css/reference/selectors/_colon_link/index.md index 00a97bd0905ee1e..ee29528a72cd4e8 100644 --- a/files/en-us/web/css/reference/selectors/_colon_link/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_link/index.md @@ -42,7 +42,7 @@ a:link { ``` -Styles defined by the `:link` and [`:visited`](/en-US/docs/Web/CSS/Reference/Selectors/:visited) pseudo-classes can be overridden by any subsequent user-action pseudo-classes ({{cssxref(":hover")}} or {{cssxref(":active")}}) that have at least equal specificity. To style links appropriately, put the `:link` rule before all other link-related rules, as defined by the _LVHA-order_: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive. +Styles defined by the `:link` and {{cssxref(":visited")}} pseudo-classes can be overridden by any subsequent user-action pseudo-classes ({{cssxref(":hover")}} or {{cssxref(":active")}}) that have at least equal specificity. To style links appropriately, put the `:link` rule before all other link-related rules, as defined by the _LVHA-order_: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive. > [!NOTE] > Use {{cssxref(":any-link")}} to select an element independent of whether it has been visited or not. diff --git a/files/en-us/web/css/reference/selectors/_colon_modal/index.md b/files/en-us/web/css/reference/selectors/_colon_modal/index.md index a19045f807db6eb..93ba73029ed2ea1 100644 --- a/files/en-us/web/css/reference/selectors/_colon_modal/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_modal/index.md @@ -65,7 +65,7 @@ showNumber.addEventListener("click", () => { Examples of elements that will prevent user interaction with the rest of the page and will be selected by the `:modal` pseudo-class include: - The [`dialog`](/en-US/docs/Web/HTML/Reference/Elements/dialog) element opened with the `showModal()` API. -- The element selected by the [`:fullscreen`](/en-US/docs/Web/CSS/Reference/Selectors/:fullscreen) pseudo-class when opened with the `requestFullscreen()` API. +- The element selected by the {{cssxref(":fullscreen")}} pseudo-class when opened with the `requestFullscreen()` API. ## Examples diff --git a/files/en-us/web/css/reference/selectors/_colon_not/index.md b/files/en-us/web/css/reference/selectors/_colon_not/index.md index fe6851efc979c9e..096416a7c59d360 100644 --- a/files/en-us/web/css/reference/selectors/_colon_not/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_not/index.md @@ -182,8 +182,8 @@ If `:invalid-pseudo-class` was a valid selector, the first two rules above would - [Pseudo-classes](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) - [Learn: Pseudo-classes and pseudo-elements](/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements) - Other functional CSS pseudo-classes: - - {{cssxref(":has", ":has()")}} - - {{cssxref(":is", ":is()")}} - - {{cssxref(":where", ":where()")}} + - {{cssxref(":has()")}} + - {{cssxref(":is()")}} + - {{cssxref(":where()")}} - [How :not() chains multiple selectors](/en-US/blog/css-not-pseudo-multiple-selectors/) on MDN blog (2023) diff --git a/files/en-us/web/css/reference/selectors/_colon_state/index.md b/files/en-us/web/css/reference/selectors/_colon_state/index.md index 7bc2fbee193ece4..edd72de2afbedb5 100644 --- a/files/en-us/web/css/reference/selectors/_colon_state/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_state/index.md @@ -24,7 +24,7 @@ The `:state()` pseudo-class takes as its argument a custom identifier that repre Elements can transition between states due to user interaction and other factors. For instance, an element can be in the "hover" state when a user hovers over the element, or a link can be in the "visited" state after a user clicks on it. -Elements provided by browsers can be styled based on these states using CSS pseudo-classes such as [`:hover`](/en-US/docs/Web/CSS/Reference/Selectors/:hover) and [`:visited`](/en-US/docs/Web/CSS/Reference/Selectors/:visited). +Elements provided by browsers can be styled based on these states using CSS pseudo-classes such as {{cssxref(":hover")}} and {{cssxref(":visited")}}. Similarly, [autonomous custom elements](/en-US/docs/Web/API/Web_components/Using_custom_elements#types_of_custom_element) (custom elements that are not derived from built-in elements) can expose their states, allowing pages that use the elements to style them using the CSS `:state()` pseudo-class. The states of a custom element are represented by string values. diff --git a/files/en-us/web/css/reference/selectors/_colon_visited/index.md b/files/en-us/web/css/reference/selectors/_colon_visited/index.md index e0e08101c07016a..37a11d14714a537 100644 --- a/files/en-us/web/css/reference/selectors/_colon_visited/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_visited/index.md @@ -42,7 +42,7 @@ a:visited { ``` -Styles defined by the `:visited` and unvisited [`:link`](/en-US/docs/Web/CSS/Reference/Selectors/:link) pseudo-classes can be overridden by any subsequent user-action pseudo-classes ({{cssxref(":hover")}} or {{cssxref(":active")}}) that have at least equal specificity. To style links appropriately, put the `:visited` rule after the `:link` rule but before the `:hover` and `:active` rules, as defined by the _LVHA-order_: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive. +Styles defined by the `:visited` and unvisited {{cssxref(":link")}} pseudo-classes can be overridden by any subsequent user-action pseudo-classes ({{cssxref(":hover")}} or {{cssxref(":active")}}) that have at least equal specificity. To style links appropriately, put the `:visited` rule after the `:link` rule but before the `:hover` and `:active` rules, as defined by the _LVHA-order_: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive. ## Privacy restrictions diff --git a/files/en-us/web/css/reference/selectors/_colon_where/index.md b/files/en-us/web/css/reference/selectors/_colon_where/index.md index 2d74789c598e6c0..7d27385b5cb5da8 100644 --- a/files/en-us/web/css/reference/selectors/_colon_where/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_where/index.md @@ -8,7 +8,7 @@ sidebar: cssref The **`:where()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. -The difference between `:where()` and {{CSSxRef(":is", ":is()")}} is that `:where()` always has 0 [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity), whereas `:is()` takes on the specificity of the most specific selector in its arguments. +The difference between `:where()` and {{cssxref(":is()")}} is that `:where()` always has 0 [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity), whereas `:is()` takes on the specificity of the most specific selector in its arguments. {{InteractiveExample("CSS Demo: :where", "tabbed-shorter")}} @@ -194,6 +194,6 @@ However, selectors inside `:where()` have specificity 0, so the orange footer li ## See also -- {{CSSxRef(":is", ":is()")}} +- {{cssxref(":is()")}} - [Selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list) - [Web components](/en-US/docs/Web/API/Web_components) diff --git a/files/en-us/web/css/reference/selectors/_doublecolon_-moz-focus-inner/index.md b/files/en-us/web/css/reference/selectors/_doublecolon_-moz-focus-inner/index.md index 8d1c964e22002c1..63a497c83dc0d95 100644 --- a/files/en-us/web/css/reference/selectors/_doublecolon_-moz-focus-inner/index.md +++ b/files/en-us/web/css/reference/selectors/_doublecolon_-moz-focus-inner/index.md @@ -67,6 +67,6 @@ Not part of any standard. - {{cssxref("-moz-user-focus")}} - Related CSS selectors: - - [`:focus`](/en-US/docs/Web/CSS/Reference/Selectors/:focus) - - [`:focus-visible`](/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible) - - [`:focus-within`](/en-US/docs/Web/CSS/Reference/Selectors/:focus-within) + - {{cssxref(":focus")}} + - {{cssxref(":focus-visible")}} + - {{cssxref(":focus-within")}} diff --git a/files/en-us/web/css/reference/selectors/_doublecolon_slotted/index.md b/files/en-us/web/css/reference/selectors/_doublecolon_slotted/index.md index 43332fad6ac15bc..e13c2283d495918 100644 --- a/files/en-us/web/css/reference/selectors/_doublecolon_slotted/index.md +++ b/files/en-us/web/css/reference/selectors/_doublecolon_slotted/index.md @@ -176,8 +176,8 @@ Our markup includes three custom elements, including a custom element with an in ## See also - {{cssxref(":host")}} -- {{cssxref(":host_function", ":host()")}} -- {{cssxref(":host-context", ":host-context()")}} +- {{cssxref(":host()")}} +- {{cssxref(":host-context()")}} - {{cssxref(":has-slotted")}} - [CSS scoping](/en-US/docs/Web/CSS/Guides/Scoping) module - HTML [`slot`](/en-US/docs/Web/HTML/Reference/Global_attributes/slot) attribute diff --git a/files/en-us/web/css/reference/selectors/namespace_separator/index.md b/files/en-us/web/css/reference/selectors/namespace_separator/index.md index 0269d5212123104..94e9e61132f0955 100644 --- a/files/en-us/web/css/reference/selectors/namespace_separator/index.md +++ b/files/en-us/web/css/reference/selectors/namespace_separator/index.md @@ -181,7 +181,7 @@ The selector with no namespace, the `|a`, matched the JavaScript defined and app ## See also -- [`@namespace`](/en-US/docs/Web/CSS/Reference/At-rules/@namespace) +- {{cssxref("@namespace")}} - [`Document.createElementNS()`](/en-US/docs/Web/API/Document/createElementNS) method - [`Element.namespaceURI`](/en-US/docs/Web/API/Element/namespaceURI) property - [CSS type selector](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors) diff --git a/files/en-us/web/css/reference/selectors/nesting_selector/index.md b/files/en-us/web/css/reference/selectors/nesting_selector/index.md index f50ed8b2f34fde9..37f8300adc53110 100644 --- a/files/en-us/web/css/reference/selectors/nesting_selector/index.md +++ b/files/en-us/web/css/reference/selectors/nesting_selector/index.md @@ -6,7 +6,7 @@ browser-compat: css.selectors.nesting sidebar: cssref --- -The CSS **`&` nesting selector** explicitly states the relationship between parent and child rules when using [CSS nesting](/en-US/docs/Web/CSS/Guides/Nesting). It makes the nested child rule selectors _relative to the parent element_. Without the `&` nesting selector, the child rule selector selects child elements. The child rule selectors have the same [specificity](/en-US/docs/Web/CSS/Guides/Nesting/Nesting_and_specificity) weight as if they were within {{cssxref(":is", ":is()")}}. +The CSS **`&` nesting selector** explicitly states the relationship between parent and child rules when using [CSS nesting](/en-US/docs/Web/CSS/Guides/Nesting). It makes the nested child rule selectors _relative to the parent element_. Without the `&` nesting selector, the child rule selector selects child elements. The child rule selectors have the same [specificity](/en-US/docs/Web/CSS/Guides/Nesting/Nesting_and_specificity) weight as if they were within {{cssxref(":is()")}}. > [!NOTE] > _Child rule_ does not mean _child element selector_. A child rule can target parent element or child elements depending on use of the `&` nesting selector. @@ -137,7 +137,7 @@ The `&` nesting selector can be placed multiple times: ### Cannot represent pseudo-elements -The `&` selector is equivalent to the {{cssxref(":is", ":is()")}} selector, and has the same limitation that it cannot represent pseudo-elements. +The `&` selector is equivalent to the {{cssxref(":is()")}} selector, and has the same limitation that it cannot represent pseudo-elements. For example, with the following style rule, no generated content will be styled red, even when nested in `
`, because `.important :is(.foo::before)` cannot match anything. diff --git a/files/en-us/web/css/reference/selectors/next-sibling_combinator/index.md b/files/en-us/web/css/reference/selectors/next-sibling_combinator/index.md index 8eef3270b8909ef..cf0764909b48d49 100644 --- a/files/en-us/web/css/reference/selectors/next-sibling_combinator/index.md +++ b/files/en-us/web/css/reference/selectors/next-sibling_combinator/index.md @@ -55,7 +55,7 @@ li:first-of-type + li { ### Selecting a previous sibling -The next-sibling combinator can be included within the {{cssxref(":has", ":has()")}} functional selector to select the previous sibling. +The next-sibling combinator can be included within the {{cssxref(":has()")}} functional selector to select the previous sibling. #### CSS diff --git a/files/en-us/web/css/reference/selectors/pseudo-classes/index.md b/files/en-us/web/css/reference/selectors/pseudo-classes/index.md index 58cc17f455de949..a564821828d6c8b 100644 --- a/files/en-us/web/css/reference/selectors/pseudo-classes/index.md +++ b/files/en-us/web/css/reference/selectors/pseudo-classes/index.md @@ -95,9 +95,9 @@ These pseudo-classes relate to form elements, and enable selecting elements base These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction. -- {{CSSxRef(":dir", ":dir()")}} +- {{cssxref(":dir()")}} - : The directionality pseudo-class selects an element based on its directionality as determined by the document language. -- {{CSSxRef(":lang", ":lang()")}} +- {{cssxref(":lang()")}} - : Select an element based on its content language. ## Location pseudo-classes @@ -158,9 +158,9 @@ These pseudo-classes relate to the location of an element within the document tr - : Represents an element that is the root of the document. In HTML this is usually the `` element. - {{CSSxRef(":empty")}} - : Represents an element with no children other than white-space characters. -- {{CSSxRef(":nth-child", ":nth-child()")}} +- {{cssxref(":nth-child()")}} - : Uses `An+B` notation to select elements from a list of sibling elements. -- {{CSSxRef(":nth-last-child", ":nth-last-child()")}} +- {{cssxref(":nth-last-child()")}} - : Uses `An+B` notation to select elements from a list of sibling elements, counting backwards from the end of the list. - {{CSSxRef(":first-child")}} - : Matches an element that is the first of its siblings. @@ -170,9 +170,9 @@ These pseudo-classes relate to the location of an element within the document tr - : Matches an element that has no siblings. For example, a list item with no other list items in that list. - {{CSSXRef(":heading_function", ":heading()")}} - : Uses `An+B` notation to select heading elements (`

`-`

`). -- {{CSSxRef(":nth-of-type", ":nth-of-type()")}} +- {{cssxref(":nth-of-type()")}} - : Uses `An+B` notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements. -- {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}} +- {{cssxref(":nth-last-of-type()")}} - : Uses `An+B` notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list. - {{CSSxRef(":first-of-type")}} - : Matches an element that is the first of its siblings, and also matches a certain type selector. @@ -187,9 +187,9 @@ These pseudo-classes relate to the shadow DOM. - {{CSSxRef(":host")}} - : Matches the shadow tree's shadow host. -- {{CSSxRef(":host_function", ":host()")}} +- {{cssxref(":host()")}} - : Matches an element that matches {{CSSxRef(":host")}} and matches any of the selectors in the list provided. -- {{CSSxRef(":host-context", ":host-context()")}} +- {{cssxref(":host-context()")}} - : Selects elements outside of the shadow tree in the context of the shadow host. - {{CSSxRef(":has-slotted")}} - : Matches slot elements that have been assigned content. @@ -215,20 +215,20 @@ These pseudo-classes require some interaction by the user in order for them to a These pseudo-classes accept a [selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list) or [forgiving selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list) as a parameter. -- {{CSSxRef(":is", ":is()")}} +- {{cssxref(":is()")}} - : The matches-any pseudo-class matches any element that matches any of the selectors in the list provided. The list is forgiving. -- {{CSSxRef(":not", ":not()")}} +- {{cssxref(":not()")}} - : The negation, or matches-none, pseudo-class represents any element that is not represented by its argument. -- {{CSSxRef(":where", ":where()")}} +- {{cssxref(":where()")}} - : The specificity-adjustment pseudo-class matches any element that matches any of the selectors in the list provided without adding any specificity weight. The list is forgiving. -- {{CSSxRef(":has", ":has()")}} +- {{cssxref(":has()")}} - : The relational pseudo-class represents an element if any of the relative selectors match when anchored against the attached element. ## Custom state pseudo-classes These pseudo-classes apply to custom elements. -- {{CSSxRef(":state", ":state()")}} +- {{cssxref(":state()")}} - : Matches custom elements that have the specified custom state. ## Page pseudo-classes @@ -250,7 +250,7 @@ These pseudo-classes relate to elements involved in a [view transition](/en-US/d - {{cssxref(":active-view-transition")}} - : Matches the root element of a document when a [view transition](/en-US/docs/Web/API/View_Transition_API#concepts_and_usage) is in progress (_active_) and stops matching once the transition has completed. -- {{cssxref(":active-view-transition-type", ":active-view-transition-type()")}} +- {{cssxref(":active-view-transition-type()")}} - : Matches the root element of a document when a specified [view transition](/en-US/docs/Web/API/View_Transition_API#concepts_and_usage) is in progress (_active_) and stops matching once the transition has completed. ## Syntax @@ -271,7 +271,7 @@ A - {{CSSxRef(":active")}} - {{CSSxRef(":active-view-transition")}} -- {{cssxref(":active-view-transition-type", ":active-view-transition-type()")}} +- {{cssxref(":active-view-transition-type()")}} - {{CSSxRef(":any-link")}} - {{CSSxRef(":autofill")}} @@ -290,7 +290,7 @@ D - {{CSSxRef(":default")}} - {{CSSxRef(":defined")}} -- {{CSSxRef(":dir", ":dir()")}} +- {{cssxref(":dir()")}} - {{CSSxRef(":disabled")}} E @@ -312,12 +312,12 @@ F H - {{CSSxRef(":has-slotted")}} -- {{CSSxRef(":has", ":has()")}} +- {{cssxref(":has()")}} - {{CSSXRef(":heading")}} - {{CSSXRef(":heading_function", ":heading()")}} - {{CSSxRef(":host")}} -- {{CSSxRef(":host_function", ":host()")}} -- {{CSSxRef(":host-context", ":host-context()")}} +- {{cssxref(":host()")}} +- {{cssxref(":host-context()")}} - {{CSSxRef(":hover")}} I @@ -325,11 +325,11 @@ I - {{CSSxRef(":in-range")}} - {{CSSxRef(":indeterminate")}} - {{CSSxRef(":invalid")}} -- {{CSSxRef(":is", ":is()")}} +- {{cssxref(":is()")}} L -- {{CSSxRef(":lang", ":lang()")}} +- {{cssxref(":lang()")}} - {{CSSxRef(":last-child")}} - {{CSSxRef(":last-of-type")}} - {{CSSxRef(":left")}} @@ -343,11 +343,11 @@ M N -- {{CSSxRef(":not", ":not()")}} -- {{CSSxRef(":nth-child", ":nth-child()")}} -- {{CSSxRef(":nth-last-child", ":nth-last-child()")}} -- {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}} -- {{CSSxRef(":nth-of-type", ":nth-of-type()")}} +- {{cssxref(":not()")}} +- {{cssxref(":nth-child()")}} +- {{cssxref(":nth-last-child()")}} +- {{cssxref(":nth-last-of-type()")}} +- {{cssxref(":nth-of-type()")}} O @@ -379,7 +379,7 @@ S - {{CSSxRef(":scope")}} - {{CSSxRef(":seeking")}} - {{CSSxRef(":stalled")}} -- {{CSSxRef(":state", ":state()")}} +- {{cssxref(":state()")}} T @@ -399,7 +399,7 @@ V W -- {{CSSxRef(":where", ":where()")}} +- {{cssxref(":where()")}} ### Non-standard pseudo-classes diff --git a/files/en-us/web/css/reference/selectors/pseudo-elements/index.md b/files/en-us/web/css/reference/selectors/pseudo-elements/index.md index 606698f6ea2e0c6..7287911071aeacc 100644 --- a/files/en-us/web/css/reference/selectors/pseudo-elements/index.md +++ b/files/en-us/web/css/reference/selectors/pseudo-elements/index.md @@ -95,9 +95,9 @@ These pseudo-elements are real elements that are not otherwise selectable. - {{CSSxRef("::details-content")}} - : The expandable/collapsible contents of a {{HTMLElement("details")}} element. -- {{CSSxRef("::part", "::part()")}} +- {{cssxref("::part()")}} - : Any element within a [shadow tree](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) that has a matching [`part`](/en-US/docs/Web/HTML/Reference/Global_attributes/part) attribute. -- {{CSSxRef("::slotted", "::slotted()")}} +- {{cssxref("::slotted()")}} - : Any element placed into a slot inside an HTML template. ## Form-related pseudo-elements @@ -132,7 +132,7 @@ C - {{CSSxRef("::column")}} - {{CSSxRef("::checkmark")}} -- {{CSSxRef("::cue")}} (and {{CSSxRef("::cue", "::cue()")}}) +- {{CSSxRef("::cue")}} (and {{cssxref("::cue()")}}) D @@ -158,7 +158,7 @@ M P -- {{CSSxRef("::part", "::part()")}} +- {{cssxref("::part()")}} - {{CSSxRef("::picker()")}} - {{CSSxRef("::picker-icon")}} - {{CSSxRef("::placeholder")}} @@ -169,7 +169,7 @@ S - {{CSSxRef("::scroll-marker")}} - {{CSSxRef("::scroll-marker-group")}} - {{CSSxRef("::selection")}} -- {{CSSxRef("::slotted", "::slotted()")}} +- {{cssxref("::slotted()")}} - {{CSSxRef("::spelling-error")}} T diff --git a/files/en-us/web/css/reference/selectors/selector_list/index.md b/files/en-us/web/css/reference/selectors/selector_list/index.md index 2ef7d320f7615da..f3f27118a6697a5 100644 --- a/files/en-us/web/css/reference/selectors/selector_list/index.md +++ b/files/en-us/web/css/reference/selectors/selector_list/index.md @@ -65,7 +65,7 @@ h1 + p { ## Valid and invalid selector lists -An invalid selector represents, and therefore matches, nothing. When a selector list contains an invalid selector, the entire style block is ignored, except for the {{CSSxRef(":is", ":is()")}} and {{CSSxRef(":where", ":where()")}} pseudo-classes that accept [forgiving selector lists](#forgiving_selector_list). +An invalid selector represents, and therefore matches, nothing. When a selector list contains an invalid selector, the entire style block is ignored, except for the {{cssxref(":is()")}} and {{cssxref(":where()")}} pseudo-classes that accept [forgiving selector lists](#forgiving_selector_list). ### Invalid selector list @@ -97,7 +97,7 @@ They are not equivalent. In the first rule set, styles will be applied on the `h ### Forgiving selector list -A way to remedy the [invalid selector list](#invalid_selector_list) problem is to use the {{CSSxRef(":is", ":is()")}} or the {{CSSxRef(":where", ":where()")}} pseudo-class, which accept a forgiving selector list. Each selector in a forgiving selector list is parsed individually. So any invalid selectors in the list are ignored and the valid ones are used. +A way to remedy the [invalid selector list](#invalid_selector_list) problem is to use the {{cssxref(":is()")}} or the {{cssxref(":where()")}} pseudo-class, which accept a forgiving selector list. Each selector in a forgiving selector list is parsed individually. So any invalid selectors in the list are ignored and the valid ones are used. Carrying on from the previous example, the following two CSS rule sets are now equivalent: diff --git a/files/en-us/web/css/reference/values/acos/index.md b/files/en-us/web/css/reference/values/acos/index.md index a26e898a8d0842e..a4aa4bfd01cf4d0 100644 --- a/files/en-us/web/css/reference/values/acos/index.md +++ b/files/en-us/web/css/reference/values/acos/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.acos sidebar: cssref --- -The **`acos()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the inverse cosine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an {{cssxref("<angle>")}} between `0deg` and `180deg`. +The **`acos()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the inverse cosine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an {{cssxref("angle")}} between `0deg` and `180deg`. ## Syntax @@ -29,7 +29,7 @@ The `acos(number)` function accepts only one value as its parameter. ### Return value -The inverse cosine of a `number` will always return an {{cssxref("<angle>")}} between `0deg` and `180deg`. +The inverse cosine of a `number` will always return an {{cssxref("angle")}} between `0deg` and `180deg`. - If `number` is less than `-1` or greater than `1`, the result is `NaN`. - If `number` is exactly `1`, the result is `0`. @@ -42,7 +42,7 @@ The inverse cosine of a `number` will always return an {{cssxref("<angle>" ### Rotate elements -The `acos()` function can be used to {{cssxref("transform-function/rotate", "rotate")}} elements as it return an {{cssxref("<angle>")}}. +The `acos()` function can be used to {{cssxref("transform-function/rotate", "rotate")}} elements as it return an {{cssxref("angle")}}. #### HTML diff --git a/files/en-us/web/css/reference/values/alpha-value/index.md b/files/en-us/web/css/reference/values/alpha-value/index.md index 09536efe9d773df..d9392df9b660ab3 100644 --- a/files/en-us/web/css/reference/values/alpha-value/index.md +++ b/files/en-us/web/css/reference/values/alpha-value/index.md @@ -10,7 +10,7 @@ The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/C ## Syntax -The value of an `` is given as either a [``](/en-US/docs/Web/CSS/Reference/Values/number) or a {{cssxref("percentage")}}. +The value of an `` is given as either a {{cssxref("number")}} or a {{cssxref("percentage")}}. If given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. Values outside the range of 0 to 1 are permitted, but are [clamped]() to lie within the range 0 to 1. @@ -55,4 +55,4 @@ shape-image-threshold: 0.7; - [Learn: Fundamental text and font styling](/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals) - [CSS data types](/en-US/docs/Web/CSS/Reference/Values/Data_types) - [CSS Color](/en-US/docs/Web/CSS/Guides/Colors) -- [``](/en-US/docs/Web/CSS/Reference/Values/color_value) +- {{cssxref("<color>")}} diff --git a/files/en-us/web/css/reference/values/angle-percentage/index.md b/files/en-us/web/css/reference/values/angle-percentage/index.md index b47f52d564592dc..0466824078783e2 100644 --- a/files/en-us/web/css/reference/values/angle-percentage/index.md +++ b/files/en-us/web/css/reference/values/angle-percentage/index.md @@ -8,7 +8,7 @@ sidebar: cssref The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/Reference/Values/Data_types) represents a value that can be either an {{Cssxref("angle")}} or a {{Cssxref("percentage")}}. -Where an `` is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a {{Cssxref("calc", "calc()")}} expression. +Where an `` is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a {{cssxref("calc()")}} expression. ## Syntax diff --git a/files/en-us/web/css/reference/values/angle/index.md b/files/en-us/web/css/reference/values/angle/index.md index 1792084a57f2b88..a324e59b830bae0 100644 --- a/files/en-us/web/css/reference/values/angle/index.md +++ b/files/en-us/web/css/reference/values/angle/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.angle sidebar: cssref --- -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/Reference/Values/Data_types) represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in {{cssxref("<gradient>")}}s and in some {{cssxref("transform")}} functions. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/Reference/Values/Data_types) represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in {{cssxref("gradient")}}s and in some {{cssxref("transform")}} functions. {{InteractiveExample("CSS Demo: <angle>")}} @@ -118,7 +118,7 @@ Optionally, it may be preceded by a single `+` or `-` sign. Positive numbers rep ## See also - [CSS data types](/en-US/docs/Web/CSS/Reference/Values/Data_types) -- The [``](/en-US/docs/Web/CSS/Reference/Values/gradient) type +- The {{cssxref("gradient")}} type - CSS rotation transforms: [`rotate()`](/en-US/docs/Web/CSS/Reference/Values/transform-function/rotate), [`rotate3d()`](/en-US/docs/Web/CSS/Reference/Values/transform-function/rotate3d), [`rotateX()`](/en-US/docs/Web/CSS/Reference/Values/transform-function/rotateX), [`rotateY()`](/en-US/docs/Web/CSS/Reference/Values/transform-function/rotateY), and [`rotateZ()`](/en-US/docs/Web/CSS/Reference/Values/transform-function/rotateZ) - [CSS transforms](/en-US/docs/Web/CSS/Guides/Transforms) - [Using CSS transforms](/en-US/docs/Web/CSS/Guides/Transforms/Using) diff --git a/files/en-us/web/css/reference/values/asin/index.md b/files/en-us/web/css/reference/values/asin/index.md index 6ef077e7e103d0e..8349dc942856603 100644 --- a/files/en-us/web/css/reference/values/asin/index.md +++ b/files/en-us/web/css/reference/values/asin/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.asin sidebar: cssref --- -The **`asin()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the inverse sine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an {{cssxref("<angle>")}} between `-90deg` and `90deg`. +The **`asin()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the inverse sine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an {{cssxref("angle")}} between `-90deg` and `90deg`. ## Syntax @@ -29,7 +29,7 @@ The `asin(number)` function accepts only one value as its parameter. ### Return value -The inverse sine of a `number` will always return an {{cssxref("<angle>")}} between `-90deg` and `90deg`. +The inverse sine of a `number` will always return an {{cssxref("angle")}} between `-90deg` and `90deg`. - If `number` is less than `-1` or greater than `1`, the result is `NaN`. - If `number` is `0⁻`, the result is `0⁻`. @@ -42,7 +42,7 @@ The inverse sine of a `number` will always return an {{cssxref("<angle>")} ### Rotate elements -The `asin()` function can be used to {{cssxref("transform-function/rotate", "rotate")}} elements as it return an {{cssxref("<angle>")}}. +The `asin()` function can be used to {{cssxref("transform-function/rotate", "rotate")}} elements as it return an {{cssxref("angle")}}. #### HTML diff --git a/files/en-us/web/css/reference/values/atan/index.md b/files/en-us/web/css/reference/values/atan/index.md index dc64f28eba2e6a3..eadb014e2535f9c 100644 --- a/files/en-us/web/css/reference/values/atan/index.md +++ b/files/en-us/web/css/reference/values/atan/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.atan sidebar: cssref --- -The **`atan()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the inverse tangent of a number between `-∞` and `+∞`. The function contains a single calculation that returns the number of radians representing an {{cssxref("<angle>")}} between `-90deg` and `90deg`. +The **`atan()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the inverse tangent of a number between `-∞` and `+∞`. The function contains a single calculation that returns the number of radians representing an {{cssxref("angle")}} between `-90deg` and `90deg`. ## Syntax @@ -29,7 +29,7 @@ The `atan(number)` function accepts only one value as its parameter. ### Return value -The inverse tangent of a `number` will always return an {{cssxref("<angle>")}} between `-90deg` and `90deg`. +The inverse tangent of a `number` will always return an {{cssxref("angle")}} between `-90deg` and `90deg`. - If `number` is `0⁻`, the result is `0⁻`. - If `number` is `+∞` the result is `90deg`. @@ -51,7 +51,7 @@ That is: ### Rotate elements -The `atan()` function can be used to {{cssxref("transform-function/rotate", "rotate")}} elements as it return an {{cssxref("<angle>")}}. +The `atan()` function can be used to {{cssxref("transform-function/rotate", "rotate")}} elements as it return an {{cssxref("angle")}}. #### HTML diff --git a/files/en-us/web/css/reference/values/attr/index.md b/files/en-us/web/css/reference/values/attr/index.md index d82a219f45c67fc..5f34a27e9897154 100644 --- a/files/en-us/web/css/reference/values/attr/index.md +++ b/files/en-us/web/css/reference/values/attr/index.md @@ -9,7 +9,7 @@ sidebar: cssref > [!NOTE] > The `attr()` function can be used with any CSS property, but support for properties other than {{CSSxRef("content")}} is experimental. -The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the {{cssxref("var", "var()")}} function substitutes a custom property value. It can also be used with [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements), in which case the attribute's value on the pseudo-element's originating element is returned. +The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the {{cssxref("var()")}} function substitutes a custom property value. It can also be used with [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements), in which case the attribute's value on the pseudo-element's originating element is returned. {{InteractiveExample("CSS Demo: attr()", "tabbed-shorter")}} diff --git a/files/en-us/web/css/reference/values/axis/index.md b/files/en-us/web/css/reference/values/axis/index.md index baea444f8d1a6f8..4e9fe33429ac2ce 100644 --- a/files/en-us/web/css/reference/values/axis/index.md +++ b/files/en-us/web/css/reference/values/axis/index.md @@ -13,10 +13,10 @@ The `` keyword values are used in the following [CSS functions](/en-US/doc - {{cssxref("scroll-timeline-axis")}} - {{cssxref("scroll-timeline")}} shorthand -- [`scroll()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/scroll) +- {{cssxref("animation-timeline/scroll", "scroll()")}} - {{cssxref("view-timeline-axis")}} - {{cssxref("view-timeline")}} shorthand -- [`view()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/view) +- {{cssxref("animation-timeline/view", "view()")}} ## Syntax diff --git a/files/en-us/web/css/reference/values/basic-shape/circle/index.md b/files/en-us/web/css/reference/values/basic-shape/circle/index.md index b180dc36e83786f..2228e7da9590150 100644 --- a/files/en-us/web/css/reference/values/basic-shape/circle/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/circle/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.basic-shape.circle sidebar: cssref --- -The **`circle()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) defines a circle using a radius and a position. It is one of the {{cssxref("<basic-shape>")}} data types. +The **`circle()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) defines a circle using a radius and a position. It is one of the {{cssxref("basic-shape")}} data types. {{InteractiveExample("CSS Demo: circle()")}} diff --git a/files/en-us/web/css/reference/values/basic-shape/ellipse/index.md b/files/en-us/web/css/reference/values/basic-shape/ellipse/index.md index e78ad76bd349719..52d2161d5f57b7c 100644 --- a/files/en-us/web/css/reference/values/basic-shape/ellipse/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/ellipse/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.basic-shape.ellipse sidebar: cssref --- -The **`ellipse()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/Reference/Values/Data_types). +The **`ellipse()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("basic-shape")}} [data types](/en-US/docs/Web/CSS/Reference/Values/Data_types). {{InteractiveExample("CSS Demo: ellipse()")}} diff --git a/files/en-us/web/css/reference/values/basic-shape/index.md b/files/en-us/web/css/reference/values/basic-shape/index.md index 9b3b1983d704fd6..b30c25985162f40 100644 --- a/files/en-us/web/css/reference/values/basic-shape/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/index.md @@ -76,7 +76,7 @@ The parameters common across the syntax of some basic shape functions include: The `closest-side` keyword value uses the length from the center of the shape to the closest side of the reference box to create the radius length. The `farthest-side` keyword value uses the length from the center of the shape to the farthest side of the reference box. - `` - - : Defines the center [``](/en-US/docs/Web/CSS/Reference/Values/position_value) of a [circle](#syntax_for_circles) or an [ellipse](#syntax_for_ellipses). It defaults to `center` if omitted. + - : Defines the center {{cssxref("<position>")}} of a [circle](#syntax_for_circles) or an [ellipse](#syntax_for_ellipses). It defaults to `center` if omitted. - `` - : Sets the {{SVGAttr("fill-rule")}} that is used to determine how the interior of the shape defined by the basic shapes [polygon](#syntax_for_polygons), [path](#syntax_for_paths), and [shape](#syntax_for_shapes) is to be filled. Possible values are `nonzero` (the default) and `evenodd`. @@ -191,7 +191,7 @@ The values in a `` function are computed as specified, with the fol When animating between two `` functions, the {{Glossary("interpolation")}} rules listed below are followed. The parameter values of each `` function form a list. For interpolation to occur between two shapes, both shapes must use the same reference box and the number and type of values in both `` lists must match. -Each value in the lists of the two `` functions is interpolated based on its computed value as a {{cssxref("number")}}, {{cssxref("length")}}, {{cssxref("percentage")}}, {{cssxref("angle")}}, or {{cssxref("calc", "calc()")}} where possible. Interpolation can still occur if the values are not one of those data types but are identical between the two interpolating basic shape functions, such as `nonzero`. +Each value in the lists of the two `` functions is interpolated based on its computed value as a {{cssxref("number")}}, {{cssxref("length")}}, {{cssxref("percentage")}}, {{cssxref("angle")}}, or {{cssxref("calc()")}} where possible. Interpolation can still occur if the values are not one of those data types but are identical between the two interpolating basic shape functions, such as `nonzero`. - **Both shapes are of type `ellipse()` or type `circle()`**: Interpolation is applied between each corresponding value if their radii are specified as either a {{cssxref("length")}} or a {{cssxref("percentage")}} (rather than keywords such as `closest-side` or `farthest-side`). diff --git a/files/en-us/web/css/reference/values/basic-shape/inset/index.md b/files/en-us/web/css/reference/values/basic-shape/inset/index.md index 72d2e8724bc7e4d..cd7641e162d13e3 100644 --- a/files/en-us/web/css/reference/values/basic-shape/inset/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/inset/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.basic-shape.inset sidebar: cssref --- -The **`inset()`** [CSS](/en-US/docs/Web/CSS) function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/Reference/Values/Data_types). +The **`inset()`** [CSS](/en-US/docs/Web/CSS) function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the {{cssxref("basic-shape")}} [data types](/en-US/docs/Web/CSS/Reference/Values/Data_types). {{InteractiveExample("CSS Demo: inset()")}} diff --git a/files/en-us/web/css/reference/values/basic-shape/path/index.md b/files/en-us/web/css/reference/values/basic-shape/path/index.md index 3b73d68638a141a..be2d2b2dc7f2912 100644 --- a/files/en-us/web/css/reference/values/basic-shape/path/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/path/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.basic-shape.path sidebar: cssref --- -The **`path()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) accepts an [SVG path](/en-US/docs/Web/SVG/Reference/Element/path) string, and is used in the [CSS shapes](/en-US/docs/Web/CSS/Guides/Shapes) and [CSS motion path](/en-US/docs/Web/CSS/Guides/Motion_path) modules to enable a shape to be drawn. The `path()` function is a {{cssxref("<basic-shape>")}} data type value. It can be used in the CSS {{cssxref("offset-path")}} and {{cssxref("clip-path")}} properties and in the SVG [`d`](/en-US/docs/Web/SVG/Reference/Attribute/d) attribute. +The **`path()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) accepts an [SVG path](/en-US/docs/Web/SVG/Reference/Element/path) string, and is used in the [CSS shapes](/en-US/docs/Web/CSS/Guides/Shapes) and [CSS motion path](/en-US/docs/Web/CSS/Guides/Motion_path) modules to enable a shape to be drawn. The `path()` function is a {{cssxref("basic-shape")}} data type value. It can be used in the CSS {{cssxref("offset-path")}} and {{cssxref("clip-path")}} properties and in the SVG [`d`](/en-US/docs/Web/SVG/Reference/Attribute/d) attribute. There are some limitations to using the `path()` function. The path has to be defined as a single string, so a custom path can't be created using variables ([`var()`](/en-US/docs/Web/CSS/Reference/Values/var) functions). Also, all the lengths in the path are implicitly defined in [pixel](/en-US/docs/Web/CSS/Guides/Values_and_units/Numeric_data_types#absolute_length_units) (`px`) units; other units can't be used. The [`shape()`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape) function offers more flexibility than the `path()` function. diff --git a/files/en-us/web/css/reference/values/basic-shape/polygon/index.md b/files/en-us/web/css/reference/values/basic-shape/polygon/index.md index 608f9f6f1289dbf..32d45f24bac0ce4 100644 --- a/files/en-us/web/css/reference/values/basic-shape/polygon/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/polygon/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.basic-shape.polygon sidebar: cssref --- -The **`polygon()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/Reference/Values/Data_types). It's used to draw a [polygon](https://en.wikipedia.org/wiki/Polygon) by providing one or more pairs of coordinates, each of which represents a vertex of the shape. +The **`polygon()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("basic-shape")}} [data types](/en-US/docs/Web/CSS/Reference/Values/Data_types). It's used to draw a [polygon](https://en.wikipedia.org/wiki/Polygon) by providing one or more pairs of coordinates, each of which represents a vertex of the shape. {{InteractiveExample("CSS Demo: polygon()")}} diff --git a/files/en-us/web/css/reference/values/basic-shape/rect/index.md b/files/en-us/web/css/reference/values/basic-shape/rect/index.md index 4b500238e29e6ef..9e35df73b3ff63d 100644 --- a/files/en-us/web/css/reference/values/basic-shape/rect/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/rect/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.basic-shape.rect sidebar: cssref --- -The **`rect()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/Reference/Values/Data_types). You can use the `rect()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region. +The **`rect()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the {{cssxref("basic-shape")}} [data type](/en-US/docs/Web/CSS/Reference/Values/Data_types). You can use the `rect()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region. ## Syntax @@ -116,6 +116,6 @@ In this example, the {{cssxref("offset-path")}} property uses the `rect()` funct - {{cssxref("basic-shape/xywh","xywh()")}} function - {{cssxref("clip-path")}} property - {{cssxref("offset-path")}} property -- {{cssxref("<basic-shape>")}} data type +- {{cssxref("basic-shape")}} data type - [CSS shapes](/en-US/docs/Web/CSS/Guides/Shapes) module - [Guide to basic shapes](/en-US/docs/Web/CSS/Guides/Shapes/Using_shape-outside) diff --git a/files/en-us/web/css/reference/values/basic-shape/shape/index.md b/files/en-us/web/css/reference/values/basic-shape/shape/index.md index d2d5273896c633c..04696edeaaf1335 100644 --- a/files/en-us/web/css/reference/values/basic-shape/shape/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/shape/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.basic-shape.shape sidebar: cssref --- -The **`shape()`** [CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used to define a shape for the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The `shape()` function is a member of the {{cssxref("<basic-shape>")}} data type. +The **`shape()`** [CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used to define a shape for the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The `shape()` function is a member of the {{cssxref("basic-shape")}} data type. ## Syntax diff --git a/files/en-us/web/css/reference/values/basic-shape/xywh/index.md b/files/en-us/web/css/reference/values/basic-shape/xywh/index.md index 8562c12f17aa0a7..012338204b41053 100644 --- a/files/en-us/web/css/reference/values/basic-shape/xywh/index.md +++ b/files/en-us/web/css/reference/values/basic-shape/xywh/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.basic-shape.xywh sidebar: cssref --- -The **`xywh()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle using the specified distances from the left (`x`) and top (`y`) edges of the containing block and the specified width (`w`) and height (`h`) of the rectangle. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/Reference/Values/Data_types). You can use the `xywh()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region. +The **`xywh()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle using the specified distances from the left (`x`) and top (`y`) edges of the containing block and the specified width (`w`) and height (`h`) of the rectangle. It is a basic shape function of the {{cssxref("basic-shape")}} [data type](/en-US/docs/Web/CSS/Reference/Values/Data_types). You can use the `xywh()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region. ## Syntax @@ -103,6 +103,6 @@ In the example below, the {{cssxref("offset-path")}} property uses the `xywh()` - {{cssxref("basic-shape/rect","rect()")}} function - {{cssxref("clip-path")}} property - {{cssxref("offset-path")}} property -- {{cssxref("<basic-shape>")}} data type +- {{cssxref("basic-shape")}} data type - [CSS shapes](/en-US/docs/Web/CSS/Guides/Shapes) module - [Guide to basic shapes](/en-US/docs/Web/CSS/Guides/Shapes/Using_shape-outside) diff --git a/files/en-us/web/css/reference/values/calc-size/index.md b/files/en-us/web/css/reference/values/calc-size/index.md index c850cb893cd74f6..a6fcb5bde06373d 100644 --- a/files/en-us/web/css/reference/values/calc-size/index.md +++ b/files/en-us/web/css/reference/values/calc-size/index.md @@ -10,7 +10,7 @@ sidebar: cssref {{seecompattable}} -The **`calc-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) allows you to perform calculations on [intrinsic size](/en-US/docs/Glossary/Intrinsic_Size) values such as `auto`, [`fit-content`](/en-US/docs/Web/CSS/Reference/Values/fit-content), and [`max-content`](/en-US/docs/Web/CSS/Reference/Values/max-content); this is not supported by the regular {{cssxref("calc()")}} function. +The **`calc-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) allows you to perform calculations on {{glossary("intrinsic size")}} values such as `auto`, {{cssxref("fit-content")}}, and {{cssxref("max-content")}}; this is not supported by the regular {{cssxref("calc()")}} function. `calc-size()` return values can also be [interpolated](/en-US/docs/Glossary/Interpolation), enabling size keyword values to be used in [animations](/en-US/docs/Web/CSS/Guides/Animations) and [transitions](/en-US/docs/Web/CSS/Guides/Transitions). In effect, including `calc-size()` in a property value automatically applies [`interpolate-size: allow-keywords`](/en-US/docs/Web/CSS/Reference/Properties/interpolate-size) to the selection. @@ -44,7 +44,7 @@ The parameters are: - `` - : The value (most commonly an intrinsic size) that you want to perform a calculation on. -- [``](/en-US/docs/Web/CSS/Reference/Values/calc-sum) +- {{cssxref("calc-sum")}} - : An expression that defines the calculation to be performed on the ``. ### Return value @@ -53,7 +53,7 @@ Returns a value equal to the `` modified by the `` ex ## Description -Certain browser layout algorithms have special behaviors for intrinsic sizing keywords. The `calc-size()` function is explicitly defined to represent an intrinsic size rather than a [``](/en-US/docs/Web/CSS/Reference/Values/length-percentage), thereby enforcing correctness. `calc-size()` enables calculations to be performed on intrinsic size values in a safe, well-defined manner. +Certain browser layout algorithms have special behaviors for intrinsic sizing keywords. The `calc-size()` function is explicitly defined to represent an intrinsic size rather than a {{cssxref("length-percentage")}}, thereby enforcing correctness. `calc-size()` enables calculations to be performed on intrinsic size values in a safe, well-defined manner. ### Valid values for the first argument (``) @@ -107,7 +107,7 @@ Mixing different intrinsic sizes together in the same calculation doesn't work. ### Valid values for the second argument (``) -The second `calc-size()` argument is a [``](/en-US/docs/Web/CSS/Reference/Values/calc-sum) expression. +The second `calc-size()` argument is a {{cssxref("calc-sum")}} expression. In this expression: @@ -115,11 +115,11 @@ In this expression: - Operands can include `size`, and any value types that make sense in the context. - The `+`, `-`, `*`, and `/` operators can be included. - Other mathematical functions can be included such as {{cssxref("round()")}}, {{cssxref("max()")}}, or even a nested `calc-size()`. -- The overall expression must match [``](/en-US/docs/Web/CSS/Reference/Values/length-percentage), and resolve to a [``](/en-US/docs/Web/CSS/Reference/Values/length). +- The overall expression must match {{cssxref("length-percentage")}}, and resolve to a {{cssxref("length")}}. ### Enabling animation of intrinsic size values -`calc-size()` return values can be interpolated, enabling animations between a [``](/en-US/docs/Web/CSS/Reference/Values/length-percentage) value and a `calc-size()` intrinsic size return value. +`calc-size()` return values can be interpolated, enabling animations between a {{cssxref("length-percentage")}} value and a `calc-size()` intrinsic size return value. > [!NOTE] > You should avoid animating box model properties if possible, to cut down on layout events and mitigate the resulting impact on performance (see [Critical rendering path > Layout](/en-US/docs/Web/Performance/Guides/Critical_rendering_path#layout)). diff --git a/files/en-us/web/css/reference/values/calc-sum/index.md b/files/en-us/web/css/reference/values/calc-sum/index.md index 9bfa8f3a31a789c..105e7de00673622 100644 --- a/files/en-us/web/css/reference/values/calc-sum/index.md +++ b/files/en-us/web/css/reference/values/calc-sum/index.md @@ -24,7 +24,7 @@ The `` type defines two numeric values and one of the following [arith ## Description -The operands in the expression may be any {{cssxref("<length>")}} syntax value. You can use {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, or {{cssxref("<integer>")}}. +The operands in the expression may be any {{cssxref("<length>")}} syntax value. You can use {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("angle")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, or {{cssxref("<integer>")}}. The two operands' types must be consistent. For lengths, you can't use `0` to mean `0px` (or another length unit). Instead, you must add an explicit unit: `margin-top: calc(0px + 20px);` is valid, while `margin-top: calc(0 + 20px);` is invalid. Percentage value types are resolved based on the context. For example, `margin-top: calc(50% + 20px);` is valid because `margin-top` resolves percentages to lengths. diff --git a/files/en-us/web/css/reference/values/calc/index.md b/files/en-us/web/css/reference/values/calc/index.md index 13cda78b36be680..8cf3d1c9f77b021 100644 --- a/files/en-us/web/css/reference/values/calc/index.md +++ b/files/en-us/web/css/reference/values/calc/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.calc sidebar: cssref --- -The **`calc()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) lets you perform calculations when specifying CSS property values. It can be used with {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, {{cssxref("<integer>")}}, and {{cssxref("color_value", "<color-function>")}} values. +The **`calc()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) lets you perform calculations when specifying CSS property values. It can be used with {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("angle")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, {{cssxref("<integer>")}}, and {{cssxref("color_value", "<color-function>")}} values. {{InteractiveExample("CSS Demo: calc()")}} @@ -82,10 +82,10 @@ The `calc()` function must stand in place of a full CSS value of one of the foll - {{cssxref("<length>")}} - {{cssxref("<frequency>")}} -- {{cssxref("<angle>")}} +- {{cssxref("angle")}} - {{cssxref("<time>")}} - {{cssxref("flex_value", "<flex>")}} -- {{cssxref("<resolution>")}} +- {{cssxref("resolution")}} - {{cssxref("<percentage>")}} - {{cssxref("<number>")}} - {{cssxref("<integer>")}} @@ -97,7 +97,7 @@ The resulting value of `calc()` must be compatible with the context in which it When an {{cssxref("<integer>")}} is expected, the `calc()` expression can also evaluate to a ``, which gets rounded to the nearest integer. So, `calc(1.4)` will result in a value of `1`. If the fractional part of the value is exactly `0.5`, the value is rounded towards positive infinity. For example, `calc(1.5)` will result in a value of `2`, while `calc(-1.5)` will round to `-1`. -`calc()` performs floating point math following the IEEE-754 standard, which results in some considerations concerning the `infinity` and `NaN` values. For more details on how constants are serialized, see the [`calc-keyword`](/en-US/docs/Web/CSS/Reference/Values/calc-keyword) page. +`calc()` performs floating point math following the IEEE-754 standard, which results in some considerations concerning the `infinity` and `NaN` values. For more details on how constants are serialized, see the {{cssxref("calc-keyword")}} page. ### Input considerations @@ -220,7 +220,7 @@ After all variables are expanded, `--width-c`'s value will be `calc(calc(100px / The `calc()` function can be used to adjust individual color channels in [relative colors](/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors) without the need for storing color channel values as variables. -In the example below, the first paragraph uses a [``](/en-US/docs/Web/CSS/Reference/Values/named-color). +In the example below, the first paragraph uses a {{cssxref("named-color")}}. In the paragraphs that follow, `calc()` is used with the [`rgb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/rgb) and [`hsl()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hsl) functions to adjust the values of each color channel relative to the original named color. ```html diff --git a/files/en-us/web/css/reference/values/clamp/index.md b/files/en-us/web/css/reference/values/clamp/index.md index 819b32585180df7..e7188fce1d56849 100644 --- a/files/en-us/web/css/reference/values/clamp/index.md +++ b/files/en-us/web/css/reference/values/clamp/index.md @@ -59,7 +59,7 @@ The `clamp(min, val, max)` function accepts three comma-separated expressions as - `max` - : The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound. -The expressions can be math functions (see {{CSSxRef("calc", "calc()")}} for more information), literal values, other expressions that evaluate to a valid argument type (like {{CSSxRef("<length>")}}), or nested {{CSSxRef("min", "min()")}} and {{CSSxRef("max", "max()")}} functions. For math expressions, you can use addition, subtraction, multiplication, and division without using the `calc()` function itself. You may also use parentheses to establish computation order when needed. +The expressions can be math functions (see {{cssxref("calc()")}} for more information), literal values, other expressions that evaluate to a valid argument type (like {{CSSxRef("<length>")}}), or nested {{cssxref("min()")}} and {{cssxref("max()")}} functions. For math expressions, you can use addition, subtraction, multiplication, and division without using the `calc()` function itself. You may also use parentheses to establish computation order when needed. You can use different units for each value in your expressions and different units in any math function making up any of the arguments. @@ -68,13 +68,13 @@ Keep the following aspects in mind while working with the function: - Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables _may_ be treated as if `auto` had been specified. - It is permitted to nest `max()` and `min()` functions as expression values, in which case the inner ones are treated as basic parentheses. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself. - The expression can be values combining the addition ( `+` ), subtraction ( `-` ), multiplication ( `*` ) and division ( `/` ) operators, using standard operator precedence rules. Make sure to put a space on each side of the `+` and `-` operands. The operands in the expression may be any {{CSSxRef("<length>")}} syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed. -- Oftentimes you will want to use {{CSSxRef("min", "min()")}} and {{CSSxRef("max", "max()")}} within a `clamp()` function. +- Oftentimes you will want to use {{cssxref("min()")}} and {{cssxref("max()")}} within a `clamp()` function. ### Return value `clamp(MIN, VAL, MAX)` is resolved as `max(MIN, min(VAL, MAX))`. -Based on the provided parameters, the function returns {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, or {{CSSxRef("<integer>")}}. +Based on the provided parameters, the function returns {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{cssxref("angle")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, or {{CSSxRef("<integer>")}}. ## Formal syntax @@ -84,7 +84,7 @@ Based on the provided parameters, the function returns {{CSSxRef("<length> ### min(), max(), and clamp() comparison -In this example we have a web page that uses {{CSSxRef("min", "min()")}}, {{CSSxRef("max", "max()")}}, and `clamp()` to set sizes responsively. +In this example we have a web page that uses {{cssxref("min()")}}, {{cssxref("max()")}}, and `clamp()` to set sizes responsively. The example adjusts the sizes of page elements in three ways: @@ -168,7 +168,7 @@ p { ## See also -- {{CSSxRef("calc", "calc()")}} -- {{CSSxRef("max", "max()")}} -- {{CSSxRef("min", "min()")}} +- {{cssxref("calc()")}} +- {{cssxref("max()")}} +- {{cssxref("min()")}} - [Learn: CSS Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units) diff --git a/files/en-us/web/css/reference/values/color-interpolation-method/index.md b/files/en-us/web/css/reference/values/color-interpolation-method/index.md index 1f88659f8a069c4..79e32bac005f9d5 100644 --- a/files/en-us/web/css/reference/values/color-interpolation-method/index.md +++ b/files/en-us/web/css/reference/values/color-interpolation-method/index.md @@ -85,7 +85,7 @@ The following example shows the effect of using different interpolation color sp The following example shows how to specify a color space when interpolating colors in repeating gradients. Three boxes show different types of repeating gradients using the [`repeating-conic-gradient()`](/en-US/docs/Web/CSS/Reference/Values/gradient/repeating-conic-gradient), [`repeating-linear-gradient()`](/en-US/docs/Web/CSS/Reference/Values/gradient/repeating-linear-gradient), and [`repeating-radial-gradient()`](/en-US/docs/Web/CSS/Reference/Values/gradient/repeating-radial-gradient) functions. The first box uses the Lab color space to interpolate between two color values. -The second and third boxes use OkLCh and additionally provide a [``](/en-US/docs/Web/CSS/Reference/Values/hue-interpolation-method) to specify how to interpolate between hue values. +The second and third boxes use OkLCh and additionally provide a {{cssxref("hue-interpolation-method")}} to specify how to interpolate between hue values. #### HTML @@ -97,7 +97,7 @@ The second and third boxes use OkLCh and additionally provide a [``](/en-US/docs/Web/CSS/Reference/Values/hue-interpolation-method) and {{glossary("color space")}} on color interpolation in gradients. +We used the same two colors in each gradient to demonstrate the different effects of {{cssxref("hue-interpolation-method")}} and {{glossary("color space")}} on color interpolation in gradients. ```css hidden .gradient { @@ -141,7 +141,7 @@ We used the same two colors in each gradient to demonstrate the different effect {{EmbedLiveSample("hue_interpolation_in_repeating_gradients", "100%", 250)}} Comparing the first and second boxes demonstrates the difference of interpolating between two colors in differing color spaces. -Comparing the second and third boxes shows the difference between [``](/en-US/docs/Web/CSS/Reference/Values/hue-interpolation-method)s, with the linear gradient using the shorter method (default) and the radial gradient using the longer method. +Comparing the second and third boxes shows the difference between {{cssxref("hue-interpolation-method")}}s, with the linear gradient using the shorter method (default) and the radial gradient using the longer method. ## Specifications @@ -153,5 +153,5 @@ Comparing the second and third boxes shows the difference between [` [!NOTE] - > The angles corresponding to particular hues differ across the sRGB (used by `hsl()` and {{CSSXref("color_value/hwb", "hwb()")}}), CIELAB (used by {{CSSXref("color_value/lch", "lch()")}}), and Oklab (used by {{CSSXref("color_value/oklch", "oklch()")}}) color spaces. See the {{CSSXref("<hue>")}} reference page for more detail and examples. + > The angles corresponding to particular hues differ across the sRGB (used by `hsl()` and {{CSSXref("color_value/hwb", "hwb()")}}), CIELAB (used by {{CSSXref("color_value/lch", "lch()")}}), and Oklab (used by {{CSSXref("color_value/oklch", "oklch()")}}) color spaces. See the {{cssxref("hue")}} reference page for more detail and examples. - `S` - : A {{CSSXref("<percentage>")}} or the keyword `none` (equivalent to `0%` in this case). This value represents the color's saturation. Here `100%` is completely saturated, while `0%` is completely unsaturated (gray). @@ -115,7 +115,7 @@ The parameters are as follows: - `from ` - : The keyword `from` is always included when defining a relative color, followed by a {{cssxref("<color>")}} value representing the **origin color**. This is the original color that the relative color is based on. The origin color can be _any_ valid {{cssxref("<color>")}} syntax, including another relative color. - `H` - - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the output color's {{CSSXref("<hue>")}} angle. + - : A {{CSSXref("<number>")}}, an {{cssxref("angle")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the output color's {{cssxref("hue")}} angle. - `S` - : A {{CSSXref("<percentage>")}} or the keyword `none` (equivalent to `0%` in this case). This represents the saturation of the output color. Here `100%` is completely saturated, while `0%` is completely unsaturated (gray). - `L` @@ -130,7 +130,7 @@ The parameters are as follows: When using relative color syntax inside an `hsl()` function, the browser converts the origin color into an equivalent HSL color (if it is not already specified as such). The color is defined as three distinct color channel values — `h` (hue), `s` (saturation), and `l` (lightness) — plus an alpha channel value (`alpha`). These channel values are made available inside the function to be used when defining the output color channel values: -- The `h` value is resolved to a {{cssxref("<number>")}} between `0` and `360`, inclusive, that represents the origin color's {{cssxref("<hue>")}} degree value. +- The `h` value is resolved to a {{cssxref("<number>")}} between `0` and `360`, inclusive, that represents the origin color's {{cssxref("hue")}} degree value. - The `s` and `l` values are each resolved to a `` between `0` and `100`, inclusive, where `100` is equivalent to `100%`. - The `alpha` value is resolved to a `` between `0` and `1`, inclusive. @@ -397,7 +397,7 @@ div.legacyHSLA { ## See also -- {{CSSXref("<hue>")}} data type +- {{cssxref("hue")}} data type - [`lch()`](/en-US/docs/Web/CSS/Reference/Values/color_value/lch) and [`hwb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hwb) color functions - [Hue interpolation in `color-mix()`](/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix#using_hue_interpolation_in_color-mix) - [List of all color notations](/en-US/docs/Web/CSS/Reference/Values/color_value) diff --git a/files/en-us/web/css/reference/values/color_value/hwb/index.md b/files/en-us/web/css/reference/values/color_value/hwb/index.md index a71107e4ed8a3ff..ce5026109a9f242 100644 --- a/files/en-us/web/css/reference/values/color_value/hwb/index.md +++ b/files/en-us/web/css/reference/values/color_value/hwb/index.md @@ -58,9 +58,9 @@ hwb(from lch(40% 70 240deg) h w calc(b - 30)) ## Description -This color function in the [`sRGB` color space](/en-US/docs/Glossary/Color_space#srgb) is defined by a {{CSSXref("<hue>")}} angle value, a whiteness value, a blackness value, and, optionally, an alpha value representing the color's transparency. +This color function in the [`sRGB` color space](/en-US/docs/Glossary/Color_space#srgb) is defined by a {{cssxref("hue")}} angle value, a whiteness value, a blackness value, and, optionally, an alpha value representing the color's transparency. -The angles corresponding to particular hues differ across the sRGB (used by {{CSSXref("color_value/hsl", "hsl()")}} and `hwb()`), CIELAB (used by {{CSSXref("color_value/lch", "lch()")}}), and Oklab (used by {{CSSXref("color_value/oklch", "oklch()")}}) color spaces. `hwb()` is in the same color space as `hsl()`, and therefore has the same hue color angles. See the {{CSSXref("<hue>")}} reference page for more detail and examples, or try changing the hues on the [color picker](/en-US/docs/Web/CSS/Guides/Colors#colors_in_action) to see it in action. +The angles corresponding to particular hues differ across the sRGB (used by {{CSSXref("color_value/hsl", "hsl()")}} and `hwb()`), CIELAB (used by {{CSSXref("color_value/lch", "lch()")}}), and Oklab (used by {{CSSXref("color_value/oklch", "oklch()")}}) color spaces. `hwb()` is in the same color space as `hsl()`, and therefore has the same hue color angles. See the {{cssxref("hue")}} reference page for more detail and examples, or try changing the hues on the [color picker](/en-US/docs/Web/CSS/Guides/Colors#colors_in_action) to see it in action. An `hwb()` color is fully saturated when its whiteness (`W`) and blackness (`B`) values are both `0`. For any hue value `H`, `hwb(H 0% 0%)` is the same color as `hsl(H 100% 50%)`. Increasing the whiteness value lightens the color. Increasing the blackness darkens the color. @@ -79,7 +79,7 @@ hwb(H W B[ / A]) The parameters are as follows: - `H` - - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the color's {{CSSXref("<hue>")}} angle. + - : A {{CSSXref("<number>")}}, an {{cssxref("angle")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the color's {{cssxref("hue")}} angle. - `W` - : A {{CSSXref("<percentage>")}} representing the color's whiteness or the keyword `none` (equivalent to `0%` in this case) to mix in. `0%` represents no whiteness. `100%` represents full whiteness if `B` is `0`, otherwise both the `W` and `B` values are normalized. @@ -108,7 +108,7 @@ The parameters are as follows: - : The keyword `from` is always included when defining a relative color, followed by a {{cssxref("<color>")}} value representing the **origin color**. This is the original color that the relative color is based on. The origin color can be _any_ valid {{cssxref("<color>")}} syntax, including another relative color. - `H` - - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the output color's {{CSSXref("<hue>")}} angle. + - : A {{CSSXref("<number>")}}, an {{cssxref("angle")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the output color's {{cssxref("hue")}} angle. - `W` - : A {{CSSXref("<percentage>")}} representing the color's whiteness or the keyword `none` (equivalent to `0%` in this case) to mix in. `0%` represents no whiteness. `100%` represents full whiteness if `B` is `0`, otherwise both the `W` and `B` values are normalized. @@ -278,4 +278,4 @@ The output is as follows: - [Color format converter tool](/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter) - [Using relative colors](/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors) - [CSS colors](/en-US/docs/Web/CSS/Guides/Colors) module -- {{CSSXref("<hue>")}}: the data type representing a hue angle of a color +- {{cssxref("hue")}}: the data type representing a hue angle of a color diff --git a/files/en-us/web/css/reference/values/color_value/index.md b/files/en-us/web/css/reference/values/color_value/index.md index 17b4b2a0a74e0c1..b0f793c759c794c 100644 --- a/files/en-us/web/css/reference/values/color_value/index.md +++ b/files/en-us/web/css/reference/values/color_value/index.md @@ -66,7 +66,7 @@ light-dark(rgb(255 255 255), rgb(0 0 0)) A `` value can be specified using one of the methods listed below: -- By keywords: {{CSSXref("<named-color>")}} (such as `blue` or `pink`), {{CSSXref("<system-color>")}}, and [`currentColor`](#currentcolor_keyword). +- By keywords: {{cssxref("named-color")}} (such as `blue` or `pink`), {{CSSXref("<system-color>")}}, and [`currentColor`](#currentcolor_keyword). - By hexadecimal notations: {{CSSXref("<hex-color>")}} (such as `#ff0000`). - By ``, with parameters in a {{glossary("color space")}} using functional notations: - [sRGB](https://en.wikipedia.org/wiki/SRGB) color space: {{CSSXref("color_value/hsl", "hsl()")}}, {{CSSXref("color_value/hwb", "hwb()")}}, and {{CSSXref("color_value/rgb", "rgb()")}}. @@ -457,7 +457,7 @@ div:nth-child(6) { ## See also - {{CSSXref("opacity")}}: the property defining transparency at the element level -- {{CSSXref("<hue>")}}: the data type representing the hue angle of a color +- {{cssxref("hue")}}: the data type representing the hue angle of a color - {{CSSXref("color")}}, {{CSSXref("background-color")}}, {{CSSXref("border-color")}}, {{CSSXref("box-shadow")}}, {{CSSXref("outline-color")}}, {{CSSXref("text-shadow")}}: common properties that use `` - {{CSSXref("color_value/color")}} function - [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/Guides/Colors/Applying_color) diff --git a/files/en-us/web/css/reference/values/color_value/lab/index.md b/files/en-us/web/css/reference/values/color_value/lab/index.md index 07a9569e62a5755..4b0b88d4f19ad73 100644 --- a/files/en-us/web/css/reference/values/color_value/lab/index.md +++ b/files/en-us/web/css/reference/values/color_value/lab/index.md @@ -477,7 +477,7 @@ The output is as follows: ## See also -- [``](/en-US/docs/Web/CSS/Reference/Values/color_value) data type +- {{cssxref("<color>")}} data type - [``](/en-US/docs/Web/CSS/Guides/Colors#functions) data type - [Using relative colors](/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors) - [CSS colors](/en-US/docs/Web/CSS/Guides/Colors) module diff --git a/files/en-us/web/css/reference/values/color_value/lch/index.md b/files/en-us/web/css/reference/values/color_value/lch/index.md index 98f7b3184ef7dc0..d769761bff81158 100644 --- a/files/en-us/web/css/reference/values/color_value/lch/index.md +++ b/files/en-us/web/css/reference/values/color_value/lch/index.md @@ -52,10 +52,10 @@ The parameters are as follows: - : A {{CSSXref("<number>")}}, a {{CSSXref("<percentage>")}}, or the keyword `none` (equivalent to `0%` in this case). This value is a measure of the color's chroma (roughly representing the "amount of color"). Its minimum useful value is `0%`, or `0`, while its maximum is theoretically unbounded (but in practice does not exceed `230`), with `100%` being equivalent to `150`. - `H` - - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg`) representing the color's {{CSSXref("<hue>")}} angle. + - : A {{CSSXref("<number>")}}, an {{cssxref("angle")}}, or the keyword `none` (equivalent to `0deg`) representing the color's {{cssxref("hue")}} angle. > [!NOTE] - > The angles corresponding to particular hues differ across the sRGB (used by {{CSSXref("color_value/hsl", "hsl()")}} and {{CSSXref("color_value/hwb", "hwb()")}}), CIELAB (used by `lch()`), and Oklab (used by {{CSSXref("color_value/oklch", "oklch()")}}) color spaces. See the [hues in LCH](#hues_in_lch) example below and the {{CSSXref("<hue>")}} reference page for more detail and examples. + > The angles corresponding to particular hues differ across the sRGB (used by {{CSSXref("color_value/hsl", "hsl()")}} and {{CSSXref("color_value/hwb", "hwb()")}}), CIELAB (used by `lch()`), and Oklab (used by {{CSSXref("color_value/oklch", "oklch()")}}) color spaces. See the [hues in LCH](#hues_in_lch) example below and the {{cssxref("hue")}} reference page for more detail and examples. - `A` {{optional_inline}} - : An {{CSSXref("<alpha-value>")}} representing the alpha channel value of the color, where the number `0` corresponds to `0%` (fully transparent) and `1` corresponds to `100%` (fully opaque). Additionally, the keyword `none` can be used to explicitly specify no alpha channel. If the `A` channel value is not explicitly specified, it defaults to 100%. If included, the value is preceded by a slash (`/`). @@ -81,7 +81,7 @@ The parameters are as follows: - : A {{CSSXref("<number>")}}, a {{CSSXref("<percentage>")}}, or the keyword `none` (equivalent to `0%` in this case). This value represents the output color's chroma value (roughly representing the "amount of color"). Its minimum useful value is `0%`, or `0`, while its maximum is theoretically unbounded (but in practice does not exceed `230`), with `100%` being equivalent to `150`. - `H` - - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg`) representing the output color's {{CSSXref("<hue>")}} angle. See the [hue example](#result_3) below. + - : A {{CSSXref("<number>")}}, an {{cssxref("angle")}}, or the keyword `none` (equivalent to `0deg`) representing the output color's {{cssxref("hue")}} angle. See the [hue example](#result_3) below. - `A` {{optional_inline}} - : An {{CSSXref("<alpha-value>")}} representing the alpha channel value of the output color, where the number `0` corresponds to `0%` (fully transparent) and `1` corresponds to `100%` (fully opaque). Additionally, the keyword `none` can be used to explicitly specify no alpha channel. If the `A` channel value is not explicitly specified, it defaults to the alpha channel value of the origin color. If included, the value is preceded by a slash (`/`). @@ -551,5 +551,5 @@ The output is as follows: - [List of all color notations](/en-US/docs/Web/CSS/Reference/Values/color_value) - [Using relative colors](/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors) - [CSS colors](/en-US/docs/Web/CSS/Guides/Colors) module -- {{CSSXref("<hue>")}} data type +- {{cssxref("hue")}} data type - [LCH colors in CSS: what, why, and how?](https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/) by Lea Verou (2020) diff --git a/files/en-us/web/css/reference/values/color_value/oklch/index.md b/files/en-us/web/css/reference/values/color_value/oklch/index.md index 01ef8fe33c692be..0f4959f124a6a9a 100644 --- a/files/en-us/web/css/reference/values/color_value/oklch/index.md +++ b/files/en-us/web/css/reference/values/color_value/oklch/index.md @@ -52,10 +52,10 @@ The parameters are as follows: - : A {{CSSXref("<number>")}}, a {{CSSXref("<percentage>")}}, or the keyword `none` (equivalent to `0%` in this case). This value is a measure of the color's chroma (roughly representing the "amount of color"). Its minimum useful value is `0`, while the maximum is theoretically unbounded (but in practice does not exceed `0.5`). In this case, `0%` is `0` and `100%` is the number `0.4`. - `H` - - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the color's {{CSSXref("<hue>")}} angle. + - : A {{CSSXref("<number>")}}, an {{cssxref("angle")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the color's {{cssxref("hue")}} angle. > [!NOTE] - > The angles corresponding to particular hues differ across the sRGB (used by {{CSSXref("color_value/hsl", "hsl()")}} and {{CSSXref("color_value/hwb", "hwb()")}}), CIELAB (used by {{CSSXref("color_value/lch", "lch()")}}), and Oklab (used by `oklch()`) color spaces. See the [Hues in `oklch()`](#hues_in_oklch) example below and the {{CSSXref("<hue>")}} reference page for more details and examples. + > The angles corresponding to particular hues differ across the sRGB (used by {{CSSXref("color_value/hsl", "hsl()")}} and {{CSSXref("color_value/hwb", "hwb()")}}), CIELAB (used by {{CSSXref("color_value/lch", "lch()")}}), and Oklab (used by `oklch()`) color spaces. See the [Hues in `oklch()`](#hues_in_oklch) example below and the {{cssxref("hue")}} reference page for more details and examples. - `A` {{optional_inline}} - : An {{CSSXref("<alpha-value>")}} representing the alpha channel value of the color, where the number `0` corresponds to `0%` (fully transparent) and `1` corresponds to `100%` (fully opaque). Additionally, the keyword `none` can be used to explicitly specify no alpha channel. If the `A` channel value is not explicitly specified, it defaults to 100%. If included, the value is preceded by a slash (`/`). @@ -81,7 +81,7 @@ The parameters are as follows: - : A {{CSSXref("<number>")}}, a {{CSSXref("<percentage>")}}, or the keyword `none` (equivalent to `0%` in this case). This value represents the output color's chroma value (roughly representing the "amount of color"). Its minimum useful value is `0`, while its maximum is theoretically unbounded (but in practice does not exceed `0.5`). In this case, `0%` is `0` and `100%` is the number `0.4`. - `H` - - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the output color's {{CSSXref("<hue>")}} angle. See a [sample of different hues](#result_3) in the [Examples](#examples) section below. + - : A {{CSSXref("<number>")}}, an {{cssxref("angle")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the output color's {{cssxref("hue")}} angle. See a [sample of different hues](#result_3) in the [Examples](#examples) section below. - `A` {{optional_inline}} - : An {{CSSXref("<alpha-value>")}} representing the alpha channel value of the output color, where the number `0` corresponds to `0%` (fully transparent) and `1` corresponds to `100%` (fully opaque). Additionally, the keyword `none` can be used to explicitly specify no alpha channel. If the `A` channel value is not explicitly specified, it defaults to the alpha channel value of the origin color. If included, the value is preceded by a slash (`/`). @@ -551,7 +551,7 @@ The output is as follows: - [List of all color notations](/en-US/docs/Web/CSS/Reference/Values/color_value) - [Using relative colors](/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors) - [CSS colors](/en-US/docs/Web/CSS/Guides/Colors) module -- {{CSSXref("<hue>")}} data type +- {{cssxref("hue")}} data type - {{cssxref("color_value/lch","lch()")}} and {{cssxref("color_value/oklab","oklab()")}} color functions - [Interactive post on OkLCh color space](https://abhisaha.com/blog/interactive-post-oklch-color-space) (2024) - [OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) (2024) diff --git a/files/en-us/web/css/reference/values/cos/index.md b/files/en-us/web/css/reference/values/cos/index.md index 70cce38f6cc479f..130e9946152ffef 100644 --- a/files/en-us/web/css/reference/values/cos/index.md +++ b/files/en-us/web/css/reference/values/cos/index.md @@ -6,7 +6,7 @@ browser-compat: css.types.cos sidebar: cssref --- -The **`cos()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the cosine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a {{cssxref("<number>")}} or an {{cssxref("<angle>")}} by interpreting the result of the argument as radians. That is, `cos(45deg)`, `cos(0.125turn)`, and `cos(3.14159 / 4)` all represent the same value, approximately `0.707`. +The **`cos()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is a trigonometric function that returns the cosine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a {{cssxref("<number>")}} or an {{cssxref("angle")}} by interpreting the result of the argument as radians. That is, `cos(45deg)`, `cos(0.125turn)`, and `cos(3.14159 / 4)` all represent the same value, approximately `0.707`. {{InteractiveExample("CSS Demo: cos()")}} @@ -92,7 +92,7 @@ width: calc(100px * cos(e / 2)); The `cos(angle)` function accepts only one value as its parameter. - `angle` - - : A calculation which resolves to a {{cssxref("<number>")}} or an {{cssxref("<angle>")}}. When specifying unitless numbers they are interpreted as a number of radians, representing an {{cssxref("<angle>")}}. + - : A calculation which resolves to a {{cssxref("<number>")}} or an {{cssxref("angle")}}. When specifying unitless numbers they are interpreted as a number of radians, representing an {{cssxref("angle")}}. ### Return value diff --git a/files/en-us/web/css/reference/values/counter/index.md b/files/en-us/web/css/reference/values/counter/index.md index 6205312d991a5dc..acc76a1c1367bcb 100644 --- a/files/en-us/web/css/reference/values/counter/index.md +++ b/files/en-us/web/css/reference/values/counter/index.md @@ -8,7 +8,7 @@ sidebar: cssref The **`counter()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) returns a string representing the current value of the named counter, if there is one. -The `counter()` function is generally used within [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) through the {{cssxref("content")}} property but, theoretically, it can be used wherever a [``](/en-US/docs/Web/CSS/Reference/Values/string) value is supported. +The `counter()` function is generally used within [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) through the {{cssxref("content")}} property but, theoretically, it can be used wherever a {{cssxref("string")}} value is supported. {{InteractiveExample("CSS Demo: counter()", "tabbed-shorter")}} @@ -48,7 +48,7 @@ counter(counter-name, upper-roman) ``` [Counters](/en-US/docs/Web/CSS/Guides/Counter_styles/Using_counters) have no visible effect by themselves. -The `counter()` and {{cssxref("counters", "counters()")}} functions are what make counters useful by returning developer-defined strings (or images). +The `counter()` and {{cssxref("counters()")}} functions are what make counters useful by returning developer-defined strings (or images). ### Values @@ -57,10 +57,10 @@ The `counter()` function accepts up to two parameters. The first parameter is th - `` - : A {{cssxref("<custom-ident>")}} identifying the counter, which is the same case-sensitive name used with the {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} property values. The counter name cannot start with two dashes and can't be `none`, `unset`, `initial`, or `inherit`. - `` - - : A {{cssxref("<list-style-type>")}} name, {{cssxref("<@counter-style>")}} name or {{cssxref("symbols", "symbols()")}} function, where a counter style name is a `numeric`, `alphabetic`, or `symbolic` predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other [predefined counter style](/en-US/docs/Web/CSS/Guides/Counter_styles). If omitted, the counter-style defaults to `decimal`. + - : A {{cssxref("<list-style-type>")}} name, {{cssxref("<@counter-style>")}} name or {{cssxref("symbols()")}} function, where a counter style name is a `numeric`, `alphabetic`, or `symbolic` predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other [predefined counter style](/en-US/docs/Web/CSS/Guides/Counter_styles). If omitted, the counter-style defaults to `decimal`. > [!NOTE] -> To join the counter values when nesting counters, use the {{cssxref("counters", "counters()")}} function, which provides an additional {{cssxref("string")}} parameter. +> To join the counter values when nesting counters, use the {{cssxref("counters()")}} function, which provides an additional {{cssxref("string")}} parameter. ## Formal syntax diff --git a/files/en-us/web/css/reference/values/counters/index.md b/files/en-us/web/css/reference/values/counters/index.md index 8bd18e6810bc528..c39ed7b41e69572 100644 --- a/files/en-us/web/css/reference/values/counters/index.md +++ b/files/en-us/web/css/reference/values/counters/index.md @@ -8,7 +8,7 @@ sidebar: cssref The **`counters()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style. -The `counters()` function is generally used within [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) through the {{cssxref("content")}} property, but theoretically, it can be used wherever a [``](/en-US/docs/Web/CSS/Reference/Values/string) value is supported. +The `counters()` function is generally used within [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) through the {{cssxref("content")}} property, but theoretically, it can be used wherever a {{cssxref("string")}} value is supported. The `counters()` function has two forms: `counters(, )` and `counters(, ,