mdn · dipikabh · Dec 17, 2025 · Dec 16, 2025 · Dec 16, 2025 · Dec 16, 2025
@@ -18,25 +18,25 @@ It is similar to the CSS {{cssxref("filter")}} property and accepts the same val
 The `filter` property accepts a value of `"none"` or one or more
 of the following filter functions in a string.
 
-- [`url()`](/en-US/docs/Web/CSS/Reference/Values/url_function)
+- {{cssxref("url_function", "url()")}}
   - : A CSS {{cssxref("url_function", "url()")}}. Takes any URL that resolves to SVG filter element.
     This can be the ID of an element, a path to external XML file, or even a data encoded SVG value.
-- [`blur()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/blur)
+- {{cssxref("filter-function/blur", "blur()")}}
   - : A CSS {{cssxref("&lt;length&gt;")}}. Applies a Gaussian blur to the drawing. It
     defines the value of the standard deviation to the Gaussian function, i.e., how many
     pixels on the screen blend into each other; thus, a larger value will create more
     blur. A value of `0` leaves the input unchanged.
-- [`brightness()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/brightness)
+- {{cssxref("filter-function/brightness", "brightness()")}}
   - : A CSS {{cssxref("&lt;percentage&gt;")}}. Applies a linear multiplier to the drawing,
     making it appear brighter or darker. A value under `100%` darkens the
     image, while a value over `100%` brightens it. A value of `0%`
     will create an image that is completely black, while a value of `100%`
     leaves the input unchanged.
