diff --git a/files/en-us/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/en-us/learn/getting_started_with_the_web/the_web_and_web_standards/index.md index 694d954464ac8ef..e855785009afec7 100644 --- a/files/en-us/learn/getting_started_with_the_web/the_web_and_web_standards/index.md +++ b/files/en-us/learn/getting_started_with_the_web/the_web_and_web_standards/index.md @@ -111,7 +111,7 @@ The actual syntax for HTTP messages (called requests and responses) is not that pElem.textContent = "We changed the text!"; ``` - In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality + In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality. ### Tools diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md index 1431a804166cff1..e35d6e77e54bc86 100644 --- a/files/en-us/learn/html/introduction_to_html/getting_started/index.md +++ b/files/en-us/learn/html/introduction_to_html/getting_started/index.md @@ -245,22 +245,25 @@ An attribute should have: ### Active learning: Adding attributes to an element -Another example of an element is {{htmlelement("a")}}. This stands for _anchor_. An anchor can make the text it encloses into a hyperlink. Anchors can take a number of attributes, but several are as follows: +The `` element can take a number of attributes, including: -- `href` - - : This attribute's value specifies the web address for the link. For example: `href="https://www.mozilla.org/"`. -- `title` - - : The `title` attribute specifies extra information about the link, such as a description of the page that is being linked to. For example, `title="The Mozilla homepage"`. This appears as a tooltip when a cursor hovers over the element. -- `target` - - : The `target` attribute specifies the browsing context used to display the link. For example, `target="_blank"` will display the link in a new tab. If you want to display the linked content in the current tab, just omit this attribute. +- `src` + - : The `src` attribute is a **required** attribute that specifies the location of the image. For example: `src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"`. +- `alt` + - : The `alt` attribute specifies a text description of the image. For example: `alt="The Firefox icon"`. +- `width` + - : The `width` attribute specifies the width of the image with the unit being pixels. For example: `width="300"`. +- `height` + - : The `height` attribute specifies the height of the image with the unit being pixels. For example: `height="300"`. -Edit the line below in the _Input_ area to turn it into a link to your favorite website. +Edit the line below in the _Input_ area to turn it into an image. -1. Add the `` element. -2. Add the `href` attribute and the `title` attribute. -3. Specify the `target` attribute to open the link in the new tab. +1. Find your favorite image online, right click it, and press _Copy Image Link/Address_. +2. Back in the area below, add the `src` attribute and fill it with the link from step 1. +3. Set the `alt` attribute. +4. Add the `width` and `height` attributes. -You will be able to see your changes live in the _Output_ area. You should see a link—that when hovered over—displays the value of the `title` attribute and, when clicked, opens a new tab and navigates to the web address in the `href` attribute. Remember that you need to include a space between the element name and between each attribute. +You will be able to see your changes live in the _Output_ area. If you make a mistake, you can always reset it using the _Reset_ button. If you get really stuck, press the _Show solution_ button to see the answer. @@ -275,7 +278,7 @@ If you make a mistake, you can always reset it using the _Reset_ button. If you

@@ -319,7 +322,7 @@ function updateCode() { } const htmlSolution = - '

A link to my favorite website.

