diff --git a/.github/workflows/auto-cleanup-bot.yml b/.github/workflows/auto-cleanup-bot.yml index edd519e51769765..eac7b8cee33dc27 100644 --- a/.github/workflows/auto-cleanup-bot.yml +++ b/.github/workflows/auto-cleanup-bot.yml @@ -15,7 +15,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 diff --git a/.github/workflows/interfacedata-updater.yml b/.github/workflows/interfacedata-updater.yml index 4c4331555b13a53..e869215205610cc 100644 --- a/.github/workflows/interfacedata-updater.yml +++ b/.github/workflows/interfacedata-updater.yml @@ -16,7 +16,7 @@ jobs: steps: - name: Checkout content - uses: actions/checkout@v4 + uses: actions/checkout@v5 with: path: mdn-content ref: main @@ -27,7 +27,7 @@ jobs: node-version-file: "mdn-content/.nvmrc" - name: Checkout webref - uses: actions/checkout@v4 + uses: actions/checkout@v5 with: repository: w3c/webref path: webref diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml index abc9030366839ca..9417f497f8974ee 100644 --- a/.github/workflows/markdown-lint.yml +++ b/.github/workflows/markdown-lint.yml @@ -21,7 +21,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index 135de58f4eae80e..77fe6a427b65e07 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -23,7 +23,7 @@ jobs: steps: - name: Checkout BASE - uses: actions/checkout@v4 + uses: actions/checkout@v5 - name: Get changed files id: check @@ -55,7 +55,7 @@ jobs: - name: Checkout HEAD if: steps.check.outputs.HAS_FILES == 'true' - uses: actions/checkout@v4 + uses: actions/checkout@v5 with: ref: ${{ github.event.pull_request.head.sha }} path: pr_head diff --git a/.github/workflows/pr-check_cspell_lists.yml b/.github/workflows/pr-check_cspell_lists.yml index ec9f40d2d913f3c..576fc9b8c264233 100644 --- a/.github/workflows/pr-check_cspell_lists.yml +++ b/.github/workflows/pr-check_cspell_lists.yml @@ -14,7 +14,7 @@ jobs: docs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 with: sparse-checkout-cone-mode: false sparse-checkout: | diff --git a/.github/workflows/pr-check_javascript.yml b/.github/workflows/pr-check_javascript.yml index cfb477c123a4540..1f08e2df2939515 100644 --- a/.github/workflows/pr-check_javascript.yml +++ b/.github/workflows/pr-check_javascript.yml @@ -18,7 +18,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 diff --git a/.github/workflows/pr-check_json.yml b/.github/workflows/pr-check_json.yml index a2bb981f97bec2e..b9493f6d56ace3c 100644 --- a/.github/workflows/pr-check_json.yml +++ b/.github/workflows/pr-check_json.yml @@ -18,7 +18,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 diff --git a/.github/workflows/pr-check_redirects.yml b/.github/workflows/pr-check_redirects.yml index deb9d7412362fc7..bdced02fccd740b 100644 --- a/.github/workflows/pr-check_redirects.yml +++ b/.github/workflows/pr-check_redirects.yml @@ -13,7 +13,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 diff --git a/.github/workflows/pr-check_scripts.yml b/.github/workflows/pr-check_scripts.yml index a475212217ff236..07364ecb0c7ead4 100644 --- a/.github/workflows/pr-check_scripts.yml +++ b/.github/workflows/pr-check_scripts.yml @@ -18,7 +18,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 @@ -38,7 +38,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 @@ -78,7 +78,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 @@ -98,7 +98,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 @@ -122,7 +122,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 diff --git a/.github/workflows/pr-check_url-issues.yml b/.github/workflows/pr-check_url-issues.yml index bff1bf2350fa13a..2f8b2c0e24abd8f 100644 --- a/.github/workflows/pr-check_url-issues.yml +++ b/.github/workflows/pr-check_url-issues.yml @@ -16,7 +16,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 with: fetch-depth: 0 diff --git a/.github/workflows/pr-check_yml.yml b/.github/workflows/pr-check_yml.yml index 4b7789a519a4617..94c70e086847df4 100644 --- a/.github/workflows/pr-check_yml.yml +++ b/.github/workflows/pr-check_yml.yml @@ -18,7 +18,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml index 39794da83d201be..36c558ebbc8f741 100644 --- a/.github/workflows/pr-review-companion.yml +++ b/.github/workflows/pr-review-companion.yml @@ -76,7 +76,7 @@ jobs: process_gcloudignore: false - name: Checkout (mdn/content) - uses: actions/checkout@v4 + uses: actions/checkout@v5 if: steps.check.outputs.HAS_ARTIFACT with: path: content diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index 26aaee13342c6b6..219be98a896bda5 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -29,7 +29,7 @@ jobs: BUILD_OUT_ROOT: build steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Get changed files id: check diff --git a/.github/workflows/spelling-check-bot.yml b/.github/workflows/spelling-check-bot.yml index 216d41efcbb7d1c..8bc55f34fac6ab6 100644 --- a/.github/workflows/spelling-check-bot.yml +++ b/.github/workflows/spelling-check-bot.yml @@ -18,7 +18,7 @@ jobs: timeout-minutes: 5 steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node.js environment uses: actions/setup-node@v4 diff --git a/files/en-us/web/api/fontface/index.md b/files/en-us/web/api/fontface/index.md index ee26c32e787b4c2..a36831e882ca101 100644 --- a/files/en-us/web/api/fontface/index.md +++ b/files/en-us/web/api/fontface/index.md @@ -43,7 +43,7 @@ For URL font sources it allows authors to trigger when the remote font is fetche - : A string that retrieves or sets the _range of unicode code points_ encompassing the font. It is equivalent to the {{cssxref("@font-face/unicode-range", "unicode-range")}} descriptor. - {{domxref("FontFace.variant")}} {{non-standard_inline}} - : A string that retrieves or sets the _variant_ of the font. -- {{domxref("FontFace.variationSettings")}} {{Experimental_Inline}} +- {{domxref("FontFace.variationSettings")}} - : A string that retrieves or sets the _variation settings_ of the font. It is equivalent to the {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} descriptor. - {{domxref("FontFace.weight")}} - : A string that contains the _weight_ of the font. It is equivalent to the {{cssxref("@font-face/font-weight", "font-weight")}} descriptor. diff --git a/files/en-us/web/api/fontface/variationsettings/index.md b/files/en-us/web/api/fontface/variationsettings/index.md index d1a4cdf16188432..1ba5bc640034e7d 100644 --- a/files/en-us/web/api/fontface/variationsettings/index.md +++ b/files/en-us/web/api/fontface/variationsettings/index.md @@ -3,12 +3,10 @@ title: "FontFace: variationSettings property" short-title: variationSettings slug: Web/API/FontFace/variationSettings page-type: web-api-instance-property -status: - - experimental browser-compat: api.FontFace.variationSettings --- -{{APIRef("CSS Font Loading API")}}{{AvailableInWorkers}}{{SeeCompatTable}} +{{APIRef("CSS Font Loading API")}}{{AvailableInWorkers}} The **`variationSettings`** property of the {{domxref("FontFace")}} interface retrieves or sets low-level OpenType or TrueType font variations. diff --git a/files/en-us/web/api/htmllinkelement/blocking/index.md b/files/en-us/web/api/htmllinkelement/blocking/index.md index 6e08a02bdba7c70..fe6d6ca97253bb1 100644 --- a/files/en-us/web/api/htmllinkelement/blocking/index.md +++ b/files/en-us/web/api/htmllinkelement/blocking/index.md @@ -19,6 +19,9 @@ A string. Must be a space-separated list of blocking tokens listed below indicat - `render` - : The rendering of content on the screen is blocked. + > [!NOTE] + > Only `link` elements in the document's `` can possibly block rendering. By default, a `link` element with `rel="stylesheet"` in the `` blocks rendering when the browser discovers it during parsing. If such a `link` element is added dynamically via script, you must additionally set `blocking = "render"` for it to block rendering. + ## Examples ```html diff --git a/files/en-us/web/api/htmlscriptelement/blocking/index.md b/files/en-us/web/api/htmlscriptelement/blocking/index.md index d5b54bf4d726a49..92ae4ca828cd2cb 100644 --- a/files/en-us/web/api/htmlscriptelement/blocking/index.md +++ b/files/en-us/web/api/htmlscriptelement/blocking/index.md @@ -19,6 +19,9 @@ A string. Must be a space-separated list of blocking tokens listed below indicat - `render` - : The rendering of content on the screen is blocked. + > [!NOTE] + > Only `script` elements in the document's `` can possibly block rendering. Scripts are not render-blocking by default; if a `script` element does not include `type="module"`, `async`, or `defer`, then it blocks _parsing_, not _rendering_. If such a `script` element is added dynamically via script, you must set `blocking = "render"` for it to block rendering. + ## Examples ```html diff --git a/files/en-us/web/api/htmlstyleelement/blocking/index.md b/files/en-us/web/api/htmlstyleelement/blocking/index.md index 84d734f677af4e8..00102f3ea37d376 100644 --- a/files/en-us/web/api/htmlstyleelement/blocking/index.md +++ b/files/en-us/web/api/htmlstyleelement/blocking/index.md @@ -19,6 +19,9 @@ A string. Must be a space-separated list of blocking tokens listed below indicat - `render` - : The rendering of content on the screen is blocked. + > [!NOTE] + > Only `style` elements in the document's `` can possibly block rendering. By default, a `style` element in the `` blocks rendering when the browser discovers it during parsing. If such a `style` element is added dynamically via script, you must additionally set `blocking = "render"` for it to block rendering. + ## Examples ```html diff --git a/files/en-us/web/api/view_transition_api/using/index.md b/files/en-us/web/api/view_transition_api/using/index.md index a17d46f2ed8334d..d3f2277df138e30 100644 --- a/files/en-us/web/api/view_transition_api/using/index.md +++ b/files/en-us/web/api/view_transition_api/using/index.md @@ -501,7 +501,7 @@ Before running a cross-document transition, you ideally want to wait until the s 2. Critical scripts are loaded and run. 3. The HTML visible for the user's initial view of the page has been parsed, so it renders consistently. -Styles are render blocked by default, and scripts can be render blocked using the [`blocking="render"`](/en-US/docs/Web/HTML/Reference/Elements/script#blocking) attribute. +Styles are render blocked by default unless they are added to the document dynamically, via script. Both scripts and dynamically-added styles can be render blocked using the [`blocking="render"`](/en-US/docs/Web/HTML/Reference/Elements/script#blocking) attribute. To ensure that your initial HTML has been parsed and will always render consistently before the transition animation runs, you can use [``](/en-US/docs/Web/HTML/Reference/Attributes/rel#expect). In this element, you include the following attributes: @@ -509,6 +509,9 @@ To ensure that your initial HTML has been parsed and will always render consiste - `href="#element-id"` to indicate the ID of the element you want to render block. - `blocking="render"` to render block the specified HTML. +> [!NOTE] +> In order to block rendering, `script`, `link`, and `style` elements with `blocking="render"` must be in the `head` of the document. + Let's explore what this looks like with an example HTML document: ```html diff --git a/files/en-us/web/html/reference/attributes/rel/index.md b/files/en-us/web/html/reference/attributes/rel/index.md index fc82760279f5b3f..96f77d148d05158 100644 --- a/files/en-us/web/html/reference/attributes/rel/index.md +++ b/files/en-us/web/html/reference/attributes/rel/index.md @@ -26,7 +26,7 @@ The following table lists some of the most important existing keywords. Every ke | [`compression-dictionary`](/en-US/docs/Web/HTML/Reference/Attributes/rel/compression-dictionary) | Link to a {{glossary("Compression dictionary transport", "compression dictionary")}} that can be used to compress future downloads for resources on this site. | Link | Not allowed | Not allowed | | [`dns-prefetch`](/en-US/docs/Web/HTML/Reference/Attributes/rel/dns-prefetch) | Tells the browser to preemptively perform DNS resolution for the target resource's origin. | External Resource | Not allowed | Not allowed | | [`external`](#external) | The referenced document is not part of the same site as the current document. | Not allowed | Annotation | Annotation | -| [`expect`](#expect) | Allows the page to be [render-blocked](/en-US/docs/Glossary/Render_blocking) until the essential parts of the document are parsed so it will render consistently. | Link | Not allowed | Not allowed | +| [`expect`](#expect) | When used with [`blocking="render"`](/en-US/docs/Web/HTML/Reference/Elements/link#blocking), allows the page to be [render-blocked](/en-US/docs/Glossary/Render_blocking) until the essential parts of the document are parsed so it will render consistently. | Link | Not allowed | Not allowed | | [`help`](#help) | Link to context-sensitive help. | Link | Link | Link | | [`icon`](#icon) | An icon representing the current document. | External Resource | Not allowed | Not allowed | | [`license`](#license) | Indicates that the main content of the current document is covered by the copyright license described by the referenced document. | Link | Link | Link | diff --git a/files/en-us/web/html/reference/elements/link/index.md b/files/en-us/web/html/reference/elements/link/index.md index fdd879c4c6f8a2b..bcb8afa0b0f1d0a 100644 --- a/files/en-us/web/html/reference/elements/link/index.md +++ b/files/en-us/web/html/reference/elements/link/index.md @@ -175,9 +175,12 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo - `blocking` - - : This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. It must only be used when the `rel` attribute contains `expect` or `stylesheet` keywords. The operations that are to be blocked must be a space-separated list of blocking tokens listed below. + - : This attribute explicitly indicates that certain operations should be blocked until specific conditions are met. It must only be used when the `rel` attribute contains the `expect` or `stylesheet` keywords. With [`rel="expect"`](/en-US/docs/Web/HTML/Reference/Attributes/rel#expect), it indicates that operations should be blocked until a specific DOM node has been parsed. With [`rel="stylesheet"`](/en-US/docs/Web/HTML/Reference/Attributes/rel#stylesheet), it indicates that operations should be blocked until an external stylesheet and its critical subresources have been fetched and applied to the document. The operations that are to be blocked must be a space-separated list of blocking tokens listed below. Currently there is only one token: - `render`: The rendering of content on the screen is blocked. + > [!NOTE] + > Only `link` elements in the document's `` can possibly block rendering. By default, a `link` element with `rel="stylesheet"` in the `` blocks rendering when the browser discovers it during parsing. If such a `link` element is added dynamically via script, you must additionally set `blocking = "render"` for it to block rendering. + - [`crossorigin`](/en-US/docs/Web/HTML/Reference/Attributes/crossorigin) - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute indicates whether {{Glossary("CORS")}} must be used when fetching the resource. [CORS-enabled images](/en-US/docs/Web/HTML/How_to/CORS_enabled_image) can be reused in the {{HTMLElement("canvas")}} element without being _tainted_. @@ -387,7 +390,7 @@ You can find a number of `` examples in [Preloading content ### Blocking rendering till a resource is fetched You can include `render` token inside a `blocking` attribute; -the rendering of the page will be blocked till the resource is fetched. For example: +the rendering of the page will be blocked till the resource and its critical subresources are fetched and applied to the document. For example: ```html diff --git a/files/en-us/web/html/reference/elements/script/index.md b/files/en-us/web/html/reference/elements/script/index.md index 5022db11f867bce..d23ea37fb633d96 100644 --- a/files/en-us/web/html/reference/elements/script/index.md +++ b/files/en-us/web/html/reference/elements/script/index.md @@ -52,9 +52,12 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo See the [Attribution Reporting API](/en-US/docs/Web/API/Attribution_Reporting_API) for more details. - `blocking` - - : This attribute explicitly indicates that certain operations should be blocked on the fetching of the script. The operations that are to be blocked must be a space-separated list of blocking tokens listed below. + - : This attribute explicitly indicates that certain operations should be blocked until the script has executed. The operations that are to be blocked must be a space-separated list of blocking tokens. Currently there is only one token: - `render`: The rendering of content on the screen is blocked. + > [!NOTE] + > Only `script` elements in the document's `` can possibly block rendering. Scripts are not render-blocking by default; if a `script` element does not include `type="module"`, `async`, or `defer`, then it blocks _parsing_, not _rendering_. If such a `script` element is added dynamically via script, you must set `blocking = "render"` for it to block rendering. + - [`crossorigin`](/en-US/docs/Web/HTML/Reference/Attributes/crossorigin) - : Normal `script` elements pass minimal information to the {{domxref('Window.error_event', 'window.onerror')}} for scripts which do not pass the standard {{Glossary("CORS")}} checks. To allow error logging for sites which use a separate domain for static media, use this attribute. See [CORS settings attributes](/en-US/docs/Web/HTML/Reference/Attributes/crossorigin) for a more descriptive explanation of its valid arguments. - `defer` diff --git a/files/en-us/web/html/reference/elements/style/index.md b/files/en-us/web/html/reference/elements/style/index.md index a5eb280156047aa..bbb99aeee37fab2 100644 --- a/files/en-us/web/html/reference/elements/style/index.md +++ b/files/en-us/web/html/reference/elements/style/index.md @@ -47,8 +47,12 @@ In the same manner as `` elements, `