From 2077d0702d038c9ccc743a53d8ad1c0c21fef5be Mon Sep 17 00:00:00 2001 From: toehead2001 Date: Sun, 28 Jan 2024 15:01:02 -0800 Subject: [PATCH] Fix some fragment links (#31967) --- files/en-us/learn/forms/user_input_methods/index.md | 2 +- files/en-us/mdn/community/roles_teams/index.md | 4 ++-- .../mdn/writing_guidelines/howto/images_media/index.md | 2 +- .../mdn/writing_guidelines/writing_style_guide/index.md | 2 +- .../webextensions/manifest.json/permissions/index.md | 2 +- .../understanding_colors_and_luminance/index.md | 2 +- .../web/api/prioritized_task_scheduling_api/index.md | 2 +- files/en-us/web/css/@font-face/src/index.md | 2 +- .../web/css/@media/-webkit-device-pixel-ratio/index.md | 2 +- files/en-us/web/css/@media/-webkit-transform-3d/index.md | 2 +- files/en-us/web/css/@media/-webkit-transition/index.md | 2 +- files/en-us/web/css/absolute-size/index.md | 2 +- files/en-us/web/css/content/index.md | 4 ++-- files/en-us/web/css/css_colors/applying_color/index.md | 2 +- .../web/css/css_multicol_layout/basic_concepts/index.md | 2 +- files/en-us/web/css/css_selectors/index.md | 8 ++++---- .../css/css_selectors/selectors_and_combinators/index.md | 4 ++-- files/en-us/web/css/css_syntax/error_handling/index.md | 2 +- files/en-us/web/css/font-weight/index.md | 2 +- files/en-us/web/css/list-style-type/index.md | 2 +- files/en-us/web/css/using_css_custom_properties/index.md | 2 +- files/en-us/web/http/status/103/index.md | 4 ++-- .../guides/making_pwas_installable/index.md | 2 +- .../progressive_web_apps/how_to/define_app_icons/index.md | 4 ++-- .../how_to/display_badge_on_app_icon/index.md | 4 ++-- .../how_to/share_data_between_apps/index.md | 2 +- .../tutorials/cycletracker/html_and_css/index.md | 4 ++-- .../tutorials/cycletracker/manifest_file/index.md | 2 +- .../tutorials/cycletracker/service_workers/index.md | 4 ++-- files/en-us/web/webdriver/capabilities/index.md | 4 ++-- files/en-us/web/webdriver/errors/scripttimeout/index.md | 2 +- 31 files changed, 43 insertions(+), 43 deletions(-) diff --git a/files/en-us/learn/forms/user_input_methods/index.md b/files/en-us/learn/forms/user_input_methods/index.md index 0bdd05398fd38a4..0ecf0f20f28596a 100644 --- a/files/en-us/learn/forms/user_input_methods/index.md +++ b/files/en-us/learn/forms/user_input_methods/index.md @@ -144,7 +144,7 @@ The `contenteditable` attribute automatically adds the element to the document's To provide a good user experience, any custom form control you create must be accessible and function like native form controls: - The element's [`role`](/en-US/docs/Web/Accessibility/ARIA/Roles), [label](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby), and [description](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) need to be added with ARIA. -- All user input methods needs to be supported, including [keyboard](#keyboard), [mouse](#mouse), [touch](#finger-touch), and [pointer](#pointer-events) events, all described above. +- All user input methods needs to be supported, including [keyboard](#keyboard), [mouse](#mouse), [touch](#finger_touch), and [pointer](#pointer_events) events, all described above. - JavaScript is required to handle functionality such as [validation](/en-US/docs/Learn/Forms/Form_validation), [submission](/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data), and [saving](/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript) of user-updated content. {{EmbedLiveSample("contentEditable")}} diff --git a/files/en-us/mdn/community/roles_teams/index.md b/files/en-us/mdn/community/roles_teams/index.md index a22ac73652c6de3..acda6ed69f1360d 100644 --- a/files/en-us/mdn/community/roles_teams/index.md +++ b/files/en-us/mdn/community/roles_teams/index.md @@ -110,7 +110,7 @@ To be eligible to be a maintainer, you must meet one or more of the following re - Consented to commit spending at least 16 hours per month working on the project. - Attended the community meeting that takes place once every two months. -> **Note:** If there is someone you think is eligible for this role, you may [nominate a maintainer](#nominating-a-maintainer). +> **Note:** If there is someone you think is eligible for this role, you may [nominate a maintainer](#nominating_a_maintainer). **Privileges:** @@ -276,7 +276,7 @@ Life happens and your commitment levels as a contributor could change over time. - Downgrade to a less-demanding role. - Step away from the project completely (apply for an emeritus status). -In all these situations, feel free to discuss your situation and current commitment levels with the [MDN team](#contact-the-mdn-team). +In all these situations, feel free to discuss your situation and current commitment levels with the [MDN team](#contact_the_mdn_team). ### Demoting or removing inactive contributors diff --git a/files/en-us/mdn/writing_guidelines/howto/images_media/index.md b/files/en-us/mdn/writing_guidelines/howto/images_media/index.md index 5c66840ee8c5335..9075c4d09871cae 100644 --- a/files/en-us/mdn/writing_guidelines/howto/images_media/index.md +++ b/files/en-us/mdn/writing_guidelines/howto/images_media/index.md @@ -33,7 +33,7 @@ Let's walk through an example: ``` 3. Run `filecheck` on each image, which might complain if something's wrong. - For more details, see the [Compressing images](#compressing-images) section. + For more details, see the [Compressing images](#compressing_images) section. ```bash yarn filecheck files/en-us/web/css/my-cool-image.png diff --git a/files/en-us/mdn/writing_guidelines/writing_style_guide/index.md b/files/en-us/mdn/writing_guidelines/writing_style_guide/index.md index 292f790daacf31d..660a3151780affb 100644 --- a/files/en-us/mdn/writing_guidelines/writing_style_guide/index.md +++ b/files/en-us/mdn/writing_guidelines/writing_style_guide/index.md @@ -444,7 +444,7 @@ You can link part of a sentence to an article or the section of an article. Be m On MDN, another way to link to a reference page is by using a macro. These macros are described on the [Commonly-used macros](/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#linking_to_pages_in_references) page. For example, to link to the reference page of an HTML element, use the `HTMLElement` macro, and to link to the reference page of a CSS property, use the `CSSxRef` macro. -We follow similar cross-referencing guidelines in the [See also](#see-also-section) sections at the end of reference pages, glossary pages, and guides. +We follow similar cross-referencing guidelines in the [See also](#see_also) sections at the end of reference pages, glossary pages, and guides. ### External links diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/permissions/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/permissions/index.md index b4938add23c52a8..f97e859482567ec 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/permissions/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/permissions/index.md @@ -163,7 +163,7 @@ For example, consider an extension that wants to run a script in the current pag > **Note:** You can only get access to the tab/data that was there, when the user interaction occurred (e.g. the click). When the active tab navigates away (e.g., due to finishing loading or some other event), the permission does not grant you access to the tab anymore. -The `activeTab` permission enables scripting access to the top level tab's page and same origin frames. Running scripts or modifying styles inside [cross-origin](/en-US/docs/Web/Security/Same-origin_policy#cross-origin_network_access) frames may require additional [host permissions](#host_permissions). Of course, [restrictions and limitations](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#permissions-restrictions-and-limitations) related to particular sites and URI schemes are applied as well. +The `activeTab` permission enables scripting access to the top level tab's page and same origin frames. Running scripts or modifying styles inside [cross-origin](/en-US/docs/Web/Security/Same-origin_policy#cross-origin_network_access) frames may require additional [host permissions](#host_permissions). Of course, [restrictions and limitations](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#permissions_restrictions_and_limitations) related to particular sites and URI schemes are applied as well. Usually the tab that's granted `activeTab` is just the currently active tab, except in one case. The {{webextAPIref("menus")}} API enables an extension to create a menu item which is shown if the user context-clicks on a tab (that is, on the element in the tabstrip that enables the user to switch from one tab to another). diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md index 5a61c947bb6aced..e81112367bf9c31 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md @@ -211,7 +211,7 @@ The implication is that web developers who seek to improve the legibility of tex ## Saturation -Saturation deserves a special mention in discussions about color ("hues") and accessibility. Generally speaking, most focus is on luminance when attempting to ensure enough contrast between text and its background or evaluating the possibility of inducing seizures in those sensitive to photosensitive seizures. One aspect of color ("hues"), independent of luminance, deserves special attention as it applies to accessibility: the concept of saturation. This is due to its ability to cause seizures in those susceptible to photosensitive seizures, regardless of color's luminance. As discussed in [the particular case of red](#the-special-case-of-red), +Saturation deserves a special mention in discussions about color ("hues") and accessibility. Generally speaking, most focus is on luminance when attempting to ensure enough contrast between text and its background or evaluating the possibility of inducing seizures in those sensitive to photosensitive seizures. One aspect of color ("hues"), independent of luminance, deserves special attention as it applies to accessibility: the concept of saturation. This is due to its ability to cause seizures in those susceptible to photosensitive seizures, regardless of color's luminance. As discussed in [the particular case of red](#the_special_case_of_red), the [Epilepsy Foundation](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.532.7063&rep=rep1&type=pdf) noted that, _irrespective of luminance, a transition to or from a saturated red is also considered a risk_. Saturation is sometimes described as the "purity" or "intensity" of a color. Although these are good definitions for "pigments" in an artist's paint set, they are not as accurate as color definitions from a computer screen. diff --git a/files/en-us/web/api/prioritized_task_scheduling_api/index.md b/files/en-us/web/api/prioritized_task_scheduling_api/index.md index 5454164562124de..12e4487c4ffa067 100644 --- a/files/en-us/web/api/prioritized_task_scheduling_api/index.md +++ b/files/en-us/web/api/prioritized_task_scheduling_api/index.md @@ -11,7 +11,7 @@ browser-compat: The **Prioritized Task Scheduling API** provides a standardized way to prioritize all tasks belonging to an application, whether they are defined in a website developer's code or in third-party libraries and frameworks. -The [task priorities](#task-priorities) are very coarse-grained and based around whether tasks block user interaction or otherwise impact the user experience, or can run in the background. Developers and frameworks may implement more fine-grained prioritization schemes within the broad categories defined by the API. +The [task priorities](#task_priorities) are very coarse-grained and based around whether tasks block user interaction or otherwise impact the user experience, or can run in the background. Developers and frameworks may implement more fine-grained prioritization schemes within the broad categories defined by the API. The API is promise-based and supports the ability to set and change task priorities, to delay tasks being added to the scheduler, to abort tasks, and to monitor for priority change and abort events. diff --git a/files/en-us/web/css/@font-face/src/index.md b/files/en-us/web/css/@font-face/src/index.md index f6120f7a7348566..dc2b0a6064971d3 100644 --- a/files/en-us/web/css/@font-face/src/index.md +++ b/files/en-us/web/css/@font-face/src/index.md @@ -57,7 +57,7 @@ src: Possible values are described in the [Font formats](#font_formats) section below. - `tech()` {{Experimental_inline}} - : An optional declaration that follows the `url()` value that provides a hint for the user agent on the font technology. - The value for `tech()` may be one of the keywords described in [Font technologies](#font-technologies). + The value for `tech()` may be one of the keywords described in [Font technologies](#font_technologies). - `local()` - : Specifies the font name should the font be available on the user's device. diff --git a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md index 227e201506410db..e58ae5247e58e17 100644 --- a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md +++ b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md @@ -9,7 +9,7 @@ browser-compat: css.at-rules.media.-webkit-device-pixel-ratio The **`-webkit-device-pixel-ratio`** is a non-standard Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) which is an alternative to the standard [`resolution`](/en-US/docs/Web/CSS/@media/resolution) media feature. -> **Note:** If possible, use the [`resolution`](/en-US/docs/Web/CSS/@media/resolution) media feature query instead, which is a standard media feature. While this prefixed media feature is a WebKit feature, other browser engines may support it. See [browser compatibility](#browser-compatibility) below. +> **Note:** If possible, use the [`resolution`](/en-US/docs/Web/CSS/@media/resolution) media feature query instead, which is a standard media feature. While this prefixed media feature is a WebKit feature, other browser engines may support it. See [browser compatibility](#browser_compatibility) below. ## Syntax diff --git a/files/en-us/web/css/@media/-webkit-transform-3d/index.md b/files/en-us/web/css/@media/-webkit-transform-3d/index.md index a99a84dac12579c..7cd89fb64584d44 100644 --- a/files/en-us/web/css/@media/-webkit-transform-3d/index.md +++ b/files/en-us/web/css/@media/-webkit-transform-3d/index.md @@ -9,7 +9,7 @@ browser-compat: css.at-rules.media.-webkit-transform-3d The **`-webkit-transform-3d`** Boolean [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is a [WebKit extension](/en-US/docs/Web/CSS/WebKit_Extensions) whose value is `true` if vendor-prefixed CSS 3D {{cssxref("transform")}}s are supported. -> **Note:** While this media feature is currently [supported by most browsers](#browser-compatibility). If possible, use an {{cssxref("@supports")}} feature query instead. +> **Note:** While this media feature is currently [supported by most browsers](#browser_compatibility). If possible, use an {{cssxref("@supports")}} feature query instead. ## Syntax diff --git a/files/en-us/web/css/@media/-webkit-transition/index.md b/files/en-us/web/css/@media/-webkit-transition/index.md index 7d51be374b603ee..616eec2b2be3f16 100644 --- a/files/en-us/web/css/@media/-webkit-transition/index.md +++ b/files/en-us/web/css/@media/-webkit-transition/index.md @@ -16,7 +16,7 @@ The **`-webkit-transition`** Boolean non-standard[CSS](/en-US/docs/Web/CSS) [med Apple has [a description in Safari CSS Reference](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3); this is now called `transition` there. -> **Note:** You should not use this media feature; it was never specified, has never been widely implemented, and has been [removed from most browsers](#browser-compatibility). Use a {{cssxref("@supports")}} feature query instead. +> **Note:** You should not use this media feature; it was never specified, has never been widely implemented, and has been [removed from most browsers](#browser_compatibility). Use a {{cssxref("@supports")}} feature query instead. ## Syntax diff --git a/files/en-us/web/css/absolute-size/index.md b/files/en-us/web/css/absolute-size/index.md index 6bc75fcd4ae6fdc..9a76f7c91fce8f9 100644 --- a/files/en-us/web/css/absolute-size/index.md +++ b/files/en-us/web/css/absolute-size/index.md @@ -58,7 +58,7 @@ Each `` keyword value is sized relative to the `medium` size and In CSS1 (1996), the scaling factor between adjacent keyword value indexes was 1.5, which was too large. In CSS2 (1998), the scaling factor between adjacent keyword value indexes was 1.2, which created issues for the small values. As a single fixed ratio between adjacent absolute-size keywords was found to be problematic, there is no longer a fixed ratio recommendation. The only recommendation to preserve readability is that the smallest font size should not be less than `9px`. -For each `` keyword value, the following table lists the scaling factor, mapping to [`

` to `

`](/en-US/docs/Web/HTML/Element/Heading_Elements) headings, and mapping to the deprecated [HTML `size` attribute](#html-size-attribute). +For each `` keyword value, the following table lists the scaling factor, mapping to [`

` to `

`](/en-US/docs/Web/HTML/Element/Heading_Elements) headings, and mapping to the deprecated [HTML `size` attribute](#html_size_attribute). | `` | xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large | | --------------------- | -------- | ------- | ----- | ------ | ----- | ------- | -------- | --------- | diff --git a/files/en-us/web/css/content/index.md b/files/en-us/web/css/content/index.md index aadf9acc716c81c..180d40afa43f572 100644 --- a/files/en-us/web/css/content/index.md +++ b/files/en-us/web/css/content/index.md @@ -133,7 +133,7 @@ The keywords and data types mentioned above are described in more detail below: ## Examples -The first five examples create generated content on pseudo-elements. The last three are [examples of element replacement](#element-replacement-with-url). +The first five examples create generated content on pseudo-elements. The last three are [examples of element replacement](#element_replacement_with_url). ### Appending strings based on an element's class @@ -396,7 +396,7 @@ div { {{EmbedLiveSample('Element_replacement_with_gradient', '100%', 200)}} -Check the [browser compatibility chart](#browser-compatibility). All browsers support gradients and all browsers support replacing elements with images, but not all browsers support gradients as a `content` value and not all browsers support alt text on replacements. If the browser displays a box with no gradient, replacing elements is supported, but gradients are not supported as a content replacement value. If the element is replaced with a striped gradient, the browser supports both. +Check the [browser compatibility chart](#browser_compatibility). All browsers support gradients and all browsers support replacing elements with images, but not all browsers support gradients as a `content` value and not all browsers support alt text on replacements. If the browser displays a box with no gradient, replacing elements is supported, but gradients are not supported as a content replacement value. If the element is replaced with a striped gradient, the browser supports both. ### Element replacement with `image-set()` diff --git a/files/en-us/web/css/css_colors/applying_color/index.md b/files/en-us/web/css/css_colors/applying_color/index.md index 0570ff138b85bb7..db27e949cac3ce1 100644 --- a/files/en-us/web/css/css_colors/applying_color/index.md +++ b/files/en-us/web/css/css_colors/applying_color/index.md @@ -127,7 +127,7 @@ For example, a bright red that's 50% opaque can be represented as `rgb(255 0 0 / Aside from `rgb()`, you can use `hsl()` and `hwb()` which take a `` component. A [``](/en-US/docs/Web/CSS/hue) is the property that allows us to tell the difference or similarity between colors like red, orange, yellow, green, blue, etc. The key concept is that you can specify a hue in an [``](/en-US/docs/Web/CSS/angle) because most of the color models describe hues using a {{glossary("color wheel")}}. -For more information on classifying these functions, see the [Color spaces and color models](#color-spaces-and-color-models) section. +For more information on classifying these functions, see the [Color spaces and color models](#color_spaces_and_color_models) section. #### HSL functional notation diff --git a/files/en-us/web/css/css_multicol_layout/basic_concepts/index.md b/files/en-us/web/css/css_multicol_layout/basic_concepts/index.md index 4fdba7ebcac26e7..ac05a94c52135f5 100644 --- a/files/en-us/web/css/css_multicol_layout/basic_concepts/index.md +++ b/files/en-us/web/css/css_multicol_layout/basic_concepts/index.md @@ -82,7 +82,7 @@ This CSS would give the same result as [example 2](#specifying_the_width_of_colu } ``` -This CSS would give the same result as [example 3](#specifying-both-number-and-width-of-columns), with both `column-count` and `column-width` set. +This CSS would give the same result as [example 3](#specifying_both_number_and_width_of_columns), with both `column-count` and `column-width` set. ```css .container { diff --git a/files/en-us/web/css/css_selectors/index.md b/files/en-us/web/css/css_selectors/index.md index 1df94ef29fe99b1..ee9417f47b6a0f5 100644 --- a/files/en-us/web/css/css_selectors/index.md +++ b/files/en-us/web/css/css_selectors/index.md @@ -102,10 +102,10 @@ Selectors, whether used in CSS or JavaScript, enable targeting HTML elements bas - {{glossary("Pseudo-class")}} glossary term - [Functional pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes#functional_pseudo-classes) - [Combinators](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#combinators) -- [Simple selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#simple-selector) -- [Compound selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#compound-selector) -- [Complex selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#complex-selector) -- [Relative selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#relative-selector) +- [Simple selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#simple_selector) +- [Compound selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector) +- [Complex selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector) +- [Relative selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#relative_selector) - [Selector list](/en-US/docs/Web/CSS/Selector_list) - [Specificity](/en-US/docs/Web/CSS/Specificity) 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 6994080ac984d31..80d71a1b9123863 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 @@ -193,12 +193,12 @@ 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](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#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). -Multiple pseudo-classes can be combined to create [compound selectors](#compound-selector). When combining a pseudo-class into a compound selector with a type or universal selector, the pseudo-class must follow the type selector or universal selector, if present. +Multiple pseudo-classes can be combined to create [compound selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector). When combining a pseudo-class into a compound selector with a type or universal selector, the pseudo-class must follow the type selector or universal selector, if present. ## Pseudo-element selectors diff --git a/files/en-us/web/css/css_syntax/error_handling/index.md b/files/en-us/web/css/css_syntax/error_handling/index.md index 7579553f2b7c354..a423d055e0bb7e4 100644 --- a/files/en-us/web/css/css_syntax/error_handling/index.md +++ b/files/en-us/web/css/css_syntax/error_handling/index.md @@ -68,7 +68,7 @@ Outside of these exceptions, a single invalid or unsupported selector in the sel #### `-webkit-` exception -Due to legacy issues from the overuse of browser-specific prefixes in selectors and [property names (and values)](#vendor-prefixes), browsers avoid excessive invalidation of selector lists by treating all [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements) that start with a case-insensitive `-webkit-` prefix and don't end with `()` as valid. +Due to legacy issues from the overuse of browser-specific prefixes in selectors and [property names (and values)](#vendor_prefixes), browsers avoid excessive invalidation of selector lists by treating all [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements) that start with a case-insensitive `-webkit-` prefix and don't end with `()` as valid. This means that a pseudo-element like `::-webkit-works-only-in-samsung` will not invalidate a selector list, regardless of which browser the code is running in. In such cases, the pseudo-element may not be recognized or supported by the browser, but it will not cause the entire selector list and its associated style block to be ignored. On the other hand, an unknown prefixed selector with a function notation of `::-webkit-imaginary-function()` will invalidate the entire selector list, and the browser will ignore the entire selector block. diff --git a/files/en-us/web/css/font-weight/index.md b/files/en-us/web/css/font-weight/index.md index ce758cbc99ec817..4b0e2fc57644326 100644 --- a/files/en-us/web/css/font-weight/index.md +++ b/files/en-us/web/css/font-weight/index.md @@ -55,7 +55,7 @@ The `font-weight` property is specified using either a `` - `` - - : A {{cssxref("<number>")}} value between 1 and 1000, both values included. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. This allows fine-grain control for [variable fonts](#variable_fonts). For non-variable fonts, if the exact specified weight is unavailable, a [fallback weight](#fallback-weights) algorithm is used — numeric values that are divisible by 100 correspond to common weight names, as described in the [Common weight name mapping](#common_weight_name_mapping) section below. + - : A {{cssxref("<number>")}} value between 1 and 1000, both values included. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. This allows fine-grain control for [variable fonts](#variable_fonts). For non-variable fonts, if the exact specified weight is unavailable, a [fallback weight](#fallback_weights) algorithm is used — numeric values that are divisible by 100 correspond to common weight names, as described in the [Common weight name mapping](#common_weight_name_mapping) section below. - `lighter` diff --git a/files/en-us/web/css/list-style-type/index.md b/files/en-us/web/css/list-style-type/index.md index d3f2507f19062e5..6d997aae11a95c5 100644 --- a/files/en-us/web/css/list-style-type/index.md +++ b/files/en-us/web/css/list-style-type/index.md @@ -186,7 +186,7 @@ A few predefined types are supported by Mozilla (Firefox) with a `-moz-` prefix. - `hangul-consonant`: `-moz-hangul-consonant` - `urdu`: `-moz-urdu` -See the [compatibility table](#browser-compatibility) to check which browsers support which extension. +See the [compatibility table](#browser_compatibility) to check which browsers support which extension. ## Accessibility concerns diff --git a/files/en-us/web/css/using_css_custom_properties/index.md b/files/en-us/web/css/using_css_custom_properties/index.md index 300a6f6c1fdf800..4a6fdb9e347f07f 100644 --- a/files/en-us/web/css/using_css_custom_properties/index.md +++ b/files/en-us/web/css/using_css_custom_properties/index.md @@ -370,7 +370,7 @@ You should be aware of the performance impact of this method, however, as it tak ### Fallbacks using the `@property` initial value Aside from using `var()`, the `initial-value` defined in the `@property` at-rule can be used as a fallback mechanism. -In fact, we've already seen this in the [`@property` inheritance](#using-property-to-control-inheritance) section. +In fact, we've already seen this in the [`@property` inheritance](#using_property_to_control_inheritance) section. The following example sets an initial value of `--box-color` to `cornflowerblue` using the `@property` at-rule. In the ruleset following the at-rule, we want to set `--box-color` to `aquamarine`, but there's a typo in the value name. diff --git a/files/en-us/web/http/status/103/index.md b/files/en-us/web/http/status/103/index.md index f8e42fdb448b401..21c8b9bbdfff2f3 100644 --- a/files/en-us/web/http/status/103/index.md +++ b/files/en-us/web/http/status/103/index.md @@ -19,7 +19,7 @@ Preloaded resources from the early hint are effectively pre-pended to the `Docum > **Note:** For compatibility reasons [it is recommended](https://www.rfc-editor.org/rfc/rfc8297#section-3) to only send HTTP `103 Early Hints` responses over HTTP/2 or later, unless the client is known to handle informational responses correctly. > -> Most browsers limit support to HTTP/2 or later for this reason. See [browser compatibility](#browser-compatibility) below. +> Most browsers limit support to HTTP/2 or later for this reason. See [browser compatibility](#browser_compatibility) below. > > Despite this, the examples below use HTTP/1.1-style notation as per usual convention. @@ -65,7 +65,7 @@ Content-Type: text/html ### Preload example -> **Warning:** Some browsers only support `preconnect` over 103 Early Hints. See the implementation notes in the [browser compatibility](#browser-compatibility) section below. +> **Warning:** Some browsers only support `preconnect` over 103 Early Hints. See the implementation notes in the [browser compatibility](#browser_compatibility) section below. The following `103` early hint response indicates a stylesheet `style.css` might be needed by the final response. diff --git a/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md b/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md index b89f9339ad07c83..04fc9127ec62b3e 100644 --- a/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md +++ b/files/en-us/web/progressive_web_apps/guides/making_pwas_installable/index.md @@ -108,7 +108,7 @@ Support for PWA installation promotion from the web varies by browser and by pla On desktop: -- Firefox and Safari do not support installing PWAs on any desktop operating systems. See [Installing sites as apps](#sites-as-apps), below. +- Firefox and Safari do not support installing PWAs on any desktop operating systems. See [Installing sites as apps](#installing_sites_as_apps), below. - Chrome and Edge support installing PWAs on Linux, Windows, macOS, and Chromebooks. On mobile: diff --git a/files/en-us/web/progressive_web_apps/how_to/define_app_icons/index.md b/files/en-us/web/progressive_web_apps/how_to/define_app_icons/index.md index c4469ff0ccf9799..6cfaabac59b1d9d 100644 --- a/files/en-us/web/progressive_web_apps/how_to/define_app_icons/index.md +++ b/files/en-us/web/progressive_web_apps/how_to/define_app_icons/index.md @@ -30,7 +30,7 @@ Designing your icon as an SVG file is a good idea, as this will allow it to be s Use the [`icons`](/en-US/docs/Web/Manifest/icons) web app manifest member to define a set of icons for your PWA. -As described in [Create the necessary icon sizes](#create-the-necessary-icon-sizes), you should create multiple versions of your icon to ensure it appears correctly in all the places where it's used. This is why the `icons` member is an array of objects, each of which represents an icon, with its own size, type, and purpose. Each icon object has the following properties: +As described in [Create the necessary icon sizes](#create_the_necessary_icon_sizes), you should create multiple versions of your icon to ensure it appears correctly in all the places where it's used. This is why the `icons` member is an array of objects, each of which represents an icon, with its own size, type, and purpose. Each icon object has the following properties: - `src` - : The URL of the icon image file. @@ -117,7 +117,7 @@ The following web app manifest example uses a WebP image for the small icon, an } ``` -Learn more about how to reference the various icon sizes in [Reference your icons in the web app manifest](#reference-your-icons-in-the-web-app-manifest). +Learn more about how to reference the various icon sizes in [Reference your icons in the web app manifest](#reference_your_icons_in_the_web_app_manifest). ## Support masking diff --git a/files/en-us/web/progressive_web_apps/how_to/display_badge_on_app_icon/index.md b/files/en-us/web/progressive_web_apps/how_to/display_badge_on_app_icon/index.md index 855a6c4f2a67465..f23c7721a96be66 100644 --- a/files/en-us/web/progressive_web_apps/how_to/display_badge_on_app_icon/index.md +++ b/files/en-us/web/progressive_web_apps/how_to/display_badge_on_app_icon/index.md @@ -38,7 +38,7 @@ Before learning how to use badges, consider these best practices to ensure your ### Check for support -To ensure the Badging API is [supported](#support-for-badges) in the user's browser and operating system, to prevent throwing a JavaScript error, check for support before using the API: +To ensure the Badging API is [supported](#support_for_badges) in the user's browser and operating system, to prevent throwing a JavaScript error, check for support before using the API: ```js if (navigator.setAppBadge) { @@ -70,7 +70,7 @@ Like notifications, badges can be a very effective way to re-engage users with y Make sure to update your application badge in real-time. This means updating the badge count to reflect how many new items are actually left for the user to consume, and clearing the app badge when there are no new items. -For example, if an email client app receives new messages in the background, it should update its badge to display the right number of unread messages in the inbox, potentially filtering out messages from other folders such as a spam folder. It's possible to [update badges in the background](#updating-the-badge-in-the-background) by using the `navigator.setAppBadge()` method from a service worker. +For example, if an email client app receives new messages in the background, it should update its badge to display the right number of unread messages in the inbox, potentially filtering out messages from other folders such as a spam folder. It's possible to [update badges in the background](#updating_the_badge_in_the_background) by using the `navigator.setAppBadge()` method from a service worker. Once the user launches the app and starts reading messages, the email client app should update its badge accordingly by calling `navigator.setAppBadge()` with the new unread messages count, or by calling `navigator.clearAppBadge()` when there are no unread messages. diff --git a/files/en-us/web/progressive_web_apps/how_to/share_data_between_apps/index.md b/files/en-us/web/progressive_web_apps/how_to/share_data_between_apps/index.md index e2f1d6be329263f..64964d5f1d874dc 100644 --- a/files/en-us/web/progressive_web_apps/how_to/share_data_between_apps/index.md +++ b/files/en-us/web/progressive_web_apps/how_to/share_data_between_apps/index.md @@ -73,7 +73,7 @@ async function shareData(data) { ### Sharing text data -The following example demonstrates how to share a link and some text when a button in the app is clicked. The `canBrowserShareData` function used in the example is described in [Checking for support](#checking-for-support) and not repeated here. +The following example demonstrates how to share a link and some text when a button in the app is clicked. The `canBrowserShareData` function used in the example is described in [Checking for support](#checking_for_support) and not repeated here. ```js // Retrieve the button from the DOM. The button is hidden for now. diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md index 8b54c4506aac93c..1a9e0ba40c41fe6 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md @@ -61,7 +61,7 @@ Copy this HTML and save it in a file called `index.html`. ## HTML content -Even if the HTML in `index.html` is familiar to you, we recommend reading through this section before adding some [temporary hard-coded data](#temporary-hard-coded-results-text), adding CSS to a [`style.css`](#css-content) external stylesheet, and creating `app.js`, the [application's JavaScript](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) that makes this web page function. +Even if the HTML in `index.html` is familiar to you, we recommend reading through this section before adding some [temporary hard-coded data](#temporary-hard-coded-results-text), adding CSS to a [`style.css`](#css_content) external stylesheet, and creating `app.js`, the [application's JavaScript](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) that makes this web page function. The HTML's first line is a {{glossary("doctype")}} preamble, which ensures the content behaves correctly. @@ -234,7 +234,7 @@ li:nth-of-type(even) { } ``` -If every line is familiar to you, you can copy the above CSS, or write your own CSS, and save the file as [`style.css`](https://github.com/mdn/pwa-examples/tree/main/cycletracker/html_and_css/style.css), then [finish up the static HTML and CSS](#finishing-the-static-html-and-css-for-our-pwa). If anything in the above CSS is new to you, keep reading for an explanation. +If every line is familiar to you, you can copy the above CSS, or write your own CSS, and save the file as [`style.css`](https://github.com/mdn/pwa-examples/tree/main/cycletracker/html_and_css/style.css), then [finish up the static HTML and CSS](#finishing_the_static_html_and_css_for_our_pwa). If anything in the above CSS is new to you, keep reading for an explanation. ![Light green web page with a large header, a form with a legend, two date pickers and a button. The bottom shows fake data for two menstrual cycles and a header.](html.jpg) diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md index 5e9042423ef326e..2c6f500da40c89a 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md @@ -132,7 +132,7 @@ Within the manifest JSON object, the `icons` member specifies an array of one or } ``` -All icons should have the same look and feel to ensure users recognize your PWA, but the larger the icon, the greater the detail it can contain. While all icon files are squares, some operating systems render different shapes, cutting sections off, or "masking" the icon, to meet the UI, or shrinking and centering the icon with a background if the icon is not maskable. The [safe zone](/en-US/docs/Web/Progressive_web_apps/How_to/Define_app_icons#support-masking), the area that will render okay if the icon is masked as a circle, is the inner 80% of the image file. Icons are labeled as safe to be masked by the `purpose` member which, when set to `maskable`, defines the [icon as adaptive](https://web.dev/articles/maskable-icon). +All icons should have the same look and feel to ensure users recognize your PWA, but the larger the icon, the greater the detail it can contain. While all icon files are squares, some operating systems render different shapes, cutting sections off, or "masking" the icon, to meet the UI, or shrinking and centering the icon with a background if the icon is not maskable. The [safe zone](/en-US/docs/Web/Progressive_web_apps/How_to/Define_app_icons#support_masking), the area that will render okay if the icon is masked as a circle, is the inner 80% of the image file. Icons are labeled as safe to be masked by the `purpose` member which, when set to `maskable`, defines the [icon as adaptive](https://web.dev/articles/maskable-icon). In Safari, and therefor for iOS and iPadOS, if you include the [non-standard `apple-touch-icon`](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_custom_icons_to_your_site) in the {{HTMLElement("head")}} of the HTML document via {{HTMLElement("link")}}, they will take precedence over manifest-declared icons. diff --git a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md index 5b01cb80611bc78..8c6a2e3ac8adec8 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md @@ -197,7 +197,7 @@ We can take advantage of the [`fetch`](/en-US/docs/Web/API/ServiceWorkerGlobalSc As our PWA consists of a single page, for page navigation requests, we go back to the `index.html` home page. There are no other pages and we don't ever want to go to the server. If the Fetch API's [`Request`](/en-US/docs/Web/API/Request) readonly [`mode`](/en-US/docs/Web/API/Request/mode) property is `navigate`, meaning it's looking for a web page, we use the FetchEvent's [`respondWith()`](/en-US/docs/Web/API/FetchEvent/respondWith) method to prevent the browser's default fetch handling, providing our own response promise employing the [`caches.match()`](/en-US/docs/Web/API/CacheStorage/match) method. -For all other request modes, we open the caches as done in the [install event response](#saving-the-cache-on-pwa-installation), instead passing the event request to the same `match()` method. It checks if the request is a key for a stored {{domxref("Response")}}. If yes, it returns the cached response. If not, we return a [404 status](/en-US/docs/Web/HTTP/Status/404) as a response. +For all other request modes, we open the caches as done in the [install event response](#saving_the_cache_on_pwa_installation), instead passing the event request to the same `match()` method. It checks if the request is a key for a stored {{domxref("Response")}}. If yes, it returns the cached response. If not, we return a [404 status](/en-US/docs/Web/HTTP/Status/404) as a response. Using the [`Response()`](/en-US/docs/Web/API/Response/Response) constructor to pass a `null` body and a `status: 404` as options, doesn't mean there is an error in our PWA. Rather, everything we need should already be in the cache, and if it isn't, we're not going to the server to resolve this non-issue. @@ -367,7 +367,7 @@ Because of the way we have set up the service worker, once it is registered, eve ### By updating the version number and doing a hard reset -To get a new cache, you can change the [version number](#version-number) and then do a hard browser refresh. The way you do a hard refresh depends on the browser and operating system: +To get a new cache, you can change the [version number](#version_number) and then do a hard browser refresh. The way you do a hard refresh depends on the browser and operating system: - On Windows: Ctrl+F5, Shift+F5, or Ctrl+Shift+R. - On MacOS: Shift+Command+R. diff --git a/files/en-us/web/webdriver/capabilities/index.md b/files/en-us/web/webdriver/capabilities/index.md index b9db04cebbee3ac..9222df29ebbf40c 100644 --- a/files/en-us/web/webdriver/capabilities/index.md +++ b/files/en-us/web/webdriver/capabilities/index.md @@ -8,7 +8,7 @@ page-type: landing-page WebDriver **_capabilities_** are used to communicate the features supported by a [session](/en-US/docs/Web/WebDriver). A client may also use capabilities to define which features it requires the driver to satisfy when [creating a new session](/en-US/docs/Web/WebDriver/Commands/NewSession). -When a WebDriver session is created it returns a set of capabilities describing the negotiated, effective capabilities of the session. Some of the capabilities included in this set are [standard and shared between all browsers](#list-of-capabilities), but the set may also contain [browser-specific capabilities](#vendor-specific-capabilities) and these are always prefixed. +When a WebDriver session is created it returns a set of capabilities describing the negotiated, effective capabilities of the session. Some of the capabilities included in this set are [standard and shared between all browsers](#list_of_capabilities), but the set may also contain [browser-specific capabilities](#vendor-specific_capabilities) and these are always prefixed. ## Capabilities negotiation @@ -112,7 +112,7 @@ Which you choose of the two preceding examples is not important, but it can matt ## Vendor-specific capabilities -In addition to the [standard capabilities](#list-of-capabilities) WebDriver allows third-parties to _extend_ the set of capabilities to match their needs. Browser vendors and suppliers of drivers typically use extension capabilities to provide configuration to the browser, but they can also be used by intermediaries for arbitrary blobs of information. +In addition to the [standard capabilities](#list_of_capabilities) WebDriver allows third-parties to _extend_ the set of capabilities to match their needs. Browser vendors and suppliers of drivers typically use extension capabilities to provide configuration to the browser, but they can also be used by intermediaries for arbitrary blobs of information. - [Firefox capabilities](/en-US/docs/Web/WebDriver/Capabilities/firefoxOptions) (`moz:firefoxOptions`) - [Chrome capabilities](/en-US/docs/Web/WebDriver/Capabilities/goog/chromeOptions) (`goog:chromeOptions`) diff --git a/files/en-us/web/webdriver/errors/scripttimeout/index.md b/files/en-us/web/webdriver/errors/scripttimeout/index.md index 25668edc68a0e1b..858e45bf4cc983f 100644 --- a/files/en-us/web/webdriver/errors/scripttimeout/index.md +++ b/files/en-us/web/webdriver/errors/scripttimeout/index.md @@ -6,7 +6,7 @@ page-type: webdriver-error {{QuickLinksWithSubpages("/en-US/docs/Web/WebDriver/Errors")}} -The **script timeout** error is a [WebDriver error](/en-US/docs/Web/WebDriver/Errors) that occurs when a script the user has provided did not complete before the session's [script timeout](/en-US/docs/Web/WebDriver/Capabilities#script-timeout) duration expired. +The **script timeout** error is a [WebDriver error](/en-US/docs/Web/WebDriver/Errors) that occurs when a script the user has provided did not complete before the session's [script timeout](/en-US/docs/Web/WebDriver/Errors/ScriptTimeout) duration expired. The script timeout duration is a configurable capability, which means you can change how long it will take before the driver interrupts an injected script. The driver will by default wait 30 seconds before interrupting the script and returning with a script timeout error, but this can be both extended, limited, and be set to indefinite.