'; + 'Firefox icon'; let solutionEntry = htmlSolution; reset.addEventListener("click", () => { @@ -416,13 +419,13 @@ For reference, the example above also includes a non-disabled form input element ### Omitting quotes around attribute values -If you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. This is permitted in certain circumstances, but it can also break your markup in other circumstances. For example, if we revisit our link example from earlier, we could write a basic version with _only_ the `href` attribute, like this: +If you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. This is permitted in certain circumstances, but it can also break your markup in other circumstances. The element in the code snippet below, ``, is called an anchor. Anchors enclose text and turn them into links. The `href` attribute specifies the web address the link points to. You can write this basic version below with _only_ the `href` attribute, like this: ```html favorite website ``` -However, as soon as we add the `title` attribute in this way, there are problems: +Anchors can also have a `title` attribute, a description of the linked page. However, as soon as we add the `title` in the same fashion as the `href` attribute there are problems: ```html-nolint example-bad favorite website diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md index e0a3ae98d791073..2a28e07487f176f 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md @@ -27,8 +27,7 @@ browser-compat: webextensions.manifest.optional_permissions 
 "optional_permissions": [
   "webRequest"
-]
+] @@ -61,14 +60,17 @@ You can include any of the following here, but not in all browsers: check the co - `background` - `bookmarks` - `browserSettings` +- `browsingData` - `clipboardRead` - `clipboardWrite` - `contentSettings` - `contextMenus` - `cookies` - `debugger` -- `devtools` +- `declarativeNetRequest` - `declarativeNetRequestFeedback` +- `declarativeNetRequestWithHostAccess` +- `devtools` - `downloads` - `downloads.open` - `find` @@ -79,8 +81,11 @@ You can include any of the following here, but not in all browsers: check the co - `nativeMessaging` - `notifications` - `pageCapture` +- `pkcs11` - `privacy` +- `proxy` - `scripting` +- `sessions` - `tabHide` - `tabs` - `topSites` diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index 7458fb910fb83e9..af74243f79a16ed 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -99,46 +99,6 @@ HTML password input elements ([``](/en-US/docs/Web/HTML/E -### Reflecting ARIA attributes - -[ARIA](/en-US/docs/Web/Accessibility/ARIA) reflection is enabled for non-IDREF attributes which allows authors to get and set ARIA attributes on DOM elements directly via JavaScript APIs, rather than by using `setAttribute` and `getAttribute`, (see [Firefox bug 1824980](https://bugzil.la/1824980) for more details.) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly114Yes
Developer Edition114No
Beta114No
Release114No
Preference nameaccessibility.ARIAReflection.enabled
- ## CSS ### Hex boxes to display stray control characters diff --git a/files/en-us/mozilla/firefox/releases/118/index.md b/files/en-us/mozilla/firefox/releases/118/index.md index ef3bce3caad9748..e6c653e45448be0 100644 --- a/files/en-us/mozilla/firefox/releases/118/index.md +++ b/files/en-us/mozilla/firefox/releases/118/index.md @@ -18,6 +18,8 @@ This article provides information about the changes in Firefox 118 that affect d - The {{cssxref("font-synthesis-position")}} property and `position` value for {{cssxref("font-synthesis")}} shorthand property are now supported. These allow subscript and superscript typefaces to be disabled for fonts that do not have glyphs for them when using {{cssxref("font-variant-position")}} ([Firefox bug 1849010](https://bugzil.la/1849010)). - Multiple CSS [math functions](/en-US/docs/Web/CSS/CSS_Functions#math_functions) are now supported: [`abs()`](/en-US/docs/Web/CSS/abs), [`sign()`](/en-US/docs/Web/CSS/sign), [`round()`](/en-US/docs/Web/CSS/round), [`mod()`](/en-US/docs/Web/CSS/mod), [`rem()`](/en-US/docs/Web/CSS/rem), [`pow()`](/en-US/docs/Web/CSS/pow), [`sqrt()`](/en-US/docs/Web/CSS/sqrt), [`hypot()`](/en-US/docs/Web/CSS/hypot), [`log()`](/en-US/docs/Web/CSS/log), and [`exp()`](/en-US/docs/Web/CSS/exp) (Firefox bug [1814589](https://bugzil.la/1814589)). +- A new keyword `from-font` in the CSS property [`font-size-adjust`](/en-US/docs/Web/CSS/font-size-adjust) enables picking the desired `` from the first available font (Firefox bug [1708240](https://bugzil.la/1708240)). +- The CSS property [`transform-box`](/en-US/docs/Web/CSS/transform-box) now supports the values `content-box` and `stroke-box`. For the reference box, the `content-box` value uses the [content box](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box) and the `stroke-box` value uses the stroke bounding box that contains an SVG's shape (Firefox bug [1819464](https://bugzil.la/1819464)). - The CSS property [`font-size-adjust`](/en-US/docs/Web/CSS/font-size-adjust) supports the keyword `from-font` that enables picking the desired `` from the first available font (Firefox bug [1708240](https://bugzil.la/1708240)). ### JavaScript diff --git a/files/en-us/mozilla/firefox/releases/119/index.md b/files/en-us/mozilla/firefox/releases/119/index.md index 4bfbfbdbf152bca..3256ddb479d3630 100644 --- a/files/en-us/mozilla/firefox/releases/119/index.md +++ b/files/en-us/mozilla/firefox/releases/119/index.md @@ -49,9 +49,13 @@ This article provides information about the changes in Firefox 119 that affect d - The relative priority for send streams can now be specified by including the `sendOrder` property inside an options argument passed to [`WebTransport.createBidirectionalStream()`](/en-US/docs/Web/API/WebTransport/createBidirectionalStream) and [`WebTransport.createUnidirectionalStream()`](/en-US/docs/Web/API/WebTransport/createUnidirectionalStream) ([Firefox bug 1816925](https://bugzil.la/1816925)). - The [`getAuthenticatorData()`](/en-US/docs/Web/API/AuthenticatorAttestationResponse/getAuthenticatorData), [`getPublicKeyAlgorithm()`](/en-US/docs/Web/API/AuthenticatorAttestationResponse/getPublicKeyAlgorithm), and [`getPublicKey()`](/en-US/docs/Web/API/AuthenticatorAttestationResponse/getPublicKey) methods of the [`AuthenticatorAttestationResponse`](/en-US/docs/Web/API/AuthenticatorAttestationResponse) interface are now supported (see [Firefox bug 1816519](https://bugzil.la/1816519) and [Firefox bug 1816520](https://bugzil.la/1816520)). - The [`SubtleCrypto.deriveKey()`](/en-US/docs/Web/API/SubtleCrypto/deriveKey) method now supports the [HKDF](/en-US/docs/Web/API/SubtleCrypto/deriveKey#hkdf) algorithm as an option for its [`derivedKeyAlgorithm`](/en-US/docs/Web/API/SubtleCrypto/deriveKey#derivedkeyalgorithm) parameter (see [Firefox bug 1851928](https://bugzil.la/1851928)). +- The {{domxref("PublicKeyCredential.parseCreationOptionsFromJSON_static", "parseCreationOptionsFromJSON()")}}, {{domxref("PublicKeyCredential.parseRequestOptionsFromJSON_static", "parseRequestOptionsFromJSON()")}}, and {{domxref("PublicKeyCredential.toJSON", "toJSON()")}} methods of the {{domxref("PublicKeyCredential")}} interface are now supported. + These are convenience methods for converting objects used for creating and sharing credentials objects to JSON representations that can be serialized/deserialized and shared with a server (see [Firefox bug 1823782](https://bugzil.la/1823782)). #### DOM +- [ARIA](/en-US/docs/Web/Accessibility/ARIA) reflection is now supported by default for attributes that do not reference other elements; only non-IDREF attributes are reflected. You can now get and set ARIA attributes on DOM elements directly via JavaScript APIs, rather than by using `setAttribute` and `getAttribute`. For example, `buttonElement.ariaPressed = "true";` is now supported in addition to `buttonElement.setAttribute("aria-pressed", "true");` ([Firefox bug 1785412](https://bugzil.la/1785412)). + #### Media, WebRTC, and Web Audio #### Removals diff --git a/files/en-us/web/api/client/postmessage/index.md b/files/en-us/web/api/client/postmessage/index.md index a732ea1b8703887..11c7025dd0fe2f4 100644 --- a/files/en-us/web/api/client/postmessage/index.md +++ b/files/en-us/web/api/client/postmessage/index.md @@ -18,6 +18,7 @@ message is received in the "`message`" event on ```js-nolint postMessage(message) +postMessage(message, options) postMessage(message, transferables) ``` @@ -25,10 +26,10 @@ postMessage(message, transferables) - `message` - : The message to send to the client. This can be any [structured-cloneable type](/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). +- `options` {{optional_inline}} + - : An optional object containing a `transfer` field with an [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [transferable objects](/en-US/docs/Web/API/Web_Workers_API/Transferable_objects) to transfer ownership of. The ownership of these objects is given to the destination side and they are no longer usable on the sending side. - `transferables` {{optional_inline}} - - : A sequence of objects that are [transferred](/en-US/docs/Web/API/Web_Workers_API/Transferable_objects) with the message. The - ownership of these objects is given to the destination side and they are no longer - usable on the sending side. + - : An optional [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [transferable objects](/en-US/docs/Web/API/Web_Workers_API/Transferable_objects) to transfer ownership of. The ownership of these objects is given to the destination side and they are no longer usable on the sending side. ### Return value diff --git a/files/en-us/web/api/contentindex/getall/index.md b/files/en-us/web/api/contentindex/getall/index.md index e0bcc6118621ccc..8159221f8fb375e 100644 --- a/files/en-us/web/api/contentindex/getall/index.md +++ b/files/en-us/web/api/contentindex/getall/index.md @@ -35,9 +35,6 @@ Returns a {{jsxref("Promise")}} that resolves with an {{jsxref('Array')}} of - `id` - : A unique {{jsxref('String')}} identifier. - - `title` - - : A {{jsxref('String')}} title for the item. - Used in user-visible lists of content. - `title` - : A {{jsxref('String')}} title of the item. Used in user-visible lists of content. diff --git a/files/en-us/web/api/serviceworkercontainer/controllerchange_event/index.md b/files/en-us/web/api/serviceworkercontainer/controllerchange_event/index.md index ce1b77af3b0befa..5ad16a7480a5ea0 100644 --- a/files/en-us/web/api/serviceworkercontainer/controllerchange_event/index.md +++ b/files/en-us/web/api/serviceworkercontainer/controllerchange_event/index.md @@ -8,10 +8,7 @@ browser-compat: api.ServiceWorkerContainer.controllerchange_event {{APIRef("Service Workers API")}} -The **`controllerchange`** event of the -{{domxref("ServiceWorkerContainer")}} interface fires when the document's associated -{{domxref("ServiceWorkerRegistration")}} acquires a new -{{domxref("ServiceWorkerRegistration.active","active")}} worker. +The **`controllerchange`** event of the {{domxref("ServiceWorkerContainer")}} interface fires when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker. ## Syntax @@ -30,7 +27,9 @@ A generic {{domxref("Event")}}. ## Example ```js -// TBD +navigator.serviceWorker.addEventListener("controllerchange", () => { + console.log("The controller of current browsing context has changed."); +}); ``` ## Specifications diff --git a/files/en-us/web/api/subtlecrypto/derivekey/index.md b/files/en-us/web/api/subtlecrypto/derivekey/index.md index 365aecf8bb46db2..e43424bf618e095 100644 --- a/files/en-us/web/api/subtlecrypto/derivekey/index.md +++ b/files/en-us/web/api/subtlecrypto/derivekey/index.md @@ -30,8 +30,7 @@ deriveKey(algorithm, baseKey, derivedKeyAlgorithm, extractable, keyUsages) - : An object defining the [derivation algorithm](#supported_algorithms) to use. - To use [ECDH](#ecdh), pass an [`EcdhKeyDeriveParams`](/en-US/docs/Web/API/EcdhKeyDeriveParams) object. - - To use [HKDF](#hkdf), pass - an [`HkdfParams`](/en-US/docs/Web/API/HkdfParams) object. + - To use [HKDF](#hkdf), pass an [`HkdfParams`](/en-US/docs/Web/API/HkdfParams) object. - To use [PBKDF2](#pbkdf2), pass a [`Pbkdf2Params`](/en-US/docs/Web/API/Pbkdf2Params) object. - `baseKey` @@ -42,12 +41,13 @@ deriveKey(algorithm, baseKey, derivedKeyAlgorithm, extractable, keyUsages) `CryptoKey` using [`SubtleCrypto.importKey()`](/en-US/docs/Web/API/SubtleCrypto/importKey). - `derivedKeyAlgorithm` - - : An object defining the algorithm the derived key will be used for. - - For [HMAC](/en-US/docs/Web/API/SubtleCrypto/sign#hmac): pass an - [`HmacKeyGenParams`](/en-US/docs/Web/API/HmacKeyGenParams) object. + - : An object defining the algorithm the derived key will be used for: + - For [HMAC](/en-US/docs/Web/API/SubtleCrypto/sign#hmac) pass an [`HmacKeyGenParams`](/en-US/docs/Web/API/HmacKeyGenParams) object. - For [AES-CTR](/en-US/docs/Web/API/SubtleCrypto/encrypt#aes-ctr), [AES-CBC](/en-US/docs/Web/API/SubtleCrypto/encrypt#aes-cbc), - [AES-GCM](/en-US/docs/Web/API/SubtleCrypto/encrypt#aes-gcm), or [AES-KW](/en-US/docs/Web/API/SubtleCrypto/wrapKey#aes-kw): pass an + [AES-GCM](/en-US/docs/Web/API/SubtleCrypto/encrypt#aes-gcm), or [AES-KW](/en-US/docs/Web/API/SubtleCrypto/wrapKey#aes-kw), pass an [`AesKeyGenParams`](/en-US/docs/Web/API/AesKeyGenParams) object. + - For [HKDF](#hkdf), pass an [`HkdfParams`](/en-US/docs/Web/API/HkdfParams) object. + - For [PBKDF2](#pbkdf2), pass a [`Pbkdf2Params`](/en-US/docs/Web/API/Pbkdf2Params) object. - `extractable` - : A boolean value indicating whether it will be possible to export the key using {{domxref("SubtleCrypto.exportKey()")}} or diff --git a/files/en-us/web/api/web_authentication_api/webauthn_extensions/index.md b/files/en-us/web/api/web_authentication_api/webauthn_extensions/index.md index 9d30e0d06fa524e..8492ec332804cd5 100644 --- a/files/en-us/web/api/web_authentication_api/webauthn_extensions/index.md +++ b/files/en-us/web/api/web_authentication_api/webauthn_extensions/index.md @@ -19,7 +19,7 @@ Behind the scenes, the inputs are processed by the user agent and/or the authent For example, in a `publicKey` object for a `create()` call, we might want to request the use of two extensions: -1. The `credProps` extension. Relying parties set `credProps` to request that the browser tells the relying party whether the credential is resident/discoverable after registration. This is useful when calling `create()` with `publicKey.authenticatorSelection.residentKey = "preferred"`. To request it, you also need to set `publicKey.extensions.credProps = true` when. The browser makes a credential and, depending on the type of authenticator used, it will be discoverable (for example, the FIDO2 authenticator would typically make it discoverable; FIDO1/U2F security key would be non-discoverable). `credProps` is processed by the user agent only. +1. The `credProps` extension. Relying parties set `credProps` to request that the browser tells the relying party whether the credential is resident/discoverable after registration. This is useful when calling `create()` with `publicKey.authenticatorSelection.residentKey = "preferred"`. To request it, you also need to set `publicKey.extensions.credProps = true` when the browser makes a credential and, depending on the type of authenticator used, it will be discoverable (for example, the FIDO2 authenticator would typically make it discoverable; FIDO1/U2F security key would be non-discoverable). `credProps` is processed by the user agent only. 2. The `minPinLength` extension allows relying parties to request the authenticator's minimum PIN length. This requires `extensions.minPinLength` to be set to `true`. `minPinLength` is processed by the authenticator, with the user agent only serving to pass the input data along to it. ```js diff --git a/files/en-us/web/css/animation-timing-function/index.md b/files/en-us/web/css/animation-timing-function/index.md index d22e52b4fdb535e..7cc3592017102d5 100644 --- a/files/en-us/web/css/animation-timing-function/index.md +++ b/files/en-us/web/css/animation-timing-function/index.md @@ -73,11 +73,11 @@ animation-timing-function: unset; - : Displays an animation iteration along _n_ stops along the transition, displaying each stop for equal lengths of time. For example, if _n_ is 5, there are 5 steps. Whether the animation holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the animation, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used: - `jump-start` - - : Denotes a left-continuous function, so that the first jump happens when the animation begins; + - : Denotes a left-continuous function, so that the first jump happens when the animation begins. - `jump-end` - - : Denotes a right-continuous function, so that the last jump happens when the animation ends; + - : Denotes a right-continuous function, so that the last jump happens when the animation ends. This is the default. - `jump-none` - - : There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration. + - : There is no jump on either end, effectively removing a step during the interpolation iteration. Instead, it holds at both the 0% mark and the 100% mark, each for 1/n of the duration. - `jump-both` - : Includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration. - `start` diff --git a/files/en-us/web/css/css_images/using_css_gradients/index.md b/files/en-us/web/css/css_images/using_css_gradients/index.md index 0a73e3602850895..c9bb15bbae5cdde 100644 --- a/files/en-us/web/css/css_images/using_css_gradients/index.md +++ b/files/en-us/web/css/css_images/using_css_gradients/index.md @@ -110,7 +110,7 @@ div { When using an angle, `0deg` creates a vertical gradient running bottom to top, `90deg` creates a horizontal gradient running left to right, and so on in a clockwise direction. Negative angles run in the counterclockwise direction. -![Four boxes listing angle and showing associated gradient. 0deg starts and top and goes to bottom. 90deg starts at right and goes left. 180deg starts and bottom and goes to the top. -90deg starts at left and goes right.](linear_red_angles.png) +![Four boxes listing angle and showing associated gradient from red to white. 0deg starts at the bottom and goes up. 90deg starts at left and goes right. 180deg starts at the top and goes down. -90deg starts at right and goes left.](linear_red_angles.png) ## Declaring colors & creating effects @@ -368,7 +368,7 @@ Radial gradients are similar to linear gradients, except that they radiate out f ### A basic radial gradient -As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box: +As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of its box: ```html hidden
@@ -439,7 +439,7 @@ div { Unlike linear gradients, you can specify the size of radial gradients. Possible values include `closest-corner`, `closest-side`, `farthest-corner`, and `farthest-side`, with `farthest-corner` being the default. Circles can also be sized with a length, and ellipses a length or percentage. -#### Example: closest-side for ellipses +#### Example: `closest-side` for ellipses This example uses the `closest-side` size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box. @@ -468,7 +468,7 @@ div { {{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }} -#### Example: farthest-corner for ellipses +#### Example: `farthest-corner` for ellipses This example is similar to the previous one, except that its size is specified as `farthest-corner`, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point. @@ -497,7 +497,7 @@ div { {{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }} -#### Example: closest-side for circles +#### Example: `closest-side` for circles This example uses `closest-side`, which makes the circle's radius to be the distance between the center of the gradient and the closest side. In this case the radius is the distance between the center and the bottom edge, because the gradient is placed 25% from the left and 25% from the bottom, and the div element's height is smaller than the width. @@ -936,5 +936,5 @@ div { - Gradient-related CSS data types: {{cssxref("<gradient>")}}, {{cssxref("<image>")}} - Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}} - [CSS Gradients Patterns Gallery, by Lea Verou](https://projects.verou.me/css3patterns/) -- [CSS Gradients Library, by Estelle Weyl](http://standardista.com/cssgradients/) +- [CSS Gradients Library, by Estelle Weyl](https://standardista.com/cssgradients/) - [Gradient CSS Generator](https://cssgenerator.org/gradient-css-generator.html) diff --git a/files/en-us/web/css/easing-function/index.md b/files/en-us/web/css/easing-function/index.md index f5cff09235f78be..574cc66c59c1223 100644 --- a/files/en-us/web/css/easing-function/index.md +++ b/files/en-us/web/css/easing-function/index.md @@ -76,11 +76,11 @@ step-end - : One of the following keywords that indicate when the jumps occur: - `jump-start` denotes that the first step or jump happens when the interpolation begins. - - `jump-end` denotes that the last step or jump happens when the interpolation ends. + - `jump-end` denotes that the last step or jump happens when the interpolation ends. This is the default. - `jump-both` denotes that jumps occur at both the 0% and 100% marks, effectively adding a step during the interpolation iteration. - - `jump-none` denotes no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration. + - `jump-none` denotes no jump on either end, effectively removing a step during the interpolation iteration. Instead, it holds at both the 0% mark and the 100% mark, each for 1/n of the duration. - `start` is the equivalent of `jump-start`. - - `end` is the equivalent of `jump-end`. This is the default. + - `end` is the equivalent of `jump-end`. - `step-start` diff --git a/files/en-us/web/css/easing-function/step.svg b/files/en-us/web/css/easing-function/step.svg index f99fc73c96bd5db..b0cea5a153d5a27 100644 --- a/files/en-us/web/css/easing-function/step.svg +++ b/files/en-us/web/css/easing-function/step.svg @@ -1 +1 @@ -10.500.51Output progressInput progressstep-startstep-start +10.500.51Output progressInput progressstep-startstep-end diff --git a/files/en-us/web/css/overscroll-behavior-block/index.md b/files/en-us/web/css/overscroll-behavior-block/index.md index 6797047c40341ea..ead4ca56b550127 100644 --- a/files/en-us/web/css/overscroll-behavior-block/index.md +++ b/files/en-us/web/css/overscroll-behavior-block/index.md @@ -34,7 +34,7 @@ The `overscroll-behavior-block` property is specified as a keyword chosen from t - `auto` - : The default scroll overflow behavior occurs as normal. - `contain` - - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll. + - : Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation. - `none` - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented. diff --git a/files/en-us/web/css/overscroll-behavior-inline/index.md b/files/en-us/web/css/overscroll-behavior-inline/index.md index 925d9313bb03514..e85287e888e0139 100644 --- a/files/en-us/web/css/overscroll-behavior-inline/index.md +++ b/files/en-us/web/css/overscroll-behavior-inline/index.md @@ -34,7 +34,7 @@ The `overscroll-behavior-inline` property is specified as a keyword chosen from - `auto` - : The default scroll overflow behavior occurs as normal. - `contain` - - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll. + - : Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation. - `none` - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented. diff --git a/files/en-us/web/css/overscroll-behavior-x/index.md b/files/en-us/web/css/overscroll-behavior-x/index.md index 4658060ad603846..eb5d3e0f58a5d94 100644 --- a/files/en-us/web/css/overscroll-behavior-x/index.md +++ b/files/en-us/web/css/overscroll-behavior-x/index.md @@ -34,7 +34,7 @@ The `overscroll-behavior-x` property is specified as a keyword chosen from the l - `auto` - : The default scroll overflow behavior occurs as normal. - `contain` - - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll. + - : Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation. - `none` - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented. diff --git a/files/en-us/web/css/overscroll-behavior-y/index.md b/files/en-us/web/css/overscroll-behavior-y/index.md index 4f5f576bca7afe5..eabaca89ce442cd 100644 --- a/files/en-us/web/css/overscroll-behavior-y/index.md +++ b/files/en-us/web/css/overscroll-behavior-y/index.md @@ -34,7 +34,7 @@ The `overscroll-behavior-y` property is specified as a keyword chosen from the l - `auto` - : The default scroll overflow behavior occurs as normal. - `contain` - - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll. + - : Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation. - `none` - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented. diff --git a/files/en-us/web/css/overscroll-behavior/index.md b/files/en-us/web/css/overscroll-behavior/index.md index 2d5fd2e570581ac..1d7dfd0345e0508 100644 --- a/files/en-us/web/css/overscroll-behavior/index.md +++ b/files/en-us/web/css/overscroll-behavior/index.md @@ -46,7 +46,7 @@ Two keywords specifies the `overscroll-behavior` value on the `x` and `y` axes r - `auto` - : The default scroll overflow behavior occurs as normal. - `contain` - - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll. + - : Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The `contain` value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation. - `none` - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented. diff --git a/files/en-us/web/css/transform-box/index.md b/files/en-us/web/css/transform-box/index.md index 3598d9ef990100c..246dcd35bc88a3c 100644 --- a/files/en-us/web/css/transform-box/index.md +++ b/files/en-us/web/css/transform-box/index.md @@ -32,9 +32,9 @@ The `transform-box` property is specified as one of the keyword values listed be ### Values - `content-box` - - : The content box is used as the reference box. The reference box of a {{htmlElement("table")}} is the border box of its table wrapper box, not its table box. + - : The content box is used as the reference box. The reference box of a {{htmlElement("table")}} is the border box of its [table wrapper box](/en-US/docs/Glossary/Table_Wrapper_Box), not its table box. - `border-box` - - : The border box is used as the reference box. The reference box of a {{htmlElement("table")}} is the border box of its table wrapper box, not its table box. + - : The border box is used as the reference box. The reference box of a {{htmlElement("table")}} is the border box of its [table wrapper box](/en-US/docs/Glossary/Table_Wrapper_Box), not its table box. - `fill-box` - : The object bounding box is used as the reference box. For elements with associated CSS layout box, acts as `content-box`. - `stroke-box` diff --git a/files/en-us/web/html/element/link/index.md b/files/en-us/web/html/element/link/index.md index 23953edfaa8953f..f2b6f863f5eee19 100644 --- a/files/en-us/web/html/element/link/index.md +++ b/files/en-us/web/html/element/link/index.md @@ -162,6 +162,11 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib +- `blocking` {{Experimental_Inline}} + + - : This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. The operations that are to be blocked must be a space-separated list of blocking attributes listed below. + - `render`: The rendering of content on the screen is blocked. + - `crossorigin` - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute indicates whether {{Glossary("CORS")}} must be used when fetching the resource. @@ -257,9 +262,6 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib The value of the attribute should be a MIME type such as **text/html**, **text/css**, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as **text/css**), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the `type` attribute, but is actually now recommended practice. It is also used on `rel="preload"` link types, to make sure the browser only downloads file types that it supports. -- `blocking` {{Experimental_Inline}} - - : This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. The operations that are to be blocked must be a space-separated list of blocking attributes listed below. - - `render`: The rendering of content on the screen is blocked. ### Non-standard attributes diff --git a/files/en-us/web/html/element/script/index.md b/files/en-us/web/html/element/script/index.md index 8e95cdbbb5fa49e..b655f3ba3f09b17 100644 --- a/files/en-us/web/html/element/script/index.md +++ b/files/en-us/web/html/element/script/index.md @@ -69,6 +69,11 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib See [Browser compatibility](#browser_compatibility) for notes on browser support. See also [Async scripts for asm.js](/en-US/docs/Games/Techniques/Async_scripts). +- `blocking` {{Experimental_Inline}} + + - : 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 attributes listed below. + - `render`: The rendering of content on the screen is blocked. + - `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/Attributes/crossorigin) for a more descriptive explanation of its valid arguments. - `defer` @@ -142,10 +147,6 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. All of the other attributes will be ignored, including the `src` attribute. -- `blocking` {{Experimental_Inline}} - - : 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 attributes listed below. - - `render`: The rendering of content on the screen is blocked. - ### Deprecated attributes - `charset` {{Deprecated_inline}} diff --git a/files/en-us/web/html/element/style/index.md b/files/en-us/web/html/element/style/index.md index 7d353d6706c8bca..6ae31fc93ffe1f1 100644 --- a/files/en-us/web/html/element/style/index.md +++ b/files/en-us/web/html/element/style/index.md @@ -21,15 +21,15 @@ In the same manner as `` elements, `