From a1596fe065b9c726f9412999d2218b7b6e256e30 Mon Sep 17 00:00:00 2001 From: A1lo Date: Mon, 17 Jul 2023 19:21:19 +0800 Subject: [PATCH 01/63] chore(css): replace "timing function" with "easing function" (#27945) Co-authored-by: Brian Thomas Smith --- files/en-us/glossary/bezier_curve/index.md | 2 +- files/en-us/mozilla/firefox/releases/55/index.md | 2 +- files/en-us/mozilla/firefox/releases/65/index.md | 2 +- .../web/accessibility/aria/attributes/aria-details/index.md | 2 +- .../web/api/web_animations_api/keyframe_formats/index.md | 2 +- files/en-us/web/css/alpha-value/index.md | 2 +- files/en-us/web/css/animation-direction/index.md | 2 +- files/en-us/web/css/animation-timing-function/index.md | 6 +++--- files/en-us/web/css/color_value/index.md | 2 +- files/en-us/web/css/css_transitions/index.md | 2 +- files/en-us/web/css/integer/index.md | 2 +- files/en-us/web/css/length/index.md | 2 +- files/en-us/web/css/number/index.md | 2 +- files/en-us/web/css/percentage/index.md | 2 +- files/en-us/web/css/position_value/index.md | 2 +- files/en-us/web/css/scroll-behavior/index.md | 2 +- files/en-us/web/css/shape/index.md | 2 +- files/en-us/web/css/transition-timing-function/index.md | 4 ++-- files/en-us/web/css/visibility/index.md | 2 +- 19 files changed, 22 insertions(+), 22 deletions(-) diff --git a/files/en-us/glossary/bezier_curve/index.md b/files/en-us/glossary/bezier_curve/index.md index 230e7cee73d5739..8106e5f3dbae26c 100644 --- a/files/en-us/glossary/bezier_curve/index.md +++ b/files/en-us/glossary/bezier_curve/index.md @@ -17,5 +17,5 @@ To draw a quadratic Bézier curve, two imaginary lines are drawn, one from P) ([Firefox bug 1248340](https://bugzil.la/1248340)). +- Implemented the `frames()` timing function ([Firefox bug 1248340](https://bugzil.la/1248340)). - Implemented the {{cssxref("text-justify")}} property ([Firefox bug 1343512](https://bugzil.la/1343512), [Firefox bug 276079](https://bugzil.la/276079)). - \[css-grid] {{cssxref("fit-content")}} unexpectedly reserves space for full clamp size in {{cssxref("repeat", "repeat()")}} ([Firefox bug 1359060](https://bugzil.la/1359060)). - The {{cssxref("float")}} / {{cssxref("clear")}} logical values — `inline-start` and `inline-end` — which were previously implemented but preffed off in release channels, are now available in all channels by default ([Firefox bug 1253919](https://bugzil.la/1253919)). diff --git a/files/en-us/mozilla/firefox/releases/65/index.md b/files/en-us/mozilla/firefox/releases/65/index.md index 56f9956bccb2c32..9618e96cf5e669b 100644 --- a/files/en-us/mozilla/firefox/releases/65/index.md +++ b/files/en-us/mozilla/firefox/releases/65/index.md @@ -39,7 +39,7 @@ This article provides information about the changes in Firefox 65 that will affe - {{cssxref("break-inside")}} is now an alias for {{cssxref("page-break-inside")}}. - The {{cssxref("overflow-wrap")}} property's `anywhere` value has been implemented ([Firefox bug 1505786](https://bugzil.la/1505786)). -- The new step position keywords `jump-start`, `jump-end`, `jump-none`, and `jump-both` — usable inside the [`steps()` timing function]() — have been implemented ([Firefox bug 1496619](https://bugzil.la/1496619)). This also coincides with the removal of the `frames()` timing function, which was the previous way of implementing such functionality, now deprecated. +- The new step position keywords `jump-start`, `jump-end`, `jump-none`, and `jump-both` — usable inside the [`steps()` timing function](/en-US/docs/Web/CSS/easing-function#step_easing_function) — have been implemented ([Firefox bug 1496619](https://bugzil.la/1496619)). This also coincides with the removal of the `frames()` timing function, which was the previous way of implementing such functionality, now deprecated. - Some new {{cssxref("appearance", "-webkit-appearance")}} values have been added, for compatibility with other browsers. In particular: - `meter`, which is now used as the default value for {{htmlelement("meter")}} elements in UA stylesheets. The existing value `meterbar` is now an alias for `meter` ([Firefox bug 1501483](https://bugzil.la/1501483)). diff --git a/files/en-us/web/accessibility/aria/attributes/aria-details/index.md b/files/en-us/web/accessibility/aria/attributes/aria-details/index.md index 8f972fb329e1097..3c86c19e42d6848 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-details/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-details/index.md @@ -46,7 +46,7 @@ When it comes to definition and term roles, the `aria-details` would be included

+ aria-label="Explanation of Bézier curve in CSS easing functions"> Animated Bézier curve showing 4 control points. ``` diff --git a/files/en-us/web/api/web_animations_api/keyframe_formats/index.md b/files/en-us/web/api/web_animations_api/keyframe_formats/index.md index dbcaec25c90be0a..14ebc888a266570 100644 --- a/files/en-us/web/api/web_animations_api/keyframe_formats/index.md +++ b/files/en-us/web/api/web_animations_api/keyframe_formats/index.md @@ -125,7 +125,7 @@ The following special attributes may also be specified: - offset - : The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. If this value is `null` or missing, the keyframe will be evenly spaced between adjacent keyframes. - easing - - : The [timing function](/en-US/docs/Web/CSS/easing-function) used from this keyframe until the next keyframe in the series. + - : The [easing function](/en-US/docs/Web/CSS/easing-function) used from this keyframe until the next keyframe in the series. - composite - : The {{domxref("KeyframeEffect.composite")}} operation used to combine the values specified in this keyframe with the underlying value. This will be `auto` if the composite operation specified on the effect is being used. diff --git a/files/en-us/web/css/alpha-value/index.md b/files/en-us/web/css/alpha-value/index.md index fc0159b64827d96..6061b1e9b40d887 100644 --- a/files/en-us/web/css/alpha-value/index.md +++ b/files/en-us/web/css/alpha-value/index.md @@ -23,7 +23,7 @@ If the alpha value is given as a percentage, 0% corresponds to fully transparent ## Interpolation -When animated, values of the `` CSS data type are {{Glossary("interpolation", "interpolated")}} as real, floating-point numbers. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. +When animated, values of the `` CSS data type are {{Glossary("interpolation", "interpolated")}} as real, floating-point numbers. The speed of the interpolation is determined by the [easing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. ## Examples diff --git a/files/en-us/web/css/animation-direction/index.md b/files/en-us/web/css/animation-direction/index.md index f692eb1a2f0ccc0..66555423fad0143 100644 --- a/files/en-us/web/css/animation-direction/index.md +++ b/files/en-us/web/css/animation-direction/index.md @@ -39,7 +39,7 @@ animation-direction: unset; - `normal` - : The animation plays _forwards_ each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again. This is the default value. - `reverse` - - : The animation plays _backwards_ each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed. For example, an `ease-in` timing function becomes `ease-out`. + - : The animation plays _backwards_ each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and easing functions are also reversed. For example, an `ease-in` easing function becomes `ease-out`. - `alternate` - : The animation reverses direction each cycle, with the first iteration being played _forwards_. The count to determine if a cycle is even or odd starts at one. - `alternate-reverse` diff --git a/files/en-us/web/css/animation-timing-function/index.md b/files/en-us/web/css/animation-timing-function/index.md index 3619ac8006e465c..d22e52b4fdb535e 100644 --- a/files/en-us/web/css/animation-timing-function/index.md +++ b/files/en-us/web/css/animation-timing-function/index.md @@ -54,7 +54,7 @@ animation-timing-function: unset; - : The easing function that corresponds to a given animation, as determined by {{cssxref("animation-name")}}. - 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 timing functions divides 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. + 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 divides 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` - : Equal to `cubic-bezier(0.25, 0.1, 0.25, 1.0)`, the default value, increases in velocity towards the middle of the animation, slowing back down at the end. @@ -96,9 +96,9 @@ animation-timing-function: unset; ## Description -Timing functions may be specified on individual keyframes in a [@keyframes](/en-US/docs/Web/CSS/@keyframes) rule. If no **`animation-timing-function`** is specified on a keyframe, the corresponding value of **`animation-timing-function`** from the element to which the animation is applied is used for that keyframe. +Easing functions may be specified on individual keyframes in a [@keyframes](/en-US/docs/Web/CSS/@keyframes) rule. If no **`animation-timing-function`** is specified on a keyframe, the corresponding value of **`animation-timing-function`** from the element to which the animation is applied is used for that keyframe. -Within a keyframe, `animation-timing-function` is an at-rule-specific descriptor, not the property of the same name. The timing is not being animated. Rather, a keyframe's timing function is applied on a property-by-property basis from the keyframe on which it is specified until the next keyframe specifying that property, or until the end of the animation if there is no subsequent keyframe specifying that property. As a result, an **`animation-timing-function`** specified on the **`100%`** or **`to`** keyframe will never be used. +Within a keyframe, `animation-timing-function` is an at-rule-specific descriptor, not the property of the same name. The timing is not being animated. Rather, a keyframe's easing function is applied on a property-by-property basis from the keyframe on which it is specified until the next keyframe specifying that property, or until the end of the animation if there is no subsequent keyframe specifying that property. As a result, an **`animation-timing-function`** specified on the **`100%`** or **`to`** keyframe will never be used. ## Formal definition diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index ed4605cfb6fc3ea..c5bca0e89153c38 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -99,7 +99,7 @@ background-color: hsl(0deg 100% 50%); Color interpolation happens with [gradients](/en-US/docs/Web/CSS/gradient), [transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions), and [animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations). -When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/computed_value) are interpolated linearly, with interpolation's speed being determined by the [timing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations. +When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/computed_value) are interpolated linearly, with interpolation's speed being determined by the [easing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations. ### Interpolation with missing components diff --git a/files/en-us/web/css/css_transitions/index.md b/files/en-us/web/css/css_transitions/index.md index 5e7b40fa3990008..46969033c65b627 100644 --- a/files/en-us/web/css/css_transitions/index.md +++ b/files/en-us/web/css/css_transitions/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-transitions/ {{CSSRef}} -The **CSS transitions** module lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. +The **CSS transitions** module lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their easing function, duration, and other attributes. ## Reference diff --git a/files/en-us/web/css/integer/index.md b/files/en-us/web/css/integer/index.md index ad74efea82efaa4..ed7592ae804f38b 100644 --- a/files/en-us/web/css/integer/index.md +++ b/files/en-us/web/css/integer/index.md @@ -17,7 +17,7 @@ The `` data type consists of one or several decimal digits, 0 through 9 ## Interpolation -When animated, values of the `` data type are {{Glossary("interpolation", "interpolated")}} using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the [floor function](https://en.wikipedia.org/wiki/Floor_function). The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. +When animated, values of the `` data type are {{Glossary("interpolation", "interpolated")}} using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the [floor function](https://en.wikipedia.org/wiki/Floor_function). The speed of the interpolation is determined by the [easing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. ## Examples diff --git a/files/en-us/web/css/length/index.md b/files/en-us/web/css/length/index.md index 268cc1998b286d6..d4a344bcd019d7d 100644 --- a/files/en-us/web/css/length/index.md +++ b/files/en-us/web/css/length/index.md @@ -186,7 +186,7 @@ For high-dpi devices, inches (`in`), centimeters (`cm`), and millimeters (`mm`) ## Interpolation -When animated, values of the `` data type are interpolated as real, floating-point numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. +When animated, values of the `` data type are interpolated as real, floating-point numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the [easing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. ## Examples diff --git a/files/en-us/web/css/number/index.md b/files/en-us/web/css/number/index.md index 0d7f63f56b2d68d..1c6bbe63f0bbf60 100644 --- a/files/en-us/web/css/number/index.md +++ b/files/en-us/web/css/number/index.md @@ -15,7 +15,7 @@ The syntax of `` extends the syntax of {{CSSxRef("<integer>")}}. A ## Interpolation -When animated, values of the `` CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. +When animated, values of the `` CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the [easing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. ## Examples diff --git a/files/en-us/web/css/percentage/index.md b/files/en-us/web/css/percentage/index.md index 268498b0b0fc5cb..55c7da5b5c087cc 100644 --- a/files/en-us/web/css/percentage/index.md +++ b/files/en-us/web/css/percentage/index.md @@ -17,7 +17,7 @@ The `` data type consists of a {{CSSxRef("<number>")}} followe ## Interpolation -When animated, values of the `` data type are {{Glossary("interpolation", "interpolated")}} as real, floating-point numbers. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. +When animated, values of the `` data type are {{Glossary("interpolation", "interpolated")}} as real, floating-point numbers. The speed of the interpolation is determined by the [easing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. ## Examples diff --git a/files/en-us/web/css/position_value/index.md b/files/en-us/web/css/position_value/index.md index 20729a7707209ee..157f2dc30a9ef01 100644 --- a/files/en-us/web/css/position_value/index.md +++ b/files/en-us/web/css/position_value/index.md @@ -42,7 +42,7 @@ keyword value keyword value /* Each value is an offset from the keyword that pre ## Interpolation -When animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single [timing function](/en-US/docs/Web/CSS/easing-function) for both coordinates, the point will move in a straight line. +When animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single [easing function](/en-US/docs/Web/CSS/easing-function) for both coordinates, the point will move in a straight line. ## Formal syntax diff --git a/files/en-us/web/css/scroll-behavior/index.md b/files/en-us/web/css/scroll-behavior/index.md index 868efd9d1d3cd5f..0472c2bc1ceaaaa 100644 --- a/files/en-us/web/css/scroll-behavior/index.md +++ b/files/en-us/web/css/scroll-behavior/index.md @@ -37,7 +37,7 @@ The `scroll-behavior` property is specified as one of the keyword values listed - `auto` - : The scrolling box scrolls instantly. - `smooth` - - : The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any. + - : The scrolling box scrolls in a smooth fashion using a user-agent-defined easing function over a user-agent-defined period of time. User agents should follow platform conventions, if any. ## Formal definition diff --git a/files/en-us/web/css/shape/index.md b/files/en-us/web/css/shape/index.md index cbdfdacafe5b34f..73e5e8a5eaecdb2 100644 --- a/files/en-us/web/css/shape/index.md +++ b/files/en-us/web/css/shape/index.md @@ -38,7 +38,7 @@ rect(top, right, bottom, left) ## Interpolation -When animated, values of the `` data type are interpolated over their `top`, `right`, `bottom`, and `left` components, each treated as a real, floating-point number. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. +When animated, values of the `` data type are interpolated over their `top`, `right`, `bottom`, and `left` components, each treated as a real, floating-point number. The speed of the interpolation is determined by the [easing function](/en-US/docs/Web/CSS/easing-function) associated with the animation. ## Example diff --git a/files/en-us/web/css/transition-timing-function/index.md b/files/en-us/web/css/transition-timing-function/index.md index 5e877a0172c0812..06d0083bacdf487 100644 --- a/files/en-us/web/css/transition-timing-function/index.md +++ b/files/en-us/web/css/transition-timing-function/index.md @@ -41,7 +41,7 @@ transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); -/* Multiple timing functions */ +/* Multiple easing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1); /* Global values */ @@ -58,7 +58,7 @@ transition-timing-function: unset; - : 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 timing functions divides 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. + 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 divides 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` - : Equal to `cubic-bezier(0.25, 0.1, 0.25, 1.0)`, the default value, increases in velocity towards the middle of the transition, slowing back down at the end. diff --git a/files/en-us/web/css/visibility/index.md b/files/en-us/web/css/visibility/index.md index a8e613631891fc5..97c5cd2879db26b 100644 --- a/files/en-us/web/css/visibility/index.md +++ b/files/en-us/web/css/visibility/index.md @@ -51,7 +51,7 @@ Using a `visibility` value of `hidden` on an element will remove it from the [ac ## Interpolation -When animated, visibility values are interpolated between _visible_ and _not-visible_. One of the start or ending values must therefore be `visible` or no {{Glossary("interpolation")}} can happen. The value is interpolated as a discrete step, where values of the timing function between `0` and `1` map to `visible` and other values of the timing function (which occur only at the start/end of the transition or as a result of `cubic-bezier()` functions with y values outside of \[0, 1]) map to the closer endpoint. +When animated, visibility values are interpolated between _visible_ and _not-visible_. One of the start or ending values must therefore be `visible` or no {{Glossary("interpolation")}} can happen. The value is interpolated as a discrete step, where values of the easing function between `0` and `1` map to `visible` and other values of the easing function (which occur only at the start/end of the transition or as a result of `cubic-bezier()` functions with y values outside of \[0, 1]) map to the closer endpoint. ## Notes From d2ea39ff374c63ff7023c490b2efbea677bf575a Mon Sep 17 00:00:00 2001 From: meetanoopverma <94305004+meetanoopverma@users.noreply.github.com> Date: Mon, 17 Jul 2023 16:59:47 +0530 Subject: [PATCH 02/63] Update the JSX In Depth link inside index.md (#27988) * Update the JSX In Depth link inside index.md This commit is to update the URL for hyperlink titled "JSX In Depth". * Update files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md --------- Co-authored-by: Brian Thomas Smith --- .../react_getting_started/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md index 6cabca520e96be6..39e4bc841e8b2b0 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -105,7 +105,7 @@ It's _possible_ to skip the compilation step and use [`React.createElement()`](h Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you to build user interfaces more quickly and intuitively, and allow others to better understand your codebase at a glance. -To read more about JSX, check out the React team's [JSX In Depth](https://reactjs.org/docs/jsx-in-depth.html) article. +To read more about JSX, check out the React team's [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx) article. ## Setting up your first React app From ca280ad7d5c071059ca39ee0d69ed1661ced2f1e Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 17 Jul 2023 04:52:35 -0700 Subject: [PATCH 03/63] Bump @mdn/yari from 2.28.1 to 2.28.2 (#27990) --- package.json | 2 +- yarn.lock | 38 +++++++++++++++++++------------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index c3d1eb20c9ea4b7..d5309d9b163471d 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "dependencies": { "@apideck/better-ajv-errors": "^0.3.6", "@caporal/core": "^2.0.2", - "@mdn/yari": "2.28.1", + "@mdn/yari": "2.28.2", "ajv": "^8.12.0", "ajv-formats": "^2.1.1", "async": "^3.2.4", diff --git a/yarn.lock b/yarn.lock index 9a1aef8af882e7c..1ac7f06529056fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -747,15 +747,15 @@ resolved "https://registry.npmjs.org/@mdn/bcd-utils-api/-/bcd-utils-api-0.0.4.tgz" integrity sha512-X9Qs+Um1EyFiQVZ8wEGPMEwN53VePTpZGMt2S0glKjVxwpF1kMQfKtPoaTcWmRl7kmNpCVYjvB5c3MdMTyxrxQ== -"@mdn/browser-compat-data@^5.3.0": - version "5.3.0" - resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.3.0.tgz#a71994a571ee3801b277e54f6d4022738ea0ecc4" - integrity sha512-TrVSwoxpNKImgvHdAUDRleHJXWjBOgrri+C1OogMSwOPeIPZ0gEdym4cRQWv7VGHnkHCZ/PwR01XQaWlD00KFA== +"@mdn/browser-compat-data@^5.3.3": + version "5.3.3" + resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.3.3.tgz#7d80203095ea6e865043794cd6ffeed589674d1b" + integrity sha512-89Ikx/aME3DwslhFWr4ZLhVtc7EDAuwhu5uwdwXKFIzJT1r6/9jJI2jD0ycESzVOf+0pPZq9vHe9LCE3NE7EuA== -"@mdn/yari@2.28.1": - version "2.28.1" - resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.28.1.tgz#1682be14249844f0cf918d617d2e3edc926109a9" - integrity sha512-6geSXGOVGzE6SiSc7p79333CMcXwrzuUq8WukzOPXCzz0mRIG+ctIPcR3nuKuXwMmKWz9vPHV9aiMQO/7elXKA== +"@mdn/yari@2.28.2": + version "2.28.2" + resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.28.2.tgz#2a438101eb3e15783cb2341707fa5ca9a13e8e9c" + integrity sha512-NhOzpwTuuO1l8ckePUo/tYGqNnSsJ75sGDZom7cIYPB3tGKjzQ1tHAUYmAKuXT0z1I2YGPai5E+eJUixYi3ijA== dependencies: "@caporal/core" "^2.0.2" "@codemirror/lang-css" "^6.2.0" @@ -765,7 +765,7 @@ "@codemirror/theme-one-dark" "^6.1.2" "@fast-csv/parse" "^4.3.6" "@mdn/bcd-utils-api" "^0.0.4" - "@mdn/browser-compat-data" "^5.3.0" + "@mdn/browser-compat-data" "^5.3.3" "@mozilla/glean" "1.4.0" "@sentry/integrations" "^7.57.0" "@sentry/node" "^7.57.0" @@ -830,7 +830,7 @@ send "^0.18.0" source-map-support "^0.5.21" sse.js "^0.6.1" - tempy "^3.0.0" + tempy "^3.1.0" unified "^10.1.2" unist-builder "^3.0.1" unist-util-visit "^4.1.2" @@ -7631,10 +7631,10 @@ temp-dir@^1.0.0: resolved "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz" integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0= -temp-dir@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz" - integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg== +temp-dir@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-3.0.0.tgz#7f147b42ee41234cc6ba3138cd8e8aa2302acffa" + integrity sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw== tempfile@^2.0.0: version "2.0.0" @@ -7644,13 +7644,13 @@ tempfile@^2.0.0: temp-dir "^1.0.0" uuid "^3.0.1" -tempy@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/tempy/-/tempy-3.0.0.tgz" - integrity sha512-B2I9X7+o2wOaW4r/CWMkpOO9mdiTRCxXNgob6iGvPmfPWgH/KyUD6Uy5crtWBxIBe3YrNZKR2lSzv1JJKWD4vA== +tempy@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/tempy/-/tempy-3.1.0.tgz#00958b6df85db8589cb595465e691852aac038e9" + integrity sha512-7jDLIdD2Zp0bDe5r3D2qtkd1QOCacylBuL7oa4udvN6v2pqr4+LcCr67C8DR1zkpaZ8XosF5m1yQSabKAW6f2g== dependencies: is-stream "^3.0.0" - temp-dir "^2.0.0" + temp-dir "^3.0.0" type-fest "^2.12.2" unique-string "^3.0.0" From 32a032232bc26bcab287f88539361c5dbc75c7cd Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 18 Jul 2023 01:13:50 +1000 Subject: [PATCH 04/63] FF116 Relnote/docs fontBoundingBoxAscent/Descent (#27937) --- .../mozilla/firefox/releases/116/index.md | 3 ++ .../fontboundingboxascent/index.md | 29 +++++++++++++++++-- .../fontboundingboxdescent/index.md | 29 +++++++++++++++++-- files/en-us/web/api/textmetrics/index.md | 24 +++++++-------- 4 files changed, 67 insertions(+), 18 deletions(-) diff --git a/files/en-us/mozilla/firefox/releases/116/index.md b/files/en-us/mozilla/firefox/releases/116/index.md index c9c1da94ab98a1a..74531991459de92 100644 --- a/files/en-us/mozilla/firefox/releases/116/index.md +++ b/files/en-us/mozilla/firefox/releases/116/index.md @@ -45,6 +45,9 @@ This article provides information about the changes in Firefox 116 that affect d ### APIs +- The {{domxref("TextMetrics.fontBoundingBoxAscent")}} and {{domxref("TextMetrics.fontBoundingBoxDescent")}} properties are now supported. + These metrics return, respectively, the distance above and below the {{domxref("CanvasRenderingContext2D.textBaseline")}} to the bounding rectangle of all the fonts used to render the text ([Firefox bug 1801198](https://bugzil.la/1801198)). + #### DOM #### Media, WebRTC, and Web Audio diff --git a/files/en-us/web/api/textmetrics/fontboundingboxascent/index.md b/files/en-us/web/api/textmetrics/fontboundingboxascent/index.md index 10b71c4e285d8d1..487298e928312ef 100644 --- a/files/en-us/web/api/textmetrics/fontboundingboxascent/index.md +++ b/files/en-us/web/api/textmetrics/fontboundingboxascent/index.md @@ -8,18 +8,40 @@ browser-compat: api.TextMetrics.fontBoundingBoxAscent {{APIRef("Canvas API")}} -The read-only `fontBoundingBoxAscent` property of the {{domxref("TextMetrics")}} interface is a `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. +The read-only `fontBoundingBoxAscent` property of the {{domxref("TextMetrics")}} interface returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute, to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. + +## Value + +A number, in CSS pixels. ## Examples +The code below shows how you can get the `fontBoundingBoxAscent` for some text in a particular font. + ```js const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); -const text = ctx.measureText("foo"); // returns TextMetrics object -text.fontBoundingBoxAscent; // 10; +ctx.font = "25px serif"; +const text = "Foo"; + +const textMetrics = ctx.measureText("foo"); // returns TextMetrics object +const ascentCssPixels = textMetrics.fontBoundingBoxAscent; +``` + +```html hidden +

+``` + +```js hidden +const log = document.getElementById("log"); +log.innerText = `fontBoundingBoxAscent: ${ascentCssPixels}`; ``` +The ascent in CSS pixels for the text "Foo" in a 25px serif font is shown below. + +{{EmbedLiveSample('Examples', 100, 50)}} + ## Specifications {{Specifications}} @@ -30,4 +52,5 @@ text.fontBoundingBoxAscent; // 10; ## See also +- {{domxref("TextMetrics.fontBoundingBoxDescent")}} - {{domxref("TextMetrics")}} diff --git a/files/en-us/web/api/textmetrics/fontboundingboxdescent/index.md b/files/en-us/web/api/textmetrics/fontboundingboxdescent/index.md index 4487ebda00d4a30..74809e3123f1bee 100644 --- a/files/en-us/web/api/textmetrics/fontboundingboxdescent/index.md +++ b/files/en-us/web/api/textmetrics/fontboundingboxdescent/index.md @@ -8,18 +8,40 @@ browser-compat: api.TextMetrics.fontBoundingBoxDescent {{APIRef("Canvas API")}} -The read-only `fontBoundingBoxDescent` property of the {{domxref("TextMetrics")}} interface is a `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. +The read-only `fontBoundingBoxDescent` property of the {{domxref("TextMetrics")}} interface returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. + +## Value + +A number, in CSS pixels. ## Examples +The code below shows how you can get the `fontBoundingBoxDescent` for text in a particular font. + ```js const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); -const text = ctx.measureText("foo"); // returns TextMetrics object -text.fontBoundingBoxDescent; // 3; +ctx.font = "25px serif"; +const text = "Foo"; + +const textMetrics = ctx.measureText("foo"); // returns TextMetrics object +const descentCssPixels = textMetrics.fontBoundingBoxDescent; +``` + +```html hidden +

+``` + +```js hidden +const log = document.getElementById("log"); +log.innerText = `fontBoundingBoxDescent: ${descentCssPixels}`; ``` +The descent in CSS pixels for the text "Foo" in a 25px serif font is shown below. + +{{EmbedLiveSample('Examples', 100, 50)}} + ## Specifications {{Specifications}} @@ -30,4 +52,5 @@ text.fontBoundingBoxDescent; // 3; ## See also +- {{domxref("TextMetrics.fontBoundingBoxAscent")}} - {{domxref("TextMetrics")}} diff --git a/files/en-us/web/api/textmetrics/index.md b/files/en-us/web/api/textmetrics/index.md index 6a130e42d4ba6ed..6b36d6eafa9479f 100644 --- a/files/en-us/web/api/textmetrics/index.md +++ b/files/en-us/web/api/textmetrics/index.md @@ -12,29 +12,29 @@ The **`TextMetrics`** interface represents the dimensions of a piece of text in ## Instance properties - {{domxref("TextMetrics.width")}} {{ReadOnlyInline}} - - : A `double` giving the calculated width of a segment of inline text in CSS pixels. It takes into account the current font of the context. + - : Returns the width of a segment of inline text in CSS pixels. It takes into account the current font of the context. - {{domxref("TextMetrics.actualBoundingBoxLeft")}} {{ReadOnlyInline}} - - : A `double` giving the distance parallel to the baseline from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point. + - : Distance parallel to the baseline from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point. - {{domxref("TextMetrics.actualBoundingBoxRight")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the right side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline. + - : Returns the distance from the alignment point given by the {{domxref("CanvasRenderingContext2D.textAlign")}} property to the right side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline. - {{domxref("TextMetrics.fontBoundingBoxAscent")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. - {{domxref("TextMetrics.fontBoundingBoxDescent")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. - {{domxref("TextMetrics.actualBoundingBoxAscent")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the bounding rectangle used to render the text, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the top of the bounding rectangle used to render the text, in CSS pixels. - {{domxref("TextMetrics.actualBoundingBoxDescent")}} {{ReadOnlyInline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels. - {{domxref("TextMetrics.emHeightAscent")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the top of the _em_ square in the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the top of the _em_ square in the line box, in CSS pixels. - {{domxref("TextMetrics.emHeightDescent")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the bottom of the _em_ square in the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the bottom of the _em_ square in the line box, in CSS pixels. - {{domxref("TextMetrics.hangingBaseline")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the hanging baseline of the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the hanging baseline of the line box, in CSS pixels. - {{domxref("TextMetrics.alphabeticBaseline")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the alphabetic baseline of the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the alphabetic baseline of the line box, in CSS pixels. - {{domxref("TextMetrics.ideographicBaseline")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : A `double` giving the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the ideographic baseline of the line box, in CSS pixels. + - : Returns the distance from the horizontal line indicated by the {{domxref("CanvasRenderingContext2D.textBaseline")}} property to the ideographic baseline of the line box, in CSS pixels. ## Examples From 77f614fdd62646d36ca63e1409e9b4f07a4421a7 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 18 Jul 2023 01:58:45 +1000 Subject: [PATCH 05/63] FF116 CSP script-src can specify hash for external files (#27876) * FF116 CSP script-src can specify hash for external files * Update files/en-us/web/http/headers/content-security-policy/script-src/index.md * Update files/en-us/web/http/headers/content-security-policy/script-src/index.md --- .../script-src/index.md | 52 ++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/http/headers/content-security-policy/script-src/index.md b/files/en-us/web/http/headers/content-security-policy/script-src/index.md index c574ca12e63ab14..57dc0cfe46ce796 100644 --- a/files/en-us/web/http/headers/content-security-policy/script-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/script-src/index.md @@ -46,7 +46,7 @@ Note that this same set of values can be used in all {{Glossary("fetch directive ## Examples -### Blocking resources from untrusted domains +### Whitelisting resources from trusted domains Given this CSP header that only allows scripts from `https://example.com`: @@ -75,6 +75,56 @@ document.getElementById("btn").addEventListener("click", doSomething); If you cannot replace inline event handlers, you can use the `'unsafe-hashes'` source expression to allow them. See [Unsafe hashes](#unsafe_hashes) for more information. +### Whitelisting external scripts using hashes + +Allowing trusted domains, as shown in the section above, is a broad-brushed approach for specifying the locations from which code can safely be loaded. +This is a pragmatic approach, in particular when your site uses many resources and you have confidence that the trusted site will not be compromised. + +An alternative method is to specify allowed scripts using file hashes. +Using this approach an external file in a ` +``` + +The `integrity` attribute can have multiple values, each providing a hash for the file calculated using a different algorithm. +In order for an external script to be loaded, CSP requires that _all_ valid hash values in the attribute must also be in the CSP `script-src` declaration. +Therefore the script below would not load, because the second hash is not present in the CSP header above. + +```html + +``` + +This rule only applies to _valid_ hash values. +Values that are not recognized as hashes by the browser are ignored, so the following script should load: + +```html + +``` + +[Subresource integrity](/en-US/docs/Web/Security/Subresource_Integrity) contains more information about calculating hashes and using the `integrity` attribute. + ### Unsafe inline script > **Note:** From 45268b07c84a04b45d46bcdf104e2b33be00adcf Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 17 Jul 2023 15:36:05 -0700 Subject: [PATCH 06/63] Run "yarn tool fix-flaws" on /learn/css (#28001) This PR is from the output of `yarn tool fix-flaws`, fixing various issues such as broken links throughout the content. This PR specifically modifies the `/learn/css` folder. --- .../css/building_blocks/advanced_styling_effects/index.md | 4 ++-- .../css/building_blocks/cascade_and_inheritance/index.md | 4 ++-- .../learn/css/building_blocks/cascade_layers/index.md | 4 ++-- .../handling_different_text_directions/index.md | 2 +- files/en-us/learn/css/building_blocks/organizing/index.md | 2 +- files/en-us/learn/css/building_blocks/selectors/index.md | 2 +- .../learn/css/building_blocks/the_box_model/index.md | 4 ++-- files/en-us/learn/css/css_layout/flexbox/index.md | 2 +- files/en-us/learn/css/css_layout/grids/index.md | 4 ++-- files/en-us/learn/css/css_layout/index.md | 2 +- files/en-us/learn/css/css_layout/introduction/index.md | 4 ++-- .../learn/css/css_layout/multiple-column_layout/index.md | 6 +++--- files/en-us/learn/css/css_layout/normal_flow/index.md | 2 +- .../css/css_layout/supporting_older_browsers/index.md | 6 +++--- files/en-us/learn/css/first_steps/what_is_css/index.md | 4 ++-- files/en-us/learn/css/howto/add_a_shadow/index.md | 2 +- files/en-us/learn/css/howto/center_an_item/index.md | 6 +++--- files/en-us/learn/css/howto/create_fancy_boxes/index.md | 6 +++--- files/en-us/learn/css/howto/index.md | 8 ++++---- files/en-us/learn/css/howto/make_box_transparent/index.md | 2 +- files/en-us/learn/css/howto/transition_button/index.md | 2 +- files/en-us/learn/css/styling_text/web_fonts/index.md | 2 +- 22 files changed, 40 insertions(+), 40 deletions(-) diff --git a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md index ba8464831f70e7e..b4e4b5d3d4ab807 100644 --- a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md @@ -306,7 +306,7 @@ You can see here that the multiply mix blend has blended together not only the t ## CSS shapes -While it is true that everything in CSS is a rectangular box, and images are a physical rectangular box, we can make it look as if our content flows around non-rectangular things by using [CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes). +While it is true that everything in CSS is a rectangular box, and images are a physical rectangular box, we can make it look as if our content flows around non-rectangular things by using [CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes). The CSS Shapes specification enables the wrapping of text around a non-rectangular shape. It's especially useful when working with an image which has some white-space you might want to float text around. @@ -318,7 +318,7 @@ The shape in this example is not reacting to the content of the image file. Inst > **Note:** In Firefox you can use the DevTools [Shapes Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html) to inspect Shapes. -The `circle()` function is just one of a few basic shapes that are defined, however there are a number of different ways to create shapes. For more information and example code for CSS Shapes see the [Guides to CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) on MDN. +The `circle()` function is just one of a few basic shapes that are defined, however there are a number of different ways to create shapes. For more information and example code for CSS Shapes see the [Guides to CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) on MDN. ## -webkit-background-clip: text diff --git a/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md index 6497ea1e3a798f5..f9fe145d007b455 100644 --- a/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -179,11 +179,11 @@ The amount of specificity a selector has is measured using three different value - **Classes**: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector. - **Elements**: Score one in this column for each element selector or pseudo-element contained inside the overall selector. -> **Note:** The universal selector ([`*`](/en-US/docs/Web/CSS/Universal_selectors)), [combinators](/en-US/docs/Learn/CSS/Building_blocks//selectors/combinators) (`+`, `>`, `~`, ' '), and specificity adjustment selector ([`:where()`](/en-US/docs/Web/CSS/:where)) along with its parameters, have no effect on specificity. +> **Note:** The universal selector ([`*`](/en-US/docs/Web/CSS/Universal_selectors)), [combinators](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators) (`+`, `>`, `~`, ' '), and specificity adjustment selector ([`:where()`](/en-US/docs/Web/CSS/:where)) along with its parameters, have no effect on specificity. The negation ([`:not()`](/en-US/docs/Web/CSS/:not)), relational selector ([`:has()`](/en-US/docs/Web/CSS/:has)), and the matches-any ([`:is()`](/en-US/docs/Web/CSS/:is)) pseudo-classes themselves don't have effect on specificity, but their parameters do. The specificity that each contributes to the specificity algorithm is the specificity of the selector in the parameter that has the greatest weight. -The following table shows a few isolated examples to get you in the mood. Try going through these, and make sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN [selectors reference](/en-US/docs/Web/CSS/CSS_Selectors/Selectors_and_combinators). +The following table shows a few isolated examples to get you in the mood. Try going through these, and make sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN [selectors reference](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators). | Selector | Identifiers | Classes | Elements | Total specificity | | ----------------------------------------- | ----------- | ------- | -------- | ----------------- | diff --git a/files/en-us/learn/css/building_blocks/cascade_layers/index.md b/files/en-us/learn/css/building_blocks/cascade_layers/index.md index 13884f8a6ff9242..3b70fc3d068b8c9 100644 --- a/files/en-us/learn/css/building_blocks/cascade_layers/index.md +++ b/files/en-us/learn/css/building_blocks/cascade_layers/index.md @@ -225,7 +225,7 @@ Try moving the last line, `@layer site, page;`, to make it the first line. What #### Layer creation and media queries -If you define a layer using [media](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) or [feature](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries) queries, and the media is not a match or the feature is not supported, the layer is not created. The example below shows how changing the size of your device or browser may change the layer order. In this example, we create the `site` layer only in wider browsers. We then assign styles to the `page` and `site` layers, in that order. +If you define a layer using [media](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) or [feature](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries) queries, and the media is not a match or the feature is not supported, the layer is not created. The example below shows how changing the size of your device or browser may change the layer order. In this example, we create the `site` layer only in wider browsers. We then assign styles to the `page` and `site` layers, in that order. {{EmbedGHLiveSample("css-examples/learn/layers/media-order.html", '100%', 500)}} @@ -252,7 +252,7 @@ You can import more than one CSS file into a single layer. The following declara @import url(sm-icons.css) layer(social); ``` -You can import styles and create layers based on specific conditions using [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) and [feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries). The following imports a style sheet into an `international` layer only if the browser supports `display: ruby`, and the file being imported is dependent on the width of the screen. +You can import styles and create layers based on specific conditions using [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) and [feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries). The following imports a style sheet into an `international` layer only if the browser supports `display: ruby`, and the file being imported is dependent on the width of the screen. ```css @import url("ruby-narrow.css") layer(international) supports(display: ruby) and diff --git a/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md b/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md index 0032fe09b85822e..785ec24ae6c369d 100644 --- a/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md @@ -109,7 +109,7 @@ You can see a comparison between physical and logical properties below. {{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1300)}} -There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_Logical_Properties). +There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). ### Logical values diff --git a/files/en-us/learn/css/building_blocks/organizing/index.md b/files/en-us/learn/css/building_blocks/organizing/index.md index fdd4c3a60ef374f..c5750410ef07f23 100644 --- a/files/en-us/learn/css/building_blocks/organizing/index.md +++ b/files/en-us/learn/css/building_blocks/organizing/index.md @@ -400,6 +400,6 @@ This is the final part of our building blocks module, and as you can see there a To learn more about layout in CSS, see the [CSS Layout](/en-US/docs/Learn/CSS/CSS_layout) module. -You should also now have the skills to explore the rest of the [MDN CSS](/en-US/docs/Web/CSS) material. You can look up properties and values, explore our [CSS Cookbook](/en-US/docs/Web/CSS/Layout_cookbook) for patterns to use, or continue reading in some of the specific guides, such as our [Guide to CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout). +You should also now have the skills to explore the rest of the [MDN CSS](/en-US/docs/Web/CSS) material. You can look up properties and values, explore our [CSS Cookbook](/en-US/docs/Web/CSS/Layout_cookbook) for patterns to use, or continue reading in some of the specific guides, such as our [Guide to CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout). {{PreviousMenuNext("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension", "Learn/CSS/Building_blocks")}} diff --git a/files/en-us/learn/css/building_blocks/selectors/index.md b/files/en-us/learn/css/building_blocks/selectors/index.md index 48e5c2c1d4ce48b..ceaed90954b8097 100644 --- a/files/en-us/learn/css/building_blocks/selectors/index.md +++ b/files/en-us/learn/css/building_blocks/selectors/index.md @@ -175,6 +175,6 @@ article > p { In this article we've introduced CSS selectors, which enable you to target particular HTML elements. Next, we'll take a closer look at [type, class, and ID selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors). -For a complete list of selectors, see our [CSS selectors reference](/en-US/docs/Web/CSS/CSS_selectors). +For a complete list of selectors, see our [CSS selectors reference](/en-US/docs/Web/CSS/CSS_Selectors). {{NextMenu("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} diff --git a/files/en-us/learn/css/building_blocks/the_box_model/index.md b/files/en-us/learn/css/building_blocks/the_box_model/index.md index efccbf12b921810..13e235c268a968f 100644 --- a/files/en-us/learn/css/building_blocks/the_box_model/index.md +++ b/files/en-us/learn/css/building_blocks/the_box_model/index.md @@ -74,7 +74,7 @@ You can change the inner display type for example by setting `display: flex;`. T When you move on to learn about CSS Layout in more detail, you will encounter [`flex`](/en-US/docs/Learn/CSS/CSS_layout/Flexbox), and various other inner values that your boxes can have, for example [`grid`](/en-US/docs/Learn/CSS/CSS_layout/Grids). -> **Note:** To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide [Block and Inline Layout](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow). +> **Note:** To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide [Block and Inline Layout](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow). ## Examples of different display types @@ -239,7 +239,7 @@ In the example below, we have two paragraphs. The top paragraph has a `margin-bo {{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 800)}} -A number of rules dictate when margins do and do not collapse. For further information see the detailed page on [mastering margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). The main thing to remember is that margin collapsing is a thing that happens if you are creating space with margins and don't get the space you expect. +A number of rules dictate when margins do and do not collapse. For further information see the detailed page on [mastering margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). The main thing to remember is that margin collapsing is a thing that happens if you are creating space with margins and don't get the space you expect. ### Borders diff --git a/files/en-us/learn/css/css_layout/flexbox/index.md b/files/en-us/learn/css/css_layout/flexbox/index.md index 2f2eeec3be722f3..049874e162a64ea 100644 --- a/files/en-us/learn/css/css_layout/flexbox/index.md +++ b/files/en-us/learn/css/css_layout/flexbox/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} -[Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) is a one-dimensional layout method for arranging items in rows or columns. Items _flex_ (expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the fundamentals. +[Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is a one-dimensional layout method for arranging items in rows or columns. Items _flex_ (expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the fundamentals. diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md index 4de4bf7de18fa4f..b6ab2139db6f18f 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -363,7 +363,7 @@ This works because grid is creating as many 200-pixel columns as will fit into t ## Line-based placement -We now move on from creating a grid to placing things on the grid. Our grid always has lines — these are numbered beginning with 1 and relate to the [writing mode](/en-US/docs/Web/CSS/CSS_Writing_Modes) of the document. For example, column line 1 in English (written left-to-right) would be on the left-hand side of the grid and row line 1 at the top, while in Arabic (written right-to-left), column line 1 would be on the right-hand side. +We now move on from creating a grid to placing things on the grid. Our grid always has lines — these are numbered beginning with 1 and relate to the [writing mode](/en-US/docs/Web/CSS/CSS_writing_modes) of the document. For example, column line 1 in English (written left-to-right) would be on the left-hand side of the grid and row line 1 at the top, while in Arabic (written right-to-left), column line 1 would be on the right-hand side. We can arrange things in accordance with these lines by specifying the start and end line. We do this using the following properties: @@ -699,7 +699,7 @@ In this overview, we've toured the main features of CSS Grid Layout. You should ## See also -- [CSS Grid guides](/en-US/docs/Web/CSS/CSS_Grid_Layout#guides) +- [CSS Grid guides](/en-US/docs/Web/CSS/CSS_grid_layout#guides) - [CSS Grid Inspector: Examine grid layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) - [CSS-Tricks Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) — an article explaining everything about Grid in a visually appealing way - [Grid Garden](https://cssgridgarden.com/) — an educational game to learn and better understand the basics of Grid diff --git a/files/en-us/learn/css/css_layout/index.md b/files/en-us/learn/css/css_layout/index.md index 3ebe15eef9dd66c..c49d3ad78ea9971 100644 --- a/files/en-us/learn/css/css_layout/index.md +++ b/files/en-us/learn/css/css_layout/index.md @@ -36,7 +36,7 @@ These articles will provide instruction on the fundamental layout tools and tech - [Normal flow](/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) - : Elements on webpages lay themselves out according to _normal flow_ - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it. - [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - - : [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox) is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can [test your flexbox skills](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills) to check your understanding before moving on. + - : [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can [test your flexbox skills](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills) to check your understanding before moving on. - [Grids](/en-US/docs/Learn/CSS/CSS_layout/Grids) - : CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then [test your grid skills](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills) before moving on. - [Floats](/en-US/docs/Learn/CSS/CSS_layout/Floats) diff --git a/files/en-us/learn/css/css_layout/introduction/index.md b/files/en-us/learn/css/css_layout/introduction/index.md index 04b38f41818f9fb..7525d66960fa742 100644 --- a/files/en-us/learn/css/css_layout/introduction/index.md +++ b/files/en-us/learn/css/css_layout/introduction/index.md @@ -77,7 +77,7 @@ The methods that can change how elements are laid out in CSS are: - **Floats** — Applying a {{cssxref("float")}} value such as `left` can cause block-level elements to wrap along one side of an element, like the way images sometimes have text floating around them in magazine layouts. - **The {{cssxref("position")}} property** — Allows you to precisely control the placement of boxes inside other boxes. `static` positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example, as fixed to the top of the browser viewport. - **Table layout** — Features designed for styling parts of an HTML table can be used on non-table elements using `display: table` and associated properties. -- **Multi-column layout** — The [Multi-column layout](/en-US/docs/Web/CSS/CSS_Columns) properties can cause the content of a block to layout in columns, as you might see in a newspaper. +- **Multi-column layout** — The [Multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout) properties can cause the content of a block to layout in columns, as you might see in a newspaper. ## The display property @@ -89,7 +89,7 @@ In addition to being able to change the default presentation by turning an item ## Flexbox -Flexbox is the short name for the [Flexible Box Layout](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) CSS module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply `display: flex` to the parent element of the elements you want to lay out; all its direct children then become _flex items_. We can see this in a simple example. +Flexbox is the short name for the [Flexible Box Layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) CSS module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply `display: flex` to the parent element of the elements you want to lay out; all its direct children then become _flex items_. We can see this in a simple example. ### Setting display: flex diff --git a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md index 5b7a4b47b8c6b9e..73884f55cde7d06 100644 --- a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md @@ -380,7 +380,7 @@ body { ### Setting break-inside -To control this behavior, we can use properties from the [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_Fragmentation) specification. This specification gives us properties to control the breaking of content in multicol and in paged media. For example, by adding the property {{cssxref("break-inside")}} with a value of `avoid` to the rules for `.card`. This is the container of the heading and text, so we don't want it fragmented. +To control this behavior, we can use properties from the [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) specification. This specification gives us properties to control the breaking of content in multicol and in paged media. For example, by adding the property {{cssxref("break-inside")}} with a value of `avoid` to the rules for `.card`. This is the container of the heading and text, so we don't want it fragmented. ```css .card { @@ -505,7 +505,7 @@ You now know how to use the basic features of multiple-column layout, another to ## See also -- [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_Fragmentation) -- [Using multi-column layouts](/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) +- [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) +- [Using multi-column layouts](/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) {{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}} diff --git a/files/en-us/learn/css/css_layout/normal_flow/index.md b/files/en-us/learn/css/css_layout/normal_flow/index.md index 703bfbffa14411e..94cd87ad6a7c9b3 100644 --- a/files/en-us/learn/css/css_layout/normal_flow/index.md +++ b/files/en-us/learn/css/css_layout/normal_flow/index.md @@ -48,7 +48,7 @@ That explains how elements are structured individually, but how about the way th Inline elements behave differently. They don't appear on new lines; instead, they all sit on the same line along with any adjacent (or wrapped) text content as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing content will move down to a new line. -If two vertically adjacent elements both have a margin set on them and their margins touch, the larger of the two margins remains and the smaller one disappears. This is known as [**margin collapsing**](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). +If two vertically adjacent elements both have a margin set on them and their margins touch, the larger of the two margins remains and the smaller one disappears. This is known as [**margin collapsing**](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). Collapsing margins is only relevant in the **vertical direction**. Let's look at a simple example that explains all of this: diff --git a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md index cfd744264f9941d..8a933cc7fb1ac44 100644 --- a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md +++ b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md @@ -203,7 +203,7 @@ The specification for feature queries also contains the ability to test if a bro The CSS Grid specification was initially prototyped In Internet Explorer 10; this means that while IE10 and IE11 do not have _modern_ grid support, they do have a version of Grid layout that is very usable, although different to the modern specification documented on this site. The IE10 and 11 implementations is `-ms-` prefixed, which means you can use it for these browsers and it will be ignored by non-Microsoft browsers. Edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid CSS. -The guide to [Progressive Enhancement in Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers. +The guide to [Progressive Enhancement in Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers. ## Testing older browsers @@ -220,8 +220,8 @@ Now that you have worked through our articles on CSS layout, it's time to test y ## See also - [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) -- [Backwards Compatibility of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) -- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [Backwards Compatibility of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox) +- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) - [Using CSS Grid: Supporting Browsers Without Grid](https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/) - [A tutorial which uses the IE10 and 11 version of Grid](https://24ways.org/2012/css3-grid-layout/) - [Should I try to use the IE10 implementation of Grid Layout?](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) diff --git a/files/en-us/learn/css/first_steps/what_is_css/index.md b/files/en-us/learn/css/first_steps/what_is_css/index.md index bf0bd00a5b8decf..f2963ddfe3acc09 100644 --- a/files/en-us/learn/css/first_steps/what_is_css/index.md +++ b/files/en-us/learn/css/first_steps/what_is_css/index.md @@ -54,7 +54,7 @@ A **document** is usually a text file structured using a markup language — {{G > **Note:** A browser is sometimes called a {{Glossary("User agent","user agent")}}, which basically means a computer program that represents a person inside a computer system. Browsers are the main type of user agents we think of when talking about CSS, however, they are not the only ones. There are other user agents available, such as those that convert HTML and CSS documents into PDFs to be printed. -CSS can be used for very basic document text styling — for example, for changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links. It can be used to create a layout — for example, [turning a single column of text into a layout](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) with a main content area and a sidebar for related information. It can even be used for effects such as [animation](/en-US/docs/Web/CSS/CSS_Animations). Have a look at the links in this paragraph for specific examples. +CSS can be used for very basic document text styling — for example, for changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links. It can be used to create a layout — for example, [turning a single column of text into a layout](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) with a main content area and a sidebar for related information. It can even be used for effects such as [animation](/en-US/docs/Web/CSS/CSS_animations). Have a look at the links in this paragraph for specific examples. ## CSS syntax @@ -95,7 +95,7 @@ You will find that you quickly learn some values, whereas others you will need t ## CSS modules -As there are so many things that you could style using CSS, the language is broken down into _modules_. You'll see reference to these modules as you explore MDN. Many of the documentation pages are organized around a particular module. For example, you could take a look at the MDN reference to the [Backgrounds and Borders](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to _Specifications_ that defines the technology (also see the section below). +As there are so many things that you could style using CSS, the language is broken down into _modules_. You'll see reference to these modules as you explore MDN. Many of the documentation pages are organized around a particular module. For example, you could take a look at the MDN reference to the [Backgrounds and Borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to _Specifications_ that defines the technology (also see the section below). At this stage, you don't need to worry too much about how CSS is structured; however, it can make it easier to find information if, for example, you are aware that a certain property is likely to be found among other similar things, and is therefore, probably in the same specification. diff --git a/files/en-us/learn/css/howto/add_a_shadow/index.md b/files/en-us/learn/css/howto/add_a_shadow/index.md index e8638429110009e..6c836aff42e9bc9 100644 --- a/files/en-us/learn/css/howto/add_a_shadow/index.md +++ b/files/en-us/learn/css/howto/add_a_shadow/index.md @@ -29,5 +29,5 @@ In the example below we have set the X and Y axes to 5px, the blur to 10px and t ## See also -- The [Box shadow generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator) +- The [Box shadow generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator) - [Learn CSS: Advanced styling effects.](/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects) diff --git a/files/en-us/learn/css/howto/center_an_item/index.md b/files/en-us/learn/css/howto/center_an_item/index.md index 38ac172a6ae75a8..2e4fccfc4afb97c 100644 --- a/files/en-us/learn/css/howto/center_an_item/index.md +++ b/files/en-us/learn/css/howto/center_an_item/index.md @@ -10,7 +10,7 @@ In this guide you can find out how to center an item inside another element, bot ## Center a box -To center one box inside another using CSS you will need to use [CSS box alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) properties on the parent container. As these alignment properties do not yet have browser support for block and inline layout you will need to make the parent a [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) or [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) container to turn on the ability to use alignment. +To center one box inside another using CSS you will need to use [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) properties on the parent container. As these alignment properties do not yet have browser support for block and inline layout you will need to make the parent a [flex](/en-US/docs/Web/CSS/CSS_flexible_box_layout) or [grid](/en-US/docs/Web/CSS/CSS_grid_layout) container to turn on the ability to use alignment. In the example below we have given the parent container `display: flex`; then set {{cssxref("justify-content")}} to center to align it horizontally, and {{cssxref("align-items")}} to center to align it vertically. @@ -20,5 +20,5 @@ In the example below we have given the parent container `display: flex`; then se ## See also -- [Box alignment in Flexbox](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) -- [Box alignment in Grid layout](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout) +- [Box alignment in Flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) +- [Box alignment in Grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) diff --git a/files/en-us/learn/css/howto/create_fancy_boxes/index.md b/files/en-us/learn/css/howto/create_fancy_boxes/index.md index dc4a1a77db1ffb7..0ebbe15bef09fa7 100644 --- a/files/en-us/learn/css/howto/create_fancy_boxes/index.md +++ b/files/en-us/learn/css/howto/create_fancy_boxes/index.md @@ -72,11 +72,11 @@ Yes, we get a circle: ## Backgrounds -When we talk about a fancy box, the core properties to handle that are [background-\* properties](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders). When you start fiddling with backgrounds it's like your CSS box is turned into a blank canvas you'll fill. +When we talk about a fancy box, the core properties to handle that are [background-\* properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders). When you start fiddling with backgrounds it's like your CSS box is turned into a blank canvas you'll fill. Before we jump to some practical examples, let's step back a bit as there are two things you should know about backgrounds. -- It's possible to set [several backgrounds](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) on a single box. They are stacked on top of each other like layers. +- It's possible to set [several backgrounds](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) on a single box. They are stacked on top of each other like layers. - Backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned. ```html hidden @@ -118,7 +118,7 @@ Okay, let's have fun with backgrounds: {{ EmbedLiveSample('Backgrounds', '100%', '200') }} -> **Note:** Gradients can be used in some very creative ways. If you want to see some creative examples, take a look at [Lea Verou's CSS patterns](https://projects.verou.me/css3patterns/). If you want to learn more about gradients, feel free to get into [our dedicated article](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients). +> **Note:** Gradients can be used in some very creative ways. If you want to see some creative examples, take a look at [Lea Verou's CSS patterns](https://projects.verou.me/css3patterns/). If you want to learn more about gradients, feel free to get into [our dedicated article](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients). ## Pseudo-elements diff --git a/files/en-us/learn/css/howto/index.md b/files/en-us/learn/css/howto/index.md index 027526d9b6174c6..2bd4d8541e613d6 100644 --- a/files/en-us/learn/css/howto/index.md +++ b/files/en-us/learn/css/howto/index.md @@ -14,7 +14,7 @@ This page rounds up questions and answers, and other material on the MDN site th - : Shadows can be added to boxes with the {{cssxref("box-shadow")}} property. This tutorial explains how it works and shows an example. - [How do I fill a box with an image without distorting the image?](/en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_image) - : The {{cssxref("object-fit")}} property provides different ways to fit an image into a box which has a different aspect ratio, and you can find out how to use them in this tutorial. -- [Which methods can be used to style boxes?](/en-US/docs/Learn/CSS/Howto/create_fancy_boxes) +- [Which methods can be used to style boxes?](/en-US/docs/Learn/CSS/Howto/Create_fancy_boxes) - : A rundown of the different properties that might be useful when styling boxes using CSS. - [How can I make elements semi-transparent?](/en-US/docs/Learn/CSS/Howto/Make_box_transparent) - : The {{cssxref("opacity")}} property and color values with an alpha channel can be used for this; find out which one to use when. @@ -49,9 +49,9 @@ This page rounds up questions and answers, and other material on the MDN site th ### Layout guides -- [Using CSS Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) -- [Using CSS multi-column layouts](/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) -- [Using CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) +- [Using CSS Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Using CSS multi-column layouts](/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) +- [Using CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - [Using CSS generated content](/en-US/docs/Learn/CSS/Howto/Generated_content) > **Note:** We have a cookbook dedicated to [CSS Layout solutions](/en-US/docs/Web/CSS/Layout_cookbook), with fully working examples and explanations of common layout tasks. Also check out [Practical Positioning Examples](/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples), which shows how you can use positioning to create a tabbed info box, and a sliding hidden panel. diff --git a/files/en-us/learn/css/howto/make_box_transparent/index.md b/files/en-us/learn/css/howto/make_box_transparent/index.md index 58447da4e0c27c5..998437c1d85de61 100644 --- a/files/en-us/learn/css/howto/make_box_transparent/index.md +++ b/files/en-us/learn/css/howto/make_box_transparent/index.md @@ -26,4 +26,4 @@ Try changing the opacity and alpha channel values in the below examples to see m ## See also -- [Applying color to HTML elements using CSS.](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) +- [Applying color to HTML elements using CSS.](/en-US/docs/Web/CSS/CSS_colors/Applying_color) diff --git a/files/en-us/learn/css/howto/transition_button/index.md b/files/en-us/learn/css/howto/transition_button/index.md index 30c925933af1f0b..944c85672ee3480 100644 --- a/files/en-us/learn/css/howto/transition_button/index.md +++ b/files/en-us/learn/css/howto/transition_button/index.md @@ -24,4 +24,4 @@ In the example the transition takes 1 second, you can try changing this to see t ## See also -- [Using CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- [Using CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) diff --git a/files/en-us/learn/css/styling_text/web_fonts/index.md b/files/en-us/learn/css/styling_text/web_fonts/index.md index 647892654666103..b4cc580c82d2a8f 100644 --- a/files/en-us/learn/css/styling_text/web_fonts/index.md +++ b/files/en-us/learn/css/styling_text/web_fonts/index.md @@ -197,7 +197,7 @@ Let's go through it to see what it does: ## Variable fonts -There is a newer font technology available in browsers called variable fonts. These are fonts that allow many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They are somewhat advanced for our beginner's course, but if you fancy stretching yourself and looking into them, read our [Variable fonts guide](/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide). +There is a newer font technology available in browsers called variable fonts. These are fonts that allow many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They are somewhat advanced for our beginner's course, but if you fancy stretching yourself and looking into them, read our [Variable fonts guide](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide). ## Summary From 856b52f634b889084869d2ee0b8bb62c084be04d Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 17 Jul 2023 15:37:27 -0700 Subject: [PATCH 07/63] Run "yarn tool fix-flaws" on /web/css (part 2) (#27996) --- files/en-us/web/css/-moz-image-rect/index.md | 2 +- files/en-us/web/css/clip-path/index.md | 10 ++-- files/en-us/web/css/color-scheme/index.md | 2 +- files/en-us/web/css/color/index.md | 4 +- files/en-us/web/css/color_value/index.md | 2 +- files/en-us/web/css/column-count/index.md | 2 +- files/en-us/web/css/column-gap/index.md | 6 +- .../en-us/web/css/column-rule-color/index.md | 2 +- files/en-us/web/css/column-width/index.md | 2 +- files/en-us/web/css/comments/index.md | 4 +- files/en-us/web/css/computed_value/index.md | 4 +- .../css/contain-intrinsic-block-size/index.md | 2 +- .../web/css/contain-intrinsic-height/index.md | 2 +- .../contain-intrinsic-inline-size/index.md | 2 +- .../web/css/contain-intrinsic-size/index.md | 2 +- .../web/css/contain-intrinsic-width/index.md | 2 +- files/en-us/web/css/contain/index.md | 8 +-- files/en-us/web/css/container-name/index.md | 6 +- files/en-us/web/css/container-type/index.md | 12 ++-- files/en-us/web/css/container/index.md | 6 +- files/en-us/web/css/containing_block/index.md | 6 +- .../en-us/web/css/content-visibility/index.md | 6 +- files/en-us/web/css/content/index.md | 2 +- .../en-us/web/css/counter-increment/index.md | 4 +- files/en-us/web/css/counter-reset/index.md | 6 +- files/en-us/web/css/counter-set/index.md | 4 +- files/en-us/web/css/counter/index.md | 6 +- files/en-us/web/css/counters/index.md | 6 +- files/en-us/web/css/cross-fade/index.md | 2 +- .../web/css/css_animated_properties/index.md | 6 +- files/en-us/web/css/css_animations/index.md | 2 +- .../css/css_backgrounds_and_borders/index.md | 2 +- .../using_multiple_backgrounds/index.md | 2 +- .../box_alignment_in_grid_layout/index.md | 4 +- .../index.md | 2 +- .../en-us/web/css/css_box_alignment/index.md | 4 +- files/en-us/web/css/css_box_model/index.md | 2 +- files/en-us/web/css/css_cascade/index.md | 2 +- files/en-us/web/css/css_colors/index.md | 2 +- .../css/css_compositing_and_blending/index.md | 4 +- .../using_feature_queries/index.md | 4 +- .../web/css/css_container_queries/index.md | 4 +- files/en-us/web/css/css_containment/index.md | 2 +- files/en-us/web/css/css_display/index.md | 32 +++++----- .../basic_concepts_of_flexbox/index.md | 2 +- .../mastering_wrapping_of_flex_items/index.md | 2 +- .../index.md | 4 +- .../flow_layout_and_writing_modes/index.md | 2 +- files/en-us/web/css/css_flow_layout/index.md | 2 +- .../index.md | 2 +- .../index.md | 2 +- .../floating_and_positioning/index.md | 2 +- .../index.md | 2 +- files/en-us/web/css/css_namespaces/index.md | 2 +- .../css_selectors/selector_structure/index.md | 6 +- .../selectors_and_combinators/index.md | 4 +- files/en-us/web/css/css_shadow_parts/index.md | 2 +- files/en-us/web/css/css_types/index.md | 2 +- .../web/css/css_values_and_units/index.md | 2 +- files/en-us/web/css/display-inside/index.md | 8 +-- files/en-us/web/css/display-outside/index.md | 4 +- files/en-us/web/css/display/index.md | 58 +++++++++---------- .../multi-keyword_syntax_of_display/index.md | 2 +- files/en-us/web/css/env/index.md | 2 +- .../css/filter-function/brightness/index.md | 2 +- .../web/css/filter-function/contrast/index.md | 2 +- .../css/filter-function/hue-rotate/index.md | 2 +- files/en-us/web/css/filter/index.md | 4 +- .../web/css/fit-content_function/index.md | 6 +- files/en-us/web/css/flex-basis/index.md | 4 +- files/en-us/web/css/flex-direction/index.md | 4 +- files/en-us/web/css/flex-flow/index.md | 4 +- files/en-us/web/css/flex-grow/index.md | 4 +- files/en-us/web/css/flex-shrink/index.md | 4 +- files/en-us/web/css/flex-wrap/index.md | 6 +- files/en-us/web/css/flex/index.md | 4 +- files/en-us/web/css/flex_value/index.md | 2 +- .../web/css/forced-color-adjust/index.md | 2 +- files/en-us/web/css/gap/index.md | 2 +- .../web/css/gradient/conic-gradient/index.md | 4 +- 80 files changed, 183 insertions(+), 183 deletions(-) diff --git a/files/en-us/web/css/-moz-image-rect/index.md b/files/en-us/web/css/-moz-image-rect/index.md index 4254b16736f1289..0583660e4ce851e 100644 --- a/files/en-us/web/css/-moz-image-rect/index.md +++ b/files/en-us/web/css/-moz-image-rect/index.md @@ -159,4 +159,4 @@ Not part of any standard. ## See also - [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions) -- [CSS Backgrounds and Borders module](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS Backgrounds and Borders module](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) diff --git a/files/en-us/web/css/clip-path/index.md b/files/en-us/web/css/clip-path/index.md index edd7c871f9bafa6..c323450b1cd0d0f 100644 --- a/files/en-us/web/css/clip-path/index.md +++ b/files/en-us/web/css/clip-path/index.md @@ -75,13 +75,13 @@ The `clip-path` property is specified as one or a combination of the values list - : If specified in combination with a ``, this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a {{cssxref("border-radius")}}), to be the clipping path. The geometry box can be one of the following values: - `margin-box` - - : Uses the [margin box](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box) as the reference box. + - : Uses the [margin box](/en-US/docs/Web/CSS/CSS_shapes/From_box_values#margin-box) as the reference box. - `border-box` - - : Uses the [border box](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#border-box) as the reference box. + - : Uses the [border box](/en-US/docs/Web/CSS/CSS_shapes/From_box_values#border-box) as the reference box. - `padding-box` - - : Uses the [padding box](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box) as the reference box. + - : Uses the [padding box](/en-US/docs/Web/CSS/CSS_shapes/From_box_values#padding-box) as the reference box. - `content-box` - - : Uses the [content box](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#content-box) as the reference box. + - : Uses the [content box](/en-US/docs/Web/CSS/CSS_shapes/From_box_values#content-box) as the reference box. - `fill-box` - : Uses the object bounding box as the reference box. - `stroke-box` @@ -92,7 +92,7 @@ The `clip-path` property is specified as one or a combination of the values list - `none` - : No clipping path is created. -> **Note:** A computed value other than **`none`** results in the creation of a new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) the same way that CSS {{cssxref("opacity")}} does for values other than `1`. +> **Note:** A computed value other than **`none`** results in the creation of a new [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) the same way that CSS {{cssxref("opacity")}} does for values other than `1`. ## Formal definition diff --git a/files/en-us/web/css/color-scheme/index.md b/files/en-us/web/css/color-scheme/index.md index 6119521e8b34c0b..bb586a3b42b864d 100644 --- a/files/en-us/web/css/color-scheme/index.md +++ b/files/en-us/web/css/color-scheme/index.md @@ -77,7 +77,7 @@ To opt the entire page into the user's color scheme preferences declare `color-s ## See also - [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query to detect user preferences for color schemes. -- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) +- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) - Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}} - {{cssxref("background-image")}} - {{cssxref("print-color-adjust")}} diff --git a/files/en-us/web/css/color/index.md b/files/en-us/web/css/color/index.md index 43c9b8e8977b965..f30957b14b05768 100644 --- a/files/en-us/web/css/color/index.md +++ b/files/en-us/web/css/color/index.md @@ -11,7 +11,7 @@ The **`color`** CSS property sets the foreground [color value](/en-US/docs/Web/C {{EmbedInteractiveExample("pages/css/color.html")}} -For an overview of using color in HTML, see [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color). +For an overview of using color in HTML, see [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color). ## Syntax @@ -141,4 +141,4 @@ p { - The {{cssxref("<color>")}} data type - Other color-related properties: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, and {{cssxref("print-color-adjust")}} -- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) +- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index c5bca0e89153c38..036384a9c459ec3 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -433,4 +433,4 @@ div:nth-child(6) { - {{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 `` - [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) -- [New functions, gradients, and hues in CSS colors (Level 4)](https://developer.mozilla.org/en-US/blog/css-color-module-level-4/) on MDN blog (2023) +- [New functions, gradients, and hues in CSS colors (Level 4)](/en-US/blog/css-color-module-level-4/) on MDN blog (2023) diff --git a/files/en-us/web/css/column-count/index.md b/files/en-us/web/css/column-count/index.md index 26c30216cdcc494..69f52e1b16602ff 100644 --- a/files/en-us/web/css/column-count/index.md +++ b/files/en-us/web/css/column-count/index.md @@ -81,4 +81,4 @@ column-count: unset; - {{CSSXref("column-width")}}, {{CSSXref("columns")}} shorthand - {{CSSXref("column-rule-color")}}, {{CSSXref("column-rule-style")}}, {{CSSXref("column-rule-width")}}, {{CSSXref("column-rule")}} shorthand - [Multiple-column Layout](/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) (Learn Layout) -- [Basic Concepts of Multicol](/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol) +- [Basic Concepts of Multicol](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts) diff --git a/files/en-us/web/css/column-gap/index.md b/files/en-us/web/css/column-gap/index.md index c3c3eeb1f434b95..af50569f5d4c82f 100644 --- a/files/en-us/web/css/column-gap/index.md +++ b/files/en-us/web/css/column-gap/index.md @@ -11,7 +11,7 @@ The **`column-gap`** [CSS](/en-US/docs/Web/CSS) property sets the size of the ga {{EmbedInteractiveExample("pages/css/column-gap.html")}} -Initially a part of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_Columns), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment), it may be used in Multi-column, Flexible Box, and Grid layouts. +Initially a part of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment), it may be used in Multi-column, Flexible Box, and Grid layouts. Note that `grid-column-gap` is an alias for this property. @@ -157,5 +157,5 @@ The `column-gap` property is specified as one of the values listed below. ## See also - Related CSS properties: {{CSSxRef("row-gap")}}, {{CSSxRef("gap")}} -- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ -- Multi-column Layout Guide: _[Styling Columns](/en-US/docs/Web/CSS/CSS_Columns/Styling_Columns)_ +- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters)_ +- Multi-column Layout Guide: _[Styling Columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns)_ diff --git a/files/en-us/web/css/column-rule-color/index.md b/files/en-us/web/css/column-rule-color/index.md index a9edb9f473052a5..1a26dcc66ecbdca 100644 --- a/files/en-us/web/css/column-rule-color/index.md +++ b/files/en-us/web/css/column-rule-color/index.md @@ -83,4 +83,4 @@ p { - The {{cssxref("<color>")}} data type - Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, and {{cssxref("caret-color")}} -- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) +- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) diff --git a/files/en-us/web/css/column-width/index.md b/files/en-us/web/css/column-width/index.md index b59d0c7ed71c477..6f2bed5303f15ca 100644 --- a/files/en-us/web/css/column-width/index.md +++ b/files/en-us/web/css/column-width/index.md @@ -87,4 +87,4 @@ The `column-width` property is specified as one of the values listed below. ## See also - [Multiple-column Layout](/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) (Learn Layout) -- [Basic Concepts of Multicol](/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol) +- [Basic Concepts of Multicol](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts) diff --git a/files/en-us/web/css/comments/index.md b/files/en-us/web/css/comments/index.md index 68ecd71b4554243..17bab579252673d 100644 --- a/files/en-us/web/css/comments/index.md +++ b/files/en-us/web/css/comments/index.md @@ -53,10 +53,10 @@ The `/* */` comment syntax is used for both single and multiline comments. There - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Specificity](/en-US/docs/Web/CSS/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - - [Box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) + - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - - [Margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) + - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - [Initial values](/en-US/docs/Web/CSS/initial_value) - [Computed values](/en-US/docs/Web/CSS/computed_value) diff --git a/files/en-us/web/css/computed_value/index.md b/files/en-us/web/css/computed_value/index.md index 8cf67d76404d1cc..ab757a55170e449 100644 --- a/files/en-us/web/css/computed_value/index.md +++ b/files/en-us/web/css/computed_value/index.md @@ -31,10 +31,10 @@ However, for some properties (those where percentages are relative to something - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - - [Box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) + - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - - [Margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) + - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - [Initial values](/en-US/docs/Web/CSS/initial_value) - [Used values](/en-US/docs/Web/CSS/used_value) diff --git a/files/en-us/web/css/contain-intrinsic-block-size/index.md b/files/en-us/web/css/contain-intrinsic-block-size/index.md index 61d1e3ec8ff48d7..38f44ba92015598 100644 --- a/files/en-us/web/css/contain-intrinsic-block-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-block-size/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.contain-intrinsic-block-size {{CSSRef}} -The **`contain-intrinsic-block-size`** [CSS](/en-US/docs/Web/CSS) [logical property](/en-US/docs/Web/CSS/CSS_Logical_Properties) defines the block size of an element that a browser can use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_Containment#size_containment). +The **`contain-intrinsic-block-size`** [CSS](/en-US/docs/Web/CSS) [logical property](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) defines the block size of an element that a browser can use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment). Block size is the size of an element in the dimension perpendicular to the flow of text within a line. In a horizontal [writing mode](/en-US/docs/Web/CSS/writing-mode) like standard English, block size is the vertical dimension (height); in a vertical writing mode, block size is the horizontal dimension. diff --git a/files/en-us/web/css/contain-intrinsic-height/index.md b/files/en-us/web/css/contain-intrinsic-height/index.md index 8b626e6d8b831c1..b96a203af94635e 100644 --- a/files/en-us/web/css/contain-intrinsic-height/index.md +++ b/files/en-us/web/css/contain-intrinsic-height/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.contain-intrinsic-height {{CSSRef}} -The **`contain-intrinsic-length`** [CSS](/en-US/docs/Web/CSS) property sets the height of an element that a browser can use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_Containment#size_containment). +The **`contain-intrinsic-length`** [CSS](/en-US/docs/Web/CSS) property sets the height of an element that a browser can use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment). ## Syntax diff --git a/files/en-us/web/css/contain-intrinsic-inline-size/index.md b/files/en-us/web/css/contain-intrinsic-inline-size/index.md index 562e05fd9ceee62..23cf865f38b4397 100644 --- a/files/en-us/web/css/contain-intrinsic-inline-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-inline-size/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.contain-intrinsic-inline-size {{CSSRef}} -The **`contain-intrinsic-inline-size`** [CSS](/en-US/docs/Web/CSS) [logical property](/en-US/docs/Web/CSS/CSS_Logical_Properties) defines the inline-size of an element that a browser can use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_Containment#size_containment). +The **`contain-intrinsic-inline-size`** [CSS](/en-US/docs/Web/CSS) [logical property](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) defines the inline-size of an element that a browser can use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment). Inline-size is the size of the element in the dimension parallel to the flow of text within a line. In a horizontal [writing mode](/en-US/docs/Web/CSS/writing-mode) like standard English, inline size is the horizontal dimension (width); for a vertical writing mode, inline size is the vertical dimension. diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index fe4bf93159e1bfc..31f162d14d4c255 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.contain-intrinsic-size {{CSSRef}} -The **`contain-intrinsic-size`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the size of an element that a browser will use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_Containment#size_containment). +The **`contain-intrinsic-size`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the size of an element that a browser will use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment). ## Constituent properties diff --git a/files/en-us/web/css/contain-intrinsic-width/index.md b/files/en-us/web/css/contain-intrinsic-width/index.md index 222e8e62f977e61..d9721556c79e095 100644 --- a/files/en-us/web/css/contain-intrinsic-width/index.md +++ b/files/en-us/web/css/contain-intrinsic-width/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.contain-intrinsic-width {{CSSRef}} -The **`contain-intrinsic-width`** [CSS](/en-US/docs/Web/CSS) property sets the width of an element that a browser will use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_Containment#size_containment). +The **`contain-intrinsic-width`** [CSS](/en-US/docs/Web/CSS) property sets the width of an element that a browser will use for layout when the element is subject to [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment). ## Syntax diff --git a/files/en-us/web/css/contain/index.md b/files/en-us/web/css/contain/index.md index c99a35b889b0544..972a19ac779952a 100644 --- a/files/en-us/web/css/contain/index.md +++ b/files/en-us/web/css/contain/index.md @@ -22,7 +22,7 @@ Using the `contain` property is useful on pages with groups of elements that are > **Note:** using `layout`, `paint`, `strict` or `content` values for this property creates: > > 1. A new [containing block](/en-US/docs/Web/CSS/Containing_block) (for the descendants whose {{cssxref("position")}} property is `absolute` or `fixed`). -> 2. A new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). +> 2. A new [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). > 3. A new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context). ## Syntax @@ -189,7 +189,7 @@ This impacts performance and interferes with the rest of the page layout. ### Style containment -Style containment scopes [counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) and [quotes](/en-US/docs/Web/CSS/quotes) to the contained element. +Style containment scopes [counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) and [quotes](/en-US/docs/Web/CSS/quotes) to the contained element. For CSS counters, the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties are scoped to the element as if the element is at the root of the document. #### Containment and counters @@ -277,7 +277,7 @@ Because of containment, the first closing quote ignores the inner span and uses ## See also -- [CSS containment](/en-US/docs/Web/CSS/CSS_Containment) -- [CSS container queries](/en-US/docs/Web/CSS/CSS_Container_Queries) +- [CSS containment](/en-US/docs/Web/CSS/CSS_containment) +- [CSS container queries](/en-US/docs/Web/CSS/CSS_container_queries) - CSS {{cssxref("content-visibility")}} property - CSS {{cssxref("position")}} property diff --git a/files/en-us/web/css/container-name/index.md b/files/en-us/web/css/container-name/index.md index e0c54ffb70dad61..baccfa19a2a21d6 100644 --- a/files/en-us/web/css/container-name/index.md +++ b/files/en-us/web/css/container-name/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.container-name {{CSSRef}} -The **container-name** [CSS](/en-US/docs/Web/CSS) property specifies a list of query container names used by the [@container](/en-US/docs/Web/CSS/@container) at-rule in a [container query](/en-US/docs/Web/CSS/CSS_Container_Queries). +The **container-name** [CSS](/en-US/docs/Web/CSS) property specifies a list of query container names used by the [@container](/en-US/docs/Web/CSS/@container) at-rule in a [container query](/en-US/docs/Web/CSS/CSS_container_queries). A container query will apply styles to elements based on the size of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the {{Cssxref("@container")}} at-rule instead of the nearest ancestor with containment. @@ -102,7 +102,7 @@ The following example has two container queries, one that will apply only to the } ``` -For more information on writing container queries, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_Container_Queries) page. +For more information on writing container queries, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_container_queries) page. ### Using multiple container names @@ -142,7 +142,7 @@ This is useful if you want to target the same container with multiple container ## See also -- [CSS container queries](/en-US/docs/Web/CSS/CSS_Container_Queries) +- [CSS container queries](/en-US/docs/Web/CSS/CSS_container_queries) - {{Cssxref("@container")}} at-rule - CSS {{Cssxref("container")}} shorthand property - CSS {{Cssxref("container-type")}} property diff --git a/files/en-us/web/css/container-type/index.md b/files/en-us/web/css/container-type/index.md index 2d2b8ac855e9d07..66cda2675d91b83 100644 --- a/files/en-us/web/css/container-type/index.md +++ b/files/en-us/web/css/container-type/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.container-type {{CSSRef}} -The **container-type** [CSS](/en-US/docs/Web/CSS) property is used to define the [type of containment](/en-US/docs/Web/CSS/CSS_Container_Queries#naming_containment_contexts) used in a [container query](/en-US/docs/Web/CSS/CSS_Container_Queries). +The **container-type** [CSS](/en-US/docs/Web/CSS) property is used to define the [type of containment](/en-US/docs/Web/CSS/CSS_container_queries#naming_containment_contexts) used in a [container query](/en-US/docs/Web/CSS/CSS_container_queries). ## Syntax @@ -29,12 +29,12 @@ container-type: unset; - `size` - - : Establishes a query container for container size queries on both the inline and block axis in both the [inline and block](/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts#block_and_inline_dimensions) dimensions. + - : Establishes a query container for container size queries on both the inline and block axis in both the [inline and block](/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values#block_and_inline_dimensions) dimensions. Applies layout containment, style containment, and size containment to the container. - `inline-size` - - : Establishes a query container for dimensional queries on the [inline axis](/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts#block_and_inline_dimensions) of the container. + - : Establishes a query container for dimensional queries on the [inline axis](/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values#block_and_inline_dimensions) of the container. Applies layout, style, and inline-size containment to the element. - `normal` @@ -65,7 +65,7 @@ Given the following HTML example which is a card component with an image, a titl ``` To create a container context, add the `container-type` property to an element. -The following uses the `inline-size` value to create a containment context for the [inline axis](/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts#block_and_inline_dimensions) of the container: +The following uses the `inline-size` value to create a containment context for the [inline axis](/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values#block_and_inline_dimensions) of the container: ```css .container { @@ -84,7 +84,7 @@ Writing a container query via the {{Cssxref("@container")}} at-rule will apply s } ``` -For more information on container queries, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_Container_Queries) page. +For more information on container queries, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_container_queries) page. ## Specifications @@ -96,7 +96,7 @@ For more information on container queries, see the [CSS Container Queries](/en-U ## See also -- [CSS container queries](/en-US/docs/Web/CSS/CSS_Container_Queries) +- [CSS container queries](/en-US/docs/Web/CSS/CSS_container_queries) - {{Cssxref("@container")}} at-rule - CSS {{Cssxref("container")}} shorthand property - CSS {{Cssxref("container-name")}} property diff --git a/files/en-us/web/css/container/index.md b/files/en-us/web/css/container/index.md index b511130d8fc9291..90cab448b2b71b4 100644 --- a/files/en-us/web/css/container/index.md +++ b/files/en-us/web/css/container/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.container {{CSSRef}} -The **container** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property establishes the element as a query container and specifies the name or name for the [containment context](/en-US/docs/Web/CSS/CSS_Container_Queries#naming_containment_contexts) used in a [container query](/en-US/docs/Web/CSS/CSS_Container_Queries). +The **container** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property establishes the element as a query container and specifies the name or name for the [containment context](/en-US/docs/Web/CSS/CSS_container_queries#naming_containment_contexts) used in a [container query](/en-US/docs/Web/CSS/CSS_container_queries). ## Syntax @@ -81,7 +81,7 @@ You can then target that container by name using the {{cssxref("@container")}} a } ``` -For more information on container queries, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_Container_Queries) page. +For more information on container queries, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_container_queries) page. ## Specifications @@ -93,7 +93,7 @@ For more information on container queries, see the [CSS Container Queries](/en-U ## See also -- [CSS container queries](/en-US/docs/Web/CSS/CSS_Container_Queries) +- [CSS container queries](/en-US/docs/Web/CSS/CSS_container_queries) - {{Cssxref("@container")}} at-rule - CSS {{Cssxref("contain")}} property - CSS {{Cssxref("container-type")}} property diff --git a/files/en-us/web/css/containing_block/index.md b/files/en-us/web/css/containing_block/index.md index f5c242d93a558b0..118568f59110c68 100644 --- a/files/en-us/web/css/containing_block/index.md +++ b/files/en-us/web/css/containing_block/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -The size and position of an element are often impacted by its **containing block**. Most often, the containing block is the [content area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content_area) of an element's nearest [block-level](/en-US/docs/Glossary/Block-level_content) ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block. +The size and position of an element are often impacted by its **containing block**. Most often, the containing block is the [content area](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content_area) of an element's nearest [block-level](/en-US/docs/Glossary/Block-level_content) ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block. When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas: @@ -257,10 +257,10 @@ p { - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - - [Box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) + - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - - [Margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) + - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - [Initial values](/en-US/docs/Web/CSS/initial_value) - [Computed values](/en-US/docs/Web/CSS/computed_value) diff --git a/files/en-us/web/css/content-visibility/index.md b/files/en-us/web/css/content-visibility/index.md index 0f202c2f92c3166..f2ffe3181b58d54 100644 --- a/files/en-us/web/css/content-visibility/index.md +++ b/files/en-us/web/css/content-visibility/index.md @@ -34,9 +34,9 @@ content-visibility: unset; - `visible` - : No effect. The element's contents are laid out and rendered as normal. - `hidden` - - : The element [skips its contents](/en-US/docs/Web/CSS/CSS_Containment#skips_its_contents). The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents `display: none`. + - : The element [skips its contents](/en-US/docs/Web/CSS/CSS_containment#skips_its_contents). The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents `display: none`. - `auto` - - : The element turns on layout containment, style containment, and paint containment. If the element is not [relevant to the user](/en-US/docs/Web/CSS/CSS_Containment#relevant_to_the_user), it also skips its contents. Unlike hidden, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal. + - : The element turns on layout containment, style containment, and paint containment. If the element is not [relevant to the user](/en-US/docs/Web/CSS/CSS_containment#relevant_to_the_user), it also skips its contents. Unlike hidden, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal. ## Formal definition @@ -159,7 +159,7 @@ document.querySelectorAll("button.toggle").forEach((button) => { ## See also -- [CSS Containment](/en-US/docs/Web/CSS/CSS_Containment) +- [CSS Containment](/en-US/docs/Web/CSS/CSS_containment) - [`contain-intrinsic-size`](/en-US/docs/Web/CSS/contain-intrinsic-size) - {{domxref("element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} - [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/) (web.dev) diff --git a/files/en-us/web/css/content/index.md b/files/en-us/web/css/content/index.md index cf6452d12a586b9..4b064ca7d1034db 100644 --- a/files/en-us/web/css/content/index.md +++ b/files/en-us/web/css/content/index.md @@ -75,7 +75,7 @@ content: unset; - : An {{cssxref("<image>")}}, denoted by the {{cssxref("url", "url()")}} or {{cssxref("image/image-set", "image-set()")}} or {{cssxref("<gradient>")}} data type, or part of the webpage, defined by the {{cssxref("element", "element()")}} function, denoting the content to display. - {{cssxref("counter", "counter()")}} - - : The value of a [CSS counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters), generally a number produced by computations defined by {{cssxref("<counter-reset>")}} and {{cssxref("<counter-increment>")}} properties. It can be displayed using either the {{cssxref("counter", "counter()")}} or {{cssxref("counters", "counters()")}} function. + - : The value of a [CSS counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters), generally a number produced by computations defined by {{cssxref("<counter-reset>")}} and {{cssxref("<counter-increment>")}} properties. It can be displayed using either the {{cssxref("counter", "counter()")}} or {{cssxref("counters", "counters()")}} function. The {{cssxref("counter", "counter()")}} function has two forms: 'counter(_name_)' or 'counter(_name_, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified {{cssxref("<list-style-type>")}} (`decimal` by default). diff --git a/files/en-us/web/css/counter-increment/index.md b/files/en-us/web/css/counter-increment/index.md index e51a466fe9fba78..131ad365af71afd 100644 --- a/files/en-us/web/css/counter-increment/index.md +++ b/files/en-us/web/css/counter-increment/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.counter-increment {{CSSRef}} -The **`counter-increment`** [CSS](/en-US/docs/Web/CSS) property increases or decreases the value of a [CSS counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) by a given value. +The **`counter-increment`** [CSS](/en-US/docs/Web/CSS) property increases or decreases the value of a [CSS counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) by a given value. {{EmbedInteractiveExample("pages/css/counter-increment.html")}} @@ -80,7 +80,7 @@ h1 { ## See also -- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) - {{cssxref("counter-reset")}} - {{cssxref("counter-set")}} - {{cssxref("@counter-style")}} diff --git a/files/en-us/web/css/counter-reset/index.md b/files/en-us/web/css/counter-reset/index.md index 19c26f2d739f840..889101b6ff9290f 100644 --- a/files/en-us/web/css/counter-reset/index.md +++ b/files/en-us/web/css/counter-reset/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.counter-reset {{CSSRef}} -The **`counter-reset`** [CSS](/en-US/docs/Web/CSS) property resets a [CSS counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) to a given value. +The **`counter-reset`** [CSS](/en-US/docs/Web/CSS) property resets a [CSS counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) to a given value. This property will create a new counter or reversed counter with the given name on the specified element. Normal counters have a default initial value of 0. @@ -83,7 +83,7 @@ The "implicit" counter named `list-item` can be used to control the numbering fo The following examples show how to reset the counters, but not how they are incremented, decremented, and displayed. -For more-complete examples see [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters). +For more-complete examples see [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters). ### Resetting named counters @@ -116,7 +116,7 @@ h1 { ## See also -- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) - {{cssxref("counter-increment")}} - {{cssxref("counter-set")}} - {{cssxref("@counter-style")}} diff --git a/files/en-us/web/css/counter-set/index.md b/files/en-us/web/css/counter-set/index.md index edba0aa39ec51dd..6ab26f38b5dc75c 100644 --- a/files/en-us/web/css/counter-set/index.md +++ b/files/en-us/web/css/counter-set/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.counter-set {{CSSRef}} -The **`counter-set`** [CSS](/en-US/docs/Web/CSS) property sets a [CSS counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element. +The **`counter-set`** [CSS](/en-US/docs/Web/CSS) property sets a [CSS counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element. {{EmbedInteractiveExample("pages/css/counter-set.html")}} @@ -80,7 +80,7 @@ h1 { ## See also -- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) - {{cssxref("counter-increment")}} - {{cssxref("counter-reset")}} - {{cssxref("@counter-style")}} diff --git a/files/en-us/web/css/counter/index.md b/files/en-us/web/css/counter/index.md index f7905951a15021d..58ed588c982d39e 100644 --- a/files/en-us/web/css/counter/index.md +++ b/files/en-us/web/css/counter/index.md @@ -22,7 +22,7 @@ counter(countername); counter(countername, upper-roman) ``` -A [counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) has no visible effect by itself. +A [counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) has no visible effect by itself. The `counter()` function (and {{cssxref("counters", "counters()")}} function) is what makes it useful by returning developer defined strings (or images). ### Values @@ -30,7 +30,7 @@ The `counter()` function (and {{cssxref("counters", "counters()")}} function) is - {{cssxref("<custom-ident>")}} - : A name identifying the counter, which is the same case-sensitive name used for the {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}}. The 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` simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other [predefined counter style](/en-US/docs/Web/CSS/CSS_Counter_Styles). If omitted, the counter-style defaults to `decimal`. + - : 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` simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other [predefined counter style](/en-US/docs/Web/CSS/CSS_counter_styles). If omitted, the counter-style defaults to `decimal`. ### Formal syntax @@ -113,7 +113,7 @@ li::after { ## See also -- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) - {{cssxref("counter-reset")}} - {{cssxref("counter-set")}} - {{cssxref("counter-increment")}} diff --git a/files/en-us/web/css/counters/index.md b/files/en-us/web/css/counters/index.md index cb3b77d5058fe0f..39cc52d781e1955 100644 --- a/files/en-us/web/css/counters/index.md +++ b/files/en-us/web/css/counters/index.md @@ -21,14 +21,14 @@ counters(countername, '-'); counters(countername, '.', upper-roman) ``` -A [counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) has no visible effect by itself. The `counters()` function (and {{cssxref("counter", "counter()")}} function) is what makes it useful by returning developer defined content. +A [counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) has no visible effect by itself. The `counters()` function (and {{cssxref("counter", "counter()")}} function) is what makes it useful by returning developer defined content. ### Values - {{cssxref("<custom-ident>")}} - : A name identifying the counters, which is the same case-sensitive name used for the {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}}. The name cannot start with two dashes and can't be `none`, `unset`, `initial`, or `inherit`. - `` - - : A counter style name or [`symbols()`](/en-US/docs/Web/CSS/symbols) function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other [predefined counter style](/en-US/docs/Web/CSS/CSS_Counter_Styles). If omitted, the counter-style defaults to decimal + - : A counter style name or [`symbols()`](/en-US/docs/Web/CSS/symbols) function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other [predefined counter style](/en-US/docs/Web/CSS/CSS_counter_styles). If omitted, the counter-style defaults to decimal - {{cssxref("<string>")}} - : Any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, `\000A9` represents the copyright symbol. @@ -158,7 +158,7 @@ li::before { ## See also -- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) - {{cssxref("counter-set")}} - {{cssxref("counter-reset")}} - {{cssxref("counter-increment")}} diff --git a/files/en-us/web/css/cross-fade/index.md b/files/en-us/web/css/cross-fade/index.md index 3442c1bd24e5ef0..3ba58db77ad3778 100644 --- a/files/en-us/web/css/cross-fade/index.md +++ b/files/en-us/web/css/cross-fade/index.md @@ -142,5 +142,5 @@ When using background images, make sure the contrast in color is great enough th - {{cssxref("image/image", "image()")}} - {{cssxref("image/image-set", "image-set()")}} - {{cssxref("element")}} -- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) - Gradient functions: {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} diff --git a/files/en-us/web/css/css_animated_properties/index.md b/files/en-us/web/css/css_animated_properties/index.md index 6c7f6bd3993ee85..447c8c4fe1e9ec6 100644 --- a/files/en-us/web/css/css_animated_properties/index.md +++ b/files/en-us/web/css/css_animated_properties/index.md @@ -6,7 +6,7 @@ page-type: landing-page {{CSSRef}} -[CSS Animations](/en-US/docs/Web/CSS/CSS_Animations) and [Transitions](/en-US/docs/Web/CSS/CSS_Transitions) rely on the concept of **animatable** properties, and all CSS properties are animatable unless otherwise specified. Each property's _animation type_ determines how values [combine](https://drafts.csswg.org/css-values/#combining-values) - interpolate, add, or accumulate - for this property. Transitions only involve interpolation, whereas animations may use all three combination methods. +[CSS Animations](/en-US/docs/Web/CSS/CSS_animations) and [Transitions](/en-US/docs/Web/CSS/CSS_transitions) rely on the concept of **animatable** properties, and all CSS properties are animatable unless otherwise specified. Each property's _animation type_ determines how values [combine](https://drafts.csswg.org/css-values/#combining-values) - interpolate, add, or accumulate - for this property. Transitions only involve interpolation, whereas animations may use all three combination methods. > **Note:** The animation type for each CSS property is listed in its "Formal definition" table (E.g., {{CSSXref("color", "", "#formal_definition")}}). @@ -47,5 +47,5 @@ For unregistered custom properties, the animation type is discrete. ## See also -- [Using CSS Animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) -- [Using CSS Transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- [Using CSS Animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) +- [Using CSS Transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) diff --git a/files/en-us/web/css/css_animations/index.md b/files/en-us/web/css/css_animations/index.md index 8dc3fc4d2098b4b..abe523a8e4b436e 100644 --- a/files/en-us/web/css/css_animations/index.md +++ b/files/en-us/web/css/css_animations/index.md @@ -78,6 +78,6 @@ All animations, even those with 0 seconds duration, throw animation events. ## See also - [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations) -- Properties in the [transitions](/en-US/docs/Web/CSS/CSS_Transitions) CSS module to trigger animations based on user actions +- Properties in the [transitions](/en-US/docs/Web/CSS/CSS_transitions) CSS module to trigger animations based on user actions - The {{htmlelement("canvas")}} HTML element along with [canvas API](/en-US/docs/Web/API/Canvas_API) and [WebGL API](/en-US/docs/Web/API/WebGL_API) to draw graphics and animations - The {{domxref("SVGAnimationElement")}} interface for all the animation-related element interfaces, including {{domxref("SVGAnimateElement")}}, {{domxref("SVGSetElement")}}, {{domxref("SVGAnimateColorElement")}}, {{domxref("SVGAnimateMotionElement")}}, and {{domxref("SVGAnimateTransformElement")}} diff --git a/files/en-us/web/css/css_backgrounds_and_borders/index.md b/files/en-us/web/css/css_backgrounds_and_borders/index.md index 06185901e1c5a08..c83026a62790171 100644 --- a/files/en-us/web/css/css_backgrounds_and_borders/index.md +++ b/files/en-us/web/css/css_backgrounds_and_borders/index.md @@ -95,7 +95,7 @@ To see the code for this sample, [view the source on GitHub](https://github.com/ - : Describes how to change the size and repeating behavior of background images. - [Learn CSS: the box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - : Explains how borders, along with other box model properties, impact the CSS box model. -- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) - : Explains how to create CSS gradient background images. ## Related concepts diff --git a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md index aae723a18e7baf0..a2b0723d7f5a94e 100644 --- a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md +++ b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -56,4 +56,4 @@ As you can see here, the Firefox logo (listed first within {{ cssxref("backgroun ## See also -- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md index 1bf0c872bbb59a0..122ef9b051061f7 100644 --- a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md +++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods. On this page we explore how box alignment works in the context of [CSS grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout). +The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods. On this page we explore how box alignment works in the context of [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout). As this page aims to detail things which are specific to CSS Grid Layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods. @@ -87,7 +87,7 @@ The updated properties have not yet been implemented in all browsers. Therefore, ## Guides -- [Alignment in grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) +- [Alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) ## External Resources diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md index 136ee34c5c7574d..9f0ef70ad8a83d1 100644 --- a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md +++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods; on this page we explore how Box Alignment works in the context of [multi-column Layout](/en-US/docs/Web/CSS/CSS_Columns). As this page aims to detail things which are specific to Multi-column Layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of Box Alignment across layout methods. +The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods; on this page we explore how Box Alignment works in the context of [multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this page aims to detail things which are specific to Multi-column Layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of Box Alignment across layout methods. In multi-column layout the alignment container is the content box of the multicol container. The alignment subject is the column box. The properties which apply to multi-column layouts are detailed below. diff --git a/files/en-us/web/css/css_box_alignment/index.md b/files/en-us/web/css/css_box_alignment/index.md index d47f456662c40a6..cc4a3762c950a19 100644 --- a/files/en-us/web/css/css_box_alignment/index.md +++ b/files/en-us/web/css/css_box_alignment/index.md @@ -18,7 +18,7 @@ If you initially learned [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) ## Basic examples -The following examples demonstrate how some of the Box Alignment Properties are applied in [Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout). +The following examples demonstrate how some of the Box Alignment Properties are applied in [Grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout). ### CSS grid layout alignment example @@ -199,7 +199,7 @@ As the CSS box alignment properties are implemented differently depending on the - CSS Flexbox guide: _[Basic concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ - CSS Flexbox guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS Grid guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_ +- CSS Grid guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ ## External Resources diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 77f4c53e29cb6ed..9e696e419fcae5e 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -32,7 +32,7 @@ The Box Model specification defines a set of keywords that refer to the edges of ## Reference -> **Note:** This specification defines the physical padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_Logical_Properties). +> **Note:** This specification defines the physical padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). ### Properties for controlling the margin of a box diff --git a/files/en-us/web/css/css_cascade/index.md b/files/en-us/web/css/css_cascade/index.md index 553632a3aa0a1a0..2fa726da8d0e4b5 100644 --- a/files/en-us/web/css/css_cascade/index.md +++ b/files/en-us/web/css/css_cascade/index.md @@ -93,7 +93,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value ## See also -- [CSS selectors module](/en-US/docs/Web/CSS/CSS_selectors) +- [CSS selectors module](/en-US/docs/Web/CSS/CSS_Selectors) - [CSS pseudo-elements module](/en-US/docs/Web/CSS/CSS_pseudo) - [CSS paged media module](/en-US/docs/Web/CSS/CSS_paged_media) - [CSS conditional rules module](/en-US/docs/Web/CSS/CSS_conditional_rules) diff --git a/files/en-us/web/css/css_colors/index.md b/files/en-us/web/css/css_colors/index.md index 66e28e6221d9ac0..017597cdf53c062 100644 --- a/files/en-us/web/css/css_colors/index.md +++ b/files/en-us/web/css/css_colors/index.md @@ -122,7 +122,7 @@ To see the code for this color syntax converter, [view the source on GitHub](htt ## See also - [CSS color adjustment](/en-US/docs/Web/CSS/CSS_color_adjustment) module and the {{cssxref("print-color-adjust")}} property. -- [CSS images](/en-US/docs/Web/CSS/CSS_Images) module, which is where CSS [``](/en-US/docs/Web/CSS/gradient) images are defined. +- [CSS images](/en-US/docs/Web/CSS/CSS_images) module, which is where CSS [``](/en-US/docs/Web/CSS/gradient) images are defined. - The [`VideoColorSpace`](/en-US/docs/Web/API/VideoColorSpace) interface - The SVG [``](/en-US/docs/Web/SVG/Element/feColorMatrix) 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/css_compositing_and_blending/index.md b/files/en-us/web/css/css_compositing_and_blending/index.md index 4b6e03022d9e19a..8999c8a06c7f14a 100644 --- a/files/en-us/web/css/css_compositing_and_blending/index.md +++ b/files/en-us/web/css/css_compositing_and_blending/index.md @@ -9,7 +9,7 @@ spec-urls: {{CSSRef}} -The **CSS compositing and blending** module defines how an element's background layers can be blended together, how an element can be blended with its container, and whether the element must create a new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). +The **CSS compositing and blending** module defines how an element's background layers can be blended together, how an element can be blended with its container, and whether the element must create a new [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). The properties in this CSS module can be used to define the blending mode that should be used, if any, to blend an element's background images and colors into a single background image. This module provides 16 blending modes. You can also define how an element's borders, background, and content, including text, emojis, and images, should be blended with the background of its container. @@ -47,7 +47,7 @@ Notice how the background, border, and the content are all impacted as a result ## See also -- Properties in the [CSS filter effects](/en-US/docs/Web/CSS/Filter_Effects) module enable applying filters effects, such as blurring and changing color intensity, to images, backgrounds, and borders. +- Properties in the [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module enable applying filters effects, such as blurring and changing color intensity, to images, backgrounds, and borders. - [Compositing And Blending In CSS](https://www.sarasoueidan.com/blog/compositing-and-blending-in-css/) (2015) - [Editing Images in CSS: Blend Modes](https://code.tutsplus.com/tutorials/editing-images-in-css-blend-modes--cms-26058) (2022) - [web.dev: blend modes](https://web.dev/learn/css/blend-modes/) (2021) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index e5fef127c5c4c2a..98b23af846ef422 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -83,7 +83,7 @@ However, there are browsers that don't support feature queries but also have no Let's walk through a very simple example where feature queries come in handy, which uses them in the way described above. -Let's say we want to create a layout of three boxes in a row, and ideally we would like to use [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout). However, we would like to have a layout for older browsers using floats. We can start by creating that floated layout with the following code, which gives us three columns. +Let's say we want to create a layout of three boxes in a row, and ideally we would like to use [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout). However, we would like to have a layout for older browsers using floats. We can start by creating that floated layout with the following code, which gives us three columns. {{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}} @@ -113,5 +113,5 @@ Feature Queries can help you start to use newer features by enhancing a simpler - The [@supports](/en-US/docs/Web/CSS/@supports) rule - Learn Layout: [Supporting Older Browsers](/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) -- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) - [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) diff --git a/files/en-us/web/css/css_container_queries/index.md b/files/en-us/web/css/css_container_queries/index.md index 02c952b4369f9a3..a4dcdd663383c99 100644 --- a/files/en-us/web/css/css_container_queries/index.md +++ b/files/en-us/web/css/css_container_queries/index.md @@ -19,10 +19,10 @@ To do this, use the {{Cssxref("container-type")}} property with a value of `size These values have the following effects: - `size` - - : The query will be based on the [inline and block](/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts#block_and_inline_dimensions) dimensions of the container. + - : The query will be based on the [inline and block](/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values#block_and_inline_dimensions) dimensions of the container. Applies layout, style, and size containment to the container. - `inline-size` - - : The query will be based on the [inline](/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts#block_and_inline_dimensions) dimensions of the container. + - : The query will be based on the [inline](/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values#block_and_inline_dimensions) dimensions of the container. Applies layout, style, and inline-size containment to the element. - `normal` - : The element is not a query container for any container size queries, but remains a query container for container style queries. diff --git a/files/en-us/web/css/css_containment/index.md b/files/en-us/web/css/css_containment/index.md index 9030f76377af47a..6f0c1024fc50bdb 100644 --- a/files/en-us/web/css/css_containment/index.md +++ b/files/en-us/web/css/css_containment/index.md @@ -17,7 +17,7 @@ This allows the user agent to apply containment on elements when appropriate, an The specification defines the CSS properties {{cssxref("contain")}} and {{cssxref("content-visibility")}}. This document describes the basic aims of the specification. -For details on CSS container queries, see [CSS Container Queries](/en-US/docs/Web/CSS/CSS_Container_Queries). +For details on CSS container queries, see [CSS Container Queries](/en-US/docs/Web/CSS/CSS_container_queries). ## Basic example diff --git a/files/en-us/web/css/css_display/index.md b/files/en-us/web/css/css_display/index.md index c7ad58059d263d0..920f29e3124a977 100644 --- a/files/en-us/web/css/css_display/index.md +++ b/files/en-us/web/css/css_display/index.md @@ -30,11 +30,11 @@ The **CSS display** module defines how the CSS formatting box tree is generated ### Flow layout (display: block, display: inline) -- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) -- [Flow layout and overflow](/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow) -- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes) -- [Introduction to formatting contexts](/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts) -- [In flow and out of flow](/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow) +- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) +- [Flow layout and overflow](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow) +- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes) +- [Introduction to formatting contexts](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts) +- [In flow and out of flow](/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow) ### Flexible box layout @@ -49,17 +49,17 @@ The **CSS display** module defines how the CSS formatting box tree is generated ### Grid layout -- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) -- [Relationship of grid layout to other layout methods](/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout) -- [Line-based placement](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) -- [Grid template areas](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) -- [Layout using named grid lines](/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines) -- [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout) -- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) -- [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) -- [CSS Grid Layout and accessibility](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility) -- [CSS Grid Layout and progressive enhancement](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) -- [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout) +- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [Relationship of grid layout to other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods) +- [Line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) +- [Layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) +- [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) +- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) +- [CSS Grid Layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) +- [CSS Grid Layout and progressive enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) +- [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids) ## Specifications diff --git a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index 021de6f9473751f..7c753d363c0dbfe 100644 --- a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -8,7 +8,7 @@ page-type: guide The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides. -When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout), which controls columns and rows together. +When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), which controls columns and rows together. ## The two axes of flexbox diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 1ff1a21356cc161..713b0b3870b5d8e 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -Flexbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once. There is however the ability to wrap flex items onto new lines, creating new rows if {{cssxref("flex-direction")}} is `row` and new columns if `flex-direction` is `column`. In this guide I will explain how this works, what it is designed for and what situations really require [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout) rather than flexbox. +Flexbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once. There is however the ability to wrap flex items onto new lines, creating new rows if {{cssxref("flex-direction")}} is `row` and new columns if `flex-direction` is `column`. In this guide I will explain how this works, what it is designed for and what situations really require [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) rather than flexbox. ## Making things wrap diff --git a/files/en-us/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/en-us/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md index 2f2b6e5b5dad7fa..3439b47d0a2e1af 100644 --- a/files/en-us/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md @@ -58,7 +58,7 @@ In this next live example the child elements have been floated, and then their c ## Flexbox and Grid Layout -[CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout) and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the `flex` properties that may have been assigned to the child elements will be ignored. +[CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the `flex` properties that may have been assigned to the child elements will be ignored. You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well. @@ -80,7 +80,7 @@ In some cases you could happily use either layout method, but as you become conf As a ground rule, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it. -For more comparisons of grid and flexbox see the article [Relationship of Grid Layout to other layout methods](/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout). This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use. +For more comparisons of grid and flexbox see the article [Relationship of Grid Layout to other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods). This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use. ## Flexbox and display: contents diff --git a/files/en-us/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md b/files/en-us/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md index 63f7badc5c2fc5e..c33e1cbcbaaecc3 100644 --- a/files/en-us/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md +++ b/files/en-us/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md @@ -74,6 +74,6 @@ In most cases, flow layout works as you would expect it to when changing the wri ## See also -- [Writing Modes](/en-US/docs/Web/CSS/CSS_Writing_Modes) +- [Writing Modes](/en-US/docs/Web/CSS/CSS_writing_modes) - [Writing modes and CSS layout](https://www.smashingmagazine.com/2019/08/writing-modes-layout/) on Smashing Magazine (2019) - [CSS writing modes](https://24ways.org/2016/css-writing-modes/) on 24ways.org (2016) diff --git a/files/en-us/web/css/css_flow_layout/index.md b/files/en-us/web/css/css_flow_layout/index.md index 2f08ff7ce42180b..b334b3415276f3e 100644 --- a/files/en-us/web/css/css_flow_layout/index.md +++ b/files/en-us/web/css/css_flow_layout/index.md @@ -8,7 +8,7 @@ page-type: guide _Normal Flow_, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken _out of flow_ it works independently. -In normal flow, **inline** elements display in the inline direction, that is in the direction words are displayed in a sentence according to the [Writing Mode](/en-US/docs/Web/CSS/CSS_Writing_Modes) of the document. **Block** elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page. +In normal flow, **inline** elements display in the inline direction, that is in the direction words are displayed in a sentence according to the [Writing Mode](/en-US/docs/Web/CSS/CSS_writing_modes) of the document. **Block** elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page. ## Basic Example diff --git a/files/en-us/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md b/files/en-us/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md index 9c1d78cd62a4a8b..61058216c136716 100644 --- a/files/en-us/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md +++ b/files/en-us/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md @@ -30,7 +30,7 @@ A new BFC is created in the following situations: - elements with {{cssxref("contain", "contain: layout", "#layout")}}, `content`, or `strict` - {{Glossary("flex item", "flex items")}} - grid items -- [multicol containers](/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol) +- [multicol containers](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts) - elements with {{cssxref("column-span")}} set to `all` This is useful because a new BFC will behave much like the outermost document in that it becomes a mini-layout inside the main layout. A BFC contains everything inside it, {{cssxref("float")}} and {{cssxref("clear")}} only apply to items inside the same formatting context, and margins only collapse between elements in the same formatting context. diff --git a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md index 501ed227a3e6048..2fbcacff051e99d 100644 --- a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md +++ b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md @@ -597,4 +597,4 @@ As you can see from this guide, CSS Grid Layout is just one part of your toolkit ## See also - [Flexbox guides](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -- [Multiple-column layout guides](/en-US/docs/Web/CSS/CSS_Columns) +- [Multiple-column layout guides](/en-US/docs/Web/CSS/CSS_multicol_layout) diff --git a/files/en-us/web/css/css_logical_properties_and_values/floating_and_positioning/index.md b/files/en-us/web/css/css_logical_properties_and_values/floating_and_positioning/index.md index 34d33859ead9926..e02c9b78111da96 100644 --- a/files/en-us/web/css/css_logical_properties_and_values/floating_and_positioning/index.md +++ b/files/en-us/web/css/css_logical_properties_and_values/floating_and_positioning/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -The [Logical Properties and Values specification](https://drafts.csswg.org/css-logical/) contains logical mappings for the physical values of {{cssxref("float")}} and {{cssxref("clear")}}, and also for the positioning properties used with [positioned layout](/en-US/docs/Web/CSS/CSS_Positioning). This guide takes a look at how to use these. +The [Logical Properties and Values specification](https://drafts.csswg.org/css-logical/) contains logical mappings for the physical values of {{cssxref("float")}} and {{cssxref("clear")}}, and also for the positioning properties used with [positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout). This guide takes a look at how to use these. ## Mapped properties and values diff --git a/files/en-us/web/css/css_logical_properties_and_values/index.md b/files/en-us/web/css/css_logical_properties_and_values/index.md index 883c1145f7f030c..f42261c6d9bec28 100644 --- a/files/en-us/web/css/css_logical_properties_and_values/index.md +++ b/files/en-us/web/css/css_logical_properties_and_values/index.md @@ -13,7 +13,7 @@ The module also defines logical properties and values for properties previously ### Block vs. inline -Logical properties and values use the abstract terms _block_ and _inline_ to describe the direction in which they flow. The physical meaning of these terms depends on the [writing mode](/en-US/docs/Web/CSS/CSS_Writing_Modes). +Logical properties and values use the abstract terms _block_ and _inline_ to describe the direction in which they flow. The physical meaning of these terms depends on the [writing mode](/en-US/docs/Web/CSS/CSS_writing_modes). - Block dimension - : The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension. diff --git a/files/en-us/web/css/css_namespaces/index.md b/files/en-us/web/css/css_namespaces/index.md index cc9982efa9ad708..e6e1280b87c1d04 100644 --- a/files/en-us/web/css/css_namespaces/index.md +++ b/files/en-us/web/css/css_namespaces/index.md @@ -65,4 +65,4 @@ The `@namespace` rule is used for declaring a default namespace and for binding - [CSS `url()` function](/en-US/docs/Web/CSS/url) - [CSS at-rules](/en-US/docs/Web/CSS/At-rule) - [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions) -- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) +- [CSS selectors](/en-US/docs/Web/CSS/CSS_Selectors) diff --git a/files/en-us/web/css/css_selectors/selector_structure/index.md b/files/en-us/web/css/css_selectors/selector_structure/index.md index 404d9b4b9a30527..1120e71d9dcb79a 100644 --- a/files/en-us/web/css/css_selectors/selector_structure/index.md +++ b/files/en-us/web/css/css_selectors/selector_structure/index.md @@ -13,7 +13,7 @@ These selectors can be combined into a comma-separated [selector list](#selector ### Simple selector -A **simple selector** is a selector with a single component, such as a single type selector, attribute selector, or pseudo-class, that's not used in combination with or contains any other selector component or combinator. A given element is said to match a simple selector when that simple selector accurately describes the element. Any selector that contains a single [basic selector](/en-US/docs/Web/CSS/CSS_Selectors/Selectors_and_combinators#basic_selectors), [attribute selector](/en-US/docs/Web/CSS/Attribute_selectors), [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), or [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) selector is a simple selector. +A **simple selector** is a selector with a single component, such as a single type selector, attribute selector, or pseudo-class, that's not used in combination with or contains any other selector component or combinator. A given element is said to match a simple selector when that simple selector accurately describes the element. Any selector that contains a single [basic selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#basic_selectors), [attribute selector](/en-US/docs/Web/CSS/Attribute_selectors), [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), or [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) selector is a simple selector. ```css #myId { @@ -25,7 +25,7 @@ A **simple selector** is a selector with a single component, such as a single ty ### Compound selector -A **compound selector** is a sequence of [simple selectors](#simple_selector) that are not separated by a [combinator](/en-US/docs/Web/CSS/CSS_Selectors/Selectors_and_combinators#combinators). A compound selector represents a set of simultaneous conditions on a single element. A given element is said to match a compound selector when the element matches all the simple selectors in the compound selector. +A **compound selector** is a sequence of [simple selectors](#simple_selector) that are not separated by a [combinator](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#combinators). A compound selector represents a set of simultaneous conditions on a single element. A given element is said to match a compound selector when the element matches all the simple selectors in the compound selector. ```css a#selected { @@ -100,5 +100,5 @@ The {{cssxref("is", ":is()")}} and {{cssxref(":where", ":where()")}} pseudo-clas - [Forgiving selector list](/en-US/docs/Web/CSS/Selector_list#forgiving_selector_list) - {{DOMXref("Document.querySelector()")}} - {{DOMXref("Document.querySelectorAll()")}} -- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) module +- [CSS selectors](/en-US/docs/Web/CSS/CSS_Selectors) module - [CSS pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo) module diff --git a/files/en-us/web/css/css_selectors/selectors_and_combinators/index.md b/files/en-us/web/css/css_selectors/selectors_and_combinators/index.md index f0cf589ff49475e..9f1b836c6004923 100644 --- a/files/en-us/web/css/css_selectors/selectors_and_combinators/index.md +++ b/files/en-us/web/css/css_selectors/selectors_and_combinators/index.md @@ -137,7 +137,7 @@ The case sensitivity of the attribute depends on the language. Generally, in HTM ## Pseudo-class selectors -The [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) module defines over 60 [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes). Pseudo-classes are [simple selectors](#simple-selector), prefixed with a colon (`:`), that allow the selection of elements based on state information that is not contained in the document tree. {{CSSxRef("pseudo-classes")}} can be used to style an element based on its _state_. +The [CSS selectors](/en-US/docs/Web/CSS/CSS_Selectors) module defines over 60 [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes). Pseudo-classes are [simple selectors](#simple-selector), prefixed with a colon (`:`), that allow the selection of elements based on state information that is not contained in the document tree. {{CSSxRef("pseudo-classes")}} can be used to style an element based on its _state_. For example, the {{cssxref(":target")}} simple selector targets element of a URL containing a fragment identifier, and the [`a:visited`](/en-US/docs/Web/CSS/:visited) [compound selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector) matches all {{HTMLElement("a")}} elements that have been visited by a user. The pseudo-classes can be categorized as [element display state](/en-US/docs/Web/CSS/Pseudo-classes#element_display_state_pseudo-classes), [input](/en-US/docs/Web/CSS/Pseudo-classes#input_pseudo-classes), [linguistic](/en-US/docs/Web/CSS/Pseudo-classes#linguistic_pseudo-classes), [location](/en-US/docs/Web/CSS/Pseudo-classes#location_pseudo-classes), [resource state](/en-US/docs/Web/CSS/Pseudo-classes#resource_state_pseudo-classes), [time-dimensional](/en-US/docs/Web/CSS/Pseudo-classes#time-dimensional_pseudo-classes), [tree-structural](/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes), [user action](/en-US/docs/Web/CSS/Pseudo-classes#user_action_pseudo-classes), and [functional](/en-US/docs/Web/CSS/Pseudo-classes#functional_pseudo-classes). @@ -146,7 +146,7 @@ Multiple pseudo-classes can be combined to create [compound selectors](#compound ## Pseudo-element selectors -Not all CSS selectors are defined in the [CSS selectors module](/en-US/docs/Web/CSS/). CSS pseudo-element selectors are defined in the [CSS pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo) module. +Not all CSS selectors are defined in the [CSS selectors module](/en-US/docs/Web/CSS). CSS pseudo-element selectors are defined in the [CSS pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo) module. CSS [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), prefixed with two colons (`::`), represent entities that are not included in HTML. For example, the simple {{cssxref("::marker")}} selector selects list item bullets, and the compound selector [`p::first-line`](/en-US/docs/Web/CSS/::first-line) matches the first line of all {{HTMLElement("p")}} elements. diff --git a/files/en-us/web/css/css_shadow_parts/index.md b/files/en-us/web/css/css_shadow_parts/index.md index 903592fb8064bd4..864b26ba71d987d 100644 --- a/files/en-us/web/css/css_shadow_parts/index.md +++ b/files/en-us/web/css/css_shadow_parts/index.md @@ -57,6 +57,6 @@ By default, elements in a shadow tree can be styled only within their respective ## See also - [CSS pseudo elements](/en-US/docs/Web/CSS/CSS_pseudo) module -- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) module +- [CSS selectors](/en-US/docs/Web/CSS/CSS_Selectors) module - [Using shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) - [Templates: Styling outside of the current scope](https://web.dev/learn/html/template/#styling-outside-of-the-current-scope) on web.dev (2023) diff --git a/files/en-us/web/css/css_types/index.md b/files/en-us/web/css/css_types/index.md index 8dd74f3db2379d9..c656fa8116830b2 100644 --- a/files/en-us/web/css/css_types/index.md +++ b/files/en-us/web/css/css_types/index.md @@ -63,7 +63,7 @@ These data types are used to indicate quantities, indexes, and positions. The ma - {{cssxref("<ratio>")}} - : A ratio, written with the syntax ` / `. - {{cssxref("<flex>")}} - - : A flexible length introduced for [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout), written as a `` with the `fr` unit attached and used for grid track sizing. + - : A flexible length introduced for [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), written as a `` with the `fr` unit attached and used for grid track sizing. ## Quantities diff --git a/files/en-us/web/css/css_values_and_units/index.md b/files/en-us/web/css/css_values_and_units/index.md index 6c302960811d5e3..cdd3c87ce06448a 100644 --- a/files/en-us/web/css/css_values_and_units/index.md +++ b/files/en-us/web/css/css_values_and_units/index.md @@ -155,7 +155,7 @@ For example, `em` is relative to the font size on the element and `vh` is relati | `vmin` | 1% of viewport's smaller dimension. | | `vmax` | 1% of viewport's larger dimension. | -Container query length units specify a length relative to the dimensions of a [query container](/en-US/docs/Web/CSS/CSS_Container_Queries). +Container query length units specify a length relative to the dimensions of a [query container](/en-US/docs/Web/CSS/CSS_container_queries). For example, `cqw` is relative to the width of the query container and `cqh` is relative to the height of the query container. | Unit | Relative to | diff --git a/files/en-us/web/css/display-inside/index.md b/files/en-us/web/css/display-inside/index.md index 49c37007fcb2694..8400fe21c6ea174 100644 --- a/files/en-us/web/css/display-inside/index.md +++ b/files/en-us/web/css/display-inside/index.md @@ -33,9 +33,9 @@ Valid `` values: - `table` - : These elements behave like HTML {{HTMLElement("table")}} elements. It defines a block-level box. - `flex` - - : The element behaves like a block element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). + - : The element behaves like a block element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_flexible_box_layout). - `grid` - - : The element behaves like a block element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). + - : The element behaves like a block element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout). - `ruby` {{Experimental_Inline}} - : The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement("ruby")}} elements. @@ -99,5 +99,5 @@ In this example the parent box has been given `display: flow-root` and so establ - {{CSSxRef("<display-box>")}} - {{CSSxRef("<display-legacy>")}} -- [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) -- [Basic Concepts of Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) +- [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Basic Concepts of Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) diff --git a/files/en-us/web/css/display-outside/index.md b/files/en-us/web/css/display-outside/index.md index a09fbdea0f68d11..cd0537c4e199b22 100644 --- a/files/en-us/web/css/display-outside/index.md +++ b/files/en-us/web/css/display-outside/index.md @@ -65,5 +65,5 @@ span { - {{CSSxRef("<display-box>")}} - {{CSSxRef("<display-legacy>")}} -- [Block and Inline layout in Normal Flow](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) -- [Formatting Contexts explained](/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts) +- [Block and Inline layout in Normal Flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) +- [Formatting Contexts explained](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts) diff --git a/files/en-us/web/css/display/index.md b/files/en-us/web/css/display/index.md index 058c47d0361294f..45b751c9cfdf125 100644 --- a/files/en-us/web/css/display/index.md +++ b/files/en-us/web/css/display/index.md @@ -7,9 +7,9 @@ browser-compat: css.properties.display {{CSSRef}} -The **`display`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline box](/en-US/docs/Web/CSS/CSS_Flow_Layout) and the layout used for its children, such as [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout), [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). +The **`display`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline box](/en-US/docs/Web/CSS/CSS_flow_layout) and the layout used for its children, such as [flow layout](/en-US/docs/Web/CSS/CSS_flow_layout), [grid](/en-US/docs/Web/CSS/CSS_grid_layout) or [flex](/en-US/docs/Web/CSS/CSS_flexible_box_layout). -Formally, the **`display`** property sets an element's inner and outer _display types_. The outer type sets an element's participation in [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout); the inner type sets the layout of children. Some values of `display` are fully defined in their own individual specifications; for example the detail of what happens when `display: flex` is declared is defined in the CSS Flexible Box Model specification. +Formally, the **`display`** property sets an element's inner and outer _display types_. The outer type sets an element's participation in [flow layout](/en-US/docs/Web/CSS/CSS_flow_layout); the inner type sets the layout of children. Some values of `display` are fully defined in their own individual specifications; for example the detail of what happens when `display: flex` is declared is defined in the CSS Flexible Box Model specification. {{EmbedInteractiveExample("pages/css/display.html")}} @@ -92,9 +92,9 @@ The keyword values can be grouped into six value categories. - `table` - : These elements behave like HTML {{HTMLElement("table")}} elements. It defines a block-level box. - `flex` - - : The element behaves like a block-level element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). + - : The element behaves like a block-level element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_flexible_box_layout). - `grid` - - : The element behaves like a block-level element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). + - : The element behaves like a block-level element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout). - `ruby` {{Experimental_Inline}} - : The element behaves like an inline-level element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement("ruby")}} elements. @@ -229,35 +229,35 @@ The individual pages for the different types of value that `display` can have se ### CSS Flow Layout (display: block, display: inline) -- [Block and Inline Layout in Normal Flow](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) -- [Flow Layout and Overflow](/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow) -- [Flow Layout and Writing Modes](/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes) -- [Formatting Contexts Explained](/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts) -- [In Flow and Out of Flow](/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow) +- [Block and Inline Layout in Normal Flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) +- [Flow Layout and Overflow](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow) +- [Flow Layout and Writing Modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes) +- [Formatting Contexts Explained](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts) +- [In Flow and Out of Flow](/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow) ### display: flex -- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) -- [Aligning Items in a Flex Container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) -- [Controlling Ratios of Flex Items Along the Main Axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax) -- [Mastering Wrapping of Flex Items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items) -- [Ordering Flex Items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items) -- [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods) -- [Typical use cases of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox) +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Aligning Items in a Flex Container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- [Controlling Ratios of Flex Items Along the Main Axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [Mastering Wrapping of Flex Items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) +- [Ordering Flex Items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) +- [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) +- [Typical use cases of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) ### display: grid -- [Basic Concepts of Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) -- [Relationship to other layout methods](/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout) -- [Line-based placement](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) -- [Grid template areas](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) -- [Layout using named grid lines](/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines) -- [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout) -- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) -- [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) -- [CSS Grid Layout and Accessibility](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility) -- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) -- [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout) +- [Basic Concepts of Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [Relationship to other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods) +- [Line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) +- [Layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) +- [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) +- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) +- [CSS Grid Layout and Accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) +- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) +- [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids) ## Accessibility concerns @@ -397,7 +397,7 @@ updateDisplay(); ## See also -- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) -- [Introduction to formatting contexts](/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts) +- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) +- [Introduction to formatting contexts](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts) - {{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}} - {{CSSxRef("grid")}}, {{CSSxRef("flex")}} diff --git a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md b/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md index 4a66bd0bb5809d5..102ccdd414584b0 100644 --- a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md +++ b/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md @@ -22,7 +22,7 @@ h1 { } ``` -More recently we have gained [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). To access these we also use values of the `display` property — `display: grid` and `display: flex`. Only when the value of `display` is changed do the children become flex or grid items and begin to respond to the other properties in the grid or flexbox specifications. Changing an element's `display` value changes the formatting context of its direct children. +More recently we have gained [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout). To access these we also use values of the `display` property — `display: grid` and `display: flex`. Only when the value of `display` is changed do the children become flex or grid items and begin to respond to the other properties in the grid or flexbox specifications. Changing an element's `display` value changes the formatting context of its direct children. What grid and flexbox demonstrate, however, is that an element has both an **outer** and an **inner** display type. The outer display type describes whether the element is block-level or inline-level. The inner display type describes how the children of that box behave. diff --git a/files/en-us/web/css/env/index.md b/files/en-us/web/css/env/index.md index 9e09804d7ba39d0..d89e82fd13d1b41 100644 --- a/files/en-us/web/css/env/index.md +++ b/files/en-us/web/css/env/index.md @@ -212,7 +212,7 @@ main { ## See also - {{CSSxRef("var", "var(…)")}} -- [CSS Custom Properties for Cascading Variables](/en-US/docs/Web/CSS/CSS_Variables) +- [CSS Custom Properties for Cascading Variables](/en-US/docs/Web/CSS/CSS_cascading_variables) - [Custom Properties (--\*)](/en-US/docs/Web/CSS/--*) - [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) - [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/) diff --git a/files/en-us/web/css/filter-function/brightness/index.md b/files/en-us/web/css/filter-function/brightness/index.md index 3375129110e5385..9252d60056c81c1 100644 --- a/files/en-us/web/css/filter-function/brightness/index.md +++ b/files/en-us/web/css/filter-function/brightness/index.md @@ -201,7 +201,7 @@ In the images below, the first one has a `brightness()` filter function applied, ## See also -- [CSS filter effects](/en-US/docs/Web/CSS/Filter_Effects) module +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module - The other {{cssxref("<filter-function>")}} functions available to be used in values of the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties include: - {{cssxref("filter-function/blur", "blur()")}} - {{cssxref("filter-function/contrast", "contrast()")}} diff --git a/files/en-us/web/css/filter-function/contrast/index.md b/files/en-us/web/css/filter-function/contrast/index.md index f75530309fbe296..ce74cd5e7bde49d 100644 --- a/files/en-us/web/css/filter-function/contrast/index.md +++ b/files/en-us/web/css/filter-function/contrast/index.md @@ -206,7 +206,7 @@ This example shows three images: the image with a `contrast()` filter function a ## See also -- [CSS filter effects](/en-US/docs/Web/CSS/Filter_Effects) module +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module - The other {{cssxref("<filter-function>")}} functions available to be used in values of the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties include: - {{cssxref("filter-function/blur", "blur()")}} - {{cssxref("filter-function/brightness", "brightness()")}} diff --git a/files/en-us/web/css/filter-function/hue-rotate/index.md b/files/en-us/web/css/filter-function/hue-rotate/index.md index 9516b77d7561b32..8ea492f631486e0 100644 --- a/files/en-us/web/css/filter-function/hue-rotate/index.md +++ b/files/en-us/web/css/filter-function/hue-rotate/index.md @@ -184,7 +184,7 @@ This example shows three images: the image with a `hue-rotate()` filter function ## See also -- [CSS filter effects](/en-US/docs/Web/CSS/Filter_Effects) module +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module - The other {{cssxref("<filter-function>")}} functions available to be used in values of the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties include: - {{cssxref("filter-function/blur", "blur()")}} - {{cssxref("filter-function/brightness", "brightness()")}} diff --git a/files/en-us/web/css/filter/index.md b/files/en-us/web/css/filter/index.md index d78017909654680..0ecd8207ab70e3e 100644 --- a/files/en-us/web/css/filter/index.md +++ b/files/en-us/web/css/filter/index.md @@ -86,7 +86,7 @@ filter: contrast(200%); ``` - {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} - - : Applies the parameter `` as a drop shadow, following the contours of the image. The shadow syntax is similar to `` (defined in the [CSS backgrounds and borders module](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders)), with the exception that the `inset` keyword and `spread` parameter are not allowed. As with all `filter` property values, any filters after the `drop-shadow()` are applied to the shadow. + - : Applies the parameter `` as a drop shadow, following the contours of the image. The shadow syntax is similar to `` (defined in the [CSS backgrounds and borders module](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders)), with the exception that the `inset` keyword and `spread` parameter are not allowed. As with all `filter` property values, any filters after the `drop-shadow()` are applied to the shadow. ```css filter: drop-shadow(16px 16px 10px black); @@ -224,7 +224,7 @@ The filters are applied in order. This is why the drop shadows are not the same ## See also - CSS {{cssxref("backdrop-filter")}} property -- CSS [compositing and blending](/en-US/docs/Web/CSS/Compositing_and_Blending) module, including the CSS {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}} properties. +- CSS [compositing and blending](/en-US/docs/Web/CSS/CSS_compositing_and_blending) module, including the CSS {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}} properties. - The CSS {{cssxref("mask")}} property - [SVG](/en-US/docs/Web/SVG), including the SVG {{SVGElement("filter")}} element and SVG {{SVGAttr("filter")}} attribute. - [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) diff --git a/files/en-us/web/css/fit-content_function/index.md b/files/en-us/web/css/fit-content_function/index.md index 647d5876ecc9119..6ca1550c2989091 100644 --- a/files/en-us/web/css/fit-content_function/index.md +++ b/files/en-us/web/css/fit-content_function/index.md @@ -13,7 +13,7 @@ The **`fit-content()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CS {{EmbedInteractiveExample("pages/css/function-fit-content.html")}} -The function can be used as a track size in [CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., [`minmax(auto, max-content)`](/en-US/docs/Web/CSS/minmax)), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum. +The function can be used as a track size in [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout) properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., [`minmax(auto, max-content)`](/en-US/docs/Web/CSS/minmax)), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum. See the {{cssxref("grid-template-columns")}} page for more information on the `max-content` and `auto` keywords. @@ -97,5 +97,5 @@ fit-content(40%) - Related sizing keywords: {{cssxref("min-content")}}, {{cssxref("max-content")}} - Related CSS Grid properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_ -- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#grid_definition_shorthands)_ +- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ diff --git a/files/en-us/web/css/flex-basis/index.md b/files/en-us/web/css/flex-basis/index.md index ace6e3cda7eb531..112d3dd7d94072b 100644 --- a/files/en-us/web/css/flex-basis/index.md +++ b/files/en-us/web/css/flex-basis/index.md @@ -187,6 +187,6 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ - {{cssxref("width")}} diff --git a/files/en-us/web/css/flex-direction/index.md b/files/en-us/web/css/flex-direction/index.md index 62ee8b77b4f61be..fefdc95adcb3b00 100644 --- a/files/en-us/web/css/flex-direction/index.md +++ b/files/en-us/web/css/flex-direction/index.md @@ -137,5 +137,5 @@ Using the `flex-direction` property with values of `row-reverse` or `column-reve ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ diff --git a/files/en-us/web/css/flex-flow/index.md b/files/en-us/web/css/flex-flow/index.md index c5f0dca18b44367..cf328ad8d37ed00 100644 --- a/files/en-us/web/css/flex-flow/index.md +++ b/files/en-us/web/css/flex-flow/index.md @@ -78,5 +78,5 @@ element { ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index 282c93e691c2757..f2a87f1aef05b2c 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -112,6 +112,6 @@ When the six flex items are distributed along the container's main axis, if the ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ - [`flex-grow` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works diff --git a/files/en-us/web/css/flex-shrink/index.md b/files/en-us/web/css/flex-shrink/index.md index e37785f0d0fae8d..9c4eeae55653703 100644 --- a/files/en-us/web/css/flex-shrink/index.md +++ b/files/en-us/web/css/flex-shrink/index.md @@ -98,5 +98,5 @@ The `flex-shrink` property is specified as a single ``. ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ diff --git a/files/en-us/web/css/flex-wrap/index.md b/files/en-us/web/css/flex-wrap/index.md index 2bd013bf6ad0593..452224cd8f96974 100644 --- a/files/en-us/web/css/flex-wrap/index.md +++ b/files/en-us/web/css/flex-wrap/index.md @@ -11,7 +11,7 @@ The **`flex-wrap`** [CSS](/en-US/docs/Web/CSS) property sets whether flex items {{EmbedInteractiveExample("pages/css/flex-wrap.html")}} -See [Using CSS flexible boxes](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) for more properties and information. +See [Using CSS flexible boxes](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for more properties and information. ## Syntax @@ -135,5 +135,5 @@ The following values are accepted: ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_ diff --git a/files/en-us/web/css/flex/index.md b/files/en-us/web/css/flex/index.md index 62bca58cc52473e..de59e593f07e2c3 100644 --- a/files/en-us/web/css/flex/index.md +++ b/files/en-us/web/css/flex/index.md @@ -259,5 +259,5 @@ When you click "flex: auto", we set "flex: initial"'s {{cssxref("display")}} pro ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ diff --git a/files/en-us/web/css/flex_value/index.md b/files/en-us/web/css/flex_value/index.md index 58f31b0a866c9e1..7cc9f46c31bf1e2 100644 --- a/files/en-us/web/css/flex_value/index.md +++ b/files/en-us/web/css/flex_value/index.md @@ -41,4 +41,4 @@ The `` data type is specified as a {{cssxref("<number>")}} followed ## See also -- [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout) +- [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) diff --git a/files/en-us/web/css/forced-color-adjust/index.md b/files/en-us/web/css/forced-color-adjust/index.md index c975fd22d3d6b6a..0fb5c01939a0d49 100644 --- a/files/en-us/web/css/forced-color-adjust/index.md +++ b/files/en-us/web/css/forced-color-adjust/index.md @@ -100,6 +100,6 @@ The following screenshot shows the image above in Windows High Contrast Mode: ## See also -- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) +- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) - [Styling for Windows high contrast with standards for forced colors.](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/) - {{cssxref("print-color-adjust")}} diff --git a/files/en-us/web/css/gap/index.md b/files/en-us/web/css/gap/index.md index 6e8d139a3cb09a6..617f2bb6965fdde 100644 --- a/files/en-us/web/css/gap/index.md +++ b/files/en-us/web/css/gap/index.md @@ -180,4 +180,4 @@ This property is specified as a value for `<'row-gap'>` followed optionally by a ## See also - Related CSS properties: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}} -- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ +- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters)_ diff --git a/files/en-us/web/css/gradient/conic-gradient/index.md b/files/en-us/web/css/gradient/conic-gradient/index.md index d157d50ce42d276..127a8b547303180 100644 --- a/files/en-us/web/css/gradient/conic-gradient/index.md +++ b/files/en-us/web/css/gradient/conic-gradient/index.md @@ -217,7 +217,7 @@ div { ### More conic-gradient examples -Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) for more examples. +Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) for more examples. ## Specifications @@ -229,7 +229,7 @@ Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradie ## See also -- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) - Other gradient functions: {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} - {{cssxref("<image>")}} - {{cssxref("image/image","image()")}} From c8b62fc2e76914c4fc782db1d5012e83fd7a7777 Mon Sep 17 00:00:00 2001 From: Christine Belzie <105683440+CBID2@users.noreply.github.com> Date: Mon, 17 Jul 2023 18:38:30 -0400 Subject: [PATCH 08/63] datalist: Add a accessibility concerns section (#27931) * feat: Add a accessibility concerns section * fix: revise formatting * fix: revise formatti ng * fix: I finally fixed the formatting i ssue * fix: revise formatting * fix: removed vscode settings * feat: add Estelle's section Co-authored-by: Estelle Weyl * Delete settings.json * Add the heading back --------- Co-authored-by: Estelle Weyl Co-authored-by: Joshua Chen --- files/en-us/web/html/element/datalist/index.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/files/en-us/web/html/element/datalist/index.md b/files/en-us/web/html/element/datalist/index.md index bcbba17f4599c27..7c1138a529cee3a 100644 --- a/files/en-us/web/html/element/datalist/index.md +++ b/files/en-us/web/html/element/datalist/index.md @@ -168,6 +168,14 @@ The specification allows linking `` with a {{HTMLElement("input/passwo
+## Accessibility concerns + +When deciding to use the `` element, here are some accessibility issues to be mindful of: + +- The font size of the data list's options does not zoom, always remaining the same size. The contents of the autosuggest do not grow or shrink when the rest of the contents are zoomed in or out. +- As targeting the list of options with CSS is very limited to non-existent, rendering can not be styled for high-contrast mode. +- Some screen reader/browser combinations, including NVDA and Firefox, do not announce the contents of the autosuggest popup. + ## Specifications {{Specifications}} From 7c483c257e6cf9666f9a7e439e420ef15d12a5af Mon Sep 17 00:00:00 2001 From: dv3lah <71223183+dv3lah@users.noreply.github.com> Date: Tue, 18 Jul 2023 02:11:12 +0330 Subject: [PATCH 09/63] Update index.md (#27957) * Update index.md Currently if you use `Trebuchet MS` even without quotes if works well! So I updated the note and add a new note with hope to clarify it. * Update files/en-us/learn/css/styling_text/fundamentals/index.md Co-authored-by: Estelle Weyl * spacing --------- Co-authored-by: Estelle Weyl --- files/en-us/learn/css/styling_text/fundamentals/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/en-us/learn/css/styling_text/fundamentals/index.md b/files/en-us/learn/css/styling_text/fundamentals/index.md index 48ce1c2ceb4f7df..890f3817b940461 100644 --- a/files/en-us/learn/css/styling_text/fundamentals/index.md +++ b/files/en-us/learn/css/styling_text/fundamentals/index.md @@ -283,7 +283,9 @@ In such a case, the browser starts at the beginning of the list and looks to see It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasize this point, paragraphs are given the browser's default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font! -> **Note:** Font names that have more than one word — like `Trebuchet MS` — need to be surrounded by quotes, for example `"Trebuchet MS"`. +> **Note:** While you can use font family names that contain a space, such as `Trebuchet MS`, without quoting the name, to avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens. + +> **Warning: ** Any font family name which could be misinterpreted as a generic family name or a CSS-wide keyword must be quoted. While the font-family names can be included as a {{cssxref("custom-ident")}} or a {{cssxref("string")}}, font family names that happen to be the same as a CSS-wide property value, like `initial`, or `inherit`, or CSS have the same name as one to the generic font family names, like `sans-serif` or `fantasy`, must be included as a quoted string. Otherwise, the font family name will be interpreted as being the equivalent CSS keyword or generic family name. When used as keywords, the generic font family names —`serif`, `sans-serif`, `monospace`, `cursive`, and `fantasy` — and the global CSS keywords MUST NOT be quoted, as strings are not interpreted as CSS keywords. #### A font-family example From 07f0cf4375aaa02e1071d8bd0e8518db7609b7a9 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 17 Jul 2023 16:05:13 -0700 Subject: [PATCH 10/63] Run "yarn tool fix-flaws" on /web (#28009) This PR is from the output of `yarn tool fix-flaws`, fixing various issues such as broken links throughout the content. This PR specifically modifies the `/web` folder. --- .../aria/aria_techniques/index.md | 4 +- .../aria/attributes/aria-checked/index.md | 4 +- .../aria/attributes/aria-disabled/index.md | 2 +- .../aria/attributes/aria-dropeffect/index.md | 2 +- .../attributes/aria-errormessage/index.md | 2 +- .../aria/attributes/aria-grabbed/index.md | 2 +- .../aria/attributes/aria-invalid/index.md | 2 +- .../aria/attributes/aria-label/index.md | 2 +- .../aria/attributes/aria-orientation/index.md | 2 +- .../aria/attributes/aria-readonly/index.md | 2 +- .../aria/attributes/aria-required/index.md | 2 +- .../aria/attributes/aria-setsize/index.md | 2 +- .../aria/roles/landmark_role/index.md | 2 +- .../aria/roles/menuitemcheckbox_role/index.md | 2 +- .../aria/roles/menuitemradio_role/index.md | 2 +- .../aria/roles/radio_role/index.md | 8 +- .../aria/roles/select_role/index.md | 4 +- .../accessibility/seizure_disorders/index.md | 2 +- .../index.md | 4 +- files/en-us/web/events/index.md | 92 +++++++++---------- .../css/block_formatting_context/index.md | 14 +-- files/en-us/web/guide/css/css_layout/index.md | 74 +++++++-------- files/en-us/web/guide/index.md | 4 +- .../introduction_to_web_development/index.md | 2 +- files/en-us/web/guide/mobile/index.md | 2 +- .../web/guide/user_input_methods/index.md | 8 +- files/en-us/web/html/element/a/index.md | 2 +- files/en-us/web/html/element/dir/index.md | 2 +- files/en-us/web/html/element/div/index.md | 4 +- files/en-us/web/html/element/font/index.md | 2 +- files/en-us/web/html/element/input/index.md | 2 +- files/en-us/web/html/element/li/index.md | 2 +- files/en-us/web/html/element/ol/index.md | 2 +- .../element/script/type/importmap/index.md | 2 +- files/en-us/web/html/element/select/index.md | 2 +- files/en-us/web/html/element/ul/index.md | 2 +- .../html/global_attributes/hidden/index.md | 2 +- .../html/global_attributes/tabindex/index.md | 2 +- files/en-us/web/html/index.md | 2 +- .../index.md | 2 +- files/en-us/web/http/cors/index.md | 2 +- files/en-us/web/manifest/description/index.md | 2 +- files/en-us/web/manifest/name/index.md | 2 +- .../en-us/web/manifest/share_target/index.md | 2 +- files/en-us/web/manifest/short_name/index.md | 2 +- files/en-us/web/mathml/attribute/index.md | 2 +- files/en-us/web/mathml/element/mfrac/index.md | 2 +- .../web/mathml/element/mmultiscripts/index.md | 2 +- files/en-us/web/mathml/element/mo/index.md | 16 ++-- files/en-us/web/mathml/element/mover/index.md | 2 +- .../en-us/web/mathml/element/mpadded/index.md | 6 +- .../en-us/web/mathml/element/munder/index.md | 2 +- .../web/mathml/element/munderover/index.md | 4 +- .../global_attributes/mathsize/index.md | 2 +- .../web/media/formats/webrtc_codecs/index.md | 4 +- .../index.md | 4 +- .../web/performance/fundamentals/index.md | 2 +- files/en-us/web/performance/index.md | 14 +-- .../web/privacy/state_partitioning/index.md | 2 +- .../cycletracker/html_and_css/index.md | 4 +- files/en-us/web/svg/attribute/href/index.md | 4 +- .../web/svg/namespaces_crash_course/index.md | 2 +- .../web/svg/tutorial/svg_and_css/index.md | 2 +- .../svg_in_html_introduction/index.md | 4 +- files/en-us/web/text_fragments/index.md | 4 +- files/en-us/web/tutorials/index.md | 4 +- .../index.md | 2 +- 67 files changed, 189 insertions(+), 189 deletions(-) diff --git a/files/en-us/web/accessibility/aria/aria_techniques/index.md b/files/en-us/web/accessibility/aria/aria_techniques/index.md index 254d254cf3e5a91..637756e2b1c7820 100644 --- a/files/en-us/web/accessibility/aria/aria_techniques/index.md +++ b/files/en-us/web/accessibility/aria/aria_techniques/index.md @@ -62,7 +62,7 @@ The techniques below describe each composite role as well as their required and - [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) (including [`option`](/en-US/docs/Web/Accessibility/ARIA/Roles/option_role) role) - [`menu`](/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role) - [`menubar`](/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role) -- [`radiogroup`](/en-US/docs/web/accessibility/ARIA/Roles/radiogroup_role) (see [`radio role`](/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role)) +- [`radiogroup`](/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role) (see [`radio role`](/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role)) - [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role) (including [`tab`](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) and [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) roles) - [`tree`](/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role) - [`treegrid`](/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role) @@ -183,4 +183,4 @@ The techniques below describe each composite role as well as their required and ### MicrosoftEdge-specific properties -- [`x-ms-aria-flowfrom`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/x-ms-aria-flowfrom) {{Non-standard_Inline}} +- [`x-ms-aria-flowfrom`](/en-US/docs/Web/Accessibility/ARIA) {{Non-standard_Inline}} diff --git a/files/en-us/web/accessibility/aria/attributes/aria-checked/index.md b/files/en-us/web/accessibility/aria/attributes/aria-checked/index.md index 57b08507b75af1f..29267b9f06175e5 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-checked/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-checked/index.md @@ -79,8 +79,8 @@ myHTMLElement.ariaChecked = true; ## See Also -- [``](/en-US/docs/Web/HTML/Element/Input/checkbox) -- [``](/en-US/docs/Web/HTML/Element/Input/radio) +- [``](/en-US/docs/Web/HTML/Element/input/checkbox) +- [``](/en-US/docs/Web/HTML/Element/input/radio) - [`aria-pressed`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - [Two state checkbox example](https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html) - w3.org diff --git a/files/en-us/web/accessibility/aria/attributes/aria-disabled/index.md b/files/en-us/web/accessibility/aria/attributes/aria-disabled/index.md index 773c7e4aaa511af..7da5a2bfe4b746a 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-disabled/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-disabled/index.md @@ -127,7 +127,7 @@ Inherits into roles: - [`menuitemradio`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role) - [`option`](/en-US/docs/Web/Accessibility/ARIA/Roles/option_role) - [`radio`](/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role) -- [`radiogroup`](/en-US/docs/web/accessibility/aria/roles/radiogroup_role) +- [`radiogroup`](/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role) - [`row`](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role) - [`rowheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role) - [`searchbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role) diff --git a/files/en-us/web/accessibility/aria/attributes/aria-dropeffect/index.md b/files/en-us/web/accessibility/aria/attributes/aria-dropeffect/index.md index 40d2ecd81b80ac4..ae1a045dd36a54a 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-dropeffect/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-dropeffect/index.md @@ -13,7 +13,7 @@ The global `aria-dropeffect` attribute indicates what functions may be performed Deprecated in ARIA 1.1, the `aria-dropeffect` property indicates what functions may be performed when a dragged object is released on the drop target. The global `aria-dropeffect` attribute provides assistive technology users the same information provided via the [`DataTransfer.dropEffect`](/en-US/docs/Web/API/DataTransfer/dropEffect) to sited users via the dropeffect icon. -Text selections, images, and links can be dragged by default. Setting the global [`draggable="true"`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute, part of HTML5's [Drag and Drop API](/en-US/docs/Web/API/HTML_Drag_and_Drop_API), with a [`dragstart` event handler](/en-US/docs/Web/API/Document/dragstart_event), means any DOM node can be made draggable as well. +Text selections, images, and links can be dragged by default. Setting the global [`draggable="true"`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute, part of HTML5's [Drag and Drop API](/en-US/docs/Web/API/HTML_Drag_and_Drop_API), with a [`dragstart` event handler](/en-US/docs/Web/API/HTMLElement/dragstart_event), means any DOM node can be made draggable as well. When a drag event occurs, a translucent image is generated of the dragged element which follows the user's pointer during the drag. The default image can be changed to any image with [`setDragImage`](/en-US/docs/Web/API/DataTransfer/setDragImage). Along with the default image identifying the element being dragged, there is a [`dataTransfer.dropEffect`](/en-US/docs/Web/API/DataTransfer/dropEffect) property that can be used to control the visual feedback the user is given during a drag-and-drop operation. The `aria-dropeffect` property should be used to provide assistive technology users the same feedback provided to sited users via `dataTransfer.dropEffect` property. diff --git a/files/en-us/web/accessibility/aria/attributes/aria-errormessage/index.md b/files/en-us/web/accessibility/aria/attributes/aria-errormessage/index.md index a0d8e7b5fd2ca19..f78de952e46bf54 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-errormessage/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-errormessage/index.md @@ -74,7 +74,7 @@ Used in roles: - [`combobox`](/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role) - [`gridcell`](/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role) - [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) -- [`radiogroup`](/en-US/docs/web/accessibility/aria/roles/radiogroup_role) +- [`radiogroup`](/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role) - [`slider`](/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) - [`spinbutton`](/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role) - [`textbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role) diff --git a/files/en-us/web/accessibility/aria/attributes/aria-grabbed/index.md b/files/en-us/web/accessibility/aria/attributes/aria-grabbed/index.md index f1917cd06e87914..6970a91aa8a854b 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-grabbed/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-grabbed/index.md @@ -11,7 +11,7 @@ The `aria-grabbed` state indicates an element's "grabbed" state in a drag-and-dr ## Description -Text selections, images, and links can be dragged by default. Setting the global [`draggable="true"`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute, part of HTML5's [Drag and Drop API](/en-US/docs/Web/API/HTML_Drag_and_Drop_API), with a [`dragstart` event handler](/en-US/docs/Web/API/Document/dragstart_event), means any DOM node can be made draggable as well. +Text selections, images, and links can be dragged by default. Setting the global [`draggable="true"`](/en-US/docs/Web/HTML/Global_attributes/draggable) attribute, part of HTML5's [Drag and Drop API](/en-US/docs/Web/API/HTML_Drag_and_Drop_API), with a [`dragstart` event handler](/en-US/docs/Web/API/HTMLElement/dragstart_event), means any DOM node can be made draggable as well. The `aria-grabbed` attribute was used to indicate if an element is in a "grabbed" state in a drag-and-drop operation with `aria-grabbed="true"` or if that the element is grabbable, but not currently grabbed with `aria-grabbed="false"`. diff --git a/files/en-us/web/accessibility/aria/attributes/aria-invalid/index.md b/files/en-us/web/accessibility/aria/attributes/aria-invalid/index.md index f70ec69f8045654..ffb5766cc6facf3 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-invalid/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-invalid/index.md @@ -123,7 +123,7 @@ Used in roles: - [`combobox`](/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role) - [`gridcell`](/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role) - [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) -- [`radiogroup`](/en-US/docs/web/accessibility/aria/roles/radiogroup_role) +- [`radiogroup`](/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role) - [`slider`](/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) - [`spinbutton`](/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role) - [`textbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role) diff --git a/files/en-us/web/accessibility/aria/attributes/aria-label/index.md b/files/en-us/web/accessibility/aria/attributes/aria-label/index.md index 879232f2160a318..d0dbec2e599727b 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-label/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-label/index.md @@ -96,7 +96,7 @@ The `aria-label` attribute is **NOT** supported in: - {{HTMLElement('label')}} element - [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) -- [Using HTML landmark roles to improve accessibility](https://developer.mozilla.org/en-US/blog/aria-accessibility-html-landmark-roles/) on MDN blog (2023) +- [Using HTML landmark roles to improve accessibility](/en-US/blog/aria-accessibility-html-landmark-roles/) on MDN blog (2023)