-- [`contrast()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/contrast)
+- {{cssxref("filter-function/contrast", "contrast()")}}
   - : A CSS {{cssxref("&lt;percentage&gt;")}}. Adjusts the contrast of the drawing. A
     value of `0%` will create a drawing that is completely black. A value of
     `100%` leaves the drawing unchanged.
-- [`drop-shadow()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/drop-shadow)
+- {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
   - : Applies a drop shadow effect to the drawing. A drop shadow is effectively a blurred,
     offset version of the drawing's alpha mask drawn in a particular color, composited
     below the drawing. This function takes up to five arguments:
@@ -53,26 +53,26 @@ of the following filter functions in a string.
       - : See {{cssxref("&lt;color&gt;")}} values for possible
         keywords and notations.
 
-- [`grayscale()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/grayscale)
+- {{cssxref("filter-function/grayscale", "grayscale()")}}
   - : A CSS {{cssxref("&lt;percentage&gt;")}}. Converts the drawing to grayscale. A value
     of `100%` is completely grayscale. A value of `0%` leaves the
     drawing unchanged.
-- [`hue-rotate()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/hue-rotate)
+- {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
   - : A CSS {{cssxref("&lt;angle&gt;")}}. Applies a hue rotation on the drawing. A value
     of `0deg` leaves the input unchanged.
-- [`invert()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/invert)
+- {{cssxref("filter-function/invert", "invert()")}}
   - : A CSS {{cssxref("&lt;percentage&gt;")}}. Inverts the drawing. A value of
     `100%` means complete inversion. A value of `0%` leaves the
     drawing unchanged.
-- [`opacity()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/opacity)
+- {{cssxref("filter-function/opacity", "opacity()")}}
   - : A CSS {{cssxref("&lt;percentage&gt;")}}. Applies transparency to the drawing. A
     value of `0%` means completely transparent. A value of `100%`
     leaves the drawing unchanged.
-- [`saturate()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/saturate)
+- {{cssxref("filter-function/saturate", "saturate()")}}
   - : A CSS {{cssxref("&lt;percentage&gt;")}}. Saturates the drawing. A value of
     `0%` means completely un-saturated. A value of `100%` leaves the
     drawing unchanged.
-- [`sepia()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/sepia)
+- {{cssxref("filter-function/sepia", "sepia()")}}
   - : A CSS {{cssxref("&lt;percentage&gt;")}}. Converts the drawing to sepia. A value of
     `100%` means completely sepia. A value of `0%` leaves the
     drawing unchanged.

@@ -13,7 +13,7 @@ The **`CanvasRenderingContext2D.fontKerning`** property of the [Canvas API](/en-
 Kerning adjusts how adjacent letters are spaced in a proportional font, allowing them to edge into each other's visual area if there is space available.
 For example, in well-kerned fonts, the characters `AV`, `Ta` and `We` nest together and make character spacing more uniform and pleasant to read than the equivalent text without kerning.
 
-The property corresponds to the [`font-kerning`](/en-US/docs/Web/CSS/Reference/Properties/font-kerning) CSS property.
+The property corresponds to the {{cssxref("font-kerning")}} CSS property.
 
 ## Value
 

@@ -10,7 +10,7 @@ browser-compat: api.CanvasRenderingContext2D.fontStretch
 
 The **`CanvasRenderingContext2D.fontStretch`** property of the [Canvas API](/en-US/docs/Web/API/Canvas_API) specifies how the font may be expanded or condensed when drawing text.
 
-The property corresponds to the [`font-stretch`](/en-US/docs/Web/CSS/Reference/Properties/font-stretch) CSS property when used with keywords (percentage values are not supported).
+The property corresponds to the {{cssxref("font-stretch")}} CSS property when used with keywords (percentage values are not supported).
 
 ## Value
 

@@ -10,7 +10,7 @@ browser-compat: api.CanvasRenderingContext2D.fontVariantCaps
 
 The **`CanvasRenderingContext2D.fontVariantCaps`** property of the [Canvas API](/en-US/docs/Web/API/Canvas_API) specifies an alternative capitalization of the rendered text.
 
-This corresponds to the CSS [`font-variant-caps`](/en-US/docs/Web/CSS/Reference/Properties/font-variant-caps) property.
+This corresponds to the CSS {{cssxref("font-variant-caps")}} property.
 
 ## Value
 

@@ -10,7 +10,7 @@ browser-compat: api.CanvasRenderingContext2D.letterSpacing
 
 The **`CanvasRenderingContext2D.letterSpacing`** property of the [Canvas API](/en-US/docs/Web/API/Canvas_API) specifies the spacing between letters when drawing text.
 
-This corresponds to the CSS [`letter-spacing`](/en-US/docs/Web/CSS/Reference/Properties/letter-spacing) property.
+This corresponds to the CSS {{cssxref("letter-spacing")}} property.
 
 ## Value
 

@@ -10,7 +10,7 @@ browser-compat: api.CanvasRenderingContext2D.roundRect
 
 The **`CanvasRenderingContext2D.roundRect()`** method of the Canvas 2D API adds a rounded rectangle to the current path.
 
-The radii of the corners can be specified in much the same way as the CSS [`border-radius`](/en-US/docs/Web/CSS/Reference/Properties/border-radius) property.
+The radii of the corners can be specified in much the same way as the CSS {{cssxref("border-radius")}} property.
 
 Like other methods that modify the current path, this method does not directly render anything.
 To draw the rounded rectangle onto a canvas, you can use the {{domxref("CanvasRenderingContext2D.fill", "fill()")}} or {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} methods.
@@ -33,7 +33,7 @@ roundRect(x, y, width, height, radii)
   - : The rectangle's height. Positive values are down, and negative are up.
 - `radii`
   - : A number or list specifying the radii of the circular arc to be used for the corners of the rectangle.
-    The number and order of the radii function in the same way as the [`border-radius`](/en-US/docs/Web/CSS/Reference/Properties/border-radius) CSS property when `width` and `height` are _positive_:
+    The number and order of the radii function in the same way as the {{cssxref("border-radius")}} CSS property when `width` and `height` are _positive_:
     - `all-corners`
     - `[all-corners]`
     - `[top-left-and-bottom-right, top-right-and-bottom-left]`

@@ -10,7 +10,7 @@ browser-compat: api.CanvasRenderingContext2D.textRendering
 
 The **`CanvasRenderingContext2D.textRendering`** property of the [Canvas API](/en-US/docs/Web/API/Canvas_API) provides information to the rendering engine about what to optimize for when rendering text.
 
-The values correspond to the SVG [`text-rendering`](/en-US/docs/Web/SVG/Reference/Attribute/text-rendering) attribute (and CSS [`text-rendering`](/en-US/docs/Web/CSS/Reference/Properties/text-rendering) property).
+The values correspond to the SVG [`text-rendering`](/en-US/docs/Web/SVG/Reference/Attribute/text-rendering) attribute (and CSS {{cssxref("text-rendering")}} property).
 
 ## Value
 

@@ -10,7 +10,7 @@ browser-compat: api.CanvasRenderingContext2D.wordSpacing
 
 The **`CanvasRenderingContext2D.wordSpacing`** property of the [Canvas API](/en-US/docs/Web/API/Canvas_API) specifies the spacing between words when drawing text.
 
-This corresponds to the CSS [`word-spacing`](/en-US/docs/Web/CSS/Reference/Properties/word-spacing) property.
+This corresponds to the CSS {{cssxref("word-spacing")}} property.
 
 ## Value
 

@@ -11,15 +11,15 @@ The **CSS Font Loading API** provides events and interfaces for dynamically load
 
 ## Concepts and usage
 
-CSS stylesheets allow authors to use custom fonts; specifying fonts to download using the [`@font-face`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face) rule, and applying them to elements with the [`font-family`](/en-US/docs/Web/CSS/Reference/Properties/font-family) property.
+CSS stylesheets allow authors to use custom fonts; specifying fonts to download using the {{cssxref("@font-face")}} rule, and applying them to elements with the {{cssxref("font-family")}} property.
 The point at which a font is downloaded is controlled by the user agent.
 Most agents only fetch and load fonts when they are first needed, which can result in a perceptible delay.
 
 The CSS Font Loading API overcomes this problem by letting authors control and track when a font face is fetched and loaded, and when it is added to the font face set owned by the document or worker.
 Adding a font face to the document or worker font face set allows the user agent to fetch and load the associated font resource automatically if needed.
 A font face can be loaded either before or after it is added to a font face set, but it _must_ be added to the set before it can be used for drawing.
 
-Font faces are defined in {{domxref('FontFace')}} objects, which specify a binary or URL font source and other properties of font in much the same way as the CSS [`@font-face`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face) rule.
+Font faces are defined in {{domxref('FontFace')}} objects, which specify a binary or URL font source and other properties of font in much the same way as the CSS {{cssxref("@font-face")}} rule.
 `FontFace` objects are added to the document or worker {{domxref('FontFaceSet')}} using {{domxref("Document.fonts")}} and {{domxref("WorkerGlobalScope.fonts")}}, respectively.
 Authors can trigger download of fonts using either `FontFace` or `FontFaceSet`, and monitor loading completion.
 `FontFaceSet` can additionally be used to determine when all fonts required by a page have loaded and the document layout is complete.
@@ -32,7 +32,7 @@ The status is set to `loaded` when the font face data has been successfully fetc
 ### Defining a font face
 
 Font faces are created using the [`FontFace` constructor](/en-US/docs/Web/API/FontFace/FontFace), which takes as parameters: the font family, the font source, and optional descriptors.
-The format and grammar of these arguments is the same as the equivalent [`@font-face`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face) definition.
+The format and grammar of these arguments is the same as the equivalent {{cssxref("@font-face")}} definition.
 
 The font source can either be binary data in an [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) or a font resource at a URL.
 A typical font face definition using a URL source might be as shown below.

@@ -11,7 +11,7 @@ spec-urls:
 
 Some CSSOM APIs _serialize_ property values into standardized string representations based on the value's [data type](/en-US/docs/Web/CSS/Reference/Values/Data_types). For example, you might set a color using the `hsl(240 100% 50%)` syntax, but when accessed through JavaScript, the value will be returned in the equivalent `"rgb(0, 0, 255)"` syntax.
 
-CSS data types can often be expressed in multiple syntaxes. For example, the [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) data type can be represented using named colors (`red`), hexadecimal notation (`#ff0000`), functional notation (`rgb(255 0 0)`), and more. These different syntaxes are exactly equivalent at every stage of [CSS value processing](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing), similar to how in JavaScript, the same string can be written with single quotes or double quotes, or the same number can be written in different formats (like `16`, `16.0`, or `0x10`).
+CSS data types can often be expressed in multiple syntaxes. For example, the {{cssxref("&lt;color&gt;")}} data type can be represented using named colors (`red`), hexadecimal notation (`#ff0000`), functional notation (`rgb(255 0 0)`), and more. These different syntaxes are exactly equivalent at every stage of [CSS value processing](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing), similar to how in JavaScript, the same string can be written with single quotes or double quotes, or the same number can be written in different formats (like `16`, `16.0`, or `0x10`).
 
 Because CSS converts all these surface representations to the same underlying value during value processing, it is often impossible to recover the original syntax from the already-parsed CSSOM. Furthermore, a _canonical_ representation is often more useful for scripts, because it allows comparisons and calculations based on how the content is presented to the user, rather than how it was originally authored.
 
@@ -31,14 +31,14 @@ Different APIs return `CSSStyleDeclaration` objects at different stages of [valu
 Each CSS value type has an associated serialization format defined by the CSS specifications. Some common rules include:
 
 - Keywords (like `auto`, `block`, `none`) serialize to all lowercase.
-- [`<angle>`](/en-US/docs/Web/CSS/Reference/Values/angle): serialized to some angle unit, depending on the context (unspecified). For `element.style` and `getComputedStyle()`, this is `deg`.
-- [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value):
+- {{cssxref("angle")}}: serialized to some angle unit, depending on the context (unspecified). For `element.style` and `getComputedStyle()`, this is `deg`.
+- {{cssxref("&lt;color&gt;")}}:
   - For sRGB colors ({{cssxref("named-color")}}, `transparent`, {{cssxref("system-color")}}, {{cssxref("hex-color")}}, `rgb`, `hsl`, `hwb`): serialized as legacy comma-separated syntax `rgb(R, G, B)` or `rgba(R, G, B, A)`, where all arguments are numbers. The `rgb` form is selected if the alpha is exactly `1`.
   - For `lab()`, `lch()`, `oklab()`, `oklch()`, and `color()` colors: the function form is preserved, with numeric arguments.
   - The keyword `currentColor` serializes as `currentcolor`.
-- [`<percentage>`](/en-US/docs/Web/CSS/Reference/Values/percentage): preserved as a percentage.
-- [`<ratio>`](/en-US/docs/Web/CSS/Reference/Values/ratio): serialized to two numbers separated by `" / "`.
-- [`<url>`](/en-US/docs/Web/CSS/Reference/Values/url_value): serialized as a quoted {{cssxref("&lt;url&gt;")}} (`url("...")`), with the URL resolved to an absolute URL.
+- {{cssxref("percentage")}}: preserved as a percentage.
+- {{cssxref("ratio")}}: serialized to two numbers separated by `" / "`.
+- {{cssxref("url_value", "&lt;url&gt;")}}: serialized as a quoted {{cssxref("url_value", "&lt;url&gt;")}} (`url("...")`), with the URL resolved to an absolute URL.
 
 Note that `<percentage>` values often get computed into absolute dimensions (like `<length>`) during value processing, so they may not appear as percentages when serialized from computed styles. For dimensions with units, such as {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;resolution&gt;")}}, and {{cssxref("&lt;time&gt;")}}, the serialized unit depends on the context and is not well-specified. `getComputedStyle()` and `element.style` serialize them into `Hz`, `px`, `dppx`, and `s` respectively.
 
@@ -179,5 +179,5 @@ This normalization allows scripts to compare or calculate lengths consistently.
 - [`CSSStyleDeclaration.getPropertyValue()`](/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)
 - [`Window.getComputedStyle()`](/en-US/docs/Web/API/Window/getComputedStyle)
 - [CSS colors](/en-US/docs/Web/CSS/Guides/Colors)
-- [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value)
+- {{cssxref("&lt;color&gt;")}}
 - [CSS values and units](/en-US/docs/Web/CSS/Guides/Values_and_units) module
@@ -8,7 +8,7 @@ page-type: guide
 
 The term _screen orientation_ refers to whether a browser [viewport](/en-US/docs/Glossary/Viewport) is in landscape mode (that is, the width of the viewport is greater than its height), or else in portrait mode (the height of the viewport is greater than its width)
 
-CSS provides the [`orientation`](/en-US/docs/Web/CSS/Reference/At-rules/@media/orientation) media feature to allow adjusting layout based on screen orientation.
+CSS provides the {{cssxref("@media/orientation")}} media feature to allow adjusting layout based on screen orientation.
 
 The [Screen Orientation API](/en-US/docs/Web/API/Screen_Orientation_API) provides a programmatic JavaScript API for working with screen orientation — including the ability to lock the viewport to a specific orientation.
 
@@ -174,4 +174,4 @@ It returns a [promise](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promi
 - {{domxref("Screen.orientation", "screen.orientation")}}
 - {{domxref("ScreenOrientation")}}
 - {{DOMxRef("ScreenOrientation.change_event", "change")}} event of {{domxref("ScreenOrientation")}}
-- [The orientation media query](/en-US/docs/Web/CSS/Reference/At-rules/@media/orientation)
+- {{cssxref("@media/orientation")}}