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
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ page-type: learn-module-chapter
sidebar: learnsidebar
---

{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/JSON","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}}
{{PreviousMenuNext("Learn_web_development/Core/Scripting/House_data_UI","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}}

In this lesson, we will return to the subject of debugging JavaScript (which we first looked at in [What went wrong?](/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong)). Here we will delve deeper into techniques for tracking down errors, but also look at how to code defensively and handle errors in your code, avoiding problems in the first place.

Expand Down Expand Up @@ -364,4 +364,4 @@ So that's JavaScript debugging and error handling. Simple huh? Maybe not so simp

That's it for the Dynamic scripting with JavaScript module; congratulations on reaching the end! In the next module we'll help you explore JavaScript frameworks and libraries.

{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/JSON","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}}
{{PreviousMenuNext("Learn_web_development/Core/Scripting/House_data_UI","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}}

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions files/en-us/learn_web_development/core/scripting/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ Before starting this module, you don't need any previous JavaScript knowledge, b
- : Another very common task in modern websites and applications is making network requests to retrieve individual data items from the server to update sections of a webpage without having to load an entire new page. This seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible.
- [Working with JSON](/en-US/docs/Learn_web_development/Core/Scripting/JSON)
- : JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article, we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON.
- [Challenge: Building a house data UI](/en-US/docs/Learn_web_development/Core/Scripting/House_data_UI) <sup>Challenge</sup>
- : In this challenge we are going to get you to write some JavaScript for a house search page on a property website. This will include fetching JSON data, filtering that data based on the values entered in provided form controls, and rendering that data to the UI. Along the way, we'll also test your knowledge of conditionals, loops, arrays and array methods, and more besides.
- [JavaScript debugging and error handling](/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript)
- : In this lesson, we will return to the subject of debugging JavaScript (which we first looked at in [What went wrong?](/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong)). Here we will delve deeper into techniques for tracking down errors, but also look at how to code defensively and handle errors in your code, avoiding problems in the first place.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ page-type: learn-module-assessment
sidebar: learnsidebar
---

{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}}
{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Scripting/House_data_UI", "Learn_web_development/Core/Scripting")}}

The aim of this skill test is to help you assess whether you've understood our [Working with JSON](/en-US/docs/Learn_web_development/Core/Scripting/JSON) article.

Expand Down Expand Up @@ -119,4 +119,4 @@ function displayCatInfo(catString) {

</details>

{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}}
{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Scripting/House_data_UI", "Learn_web_development/Core/Scripting")}}
22 changes: 15 additions & 7 deletions files/en-us/web/css/@scope/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
title: "@scope"
slug: Web/CSS/@scope
page-type: css-at-rule
browser-compat: css.at-rules.scope
browser-compat:
- css.at-rules.scope
- css.selectors.nesting.at-scope
sidebar: cssref
---

Expand Down Expand Up @@ -166,11 +168,15 @@ Here's some considerations for `:scope` within `@scope` blocks:

### Specificity in `@scope`

Inside an `@scope` rule, both bare selectors and `&` behave as if `:where(:scope)` were prepended to the selector.
Because [`:where()`](/en-US/docs/Web/CSS/:where) has zero specificity, bare selectors and `&` add zero weight and only the specificity of the rest of the selector counts.
An `& img` selector is the equivalent to writing `:where(:scope) img`.
Inside an `@scope` rule, both bare selectors and the [`&`](/en-US/docs/Web/CSS/Nesting_selector) nesting selector behave as if `:where(:scope)` were prepended to the selector.
Because {{cssxref(":where", ":where()")}} has zero [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), bare selectors and `&` add zero weight. The specificity weight is determined by the rest of the selector.
For example, the specificity of the `& img` selector is equivalent to the specificity of `:where(:scope) img` (0-0-1).

In both cases in the following example, the only specificity comes from `img` (`0-0-1`):
> [!WARNING]
> The specificity of `&` inside `@scope` blocks is handled differently according to the browser engine and release version.
> Check [Browser compatibility](#browser_compatibility) for details.

In both cases in the following code block, the only specificity comes from `img`:

```css
@scope (.article-body) {
Expand All @@ -186,8 +192,8 @@ In both cases in the following example, the only specificity comes from `img` (`
}
```

By contrast, using `:scope` explicitly selects the scope root and adds class-level specificity (`0-1-0`), since `:scope` is a pseudo-class.
In the following example, `:scope img` has a specificity of `0-1-1`:
By contrast, using `:scope` explicitly selects the scope root and adds class-level specificity (0-1-0), since `:scope` is a [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes).
In the following code block, `:scope img` has a specificity of 0-1-1:

```css
@scope (.article-body) {
Expand Down Expand Up @@ -457,4 +463,6 @@ In the rendered code, note how all of the `<img>` elements are styled with the t

- {{CSSxRef(":scope")}}
- {{DOMxRef("CSSScopeRule")}}
- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity)
- [Defining the `&` selector in a `@scope` rule](https://css.oddbird.net/scope/parent-selector/) on css.oddbird.net (2025)
- [Limit the reach of your selectors with the CSS `@scope` at-rule](https://developer.chrome.com/docs/css-ui/at-scope) on developer.chrome.com (2023)
27 changes: 4 additions & 23 deletions files/en-us/web/css/css_cascade/specificity/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -245,17 +245,9 @@ footer a {

### How `@scope` blocks affect specificity

Including a ruleset inside a `@scope` block does not affect the specificity of its selector, regardless of the selectors used inside the scope root and limit. For example:

```css
@scope (.article-body) {
/* img has a specificity of 0-0-1, as expected */
img {
}
}
```

However, if you decide to explicitly prepend the `:scope` pseudo-class to your scoped selectors, you'll need to factor it in when calculating their specificity. `:scope`, like all regular pseudo-classes, has a specificity of 0-1-0. For example:
Including a ruleset inside a {{cssxref("@scope")}} block does not affect the specificity of its selector, regardless of the selectors used inside the [scope root and limit](/en-US/docs/Web/CSS/@scope#syntax).
However, if you decide to explicitly add the {{cssxref(":scope")}} pseudo-class, you'll need to factor it in when calculating their specificity.
`:scope`, like all regular pseudo-classes, has a specificity of 0-1-0. For example:

```css
@scope (.article-body) {
Expand All @@ -265,18 +257,7 @@ However, if you decide to explicitly prepend the `:scope` pseudo-class to your s
}
```

When using the `&` selector inside a `@scope` block, `&` represents the scope root selector; it is internally rewritten to that selector wrapped inside an {{cssxref(":is", ":is()")}} selector. So for example, in:

```css
@scope (figure, #primary) {
& img {
}
}
```

`& img` is equivalent to `:is(figure, #primary) img`.

Since `:is()` takes the specificity of its most specific argument (`#primary`, in this case), the specificity of the scoped `& img` selector is therefore 1-0-0 + 0-0-1 = 1-0-1.
See [Specificity in `@scope`](/en-US/docs/Web/CSS/@scope#specificity_in_scope) for more information.

## Tips for handling specificity headaches

Expand Down
16 changes: 16 additions & 0 deletions files/en-us/web/http/reference/headers/range/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,22 @@ Content-Type: image/jpeg
Accept-Ranges: bytes
```

### Fetching a range from a blob URL

The [`blob:`](/en-US/docs/Web/URI/Reference/Schemes/blob) URL also supports range requests by using [`fetch()`](/en-US/docs/Web/API/Window/fetch).

```js
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const url = URL.createObjectURL(blob);
fetch(url, {
headers: {
Range: "bytes=7-11",
},
})
.then((response) => response.text())
.then((text) => console.log(text)); // "world"
```

## Specifications

{{Specifications}}
Expand Down
4 changes: 4 additions & 0 deletions files/en-us/web/uri/reference/schemes/blob/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ In older versions of the Media Source specification, attaching a stream to a {{H
> [!WARNING]
> If you still have code that relies on `createObjectURL()` to attach streams to media elements, you need to update your code to set {{domxref("HTMLMediaElement.srcObject", "srcObject")}} to the `MediaStream` directly.

### Fetching with the Range header

Blob URLs support fetching with the [`Range`](/en-US/docs/Web/HTTP/Reference/Headers/Range) header to request partial content. This is particularly useful when working with large blobs, allowing you to fetch only the necessary parts of the blob instead of the entire content. For an example, see [fetching a range from a blob URL](/en-US/docs/Web/HTTP/Reference/Headers/Range#fetching_a_range_from_a_blob_url).

## Examples

### Valid blob URLs
Expand Down
1 change: 1 addition & 0 deletions files/sidebars/learnsidebar.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ sidebar:
- /Learn_web_development/Core/Scripting/Network_requests
- /Learn_web_development/Core/Scripting/JSON
- /Learn_web_development/Core/Scripting/Test_your_skills/JSON
- /Learn_web_development/Core/Scripting/House_data_UI
- /Learn_web_development/Core/Scripting/Debugging_JavaScript
- /Learn_web_development/Core/Scripting/Test_your_skills
- link: /Learn_web_development/Core/Frameworks_libraries
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
"cspell": "9.2.1",
"cspell-group-by-file-reporter": "^1.0.1",
"jest": "^30.1.3",
"lefthook": "^1.12.4",
"lefthook": "^1.13.0",
"markdownlint-cli2": "0.18.1",
"markdownlint-rule-search-replace": "1.2.0",
"node-html-parser": "^7.0.1",
Expand Down
128 changes: 64 additions & 64 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6652,71 +6652,71 @@ kuler@^2.0.0:
resolved "https://registry.yarnpkg.com/kuler/-/kuler-2.0.0.tgz#e2c570a3800388fb44407e851531c1d670b061b3"
integrity sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==

lefthook-darwin-arm64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-darwin-arm64/-/lefthook-darwin-arm64-1.12.4.tgz#b7ba93cf29c22b3bc35902f04191acaa6c2230b9"
integrity sha512-/eBd9GnBS9Js2ZsHzipj2cV8siFex/g6MgBSeIxsHBJNkQFq4O42ItWxUir5Q43zFvZCjGizBlhklbmubGOZfg==

lefthook-darwin-x64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-darwin-x64/-/lefthook-darwin-x64-1.12.4.tgz#c9ff53dc7d921f4c14cb2cef44b8b50815f6002e"
integrity sha512-WDO0oR3pIAIBTZtn4/4dC0GRyrfJtPGckYbqshpH4Fkuxyy7nRGy3su+uY8kiiVYLy/nvELY2eoqnT1Rp4njFQ==

lefthook-freebsd-arm64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-1.12.4.tgz#8effacf775b8c087db8bc2dba25048fd8e4ec6ac"
integrity sha512-/VNBWQvAsLuVilS7JB+pufTjuoj06Oz5YdGWUCo6u2XCKZ6UHzwDtGDJ0+3JQMSg8613gHmAdkGoByKjxqZSkQ==

lefthook-freebsd-x64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-freebsd-x64/-/lefthook-freebsd-x64-1.12.4.tgz#bddc3c4b7d68e16177a1b509bacd8200734068df"
integrity sha512-bY6klVVeBoiQEimb/z5TC5IFyczak9VOVQ8b+S/QAy+tvKo9TY6FdGwy7yxgoqTzfEkirDQxVOkalQsM/11xsg==

lefthook-linux-arm64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-linux-arm64/-/lefthook-linux-arm64-1.12.4.tgz#3f5b0383b570aaed666d22ed8cbdb02b44fdcb9a"
integrity sha512-iU+tPCNcX1pztk5Zjs02+sOnjZj9kCrLn6pg954WMr9dZTIaEBljRV+ybBP/5zLlv2wfv5HFBDKDKNRYjOVF+A==

lefthook-linux-x64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-linux-x64/-/lefthook-linux-x64-1.12.4.tgz#7176d48b24640dcf5ea2afd0d52309c9ca3d3662"
integrity sha512-IXYUSBYetftYmdii2aGIjv7kxO2m+jTYjaEoldtCDcXAPz/yV78Xx2WzY/LYNJsJ1vzbUhBqVOeRCHCwLXusTQ==

lefthook-openbsd-arm64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-openbsd-arm64/-/lefthook-openbsd-arm64-1.12.4.tgz#0a5dbc2fb68f74f2b5fa943e4c99f53b1f4811a1"
integrity sha512-3DFLbqAlAeoqo//PE20NcGKJzBqAMbS/roPvaJ9DYA95MSywMig2jxyDoZbBhyP/J/iuFO3op7emtwgwousckA==

lefthook-openbsd-x64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-openbsd-x64/-/lefthook-openbsd-x64-1.12.4.tgz#7b6922fc98e0acc2ede63bc6ce3915f8a6c8c121"
integrity sha512-Nlxn3lXHK3hRDL5bP5W6+LleE9CRIc6GJ84xTo9EPwI40utsM8olAm+pFFRnE9szkHvQTkXwoBhqi2C5laxoGQ==

lefthook-windows-arm64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-windows-arm64/-/lefthook-windows-arm64-1.12.4.tgz#1c3f0c787f26d3dddde4a9cf9e7c9dc1ecedb4f3"
integrity sha512-tWOfrTC9GNheaFXFt49G5nbBUYLqd2NBb5XW97dSLO/lU81cvuvRsMKZFBrq48LvByT7PLwEuibMuO1TminhHA==

lefthook-windows-x64@1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook-windows-x64/-/lefthook-windows-x64-1.12.4.tgz#6101f18c60f144cba19c41bba16a796167406f8d"
integrity sha512-3B295z3tdcdDrKrY98b/cSm4Elb/TXWMVQuH2xW15CJp9QY6jsgRpFJyBdyz4ggrPFhNUVnLKCpm6/saqeZWHA==

lefthook@^1.12.4:
version "1.12.4"
resolved "https://registry.yarnpkg.com/lefthook/-/lefthook-1.12.4.tgz#c5735a8ab27a5cbcdce4e05f0a2ab70d7895fa7e"
integrity sha512-VhTFYGT55pD2hytjcn6Lckb0tCbG1Cke6rszTWVQVJpnJZ0EqQW+Pl+JYQLlruR8MO4RGFVU0UBUw17/g9TYxA==
lefthook-darwin-arm64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-darwin-arm64/-/lefthook-darwin-arm64-1.13.0.tgz#2d6268294994d4137872c7d0334d2e9a91837eeb"
integrity sha512-mhD4zOj2VRx34tptEc/lP643n5YAAVP95f/TiP6geQz4kpLwUrsTwQxzoXUIauU2DGSNbFtp9hVSE++0e4ESEA==

lefthook-darwin-x64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-darwin-x64/-/lefthook-darwin-x64-1.13.0.tgz#7b2ba938103e845bc57c99c3c9691218531a802f"
integrity sha512-uspgWrhh9Xoyb+x0hVeMnYkSA1K/cEov4QHxcBBTIvTvjEuijSLIQEzULsHvg7a6xNM/8E3SBzOwBRK44jM2Mw==

lefthook-freebsd-arm64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-1.13.0.tgz#9e9c294ab59d45a7e38558c009c908cf7d8d8cb6"
integrity sha512-UUY+UlGuwAkO8hEY4+SGYfM1OeXSI4i2/8ROwBpu6fz0LrTL1OUYRVhLIRNJvWrF2XabfgXVUrnjGY7YSq4zpg==

lefthook-freebsd-x64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-freebsd-x64/-/lefthook-freebsd-x64-1.13.0.tgz#394a96f6faefb19666cb85f77175ce683e78192a"
integrity sha512-wdF/Cwmbiblz+UaLb3a0trSKEmaY5z20latrmhim98M1H48iBHhUyUUJWaSEauyFMJWPwu7rSVZl5KktPxCxVA==

lefthook-linux-arm64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-linux-arm64/-/lefthook-linux-arm64-1.13.0.tgz#1ea7cf2f35f180bf21bb4b9cdaf3449767d94ae7"
integrity sha512-tpg4pA0JTeLxGAZDFJVOGyIMjQAE7F8HcM31tj+3KOogahspOffpmSoS1SlHzUSZ8Jm+Bvoqcis/sW68HkmWHw==

lefthook-linux-x64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-linux-x64/-/lefthook-linux-x64-1.13.0.tgz#3c88ddf66947fce4b5298e450a57e81d796c4f43"
integrity sha512-5JUhlDaYqt9vBTSQ5gkA00+0ktUSRyL60AhZID6OR4ML39SidzMTu/GrgHscPT4sD3TfSODEdGZ28sNKdLg6jA==

lefthook-openbsd-arm64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-openbsd-arm64/-/lefthook-openbsd-arm64-1.13.0.tgz#c42ee42ed9537dc9822f5b71e8057bc2a63bf70e"
integrity sha512-UNCoKrbH0Yv61jCCUIPRr7ErS3yYt2VNCFdzLf752O9K0yrfn9FzYUsyxQFEn1Ah/kq+TNgZw90gVLg5fv1t4g==

lefthook-openbsd-x64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-openbsd-x64/-/lefthook-openbsd-x64-1.13.0.tgz#3959ec13b07c08724c6724ab341fdec2e7adc8a8"
integrity sha512-iyvE+jgHYnLvOoHsLykgf98lftewsQzEBciYxygna9sLZ9nLvfbwp9mWUk09yMRmPCFGDeeDecERaUa2SICWLA==

lefthook-windows-arm64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-windows-arm64/-/lefthook-windows-arm64-1.13.0.tgz#8ba9c590d989419a53610925b31880281ce95a1b"
integrity sha512-+u0GyvZouKGcecFsayIbzq1KIoDcrSqVhivLfJUq7vpMXbSHV5HbhrkdkfqkuGjGgGnWulQY29/bDubTQoqfOA==

lefthook-windows-x64@1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook-windows-x64/-/lefthook-windows-x64-1.13.0.tgz#6cbefc5deb4b8ab1c8f72e0579f1c9262ff79da0"
integrity sha512-RG8dfOkszk6BaOA7k26NO0R1/vy1tno7/wgdg+Wjt0pYFiBo0DhmPMoAVB4kzjObqBKDd1KWidzsEv4/R0oFIg==

lefthook@^1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/lefthook/-/lefthook-1.13.0.tgz#3756993b3abc4ba161cc8184b763396e6c17ad80"
integrity sha512-6pno+NjfBrKKt3XQmFUvwDdKXzBVh5JvzAIwcCOu9mqg81nAMCZd2FtTuU1fmDzXFNdsxjW8mwwKB+S8t5ucOQ==
optionalDependencies:
lefthook-darwin-arm64 "1.12.4"
lefthook-darwin-x64 "1.12.4"
lefthook-freebsd-arm64 "1.12.4"
lefthook-freebsd-x64 "1.12.4"
lefthook-linux-arm64 "1.12.4"
lefthook-linux-x64 "1.12.4"
lefthook-openbsd-arm64 "1.12.4"
lefthook-openbsd-x64 "1.12.4"
lefthook-windows-arm64 "1.12.4"
lefthook-windows-x64 "1.12.4"
lefthook-darwin-arm64 "1.13.0"
lefthook-darwin-x64 "1.13.0"
lefthook-freebsd-arm64 "1.13.0"
lefthook-freebsd-x64 "1.13.0"
lefthook-linux-arm64 "1.13.0"
lefthook-linux-x64 "1.13.0"
lefthook-openbsd-arm64 "1.13.0"
lefthook-openbsd-x64 "1.13.0"
lefthook-windows-arm64 "1.13.0"
lefthook-windows-x64 "1.13.0"

leven@^3.1.0:
version "3.1.0"
Expand Down