Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/auto-cleanup-bot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/interfacedata-updater.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:

steps:
- name: Checkout content
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
path: mdn-content
ref: main
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/markdown-lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/pr-check-lint_content.yml
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ jobs:

steps:
- name: Checkout BASE
uses: actions/checkout@v4
uses: actions/checkout@v5

- name: Get changed files
id: check
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr-check_cspell_lists.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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: |
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr-check_javascript.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr-check_json.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr-check_redirects.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 5 additions & 5 deletions .github/workflows/pr-check_scripts.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr-check_url-issues.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v4
- uses: actions/checkout@v5
with:
fetch-depth: 0

Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr-check_yml.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr-review-companion.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ jobs:
BUILD_OUT_ROOT: build

steps:
- uses: actions/checkout@v4
- uses: actions/checkout@v5

- name: Get changed files
id: check
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/spelling-check-bot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/fontface/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 1 addition & 3 deletions files/en-us/web/api/fontface/variationsettings/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
3 changes: 3 additions & 0 deletions files/en-us/web/api/htmllinkelement/blocking/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<head>` can possibly block rendering. By default, a `link` element with `rel="stylesheet"` in the `<head>` 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
Expand Down
3 changes: 3 additions & 0 deletions files/en-us/web/api/htmlscriptelement/blocking/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<head>` 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
Expand Down
3 changes: 3 additions & 0 deletions files/en-us/web/api/htmlstyleelement/blocking/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<head>` can possibly block rendering. By default, a `style` element in the `<head>` 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
Expand Down
5 changes: 4 additions & 1 deletion files/en-us/web/api/view_transition_api/using/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -501,14 +501,17 @@ 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 [`<link rel="expect">`](/en-US/docs/Web/HTML/Reference/Attributes/rel#expect). In this element, you include the following attributes:

- `rel="expect"` to indicate that you want to use this `<link>` element to render block some HTML on the page.
- `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
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/reference/attributes/rel/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
7 changes: 5 additions & 2 deletions files/en-us/web/html/reference/elements/link/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,9 +175,12 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
</table>

- `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 `<head>` can possibly block rendering. By default, a `link` element with `rel="stylesheet"` in the `<head>` 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_.
Expand Down Expand Up @@ -387,7 +390,7 @@ You can find a number of `<link rel="preload">` 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
<link blocking="render" rel="stylesheet" href="example.css" crossorigin />
Expand Down
5 changes: 4 additions & 1 deletion files/en-us/web/html/reference/elements/script/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<head>` 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`
Expand Down
6 changes: 5 additions & 1 deletion files/en-us/web/html/reference/elements/style/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,12 @@ In the same manner as `<link>` elements, `<style>` elements can include `media`
This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes).

- `blocking`
- : This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources. [`@import`](/en-US/docs/Web/CSS/@import)-ed stylesheets are generally considered as critical subresources, whereas [`background-image`](/en-US/docs/Web/CSS/background-image) and fonts are not. 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 on the fetching of critical subresources and the application of the stylesheet to the document. [`@import`](/en-US/docs/Web/CSS/@import)-ed stylesheets are generally considered as critical subresources, whereas [`background-image`](/en-US/docs/Web/CSS/background-image) and fonts are not. 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 `style` elements in the document's `<head>` can possibly block rendering. By default, a `style` element in the `<head>` 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.

- `media`
- : This attribute defines which media the style should be applied to. Its value is a [media query](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries), which defaults to `all` if the attribute is missing.
- `nonce`
Expand Down