diff --git a/files/en-us/web/api/canvasrenderingcontext2d/filter/index.md b/files/en-us/web/api/canvasrenderingcontext2d/filter/index.md index 042b4f689960719..9586334190f5c39 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/filter/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/filter/index.md @@ -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("<length>")}}. 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("<percentage>")}}. 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("<percentage>")}}. 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("<color>")}} 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("<percentage>")}}. 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("<angle>")}}. 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("<percentage>")}}. 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("<percentage>")}}. 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("<percentage>")}}. 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("<percentage>")}}. Converts the drawing to sepia. A value of `100%` means completely sepia. A value of `0%` leaves the drawing unchanged. diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fontkerning/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fontkerning/index.md index e71723b15e803ba..1b96bd3b61b198e 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/fontkerning/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/fontkerning/index.md @@ -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 diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md index 0c3b60a77bc7149..c77593cee9688a3 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md @@ -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 diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md index 40a90a9759da45f..4e6a4b9e21b3387 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md @@ -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 diff --git a/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md b/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md index 5fe45489797414e..1b0740c9c892b99 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md @@ -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 diff --git a/files/en-us/web/api/canvasrenderingcontext2d/roundrect/index.md b/files/en-us/web/api/canvasrenderingcontext2d/roundrect/index.md index 01a7d57494bc3a4..7fc49fab48c55a5 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/roundrect/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/roundrect/index.md @@ -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]` diff --git a/files/en-us/web/api/canvasrenderingcontext2d/textrendering/index.md b/files/en-us/web/api/canvasrenderingcontext2d/textrendering/index.md index 7e9cdc3bc43d4c7..17d7deab017334f 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/textrendering/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/textrendering/index.md @@ -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 diff --git a/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md b/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md index 76e3a01a46f07ec..eeba7bc13561522 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md @@ -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 diff --git a/files/en-us/web/api/css_font_loading_api/index.md b/files/en-us/web/api/css_font_loading_api/index.md index 35351eb9688c11d..518fa5bff6c8945 100644 --- a/files/en-us/web/api/css_font_loading_api/index.md +++ b/files/en-us/web/api/css_font_loading_api/index.md @@ -11,7 +11,7 @@ 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. @@ -19,7 +19,7 @@ The CSS Font Loading API overcomes this problem by letting authors control and t 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. diff --git a/files/en-us/web/api/css_object_model/css_value_serialization/index.md b/files/en-us/web/api/css_object_model/css_value_serialization/index.md index a022d598f93847d..3c8d67ca5dd90f1 100644 --- a/files/en-us/web/api/css_object_model/css_value_serialization/index.md +++ b/files/en-us/web/api/css_object_model/css_value_serialization/index.md @@ -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 [``](/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("<color>")}} 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. -- [``](/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`. -- [``](/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("<color>")}}: - 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`. -- [``](/en-US/docs/Web/CSS/Reference/Values/percentage): preserved as a percentage. -- [``](/en-US/docs/Web/CSS/Reference/Values/ratio): serialized to two numbers separated by `" / "`. -- [``](/en-US/docs/Web/CSS/Reference/Values/url_value): serialized as a quoted {{cssxref("<url>")}} (`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", "<url>")}}: serialized as a quoted {{cssxref("url_value", "<url>")}} (`url("...")`), with the URL resolved to an absolute URL. Note that `` values often get computed into absolute dimensions (like ``) during value processing, so they may not appear as percentages when serialized from computed styles. For dimensions with units, such as {{cssxref("<frequency>")}}, {{cssxref("<length>")}}, {{cssxref("<resolution>")}}, and {{cssxref("<time>")}}, 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) -- [``](/en-US/docs/Web/CSS/Reference/Values/color_value) +- {{cssxref("<color>")}} - [CSS values and units](/en-US/docs/Web/CSS/Guides/Values_and_units) module diff --git a/files/en-us/web/api/css_object_model/managing_screen_orientation/index.md b/files/en-us/web/api/css_object_model/managing_screen_orientation/index.md index d062a5b760d0f66..d28d61a86ca7523 100644 --- a/files/en-us/web/api/css_object_model/managing_screen_orientation/index.md +++ b/files/en-us/web/api/css_object_model/managing_screen_orientation/index.md @@ -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")}} diff --git a/files/en-us/web/api/css_typed_om_api/guide/index.md b/files/en-us/web/api/css_typed_om_api/guide/index.md index 753df1323ca4f83..07e90691d8d5174 100644 --- a/files/en-us/web/api/css_typed_om_api/guide/index.md +++ b/files/en-us/web/api/css_typed_om_api/guide/index.md @@ -67,7 +67,7 @@ In [browsers that support `computedStyleMap()`](/en-US/docs/Web/API/Element/comp {{EmbedLiveSample("Getting_all_the_properties_and_values", 120, 300)}} -Did you realize how many default CSS properties a link had? Update the first `document.querySelector` call to select the {{htmlelement("p")}} rather than the {{htmlelement("a")}}. You'll notice a difference in the [`margin-top`](/en-US/docs/Web/CSS/Reference/Properties/margin-top) and [`margin-bottom`](/en-US/docs/Web/CSS/Reference/Properties/margin-bottom) default computed values. +Did you realize how many default CSS properties a link had? Update the first `document.querySelector` call to select the {{htmlelement("p")}} rather than the {{htmlelement("a")}}. You'll notice a difference in the {{cssxref("margin-top")}} and {{cssxref("margin-bottom")}} default computed values. ### .get() method / custom properties @@ -231,8 +231,8 @@ Had the `width` or `height` been defined in a `` or ``, the [`C There are other types available: -- An [``](/en-US/docs/Web/CSS/Reference/Values/image) will return a {{domxref('CSSImageValue')}}. -- A [``](/en-US/docs/Web/CSS/Reference/Values/color_value) would return a {{domxref('CSSStyleValue')}}. +- An {{cssxref("image")}} will return a {{domxref('CSSImageValue')}}. +- A {{cssxref("<color>")}} would return a {{domxref('CSSStyleValue')}}. - A {{cssxref('transform')}} returns a `CSSTransformValue`. - A [custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) returns a {{domxref('CSSUnparsedValue')}}. @@ -318,7 +318,7 @@ console.log(parsedUnit.value); // 1.2 ### CSSMathSum -Although the [`