From d38f6ba931f45fb6df7d1ef9b1c27c2572e42f12 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Tue, 5 Nov 2024 11:30:50 +0000 Subject: [PATCH 01/70] =?UTF-8?q?Add=20information=20to=20GPUQueue.submit(?= =?UTF-8?q?)=20to=20say=20command=20buffers=20must=20be=20u=E2=80=A6=20(#3?= =?UTF-8?q?6577)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add information to GPUQueue.submit() to say command buffers must be unique * fixes for review comments * Add clarification --- files/en-us/web/api/gpuqueue/submit/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/api/gpuqueue/submit/index.md b/files/en-us/web/api/gpuqueue/submit/index.md index e44d0948d4818db..56ae00ff88e9fe8 100644 --- a/files/en-us/web/api/gpuqueue/submit/index.md +++ b/files/en-us/web/api/gpuqueue/submit/index.md @@ -22,7 +22,7 @@ submit(commandBuffers) ### Parameters - `commandBuffers` - - : An array of {{domxref("GPUCommandBuffer")}} objects containing the commands to be enqueued for processing by the GPU. + - : An array of {{domxref("GPUCommandBuffer")}} objects containing the commands to be enqueued for processing by the GPU. The array must not contain duplicate `GPUCommandBuffer` objects — each one can only be submitted once per `submit()` call. ### Return value @@ -32,6 +32,7 @@ None ({{jsxref("Undefined")}}). The following criteria must be met when calling **`submit()`**, otherwise a {{domxref("GPUValidationError")}} is generated and the {{domxref("GPUQueue")}} becomes invalid: +- The array of {{domxref("GPUCommandBuffer")}} objects referenced in the `submit()` call does not contain duplicates. - Any {{domxref("GPUBuffer")}}, {{domxref("GPUTexture")}}, and {{domxref("GPUQuerySet")}} objects used in the encoded commands are available for use, i.e. not unavailable (`GPUBuffer`s are unavailable if they are currently {{domxref("GPUBuffer.mapAsync", "mapped", "", "nocode")}}) or destroyed (with the `destroy()` method). - Any {{domxref("GPUExternalTexture")}} objects used in the encoded commands are not expired (they expire automatically shortly after being imported via {{domxref("GPUDevice.importExternalTexture", "importExternalTexture()")}}). - If a {{domxref("GPUQuerySet")}} object used in an encoded command is of type `"occlusion"` query, it is not already used, except by {{domxref("GPURenderPassEncoder.beginOcclusionQuery()")}}. From 7797f844533e710c6822dfd1a87b2ab48e23bb99 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Tue, 5 Nov 2024 12:01:59 +0000 Subject: [PATCH 02/70] Add information about passing null to unset a bind group (#36648) * Add information about passing null to unset a bind group * Fixes for beaufortfrancoisreview comment --- .../gpucomputepassencoder/setbindgroup/index.md | 14 +++++++++++++- .../gpurenderbundleencoder/setbindgroup/index.md | 14 +++++++++++++- .../api/gpurenderpassencoder/setbindgroup/index.md | 14 +++++++++++++- 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/gpucomputepassencoder/setbindgroup/index.md b/files/en-us/web/api/gpucomputepassencoder/setbindgroup/index.md index 94c8ae92cc13d62..8512eb933b83a6a 100644 --- a/files/en-us/web/api/gpucomputepassencoder/setbindgroup/index.md +++ b/files/en-us/web/api/gpucomputepassencoder/setbindgroup/index.md @@ -27,7 +27,7 @@ setBindGroup(index, bindGroup, dynamicOffsets, dynamicOffsetsStart, - `index` - : The index to set the bind group at. This matches the `n` index value of the corresponding [`@group(n)`](https://gpuweb.github.io/gpuweb/wgsl/#attribute-group) attribute in the shader code ({{domxref("GPUShaderModule")}}) used in the related pipeline. - `bindGroup` - - : The {{domxref("GPUBindGroup")}} to use for subsequent compute commands. + - : The {{domxref("GPUBindGroup")}} to use for subsequent compute commands, or `null`, in which case any previously-set bind group in the given slot is unset. - `dynamicOffsets` {{optional_inline}} - : A value specifying the offset, in bytes, for each entry in `bindGroup` with `hasDynamicOffset: true` set (i.e. in the descriptor of the {{domxref("GPUDevice.createBindGroupLayout()")}} call that created the {{domxref("GPUBindGroupLayout")}} object that the `bindGroup` is based on). This value can be: - An array of numbers specifying the different offsets. @@ -63,6 +63,8 @@ The following criteria must be met when calling **`dispatchWorkgroups()`**, othe ## Examples +### Set bind group + In our [basic compute demo](https://mdn.github.io/dom-examples/webgpu-compute-demo/), several commands are recorded via a {{domxref("GPUCommandEncoder")}}. Most of these commands originate from the {{domxref("GPUComputePassEncoder")}} created via `beginComputePass()`. The `setBindGroup()` call used here is the simplest form, just specifying index and bind group. ```js @@ -99,6 +101,16 @@ device.queue.submit([commandEncoder.finish()]); // ... ``` +### Unset bind group + +```js +// Set bind group in slot 0 +passEncoder.setBindGroup(0, bindGroup); + +// Later, unset bind group in slot 0 +passEncoder.setBindGroup(0, null); +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/gpurenderbundleencoder/setbindgroup/index.md b/files/en-us/web/api/gpurenderbundleencoder/setbindgroup/index.md index 522fa914d6e65ce..049297418196f83 100644 --- a/files/en-us/web/api/gpurenderbundleencoder/setbindgroup/index.md +++ b/files/en-us/web/api/gpurenderbundleencoder/setbindgroup/index.md @@ -30,7 +30,7 @@ setBindGroup(index, bindGroup, dynamicOffsets, dynamicOffsetsStart, - `index` - : The index to set the bind group at. This matches the `n` index value of the corresponding [`@group(n)`](https://gpuweb.github.io/gpuweb/wgsl/#attribute-group) attribute in the shader code ({{domxref("GPUShaderModule")}}) used in the related pipeline. - `bindGroup` - - : The {{domxref("GPUBindGroup")}} to use for subsequent render bundle commands. + - : The {{domxref("GPUBindGroup")}} to use for subsequent render bundle commands, or `null`, in which case any previously-set bind group in the given slot is unset. - `dynamicOffsets` {{optional_inline}} - : A value specifying the offset, in bytes, for each entry in `bindGroup` with `hasDynamicOffset: true` set (i.e. in the descriptor of the {{domxref("GPUDevice.createBindGroupLayout()")}} call that created the {{domxref("GPUBindGroupLayout")}} object that the `bindGroup` is based on). This value can be: - An array of numbers specifying the different offsets. @@ -66,6 +66,8 @@ The following criteria must be met when calling **`setBindGroup()`**, otherwise ## Examples +### Set bind group + ```js function recordRenderPass(passEncoder) { if (settings.dynamicOffsets) { @@ -90,6 +92,16 @@ function recordRenderPass(passEncoder) { The above snippet is taken from the WebGPU Samples [Animometer example](https://webgpu.github.io/webgpu-samples/samples/animometer/). +### Unset bind group + +```js +// Set bind group in slot 0 +passEncoder.setBindGroup(0, timeBindGroup); + +// Later, unset bind group in slot 0 +passEncoder.setBindGroup(0, null); +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/gpurenderpassencoder/setbindgroup/index.md b/files/en-us/web/api/gpurenderpassencoder/setbindgroup/index.md index 625ec6505e8d990..9c00088eeebe24d 100644 --- a/files/en-us/web/api/gpurenderpassencoder/setbindgroup/index.md +++ b/files/en-us/web/api/gpurenderpassencoder/setbindgroup/index.md @@ -27,7 +27,7 @@ setBindGroup(index, bindGroup, dynamicOffsets, dynamicOffsetsStart, - `index` - : The index to set the bind group at. This matches the `n` index value of the corresponding [`@group(n)`](https://gpuweb.github.io/gpuweb/wgsl/#attribute-group) attribute in the shader code ({{domxref("GPUShaderModule")}}) used in the related pipeline. - `bindGroup` - - : The {{domxref("GPUBindGroup")}} to use for subsequent render commands. + - : The {{domxref("GPUBindGroup")}} to use for subsequent render commands, or `null`, in which case any previously-set bind group in the given slot is unset. - `dynamicOffsets` {{optional_inline}} - : A value specifying the offset, in bytes, for each entry in `bindGroup` with `hasDynamicOffset: true` set (i.e. in the descriptor of the {{domxref("GPUDevice.createBindGroupLayout()")}} call that created the {{domxref("GPUBindGroupLayout")}} object that the `bindGroup` is based on). This value can be: - An array of numbers specifying the different offsets. @@ -63,6 +63,8 @@ The following criteria must be met when calling **`setBindGroup()`**, otherwise ## Examples +### Set bind group + In the WebGPU Samples [Textured Cube example](https://webgpu.github.io/webgpu-samples/samples/texturedCube/), `setBindGroup()` is used to bind the `uniformBindGroup` to index position 0. Check out the example for the full context. ```js @@ -83,6 +85,16 @@ device.queue.submit([commandEncoder.finish()]); > [!NOTE] > Study the other [WebGPU Samples](https://webgpu.github.io/webgpu-samples/) for more examples of `setBindGroup()` usage. +### Unset bind group + +```js +// Set bind group in slot 0 +passEncoder.setBindGroup(0, uniformBindGroup); + +// Later, unset bind group in slot 0 +passEncoder.setBindGroup(0, null); +``` + ## Specifications {{Specifications}} From 6d311a5f07c97dbcd7bb9a6d49c2fe820a228659 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Tue, 5 Nov 2024 07:49:47 -0500 Subject: [PATCH 03/70] Fix broken links (#36651) --- .../what_are_browser_developer_tools/index.md | 2 +- .../api/declarativenetrequest/redirect/index.md | 2 +- .../content_scripts/cloneinto/index.md | 4 ++-- files/en-us/mozilla/firefox/releases/10/index.md | 4 ++-- .../firefox/releases/10/updating_add-ons/index.md | 10 ++-------- files/en-us/mozilla/firefox/releases/11/index.md | 6 +++--- files/en-us/mozilla/firefox/releases/16/index.md | 4 ++-- files/en-us/mozilla/firefox/releases/22/index.md | 2 +- files/en-us/mozilla/firefox/releases/27/index.md | 2 +- files/en-us/mozilla/firefox/releases/34/index.md | 8 ++++---- files/en-us/mozilla/firefox/releases/38/index.md | 2 +- files/en-us/mozilla/firefox/releases/4/index.md | 14 +++++++------- files/en-us/mozilla/firefox/releases/40/index.md | 2 +- files/en-us/mozilla/firefox/releases/42/index.md | 8 ++++---- files/en-us/mozilla/firefox/releases/44/index.md | 12 ++++++------ files/en-us/mozilla/firefox/releases/45/index.md | 4 ++-- files/en-us/mozilla/firefox/releases/48/index.md | 2 +- files/en-us/mozilla/firefox/releases/50/index.md | 2 +- files/en-us/mozilla/firefox/releases/6/index.md | 6 +++--- files/en-us/mozilla/firefox/releases/69/index.md | 8 ++++---- .../releases/7/updating_extensions/index.md | 2 +- files/en-us/mozilla/firefox/releases/70/index.md | 2 +- .../firefox/releases/8/updating_add-ons/index.md | 2 +- files/en-us/web/api/cssprimitivevalue/index.md | 2 +- .../api/cssprimitivevalue/primitivetype/index.md | 2 +- .../api/cssprimitivevalue/setstringvalue/index.md | 2 +- files/en-us/web/api/dommatrix/index.md | 2 -- files/en-us/web/api/html_dom_api/index.md | 1 - .../en-us/web/api/htmlselectelement/size/index.md | 2 +- files/en-us/web/api/pluginarray/index.md | 2 +- files/en-us/web/api/url_api/index.md | 2 +- .../unpackcolorspace/index.md | 2 +- files/en-us/web/css/-moz-image-rect/index.md | 4 ++-- .../en-us/web/css/@counter-style/symbols/index.md | 2 +- files/en-us/web/css/@font-face/src/index.md | 2 +- files/en-us/web/css/@view-transition/index.md | 2 +- files/en-us/web/css/marker-end/index.md | 2 +- files/en-us/web/css/marker-mid/index.md | 2 +- files/en-us/web/css/marker-start/index.md | 2 +- files/en-us/web/css/marker/index.md | 2 +- files/en-us/web/html/element/audio/index.md | 2 +- files/en-us/web/security/mixed_content/index.md | 2 +- files/en-us/web/svg/attribute/clip-path/index.md | 2 +- files/en-us/web/uri/schemes/data/index.md | 2 +- 44 files changed, 72 insertions(+), 81 deletions(-) diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index 9e5024aa8047193..9a4b5bf0d16497a 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -89,7 +89,7 @@ The _box model_ view visually represents the current element's box model, so you In some browsers, the JavaScript details of the selected element can also be viewed in this panel. In Safari, these are unified under the _Node_ tab, but are in separate tabs in Chrome, Opera, and Edge. -- _Properties_: The {{Glossary("Property (JavaScript)", "properties")}} of the element object. +- _Properties_: The {{Glossary("Property/JavaScript", "properties")}} of the element object. - _Event Listeners_: The [events](/en-US/docs/Web/API/Event) associated with the element. ### Find out more diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/redirect/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/redirect/index.md index d22d9b256f850f9..53391ee66a11569 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/redirect/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/redirect/index.md @@ -13,7 +13,7 @@ Details describing how a redirect should be performed, as the `redirect` propert > A redirect action does not redirect the request, and the request continues as usual when: > > - the action does not change the request. -> - the redirect URL is invalid (e.g., the value of {{WebExtAPIRef("declarativeNetRequest.redirect","redirect.regexSubstitution")}} is not a valid URL). +> - the redirect URL is invalid (e.g., the value of `regexSubstitution` is not a valid URL). ## Type diff --git a/files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md b/files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md index a26f9caec46ee7e..51782185a7de5e8 100644 --- a/files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/content_scripts/cloneinto/index.md @@ -40,7 +40,7 @@ let clonedObject = cloneInto( - `options` {{optional_inline}} - : `object`. Options for the function. - `cloneFunctions` {{optional_inline}} - - : `boolean`. Whether the object's functions should be cloned. Default to `false`. Cloned functions have the same semantics as functions exported using [`exportFunction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Content_scripts/exportFunction). See [Cloning objects that have functions](#cloning_objects_that_have_functions). {{optional_inline}} + - : `boolean`. Whether the object's functions should be cloned. Default to `false`. Cloned functions have the same semantics as functions exported using [`exportFunction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts/exportFunction). See [Cloning objects that have functions](#cloning_objects_that_have_functions). {{optional_inline}} - `wrapReflectors` {{optional_inline}} - : `boolean`. Whether DOM objects should be passed by reference instead of cloned. DOM objects are usually not clonable. Defaults to `false`. See [Cloning objects that contain DOM elements](#cloning_objects_that_contain_dom_elements). @@ -97,7 +97,7 @@ window.foo(cloneInto(addonScriptObject, window)); // "they said: hello from your ### Cloning objects that have functions -If the object to clone contains functions, you must pass the `{cloneFunctions:true}` flag, or you get an error. If you do pass this flag, then functions in the object are cloned using the same mechanism used in [`Components.utils.exportFunction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/components/utils/exportFunction): +If the object to clone contains functions, you must pass the `{cloneFunctions:true}` flag, or you get an error. If you do pass this flag, then functions in the object are cloned using the same mechanism used in [`exportFunction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts/exportFunction): ```js // content script diff --git a/files/en-us/mozilla/firefox/releases/10/index.md b/files/en-us/mozilla/firefox/releases/10/index.md index 1e4311845365ae6..f5d3c1fcd1b701d 100644 --- a/files/en-us/mozilla/firefox/releases/10/index.md +++ b/files/en-us/mozilla/firefox/releases/10/index.md @@ -46,12 +46,12 @@ Firefox 10 shipped on January 31, 2012. This article provides information about #### Full Screen API -- Support for {{ domxref("Document/fullscreenEnabled") }} has been added. +- Support for {{ domxref("Document/fullscreenEnabled", "document.fullscreenEnabled") }} has been added. - The new {{ cssxref(":-moz-full-screen-ancestor") }} property has been added. This lets you match against elements that are ancestors of an element in full screen mode. #### Battery API -- Experimental support for {{ domxref("window.navigator.mozBattery") }} has been added (can be enabled setting the preference `dom.battery.enabled` to `true` and will be enabled by default starting with Firefox 11). +- Experimental support for `navigator.mozBattery` has been added (can be enabled setting the preference `dom.battery.enabled` to `true` and will be enabled by default starting with Firefox 11). #### Canvas diff --git a/files/en-us/mozilla/firefox/releases/10/updating_add-ons/index.md b/files/en-us/mozilla/firefox/releases/10/updating_add-ons/index.md index 0228965cba9a75f..fd1682381f8a27e 100644 --- a/files/en-us/mozilla/firefox/releases/10/updating_add-ons/index.md +++ b/files/en-us/mozilla/firefox/releases/10/updating_add-ons/index.md @@ -21,17 +21,11 @@ Some obsolete APIs have been removed from the DOM: - {{ domxref("Node.isSameNode()") }} - : This is the removal that has the most likelihood to affect add-on developers, as it was fairly commonly used. You can now use the JavaScript `===` operator to compare nodes instead of this obsolete method. This method was made obsolete by the DOM4 specification. -- {{ domxref("text.isElementContentWhitespace") }} - - `text.replaceWholeText()` +- `text.isElementContentWhitespace`, `text.replaceWholeText()` - : These APIs were rendered obsolete by the DOM4 specification. -- {{ domxref("Document.xmlEncoding") }} - - {{ domxref("Document.xmlStandalone") }} - - {{ domxref("Document.xmlVersion") }} +- {{ domxref("Document.xmlEncoding") }}, {{ domxref("Document.xmlStandalone") }}, {{ domxref("Document.xmlVersion") }} - : All of these APIs were rendered obsolete by the DOM4 specification. They were most frequently being used to detect whether the document being displayed was HTML or XML. See the article for {{ domxref("Document.xmlVersion") }} for a recommended way to test for this going forward. diff --git a/files/en-us/mozilla/firefox/releases/11/index.md b/files/en-us/mozilla/firefox/releases/11/index.md index b8468d3589376dc..4c41f00ec46c5a3 100644 --- a/files/en-us/mozilla/firefox/releases/11/index.md +++ b/files/en-us/mozilla/firefox/releases/11/index.md @@ -19,12 +19,12 @@ Firefox 11 shipped on March 13, 2012. This article provides information about th - The {{domxref("element.outerHTML")}} property is now supported on HTML elements. - [`XMLHttpRequest` supports HTML parsing](/en-US/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest). - Removed support for using the {{domxref("XMLHttpRequest")}} `responseType` and `withCredentials` attributes when performing synchronous requests. Attempting to do so throws an `NS_ERROR_DOM_INVALID_ACCESS_ERR` exception. This change has been proposed to the W3C for standardization. -- The new {{domxref("window.navigator.mozVibrate()")}} method lets you vibrate the device where supported; this is implemented as `mozVibrate()` on Gecko. -- {{domxref("window.navigator.mozApps")}} returns an [`Apps`](/en-US/docs/DOM/Apps) object you can use to install and manage [open web applications](/en-US/docs/Web/Progressive_web_apps). +- The new {{domxref("Navigator/vibrate", "navigator.mozVibrate()")}} method lets you vibrate the device where supported; this is implemented as `mozVibrate()` on Gecko. +- `navigator.mozApps` returns an [`Apps`](/en-US/docs/DOM/Apps) object you can use to install and manage [open web applications](/en-US/docs/Web/Progressive_web_apps). - `MozBeforePaint` events are no longer fired. {{domxref("window.requestAnimationFrame", "mozRequestAnimationFrame()")}} consumers who used these should pass a callback function instead. - Support for canceling animation frame requests has been added; {{domxref("window.requestAnimationFrame", "window.mozRequestAnimationFrame()")}} now returns a request ID value, which you can pass to {{domxref("window.cancelAnimationFrame", "window.mozCancelAnimationFrame()")}} to cancel the request. - Several {{domxref("Event")}} constructors (`Event`, HTML events, `UIEvent`, and `MouseEvent`) introduced in DOM4 specifications are now supported. -- The {{domxref("window.navigator.mozBattery", "Battery API")}} is now enabled by default. +- The [Battery API](/en-US/docs/Web/API/Battery_Status_API) is now enabled by default. - Support for the [`defaultMuted`](/en-US/docs/Web/API/HTMLMediaElement), [`loop`](/en-US/docs/Web/API/HTMLMediaElement) and [`muted`](/en-US/docs/Web/API/HTMLMediaElement) properties on [`HTMLMediaElement`](/en-US/docs/Web/API/HTMLMediaElement) has been added. - Calling {{domxref("Document/exitFullscreen")}} now restores the previously fullscreen element if some other element was in fullscreen mode when the current element's {{domxref("Element/requestFullScreen")}} method was called. - The {{domxref("window.requestAnimationFrame", "window.mozRequestAnimationFrame()")}} method no longer supports a no-argument form. This form was not used much and is unlikely to become part of the standard. diff --git a/files/en-us/mozilla/firefox/releases/16/index.md b/files/en-us/mozilla/firefox/releases/16/index.md index f91627c2f66532c..eb2e726700ab579 100644 --- a/files/en-us/mozilla/firefox/releases/16/index.md +++ b/files/en-us/mozilla/firefox/releases/16/index.md @@ -43,7 +43,7 @@ Firefox 16 shipped on October 9, 2012. This article lists key changes that are u - The non-standard `Keyboard` interface, prefixed as `mozKeyboard`, now has the `Keyboard.setSelectedOption()` and `Keyboard.setValue()` methods, as well as the `Keyboard.onfocuschange`. _This interface, only available for Firefox OS, has been removed in Firefox 31._ - The [`java`](/en-US/docs/LiveConnect_Reference/java) and [`Packages`](/en-US/docs/LiveConnect_Reference/Packages) global objects have been removed. See [LiveConnect](/en-US/docs/LiveConnect). - The `CSSRule.type` associated with {{domxref("CSSNamespaceRule")}} has been updated from `UNKNOWN_RULE` (`0`) to `NAMESPACE_RULE` (`10`) ([bug 765590](https://bugzil.la/765590)). -- WebSMS API: {{domxref("SmsRequest")}} has been superseded by the more general `DOMRequest`. +- WebSMS API: `SmsRequest` has been superseded by the more general `DOMRequest`. - The non-standard {{domxref("Element.scrollTopMax")}} and {{domxref("Element.scrollLeftMax")}} read-only properties have been added ([Firefox bug 766937](https://bugzil.la/766937)). - The second parameter of {{domxref("Blob.blob", "Blob()")}}, when set to `null` or `undefined`, is now being handled as an empty dictionary ([Firefox bug 7691119](https://bugzil.la/7691119)). @@ -51,7 +51,7 @@ Firefox 16 shipped on October 9, 2012. This article lists key changes that are u - [`Number`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) objects now offer `isFinite()`, `toInteger()`, and `isInteger()` methods. ([bug 761480](https://bugzil.la/761480), [bug 761495](https://bugzil.la/761495)) - The Harmony [spread operator](https://web.archive.org/web/20161222114355/http://wiki.ecmascript.org/doku.php?id=harmony:spread) is now supported in [`Array`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) initializers ([bug 574130](https://bugzil.la/574130)). Note it is not yet supported in calls ([bug 762363](https://bugzil.la/762363)). -- The experimental {{jsxref("TypedArray.prototype.move()")}} method has been added (available in Aurora and Nightly channels only) ([Firefox bug 730873](https://bugzil.la/730873)). +- The experimental `TypedArray.prototype.move()` method has been added (available in Aurora and Nightly channels only) ([Firefox bug 730873](https://bugzil.la/730873)). ### WebGL diff --git a/files/en-us/mozilla/firefox/releases/22/index.md b/files/en-us/mozilla/firefox/releases/22/index.md index fc7e74c0675441c..43d25ff29fb74af 100644 --- a/files/en-us/mozilla/firefox/releases/22/index.md +++ b/files/en-us/mozilla/firefox/releases/22/index.md @@ -37,7 +37,7 @@ page-type: firefox-release-notes - The {{domxref("BlobEvent")}} interface has been implemented ([Firefox bug 834165](https://bugzil.la/834165)). - The properties `HTMLMediaElement.crossorigin` and `HTMLInputElement.inputmode` has been removed to match the spec in {{domxref("HTMLMediaElement.crossOrigin")}} and `HTMLInputElement.inputMode`, respectively ([Firefox bug 847370](https://bugzil.la/847370) and [Firefox bug 850346](https://bugzil.la/850346)). - WebRTC: the Media Stream API and Peer Connection API are now supported by default. -- Web Components: the {{domxref("Document.register")}} method has been implemented ([Firefox bug 783129](https://bugzil.la/783129)). +- Web Components: the `Document.register()` method has been implemented ([Firefox bug 783129](https://bugzil.la/783129)). - The `ProgressEvent.initProgressEvent()` constructor method has been removed. Use the standard constructor, {{domxref("ProgressEvent.ProgressEvent", "ProgressEvent()")}} to construct and initialize {{domxref("ProgressEvent")}} ([Firefox bug 843489](https://bugzil.la/843489)). - Manipulated data associated with a {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}, or {{domxref("Element/paste_event", "paste")}} event can now be accessed via the {{domxref("ClipboardEvent.clipboardData")}} property ([Firefox bug 407983](https://bugzil.la/407983)). - The {{domxref("HTMLTimeElement")}} interface has been implemented ([Firefox bug 629801](https://bugzil.la/629801)). diff --git a/files/en-us/mozilla/firefox/releases/27/index.md b/files/en-us/mozilla/firefox/releases/27/index.md index 56e9d016d38d79a..5a933f0bf0011a8 100644 --- a/files/en-us/mozilla/firefox/releases/27/index.md +++ b/files/en-us/mozilla/firefox/releases/27/index.md @@ -39,7 +39,7 @@ More details in [this post](https://hacks.mozilla.org/2013/11/firefox-developer- - The `color` value of the {{HTMLElement("input")}} [`type`](/en-US/docs/Web/HTML/Element/input#type) attribute has been implemented on desktop platforms. It was already available on mobile ones. - The `allow-popups` directive is now supported with the [`sandbox`](/en-US/docs/Web/HTML/Element/iframe#sandbox) attribute of the {{HTMLElement("iframe")}} element ([Firefox bug 766282](https://bugzil.la/766282)). - Blending of HTML elements using the {{cssxref("mix-blend-mode")}} property has been implemented. The `layout.css.mix-blend-mode.enabled` preference must be set to `true` ([Firefox bug 902525](https://bugzil.la/902525)). -- The {{domxref("Object.typeMustMatch", "typeMustMatch")}} property of the {{HTMLElement("object")}} element is now supported ([Firefox bug 827160](https://bugzil.la/827160)). +- The `typeMustMatch` property of the {{HTMLElement("object")}} element is now supported ([Firefox bug 827160](https://bugzil.la/827160)). ### JavaScript diff --git a/files/en-us/mozilla/firefox/releases/34/index.md b/files/en-us/mozilla/firefox/releases/34/index.md index 49bcbed8fa84d75..fd017369f588aed 100644 --- a/files/en-us/mozilla/firefox/releases/34/index.md +++ b/files/en-us/mozilla/firefox/releases/34/index.md @@ -73,16 +73,16 @@ _No change._ - The non-standard [Device Storage API](/en-US/docs/Web/API/Device_Storage_API) is now also enabled for privileged apps installed on Android ([Firefox bug 886627](https://bugzil.la/886627)). - Web Crypto API has been enabled by default ([Firefox bug 1074001](https://bugzil.la/1074001)). - The {{domxref("MediaStreamTrack.stop()")}} method has been added ([Firefox bug 1057955](https://bugzil.la/1057955)). -- Our experimental implementation of EME continues. The {{domxref("MediaKeySession.getUsableKeyIds()")}} method has been added ([Firefox bug 1057171](https://bugzil.la/1057171)). +- Our experimental implementation of EME continues. The `MediaKeySession.getUsableKeyIds()` method has been added ([Firefox bug 1057171](https://bugzil.la/1057171)). - Regarding [WebRTC](/en-US/docs/Web/API/WebRTC_API): - - an experiment implementation of {{domxref("RTPSender")}} and {{domxref("RTPReceiver")}} working with {{domxref("RTCPeerConnection")}} has landed ([Firefox bug 1032835](https://bugzil.la/1032835)). - - application window sharing has been added to {{domxref("Navigation.getUserMedia()")}} ([Firefox bug 1036653](https://bugzil.la/1036653)) and {{domxref("MediaTrackConstraintSet")}} now supports `browserWindow` and `scrollWithPage` allowing to chose the tab of a window that has to be shared without showing the tab chooser dialog ([Firefox bug 1041700](https://bugzil.la/1041700)). + - an experiment implementation of `RTPSender` and `RTPReceiver` working with {{domxref("RTCPeerConnection")}} has landed ([Firefox bug 1032835](https://bugzil.la/1032835)). + - application window sharing has been added to {{domxref("Navigator.getUserMedia()")}} ([Firefox bug 1036653](https://bugzil.la/1036653)) and {{domxref("MediaTrackConstraintSet")}} now supports `browserWindow` and `scrollWithPage` allowing to chose the tab of a window that has to be shared without showing the tab chooser dialog ([Firefox bug 1041700](https://bugzil.la/1041700)). - `"browser"` is now an accepted value of MediaSourceEnum, used to define constraints ([Firefox bug 1041493](https://bugzil.la/1041493)). - For Web Components, event retargeting is now implemented ([Firefox bug 887541](https://bugzil.la/887541)). - The {{domxref("Headers")}} interface has been implemented ([Firefox bug 1029620](https://bugzil.la/1029620)). It is controlled by the `dom.fetch.enabled` preference which is set to `false` by default. -- Regarding our experimental implementation of Web Animations, the {{domxref("AnimationEffect")}} interface has been added, with the single {{domxref("AnimationEffect.name")}} property ([Firefox bug 1045993](https://bugzil.la/1045993)). Web Animations is not activated by default and is controlled by the `dom.animations-api.core.enabled` preference. +- Regarding our experimental implementation of Web Animations, the {{domxref("AnimationEffect")}} interface has been added, with the single `AnimationEffect.name` property ([Firefox bug 1045993](https://bugzil.la/1045993)). Web Animations is not activated by default and is controlled by the `dom.animations-api.core.enabled` preference. - CSSOM View smooth scrolling methods have been added: {{domxref("Window.scroll()")}}, {{domxref("Window.scrollTo()")}}, and {{domxref("Window.scrollBy()")}} ([Firefox bug 1022818](https://bugzil.la/1022818)). - The non-standard `MozSmsSegmentInfo` is no more visible on the global object [Firefox bug 916607](https://bugzil.la/916607). diff --git a/files/en-us/mozilla/firefox/releases/38/index.md b/files/en-us/mozilla/firefox/releases/38/index.md index 7cae4d909013380..b7fbd05ab927630 100644 --- a/files/en-us/mozilla/firefox/releases/38/index.md +++ b/files/en-us/mozilla/firefox/releases/38/index.md @@ -78,7 +78,7 @@ Highlights: - The Fetch API {{domxref("Window/fetch", "fetch()")}} method has been implemented ([Firefox bug 1039846](https://bugzil.la/1039846)). - {{domxref("BroadcastChannel")}} API has been implemented and is available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API) ([Firefox bug 966439](https://bugzil.la/966439) and [Firefox bug 1121420](https://bugzil.la/1121420)). - The Console API is now available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API). -- {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} has been implemented ([Firefox bug 1119527](https://bugzil.la/1119527)). +- `CanvasRenderingContext2D.clearHitRegions()` has been implemented ([Firefox bug 1119527](https://bugzil.la/1119527)). - Constants of {{domxref("KeyboardEvent.location")}}, `DOM_KEY_LOCATION_MOBILE` and DOM_KEY_LOCATION_JOYSTICK, have been removed, since they were removed from the DOM Level 3 Spec ([Firefox bug 936313](https://bugzil.la/936313). - {{domxref("KeyboardEvent.code")}} is now available; previously it was only available in prerelease builds. ([Firefox bug 1126673](https://bugzil.la/1126673)) - {{domxref("KeyboardEvent.code")}} now supports special keys on Sun keyboards on Linux, Android, and Firefox OS. ([Firefox bug 1020139](https://bugzil.la/1020139)) diff --git a/files/en-us/mozilla/firefox/releases/4/index.md b/files/en-us/mozilla/firefox/releases/4/index.md index c83b9181a8ec8a2..20483618b76b058 100644 --- a/files/en-us/mozilla/firefox/releases/4/index.md +++ b/files/en-us/mozilla/firefox/releases/4/index.md @@ -276,12 +276,12 @@ Several HTML elements have had their DOM interfaces changed to the ones required - {{HTMLElement("script")}} elements created using {{domxref("Document.createElement()")}} and inserted into a document now behave according to the HTML5 specification by default. Scripts with the `src` attribute execute as soon as available (without maintaining ordering) and scripts without the `src` attribute execute synchronously. To make script-inserted scripts that have the `src` attribute execute in the insertion order, set `.async=false` on them. - DOM {{domxref("File")}} objects now offer a `url` property. - [FormData](/en-US/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest#using_formdata_objects) support for XMLHttpRequest. -- The {{domxref("Element.isContentEditable")}} property has been implemented. -- The {{domxref("Document.currentScript")}} property lets you determine which {{HTMLElement("script")}} element's script is currently executing. The new {{domxref("element.onbeforescriptexecute")}} and {{domxref("element.onafterscriptexecute")}} events are fired before and after a script element executes. -- Added the `mozSourceNode` property to the {{domxref("DragTransfer")}} object. +- The {{domxref("HTMLElement.isContentEditable")}} property has been implemented. +- The {{domxref("Document.currentScript")}} property lets you determine which {{HTMLElement("script")}} element's script is currently executing. The new {{domxref("Element/beforescriptexecute", "beforescriptexecute")}} and {{domxref("Element/afterscriptexecute", "afterscriptexecute")}} events are fired before and after a script element executes. +- Added the `mozSourceNode` property to the {{domxref("DataTransfer")}} object. - Added the {{domxref("Selection.modify()")}} method to the {{domxref("Selection")}} object; this lets you easily alter the current text selection or cursor position in a browser window. - Support for the `window.directories` object and the `directories` feature for {{domxref("window.open")}}, which are not supported in any other browser, has been removed. Use `personalbar` instead. [Firefox bug 474058](https://bugzil.la/474058) -- The {{domxref("Event.mozInputSource")}} property has been added to DOM user interface events; this non-standard property lets you determine the type of device that generated an event. +- The {{domxref("MouseEvent.mozInputSource")}} property has been added to DOM user interface events; this non-standard property lets you determine the type of device that generated an event. - The {{domxref("Document")}} {{domxref("Document/readystatechange_event", "readystatechange")}} event has been implemented. - The {{domxref("Document.createElement()")}} method no longer accepts `<` and `>` around the tag name in quirks mode. - The {{domxref("Element.setCapture()")}} and {{domxref("Document.releaseCapture()")}} methods have been added, allowing elements to continue tracking mouse events even while the mouse is outside their normal tracking area after a `mousedown` event has occurred. @@ -291,8 +291,8 @@ Several HTML elements have had their DOM interfaces changed to the ones required - [Mouse events](/en-US/docs/Web/API/MouseEvent) now include a `mozPressure` property indicating the amount of pressure on supported pressure-sensitive input devices. - The {{domxref("URL/createObjectURL_static", "URL.createObjectURL()")}} and {{domxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}} methods let you create object URLs which reference local files. - The {{domxref("DOMImplementation.createHTMLDocument()")}} method lets you create a new HTML document. -- {{domxref("Node.mozMatchesSelector()")}} now throws a `SYNTAX_ERR` exception if the specified selector string is invalid, instead of incorrectly returning `false`. -- You can now set an element's SVG properties' values using the same shorthand syntax as with CSS. For example: `element.style.fill = 'lime'`. See {{domxref("element.style")}} for details. +- `Node.mozMatchesSelector()` now throws a `SYNTAX_ERR` exception if the specified selector string is invalid, instead of incorrectly returning `false`. +- You can now set an element's SVG properties' values using the same shorthand syntax as with CSS. For example: `element.style.fill = 'lime'`. See {{domxref("HTMLElement/style", "style")}} for details. - The document root now has [a `privatebrowsingmode` attribute](/en-US/docs/Supporting_private_browsing_mode#detecting_whether_private_browsing_mode_is_permanent) that describes the state of private browsing mode, including an indication of whether private browsing is temporary or permanent for the session. - The second parameter of the {{domxref("window.getComputedStyle()")}} method is now optional, as it is in every other major browser. - The DOM {{domxref("StorageEvent")}} object now matches the latest version of the specification. @@ -353,7 +353,7 @@ If you're a theme developer, you should read [Theme changes in Firefox 4](/en-US ### DOM changes -- {{domxref("ChromeWorker")}} +- `ChromeWorker` - : A new type of worker for privileged code; this lets you use things like [js-ctypes](/en-US/docs/js-ctypes) from workers in extensions and application code. - [Touch events](/en-US/docs/Web/API/Touch_events) - : Support for (non-standard) touch events has been added; these let you track multiple fingers moving on a touch screen at the same time. diff --git a/files/en-us/mozilla/firefox/releases/40/index.md b/files/en-us/mozilla/firefox/releases/40/index.md index 23ba7ba92a9e1a0..5f2256147d6bc55 100644 --- a/files/en-us/mozilla/firefox/releases/40/index.md +++ b/files/en-us/mozilla/firefox/releases/40/index.md @@ -107,7 +107,7 @@ New extensions to the [Web Audio API](/en-US/docs/Web/API/Web_Audio_API): - Slight improvement in our [Service Worker API](/en-US/docs/Web/API/Service_Worker_API): the {{domxref("ServiceWorkerRegistration.update()", "update()")}} method has been moved from {{domxref("ServiceWorkerGlobalScope")}} to {{domxref("ServiceWorkerRegistration")}} ([Firefox bug 1131350](https://bugzil.la/1131350)). - {{domxref("ServiceWorkerRegistration")}} is now available in Web workers ([Firefox bug 1131327](https://bugzil.la/1131327)). -- {{domxref("DataStore")}} is now available in Web workers ([Firefox bug 916196](https://bugzil.la/916196)). +- `DataStore` is now available in Web workers ([Firefox bug 916196](https://bugzil.la/916196)). #### IndexedDB diff --git a/files/en-us/mozilla/firefox/releases/42/index.md b/files/en-us/mozilla/firefox/releases/42/index.md index 459f5db89fc8346..617f7b7b5b0a123 100644 --- a/files/en-us/mozilla/firefox/releases/42/index.md +++ b/files/en-us/mozilla/firefox/releases/42/index.md @@ -46,10 +46,10 @@ Highlights: - {{domxref('MouseEvent.offsetX')}} and {{domxref('MouseEvent.offsetY')}} have been added ([Firefox bug 69787](https://bugzil.la/69787)). - The {{domxref("HTMLInputElement")}} interface has been experimentally extended to handle the upload of directories ([Firefox bug 1164310](https://bugzil.la/1164310)). These four members can be exposed by setting the `dom.input.dirpicker` preference to `true`: - - {{domxref("HTMLInputElement.directory")}} - - {{domxref("HTMLInputElement.isFilesAndDirectoriesSupported")}} - - {{domxref("HTMLInputElement.getFilesAndDirectories()")}} - - {{domxref("HTMLInputElement.chooseDirectory()")}} + - `HTMLInputElement.directory` + - `HTMLInputElement.isFilesAndDirectoriesSupported` + - `HTMLInputElement.getFilesAndDirectories()` + - `HTMLInputElement.chooseDirectory()` - The {{domxref("Directory")}} interface has been experimentally extended ([Firefox bug 1177688](https://bugzil.la/1177688)). The two members {{domxref("Directory.path")}} and {{domxref("Directory.getContents")}} can be exposed by setting the `dom.input.dirpicker` preference to `true`. - The `HTMLMediaElement.mozSrcObject` has been renamed in {{domxref('HTMLMediaElement.srcObject')}} ([Firefox bug 1175523](https://bugzil.la/1175523)). diff --git a/files/en-us/mozilla/firefox/releases/44/index.md b/files/en-us/mozilla/firefox/releases/44/index.md index 915fc666b88052a..1eee7a586a7aa1b 100644 --- a/files/en-us/mozilla/firefox/releases/44/index.md +++ b/files/en-us/mozilla/firefox/releases/44/index.md @@ -103,10 +103,10 @@ Highlights: - To fight unwanted pop-ups, prompts requested in {{domxref("Window/beforeunload_event", "beforeunload")}} events of pages that have not been interacted with are no more displayed ([Firefox bug 636905](https://bugzil.la/636905)). - The deprecated method {{domxref("MessageEvent.initMessageEvent()")}} has been reimplemented for backward compatibility ([Firefox bug 949376](https://bugzil.la/949376)). - The obsolete property `DocumentType.internalSubset` has been removed ([Firefox bug 801545](https://bugzil.la/801545)). -- For compatibility with existing sites, the properties {{domxref("Window.orientation")}} and {{domxref("Window.onorientationchange")}}, as well as the {{domxref("Window.orientationchange_event", "orientationchange")}} event have been implemented ([Firefox bug 920734](https://bugzil.la/920734)). +- For compatibility with existing sites, the {{domxref("Window.orientation")}} property and the {{domxref("Window.orientationchange_event", "orientationchange")}} event have been implemented ([Firefox bug 920734](https://bugzil.la/920734)). - An {{HTMLElement("iframe")}} with explicit fullscreen request should not exit fullscreen implicitly ([Firefox bug 1187801](https://bugzil.la/1187801)). - The events {{domxref("Element/mouseover_event", "mouseover")}}, {{domxref("Element/mouseout_event", "mouseout")}}, {{domxref("Element/mouseenter_event", "mouseenter")}}, {{domxref("Element/mouseleave_event", "mouseleave")}}, {{domxref("Element/pointermove_event", "pointermove")}}, {{domxref("Element/pointerover_event", "pointerover")}}, {{domxref("Element/pointerout_event", "pointerout")}}, {{domxref("Element/pointerenter_event", "pointerenter")}} and {{domxref("Element/pointerleave_event", "pointerleave")}} are now triggered for disabled form elements ([Firefox bug 218093](https://bugzil.la/218093)). -- The method {{domxref("Element.webkitMatchesSelector()")}} has been added ([Firefox bug 1216193](https://bugzil.la/1216193)) to improve interoperability. +- The method {{domxref("Element/matches", "Element.webkitMatchesSelector()")}} has been added ([Firefox bug 1216193](https://bugzil.la/1216193)) to improve interoperability. - To match the spec, the method {{domxref("Document.createAttribute()")}} now converts the input to lower case ([Firefox bug 1176313](https://bugzil.la/1176313)). - The non-standard `dialog` feature for {{domxref("Window.open()")}} is no longer available to Web content. It is still available to extensions and other code with chrome privileges ([Firefox bug 1095236](https://bugzil.la/1095236). @@ -134,8 +134,8 @@ Highlights: - The {{domxref('XMLHttpRequest')}} API has been disabled on Service Workers ([Firefox bug 931243](https://bugzil.la/931243)). - The interface {{domxref("FetchEvent")}} now extends {{domxref("ExtendableEvent")}}, giving it access to the {{domxref("ExtendableEvent.waitUntil()")}} method. ([Firefox bug 1214772](https://bugzil.la/1214772)). - Following a recent change in the specification, `FetchEvent.client` has been removed ([Firefox bug 1218135](https://bugzil.la/1218135)). -- To match the latest specification, the {{domxref("ServiceWorkerContainer.onreloadpage")}} has been removed ([Firefox bug 1218139](https://bugzil.la/1218139)). -- The event handlers {{domxref("ServiceWorkerGlobalScope.beforeevicted_event", "onbeforeevicted")}} and {{domxref("ServiceWorkerGlobalScope.evicted_event", "onevicted")}} have been removed as they weren't following the spec. They will be reintroduced in the future, but their removal will allow feature detection to work as expected ([Firefox bug 1218142](https://bugzil.la/1218142)). +- To match the latest specification, the `ServiceWorkerContainer.onreloadpage` has been removed ([Firefox bug 1218139](https://bugzil.la/1218139)). +- The event handlers `ServiceWorkerGlobalScope.onbeforeevicted` and `ServiceWorkerGlobalScope.onevicted` have been removed as they weren't following the spec. They will be reintroduced in the future, but their removal will allow feature detection to work as expected ([Firefox bug 1218142](https://bugzil.la/1218142)). - In the {{domxref("FetchEvent.FetchEvent", "FetchEvent()")}} constructor, if the `isReload` member is not present in the options dictionary, it now defaults to `false` ([Firefox bug 1216401](https://bugzil.la/1216401)). - The {{domxref("Client.frameType")}} property is now implemented on the right interface; it was on {{domxref("WindowClient")}} before ([Firefox bug 1218146](https://bugzil.la/1218146)). - When AppCache is used to provide offline support for a page, a warning message is now displayed in the console advising developers to use [Service workers](/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) instead ([Firefox bug 1204581](https://bugzil.la/1204581).) @@ -150,14 +150,14 @@ Highlights: - `mozRTCSessionDescription` is now {{domxref("RTCSessionDescription")}}. - The {{domxref("RTCDataChannel.bufferedAmountLowThreshold")}} property, as well as the {{domxref("RTCDataChannel.bufferedamountlow_event", "bufferedamountlow")}} event and its event handler, have been implemented ([Firefox bug 1178091](https://bugzil.la/1178091)). -- The attribute {{domxref("RTCPeerConnection.canTrickleIceCandidates")}} has been added, the non-standard method {{domxref("RTCPeerConnection.updateIce()")}} removed ([Firefox bug 1209744](https://bugzil.la/1209744)). +- The attribute {{domxref("RTCPeerConnection.canTrickleIceCandidates")}} has been added, the non-standard method `RTCPeerConnection.updateIce()`} removed ([Firefox bug 1209744](https://bugzil.la/1209744)). - The {{domxref("MediaStream")}} interface now supports the {{domxref("MediaStream.addTrack()")}} and {{domxref("MediaStream.removeTrack()")}} methods ([Firefox bug 1103188](https://bugzil.la/1103188)). - The constructor {{domxref("MediaStream.MediaStream", "MediaStream()")}} has been implemented ([Firefox bug 1070216](https://bugzil.la/1070216)). - Support for the non-standard constraint style option list for `RTCOfferOptions` has been removed. #### New APIs -- An experimental implementation of the Canvas API in Workers has landed: {{domxref("OfflineCanvas")}} and {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} are available behind the `gfx.offscreencanvas.enabled` preference, currently disabled by default ([Firefox bug 709490](https://bugzil.la/709490)). +- An experimental implementation of the Canvas API in Workers has landed: {{domxref("OffscreenCanvas")}} and {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} are available behind the `gfx.offscreencanvas.enabled` preference, currently disabled by default ([Firefox bug 709490](https://bugzil.la/709490)). - The Text2Speech API, part of Web Speech API, has now an OS X backend. But this is disabled by default ([Firefox bug 1003452](https://bugzil.la/1003452)). #### Miscellaneous diff --git a/files/en-us/mozilla/firefox/releases/45/index.md b/files/en-us/mozilla/firefox/releases/45/index.md index a67519260a75f7a..9125691281d8279 100644 --- a/files/en-us/mozilla/firefox/releases/45/index.md +++ b/files/en-us/mozilla/firefox/releases/45/index.md @@ -50,7 +50,7 @@ Highlights: ### JavaScript - ES2015 [Classes](/en-US/docs/Web/JavaScript/Reference/Classes) are now enabled by default ([Firefox bug 1197932](https://bugzil.la/1197932)). -- {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated and will now present a warning in the console ([Firefox bug 995610](https://bugzil.la/995610)). +- [Expression closures](/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#statements_2) are deprecated and will now present a warning in the console ([Firefox bug 995610](https://bugzil.la/995610)). - {{jsxref("String.prototype.replace")}} does not restore {{jsxref("Global_Objects/RegExp/n", "RegExp static properties", "", 1)}} after executing function parameter anymore ([Firefox bug 1226936](https://bugzil.la/1226936)). - {{jsxref("Math.random()")}} has been updated to the better XorShift128+ algorithm ([Firefox bug 322529](https://bugzil.la/322529)). @@ -93,7 +93,7 @@ _No change._ - [Web Speech Synthesis API](/en-US/docs/Web/API/Web_Speech_API) has been implemented on Firefox Desktop ([Firefox bug 1003439](https://bugzil.la/1003439)). - The {{domxref("Window/storage_event", "storage")}} event has been added. -- The interface {{domxref("ComputedTiming")}} have been added to our experimental implementation of [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) ([Firefox bug 1108055](https://bugzil.la/1108055)). +- The interface `ComputedTiming` have been added to our experimental implementation of [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) ([Firefox bug 1108055](https://bugzil.la/1108055)). - The {{domxref("Document.selectionchange_event", "Document.onselectionchange")}} event handler property has been added ([Firefox bug 1231193](https://bugzil.la/1231193)). - After removing a video track from a media stream by calling {{domxref("MediaStream.removeTrack()")}} you can now add another video track later using {{domxref("MediaStream.addTrack()")}} and have it played ([Firefox bug 1223696](https://bugzil.la/1223696)). diff --git a/files/en-us/mozilla/firefox/releases/48/index.md b/files/en-us/mozilla/firefox/releases/48/index.md index d328f28c4218d0d..77917c70312184b 100644 --- a/files/en-us/mozilla/firefox/releases/48/index.md +++ b/files/en-us/mozilla/firefox/releases/48/index.md @@ -115,7 +115,7 @@ page-type: firefox-release-notes - The [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) is now available in [Web workers](/en-US/docs/Web/API/Web_Workers_API) ([Firefox bug 842818](https://bugzil.la/842818)). - The {{domxref("CustomEvent")}} interface is now available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API) ([Firefox bug 1003432](https://bugzil.la/1003432)). - The `DOMApplicationsManager.getNotInstalled()` method has been removed ([Firefox bug 1255036](https://bugzil.la/1255036)). -- Several Firefox OS APIs that were erroneously exposed to the Web have now been hidden as they should have been — {{domxref("mozContact")}}, {{domxref("MozContactChangeEvent")}}, {{domxref("navigator.mozContacts")}}, {{domxref("MozPowerManager")}}, {{domxref("MozSettingsEvent")}} (see [Firefox bug 1043562](https://bugzil.la/1043562), [Firefox bug 1256414](https://bugzil.la/1256414), and [Firefox bug 1256046](https://bugzil.la/1256046)). +- Several Firefox OS APIs that were erroneously exposed to the Web have now been hidden as they should have been — `mozContact`, `MozContactChangeEvent`, `navigator.mozContacts`, `MozPowerManager`, `MozSettingsEvent` (see [Firefox bug 1043562](https://bugzil.la/1043562), [Firefox bug 1256414](https://bugzil.la/1256414), and [Firefox bug 1256046](https://bugzil.la/1256046)). - Support for UTF-16 has been removed from {{domxref("TextEncoder")}} ([Firefox bug 1257877](https://bugzil.la/1257877)). - {{domxref("RTCStatsReport")}} is now a true `maplike` interface: in addition to {{domxref("RTCStatsReport.forEach()", "forEach()")}}, {{domxref("RTCStatsReport.get()", "get()")}}, and {{domxref("RTCStatsReport.has()", "has()")}}, the methods {{domxref("RTCStatsReport.entries", "entries()")}}, {{domxref("RTCStatsReport.values", "values()")}}, {{domxref("RTCStatsReport.keys()", "keys()")}}, as well as the {{domxref("RTCStatsReport.size", "size")}} getter have been implemented ([Firefox bug 906986](https://bugzil.la/906986)). - The {{domxref("Request.cache")}} property has been added allowing to control the cache behavior ([Firefox bug 1120715](https://bugzil.la/1120715)). diff --git a/files/en-us/mozilla/firefox/releases/50/index.md b/files/en-us/mozilla/firefox/releases/50/index.md index 57a1988862c477f..786c7b67e41ea0c 100644 --- a/files/en-us/mozilla/firefox/releases/50/index.md +++ b/files/en-us/mozilla/firefox/releases/50/index.md @@ -140,7 +140,7 @@ Firefox 50 was released on November 15, 2016. This article lists key changes tha - {{domxref("HTMLInputElement.webkitdirectory")}} as well as the [`webkitdirectory`](/en-US/docs/Web/HTML/Element/input#webkitdirectory) attribute of the {{HTMLElement("input")}} element have been implemented; this lets you configure a file input to accept directories instead of files ([Firefox bug 1258489](https://bugzil.la/1258489)). - {{domxref("HTMLInputElement.webkitEntries")}} has been implemented; this returns an array of {{domxref("FileSystemEntry")}}-based objects representing the selected items. - - {{domxref("File.webkitRelativePath")}} has been implemented; this contains the path of the file relative to the root of the containing {{domxref("FileSystemDirectoryEntry")}} that was among the items in the list returned by {{domxref("HTMLInputElement.webkitGetEntries()")}}. + - {{domxref("File.webkitRelativePath")}} has been implemented; this contains the path of the file relative to the root of the containing {{domxref("FileSystemDirectoryEntry")}} that was among the items in the list returned by {{domxref("HTMLInputElement.webkitEntries")}}. - See [File and Directory Entries API support in Firefox](/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support) for details about what we do and do not support in this API. - These APIs are now enabled by default; some were previously available but only behind a preference ([Firefox bug 1288683](https://bugzil.la/1288683)). diff --git a/files/en-us/mozilla/firefox/releases/6/index.md b/files/en-us/mozilla/firefox/releases/6/index.md index 39e5e71d394a769..d403ecdb5041d2d 100644 --- a/files/en-us/mozilla/firefox/releases/6/index.md +++ b/files/en-us/mozilla/firefox/releases/6/index.md @@ -18,7 +18,7 @@ Firefox 6, based on Gecko 6.0, was released on August 16, 2011. This article pro - {{ HTMLElement("form") }} elements' text {{ HTMLElement("input") }} fields no longer support the XUL [`maxwidth`](/en-US/docs/XUL/Property/maxwidth) property; this was never intentional, and is in violation of the HTML specification. You should instead use the [`size`](/en-US/docs/Web/HTML/Element/input#size) attribute to set the maximum width of input fields. - The {{ HTMLElement("canvas") }} {{ domxref("CanvasRenderingContext2d") }} properties `fillStyle` and `strokeStyle` used to ignore garbage included after a valid color definition; now this is correctly treated as an error. For example, "red blue" as a color used to be treated as "red", when it should have been ignored. - The width and height of {{ HTMLElement("canvas") }} elements can now properly be set to 0px; previously, these were getting arbitrarily set to 300px when you tried to do that. -- Support for the HTML [custom data attributes](/en-US/docs/Web/HTML/Global_attributes/data-*) (`data-*`) has been added. The DOM {{ domxref("element.dataset") }} property allows to access them. +- Support for the HTML [custom data attributes](/en-US/docs/Web/HTML/Global_attributes/data-*) (`data-*`) has been added. The DOM {{ domxref("HTMLElement/dataset", "dataset") }} property allows to access them. - When a {{ HTMLElement("textarea") }} element receives focus, the text insertion point is now placed, by default, at the beginning of the text rather than at the end. This makes Firefox's behavior consistent with other browsers. ### CSS @@ -39,7 +39,7 @@ Firefox 6, based on Gecko 6.0, was released on August 16, 2011. This article pro #### Other changes - The `@-moz-document` property has a new `regexp()` function, which lets you match the document's URL to a [regular expression](/en-US/docs/Web/JavaScript/Guide/Regular_expressions). -- The {{ cssxref("azimuth") }} CSS property is no longer supported, as we have removed what little code we had for the `aural` media group. It was never significantly implemented, so it made more sense to remove the crufty implementation for the time being rather than try to patch it up. +- The `azimuth` CSS property is no longer supported, as we have removed what little code we had for the `aural` media group. It was never significantly implemented, so it made more sense to remove the crufty implementation for the time being rather than try to patch it up. - In the past, the {{ cssxref(":hover") }} pseudoclass was not applied to class selectors when in quirks mode; for example, `.some-class:hover` did not work. This quirk has been removed. - The {{ cssxref(":indeterminate") }} pseudo-class can be applied to {{ HTMLElement("progress") }} elements. This is non-standard, but we hope it will be adopted by other browsers, because it will be useful. - The `-moz-win-exclude-glass` value has been added to the `-moz-appearance` CSS property in order to exclude opaque regions in Aero Glass glaze effects on Windows systems. @@ -72,7 +72,7 @@ Firefox 6, based on Gecko 6.0, was released on August 16, 2011. This article pro - DOM views, which we never documented, have been removed. This was a bit of implementation detail that was unnecessarily complicating things, so we got rid of it. If you notice this change, you're probably doing something wrong. - The `EventTarget` function [`addEventListener()`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMEventTarget)'s `useCapture` parameter is now optional, as it is in WebKit (and as per the latest version of the specification). - The `mozResponseArrayBuffer` property of the [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest) object has been replaced with the `responseType` and `response` properties. -- The {{ domxref("element.dataset") }} property has been added to the [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) interface allowing access to the [`data-*` global attributes](/en-US/docs/Web/HTML/Global_attributes/data-*) of an element. +- The {{ domxref("HTMLElement/dataset", "dataset") }} property has been added to the [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) interface allowing access to the [`data-*` global attributes](/en-US/docs/Web/HTML/Global_attributes/data-*) of an element. - The {{ domxref("CustomEvent") }} interface has been implemented. (see [Firefox bug 427537](https://bugzil.la/427537)) - For security reasons, `data:` and `javascript:` URLs no longer inherit the security context of the current page when the user enters them in the location bar; instead, a new, empty, security context is created. This means that script loaded by entering `javascript:` URLs in the location bar no longer has access to DOM methods and the like, for example. These URLs continue to work as before when used by script, however. diff --git a/files/en-us/mozilla/firefox/releases/69/index.md b/files/en-us/mozilla/firefox/releases/69/index.md index ff62c309f20365a..9609ae81a517414 100644 --- a/files/en-us/mozilla/firefox/releases/69/index.md +++ b/files/en-us/mozilla/firefox/releases/69/index.md @@ -91,9 +91,9 @@ This article provides information about the changes in Firefox 69 that will affe - The {{domxref("DOMMatrix")}}, {{domxref("DOMPoint")}}, and related objects are now supported in workers ([Firefox bug 1420580](https://bugzil.la/1420580)). - The `pageX` and `pageY` properties have been moved from {{domxref("UIEvent")}} to {{domxref("MouseEvent")}}, for better spec compliance ([Firefox bug 1178763](https://bugzil.la/1178763)). These properties are no longer exposed to the {{domxref("CompositionEvent")}}, {{domxref("FocusEvent")}}, {{domxref("InputEvent")}}, {{domxref("KeyboardEvent")}}, and {{domxref("TouchEvent")}} interfaces, which all inherit from `UIEvent`. - The {{domxref("Blob.text()")}}, {{domxref("Blob.arrayBuffer()")}}, and {{domxref("Blob.stream()")}} methods are now implemented ([Firefox bug 1557121](https://bugzil.la/1557121)). -- {{domxref("DOMMatrix.fromMatrix()")}} has been implemented ([Firefox bug 1560462](https://bugzil.la/1560462)). -- We now support the six-parameter version of the {{domxref("DOMMatrix.scale()")}} method ([Firefox bug 1397945](https://bugzil.la/1397945)). -- The arguments for {{domxref("DOMMatrix.translate()")}}, {{domxref("DOMMatrix.skewX()")}}, and {{domxref("DOMMatrix.skewY()")}} are now all optional, as per spec ([Firefox bug 1397949](https://bugzil.la/1397949)). +- {{domxref("DOMMatrixReadOnly.fromMatrix()")}} has been implemented ([Firefox bug 1560462](https://bugzil.la/1560462)). +- We now support the six-parameter version of the {{domxref("DOMMatrixReadOnly.scale()")}} method ([Firefox bug 1397945](https://bugzil.la/1397945)). +- The arguments for {{domxref("DOMMatrixReadOnly.translate()")}}, {{domxref("DOMMatrixReadOnly.skewX()")}}, and {{domxref("DOMMatrixReadOnly.skewY()")}} are now all optional, as per spec ([Firefox bug 1397949](https://bugzil.la/1397949)). - The {{domxref("Navigator.userAgent")}}, {{domxref("Navigator.platform")}}, and {{domxref("Navigator.oscpu")}} properties no longer reveal whether a user is running 32-bit Firefox on a 64-bit OS ([Firefox bug 1559747](https://bugzil.la/1559747)). They now say `Linux x86_64` instead of `Linux i686 on x86_64`, and `Win64` instead of `WOW64`. - The remaining methods of {{domxref("HTMLDocument")}} have been moved to {{domxref("Document")}}. This should have no appreciable impact on your work in most cases. In particular, the {{domxref("document.close", "close()")}}, {{domxref("document.open", "open()")}}, and {{domxref("document.write", "write()")}} methods have been moved. So have the various editor related methods, including {{domxref("document.execCommand", "execCommand()")}} as well as various properties ([Firefox bug 1549560](https://bugzil.la/1549560)). - We have implemented {{domxref("AbstractRange")}} and {{domxref("StaticRange")}} ([Firefox bug 1444847](https://bugzil.la/1444847)). @@ -107,7 +107,7 @@ This article provides information about the changes in Firefox 69 that will affe #### Removals -- The {{domxref("DOMMatrix.scaleNonUniformSelf()")}} method has been removed ([Firefox bug 1560119](https://bugzil.la/1560119)). +- The `DOMMatrix.scaleNonUniformSelf()` method has been removed ([Firefox bug 1560119](https://bugzil.la/1560119)). ### WebDriver conformance (Marionette) diff --git a/files/en-us/mozilla/firefox/releases/7/updating_extensions/index.md b/files/en-us/mozilla/firefox/releases/7/updating_extensions/index.md index c22b6cd360383e8..55e880aee7af07a 100644 --- a/files/en-us/mozilla/firefox/releases/7/updating_extensions/index.md +++ b/files/en-us/mozilla/firefox/releases/7/updating_extensions/index.md @@ -36,7 +36,7 @@ A few interfaces have methods that have been changed: - `nsINavHistoryObserver` and `nsINavBookmarkObserver` - : These have been changed to support Firefox Sync better by adding a new GUID parameter to several of their methods. JavaScript-based code shouldn't require any changes, since this is just the addition of a new, optional, parameter. However, binary components will need to be updated to take the new parameter into account. - `nsIDOMFile` - - : A number of non-standard methods have been removed from this interface. This affects the {{ domxref("File") }} object's {{ domxref("File.getDataAsUrl()") }} and {{ domxref("File.getAsBinary()") }} methods. However, this functionality can now be found in the standard {{ domxref("FileReader") }} object. + - : A number of non-standard methods have been removed from this interface. This affects the {{ domxref("File") }} object's `File.getDataAsUrl()` and `File.getAsBinary()` methods. However, this functionality can now be found in the standard {{ domxref("FileReader") }} object. ## Other changes of note diff --git a/files/en-us/mozilla/firefox/releases/70/index.md b/files/en-us/mozilla/firefox/releases/70/index.md index 41fbd67a718f0e4..5fb3e6e002732d9 100644 --- a/files/en-us/mozilla/firefox/releases/70/index.md +++ b/files/en-us/mozilla/firefox/releases/70/index.md @@ -83,7 +83,7 @@ This article provides information about the changes in Firefox 70 that will affe - The {{domxref("History.back","back()")}}, {{domxref("History.forward","forward()")}}, and {{domxref("History.go","go()")}} methods are now asynchronous. Add a listener to the {{domxref("Window/popstate_event", "popstate")}} event to get notification that navigation has completed [Firefox bug 1563587](https://bugzil.la/1563587). - We've added support {{DOMxRef("DOMMatrix")}}, {{DOMxRef("DOMPoint")}}, etc. in web workers ([Firefox bug 1420580](https://bugzil.la/1420580)). -- A few more members have been moved from {{domxref("HTMLDocument")}} to {{domxref("Document")}}, including {{domxref("Document.all")}}, {{domxref("Document.clear")}}, {{domxref("Document.captureEvents")}}, and {{domxref("Document.clearEvents")}} ([Firefox bug 1558570](https://bugzil.la/1558570), [Firefox bug 1558571](https://bugzil.la/1558571)). +- A few more members have been moved from {{domxref("HTMLDocument")}} to {{domxref("Document")}}, including {{domxref("Document.all")}}, {{domxref("Document.clear")}}, {{domxref("Document.captureEvents")}}, and {{domxref("Document.clear")}} ([Firefox bug 1558570](https://bugzil.la/1558570), [Firefox bug 1558571](https://bugzil.la/1558571)). - [Notification](/en-US/docs/Web/API/Notifications_API) permission can no longer be requested from inside a cross-origin {{htmlelement("iframe")}} ([Firefox bug 1560741](https://bugzil.la/1560741)). #### Media, Web Audio, and WebRTC diff --git a/files/en-us/mozilla/firefox/releases/8/updating_add-ons/index.md b/files/en-us/mozilla/firefox/releases/8/updating_add-ons/index.md index 120253b4c431674..6a0218ae8b7b9e2 100644 --- a/files/en-us/mozilla/firefox/releases/8/updating_add-ons/index.md +++ b/files/en-us/mozilla/firefox/releases/8/updating_add-ons/index.md @@ -48,7 +48,7 @@ In the past, {{ domxref("Document.getSelection()") }} was returning a stringifie When the DOM File API was added, a new global called {{ domxref("File") }} was added; this can conflict with objects in your scripts. If you have any globals called `File`, you should rename them. -Similarly, a new global, {{ domxref("ChromeWorker") }}, was introduced to support allowing Workers to be used from chrome code. If by some chance you have any globals with this name, you should rename them. +Similarly, a new global, `ChromeWorker`, was introduced to support allowing Workers to be used from chrome code. If by some chance you have any globals with this name, you should rename them. ## Security changes diff --git a/files/en-us/web/api/cssprimitivevalue/index.md b/files/en-us/web/api/cssprimitivevalue/index.md index 6a38be81f2a97ef..91f6a5d2b9083bd 100644 --- a/files/en-us/web/api/cssprimitivevalue/index.md +++ b/files/en-us/web/api/cssprimitivevalue/index.md @@ -61,7 +61,7 @@ _Inherits properties from its parent, {{DOMxRef("CSSValue")}}_. | `CSS_S` | The value is a {{CSSxRef("<time>")}} in seconds. The value can be obtained by using the `getFloatValue()` method. | | `CSS_STRING` | The value is a {{CSSxRef("<string>")}}. The value can be obtained by using the `getStringValue()` method. | | `CSS_UNKNOWN` | The value is not a recognized CSS2 value. The value can only be obtained by using the {{DOMxRef("CSSValue.cssText", "cssText")}} attribute. | - | `CSS_URI` | The value is a {{CSSxRef("url", "url()")}}. The value can be obtained by using the `getStringValue()` method. | + | `CSS_URI` | The value is a {{cssxref("url_value", "<url>")}}. The value can be obtained by using the `getStringValue()` method. | ## Instance methods diff --git a/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md b/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md index 9f43ef695e93186..4e3443709f2e116 100644 --- a/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md +++ b/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md @@ -222,7 +222,7 @@ An `unsigned short` representing the type of the value. Possible values are: CSS_URI - The value is a {{cssxref("url", "url()")}}. The value can be obtained + The value is a {{cssxref("url_value", "<url>")}}. The value can be obtained by using the getStringValue() method. diff --git a/files/en-us/web/api/cssprimitivevalue/setstringvalue/index.md b/files/en-us/web/api/cssprimitivevalue/setstringvalue/index.md index 5ca3f4aac66cd27..2a2c0e270494ba2 100644 --- a/files/en-us/web/api/cssprimitivevalue/setstringvalue/index.md +++ b/files/en-us/web/api/cssprimitivevalue/setstringvalue/index.md @@ -42,7 +42,7 @@ setStringValue(stringType, stringValue) | `CSS_ATTR` | The value is an {{cssxref("attr", "attr()")}} function. | | `CSS_IDENT` | The value is an identifier. | | `CSS_STRING` | The value is a {{cssxref("<string>")}}. | - | `CSS_URI` | The value is a {{cssxref("url", "url()")}}. | + | `CSS_URI` | The value is a {{cssxref("url_value", "<url>")}}. | - `stringValue` - : A string representing the new string value. diff --git a/files/en-us/web/api/dommatrix/index.md b/files/en-us/web/api/dommatrix/index.md index 24780fb6fa05a46..1a3f6433d6d6988 100644 --- a/files/en-us/web/api/dommatrix/index.md +++ b/files/en-us/web/api/dommatrix/index.md @@ -55,8 +55,6 @@ _This interface includes the following methods, as well as the methods it inheri - : Modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `B⋅A`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. Returns itself. - {{domxref("DOMMatrix.translateSelf()")}} - : Modifies the matrix by applying the specified vector. The default vector is `[0, 0, 0]`. Returns itself. -- {{domxref("DOMMatrix.scaleNonUniformSelf()")}} {{deprecated_inline}} - - : Modifies the matrix by applying the specified scaling on the X, Y, and Z axes, centered at the given origin. By default, the Y and Z axes' scaling factors are both `1`, but the scaling factor for X must be specified. The default origin is `(0, 0, 0)`. Returns itself. - {{domxref("DOMMatrix.scaleSelf()")}} - : Modifies the matrix by applying the specified scaling factors, with the center located at the specified origin. Also returns itself. By default, the scaling factor is `1` for all three axes, and the origin is `(0, 0, 0)`. Returns itself. - {{domxref("DOMMatrix.scale3dSelf()")}} diff --git a/files/en-us/web/api/html_dom_api/index.md b/files/en-us/web/api/html_dom_api/index.md index 2d115f29ac08312..d89c2a03284e1d9 100644 --- a/files/en-us/web/api/html_dom_api/index.md +++ b/files/en-us/web/api/html_dom_api/index.md @@ -171,7 +171,6 @@ These interfaces offer access to the browser window and document that contain th #### Obsolete web app and browser integration interfaces -- {{DOMxRef("ApplicationCache")}} {{deprecated_inline}} - {{DOMxRef("Plugin")}} {{deprecated_inline}} - {{DOMxRef("PluginArray")}} {{deprecated_inline}} diff --git a/files/en-us/web/api/htmlselectelement/size/index.md b/files/en-us/web/api/htmlselectelement/size/index.md index 35f30af6131c458..5fb26d698cfdf48 100644 --- a/files/en-us/web/api/htmlselectelement/size/index.md +++ b/files/en-us/web/api/htmlselectelement/size/index.md @@ -35,6 +35,6 @@ console.log(selectElement.size); ## See also - {{HTMLElement("select")}} -- {{HTMLElement("options")}} +- {{HTMLElement("option")}} - {{DOMXref("HTMLSelectElement.selectedOptions")}} - {{DOMXref("HTMLSelectElement.length")}} diff --git a/files/en-us/web/api/pluginarray/index.md b/files/en-us/web/api/pluginarray/index.md index e89ce352eccb178..d8e485665208fa6 100644 --- a/files/en-us/web/api/pluginarray/index.md +++ b/files/en-us/web/api/pluginarray/index.md @@ -9,7 +9,7 @@ browser-compat: api.PluginArray {{APIRef("HTML DOM")}}{{deprecated_header}} -The `PluginArray` interface is used to store a list of {{DOMxRef("Plugin")}} objects describing the available [plugins](/en-US/docs/Mozilla/Add-ons/Plugins); it's returned by the {{DOMxRef("Navigator.plugins", "navigator.plugins")}} property. The `PluginArray` is not a JavaScript array, but has the `length` property and supports accessing individual items using bracket notation (`plugins[2]`), as well as via `item(index)` and `namedItem("name")` methods. +The `PluginArray` interface is used to store a list of {{DOMxRef("Plugin")}} objects; it's returned by the {{DOMxRef("Navigator.plugins", "navigator.plugins")}} property. The `PluginArray` is not a JavaScript array, but has the `length` property and supports accessing individual items using bracket notation (`plugins[2]`), as well as via `item(index)` and `namedItem("name")` methods. > [!NOTE] > Own properties of `PluginArray` objects are no longer enumerable in the latest browser versions. diff --git a/files/en-us/web/api/url_api/index.md b/files/en-us/web/api/url_api/index.md index 1bb15e2047d2426..c1e855fbe45f6a4 100644 --- a/files/en-us/web/api/url_api/index.md +++ b/files/en-us/web/api/url_api/index.md @@ -106,6 +106,6 @@ A working version of this example can be [found on Glitch](https://url-api.glitc ## See also - {{domxref("Fetch API", "", "", "nocode")}} -- CSS {{cssxref("<url>")}} type +- CSS {{cssxref("url_value", "<url>")}} type - {{jsxref("encodeURI", "encodeURI()")}} - {{jsxref("encodeURIComponent", "encodeURIComponent()")}} diff --git a/files/en-us/web/api/webgl2renderingcontext/unpackcolorspace/index.md b/files/en-us/web/api/webgl2renderingcontext/unpackcolorspace/index.md index 8c355c0b6903edf..c63f492fdabad4e 100644 --- a/files/en-us/web/api/webgl2renderingcontext/unpackcolorspace/index.md +++ b/files/en-us/web/api/webgl2renderingcontext/unpackcolorspace/index.md @@ -20,7 +20,7 @@ Texture image sources can be the following: - [`OffscreenCanvas`](/en-US/docs/Web/API/OffscreenCanvas) - [`VideoFrame`](/en-US/docs/Web/API/VideoFrame) -Textures are imported using the [`WebGL2RenderingContext.texImage2D()`](/en-US/docs/Web/API/WebGL2RenderingContext/texImage2D) and [`WebGL2RenderingContext.texSubImage2D()`](/en-US/docs/Web/API/WebGL2RenderingContext/texSubImage2D) methods and conversion to the specified `unpackColorSpace` color space happens during import. +Textures are imported using the [`WebGLRenderingContext.texImage2D()`](/en-US/docs/Web/API/WebGLRenderingContext/texImage2D) and [`WebGLRenderingContext.texSubImage2D()`](/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D) methods and conversion to the specified `unpackColorSpace` color space happens during import. Note that this doesn't apply to [`HTMLImageElement`](/en-US/docs/Web/API/HTMLImageElement) when the `UNPACK_COLORSPACE_CONVERSION_WEBGL` pixel storage parameter is set to `NONE`. diff --git a/files/en-us/web/css/-moz-image-rect/index.md b/files/en-us/web/css/-moz-image-rect/index.md index 79f672b54403367..0b1f8f49bd1f1f9 100644 --- a/files/en-us/web/css/-moz-image-rect/index.md +++ b/files/en-us/web/css/-moz-image-rect/index.md @@ -15,12 +15,12 @@ The **`-moz-image-rect`** value for [CSS](/en-US/docs/Web/CSS) {{CSSxRef("backgr ## Syntax ```css --moz-image-rect({{CSSxRef("url", "url()")}}, top, right, bottom, left); +-moz-image-rect(url("my-url"), top, right, bottom, left); ``` ### Values -- {{CSSxRef("url", "url()")}} +- {{CSSxRef("url_value", "<url>")}} - : The URI of the image from which to take the sub-image. - `top` - : The top edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image. diff --git a/files/en-us/web/css/@counter-style/symbols/index.md b/files/en-us/web/css/@counter-style/symbols/index.md index 9a70ec488accc25..c10c925e876af5d 100644 --- a/files/en-us/web/css/@counter-style/symbols/index.md +++ b/files/en-us/web/css/@counter-style/symbols/index.md @@ -24,7 +24,7 @@ symbols: indic-numbers; The `symbols` descriptor is specified as a list of one or more space-separated `` values. - `` - - : Specifies the symbol to use within the counter system. Each symbol in the list can be either a {{cssxref("<string>")}}, an {{cssxref("<image>")}}, or a {{cssxref("<custom-ident>")}}. The `` value can, in turn, be specified as a {{cssxref("<url>")}} or {{cssxref("<gradient>")}}. + - : Specifies the symbol to use within the counter system. Each symbol in the list can be either a {{cssxref("<string>")}}, an {{cssxref("<image>")}}, or a {{cssxref("<custom-ident>")}}. The `` value can, in turn, be specified as a {{cssxref("url_value", "<url>")}} or {{cssxref("<gradient>")}}. > [!NOTE] > When using an {{glossary("identifier")}} for a symbol, note that {{glossary("ASCII")}} non-letters such as `*`, `"`, and `\` are not considered identifiers. They must be either quoted as a string or escaped. diff --git a/files/en-us/web/css/@font-face/src/index.md b/files/en-us/web/css/@font-face/src/index.md index 31a4d82593471ec..d72e04b438168aa 100644 --- a/files/en-us/web/css/@font-face/src/index.md +++ b/files/en-us/web/css/@font-face/src/index.md @@ -47,7 +47,7 @@ src: - `url()` - - : Specifies an external reference consisting of a {{cssxref("<url>")}}, followed by optional hints using the `format()` and `tech()` component values that specify the format and font technology of the resource referenced by the URL. The `format()` and `tech()` components are a comma-separated list of strings of known [font formats](#font_formats) and technologies. If a user agent doesn't support the font technology or formats, it skips downloading the font resource. If no format or technology hints are supplied, the font resource is always downloaded. + - : Specifies an external reference consisting of a {{cssxref("url_value", "<url>")}}, followed by optional hints using the `format()` and `tech()` component values that specify the format and font technology of the resource referenced by the URL. The `format()` and `tech()` components are a comma-separated list of strings of known [font formats](#font_formats) and technologies. If a user agent doesn't support the font technology or formats, it skips downloading the font resource. If no format or technology hints are supplied, the font resource is always downloaded. - `format()` - : An optional declaration that follows the `url()` value that provides a hint for the user agent on the font format. diff --git a/files/en-us/web/css/@view-transition/index.md b/files/en-us/web/css/@view-transition/index.md index e35324dbcc627fb..fa2ab396a530a7c 100644 --- a/files/en-us/web/css/@view-transition/index.md +++ b/files/en-us/web/css/@view-transition/index.md @@ -104,4 +104,4 @@ See this [transitions multi-page app](https://mdn.github.io/dom-examples/view-tr - {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}} - [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) - [CSS at-rules](/en-US/docs/Web/CSS/At-rule) -- [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule_functions) +- [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions) diff --git a/files/en-us/web/css/marker-end/index.md b/files/en-us/web/css/marker-end/index.md index e196729aa110216..a035fba0eb33aad 100644 --- a/files/en-us/web/css/marker-end/index.md +++ b/files/en-us/web/css/marker-end/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.marker-end {{CSSRef}} -The **`marker-end`** [CSS](/en-US/docs/Web/CSS) property points to a marker that will be drawn on the last vertex of the element's path; that is, at its ending vertex. The marker must have been defined using an SVG {{SVGElement('marker')}} element, and can only be referenced with a {{cssxref('url()')}} value. The value of the CSS property overrides any values of the `marker-end` attribute in the SVG. +The **`marker-end`** [CSS](/en-US/docs/Web/CSS) property points to a marker that will be drawn on the last vertex of the element's path; that is, at its ending vertex. The marker must have been defined using an SVG {{SVGElement('marker')}} element, and can only be referenced with a {cssxref("url_value", "<url>")}} value. The value of the CSS property overrides any values of the `marker-end` attribute in the SVG. For many marker-supporting shapes, the first and last vertices are the same point: for example, the top left corner of a {{SVGElement('rect')}}. In such shapes, if both the first and last markers are defined, two markers will be drawn at that point, though they may not face the same direction. diff --git a/files/en-us/web/css/marker-mid/index.md b/files/en-us/web/css/marker-mid/index.md index 23449b48d14f813..ea6208d8b68c970 100644 --- a/files/en-us/web/css/marker-mid/index.md +++ b/files/en-us/web/css/marker-mid/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.marker-mid {{CSSRef}} -The **`marker-mid`** [CSS](/en-US/docs/Web/CSS) property points to a marker that will be drawn on the middle vertices of the element's path; that is, at each of its vertices between the start and end vertices. The marker must have been defined using an SVG {{SVGElement('marker')}} element, and can only be referenced with a {{cssxref('url()')}} value. The value of the CSS property overrides any values of the `marker-mid` attribute in the SVG. +The **`marker-mid`** [CSS](/en-US/docs/Web/CSS) property points to a marker that will be drawn on the middle vertices of the element's path; that is, at each of its vertices between the start and end vertices. The marker must have been defined using an SVG {{SVGElement('marker')}} element, and can only be referenced with a {cssxref("url_value", "<url>")}} value. The value of the CSS property overrides any values of the `marker-mid` attribute in the SVG. The direction each marker points is defined as the direction halfway between the direction at the end of the preceding path segment and the direction of the start of the following path segment. This can be thought of as the cross product of the vectors defined by the two path directions. diff --git a/files/en-us/web/css/marker-start/index.md b/files/en-us/web/css/marker-start/index.md index a4739cfbf7d8463..b10642888a98760 100644 --- a/files/en-us/web/css/marker-start/index.md +++ b/files/en-us/web/css/marker-start/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.marker-start {{CSSRef}} -The **`marker-start`** [CSS](/en-US/docs/Web/CSS) property points to a marker that will be drawn on the first vertex of the element's path; that is, at its starting vertex. The marker must have been defined using an SVG {{SVGElement('marker')}} element, and can only be referenced with a {{cssxref('url()')}} value. The value of the CSS property overrides any values of the `marker-start` attribute in the SVG. +The **`marker-start`** [CSS](/en-US/docs/Web/CSS) property points to a marker that will be drawn on the first vertex of the element's path; that is, at its starting vertex. The marker must have been defined using an SVG {{SVGElement('marker')}} element, and can only be referenced with a {{cssxref("url_value", "<url>")}} value. The value of the CSS property overrides any values of the `marker-start` attribute in the SVG. For many marker-supporting shapes, the first and last vertices are in the same place: for example, the top left corner of a {{SVGElement('rect')}}. In such shapes, if both the first and last markers are defined, two markers will be drawn at that point, though they may not point in the same direction. diff --git a/files/en-us/web/css/marker/index.md b/files/en-us/web/css/marker/index.md index 742aa9492b3d092..c87fc3091207f2c 100644 --- a/files/en-us/web/css/marker/index.md +++ b/files/en-us/web/css/marker/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.marker {{CSSRef}} -The **`marker`** [CSS](/en-US/docs/Web/CSS) property points to a marker that will be drawn on the first, middle, and last vertices of the element's path; that is, at all of its vertices. The marker must have been defined using an SVG {{SVGElement('marker')}} element, and can only be referenced with a {{cssxref('url()')}} value. The value of the CSS property overrides any values of the `marker-start`, `marker`, and `marker-end` attributes in the SVG. +The **`marker`** [CSS](/en-US/docs/Web/CSS) property points to a marker that will be drawn on the first, middle, and last vertices of the element's path; that is, at all of its vertices. The marker must have been defined using an SVG {{SVGElement('marker')}} element, and can only be referenced with a {cssxref("url_value", "<url>")}} value. The value of the CSS property overrides any values of the `marker-start`, `marker`, and `marker-end` attributes in the SVG. For many marker-supporting shapes, the first and last vertices are in the same place: for example, the top left corner of a {{SVGElement('rect')}}. In such shapes, if both the first and last markers are defined, two markers will be drawn at that point, though they may not point in the same direction. diff --git a/files/en-us/web/html/element/audio/index.md b/files/en-us/web/html/element/audio/index.md index 2c2fc71cd144150..db5abf4a05b5b6e 100644 --- a/files/en-us/web/html/element/audio/index.md +++ b/files/en-us/web/html/element/audio/index.md @@ -255,7 +255,7 @@ Browsers don't all support the same [file types](/en-US/docs/Web/Media/Formats/C The audio source can be set to any valid [URL](/en-US/docs/Web/URI), including HTTP(S) URLs and [Data URLs](/en-US/docs/Web/URI/Schemes/data). When using HTTP(S) URLs, be aware that the browser's caching behavior will affect how often the file is requested from the server. Data URLs embed the audio data directly in the HTML, which can be useful for small audio files but isn't recommended for larger files as it increases the HTML file size. -You can also use the [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) to directly generate and manipulate audio streams from JavaScript code rather than streaming pre-existing audio files. You can set the [`srcObject`](/en-US/docs/Web/API/HTMLMediaElement/srcObject) in JavaScript to a {{jsxref("MediaStream")}} object. This is commonly used for live audio streams or real-time audio processing. +You can also use the [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) to directly generate and manipulate audio streams from JavaScript code rather than streaming pre-existing audio files. You can set the [`srcObject`](/en-US/docs/Web/API/HTMLMediaElement/srcObject) in JavaScript to a {{domxref("MediaStream")}} object. This is commonly used for live audio streams or real-time audio processing. ```js const audioElement = document.querySelector("audio"); diff --git a/files/en-us/web/security/mixed_content/index.md b/files/en-us/web/security/mixed_content/index.md index 76d39d2430701a4..91df10aa7eafac4 100644 --- a/files/en-us/web/security/mixed_content/index.md +++ b/files/en-us/web/security/mixed_content/index.md @@ -67,7 +67,7 @@ This includes HTTP requests resulting from the following elements (this list is - {{HTMLElement("iframe")}} where origin is set via `src` attribute - {{domxref("Window/fetch", "fetch()")}} requests - {{domxref("XMLHttpRequest")}} requests -- All cases in CSS where a {{cssxref("url", "url()")}} value is used ({{cssxref("@font-face")}}, {{cssxref("cursor")}}, {{cssxref("background-image")}}, and so forth). +- All cases in CSS where a {{CSSXref("url_value", "<url>")}} value is used ({{cssxref("@font-face")}}, {{cssxref("cursor")}}, {{cssxref("background-image")}}, and so forth). - {{HTMLElement("object")}} (`data` attribute) - {{domxref("Navigator.sendBeacon")}} (`url` attribute) - {{HTMLElement("img")}} where origin is set via `srcset` or ``. diff --git a/files/en-us/web/svg/attribute/clip-path/index.md b/files/en-us/web/svg/attribute/clip-path/index.md index 58fe9181cb822d8..38f2e8d069b506c 100644 --- a/files/en-us/web/svg/attribute/clip-path/index.md +++ b/files/en-us/web/svg/attribute/clip-path/index.md @@ -101,7 +101,7 @@ svg { Value - {{cssxref('url')}} | [ {{cssxref('basic-shape')}} || + {{CSSXref("url_value", "<url>")}} | [ {{cssxref('basic-shape')}} || <geometry-box> ] | none diff --git a/files/en-us/web/uri/schemes/data/index.md b/files/en-us/web/uri/schemes/data/index.md index 8567bd5708e92aa..9a805a70043dcd3 100644 --- a/files/en-us/web/uri/schemes/data/index.md +++ b/files/en-us/web/uri/schemes/data/index.md @@ -119,5 +119,5 @@ lots of text… - {{Glossary("Percent-encoding")}} - {{domxref("WorkerGlobalScope.atob()", "atob()")}} - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- CSS {{CSSXref("url", "url()")}} +- CSS {{CSSXref("url_value", "<url>")}} - {{Glossary("URI")}} From 6eb6ba6b7f694c0aef5db2bfc7a8e6c0d11ef2cc Mon Sep 17 00:00:00 2001 From: Andi Pieper Date: Tue, 5 Nov 2024 13:55:18 +0100 Subject: [PATCH 04/70] prevent auto-linking (#36660) --- files/en-us/web/http/headers/www-authenticate/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/headers/www-authenticate/index.md b/files/en-us/web/http/headers/www-authenticate/index.md index 49b4ee256c1828a..a6444cd2d67652c 100644 --- a/files/en-us/web/http/headers/www-authenticate/index.md +++ b/files/en-us/web/http/headers/www-authenticate/index.md @@ -238,7 +238,7 @@ A server that supports HOBA authentication might have a `WWW-Authenticate` respo WWW-Authenticate: HOBA max-age="180", challenge="16:MTEyMzEyMzEyMw==1:028:https://www.example.com:80800:3:MTI48:NjgxNDdjOTctNDYxYi00MzEwLWJlOWItNGM3MDcyMzdhYjUz" ``` -The to-be-signed blob challenge is made from these parts: www.example.com using port 8080, the nonce is '1123123123', the algorithm for signing is RSA-SHA256, the key identifier is 123, and finally the challenge is '68147c97-461b-4310-be9b-4c707237ab53'. +The to-be-signed blob challenge is made from these parts: `www.example.com` using port 8080, the nonce is '1123123123', the algorithm for signing is RSA-SHA256, the key identifier is 123, and finally the challenge is '68147c97-461b-4310-be9b-4c707237ab53'. A client would receive this header, extract the challenge, sign it with their private key that corresponds to key identifier 123 in our example using RSA-SHA256, and then send the result in the `Authorization` header as a dot-separated key id, challenge, nonce, and signature. From 13f9fca81ddaf3a82b28c19b50afca7b9a46066f Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Tue, 5 Nov 2024 13:09:52 +0000 Subject: [PATCH 05/70] =?UTF-8?q?Add=20HTMLImageElement=20and=20ImageData?= =?UTF-8?q?=20objects=20as=20possible=20sources=20for=20co=E2=80=A6=20(#36?= =?UTF-8?q?635)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../en-us/web/api/gpuqueue/copyexternalimagetotexture/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/gpuqueue/copyexternalimagetotexture/index.md b/files/en-us/web/api/gpuqueue/copyexternalimagetotexture/index.md index 23b907396ad075a..f9bc92f5dbf7dd9 100644 --- a/files/en-us/web/api/gpuqueue/copyexternalimagetotexture/index.md +++ b/files/en-us/web/api/gpuqueue/copyexternalimagetotexture/index.md @@ -28,7 +28,7 @@ copyExternalImageToTexture(source, destination, copySize) - : An object representing the source to write to the destination, and its origin. This can take the following properties: - `source` - - : An object providing the source of the snapshot to copy. This can be an {{domxref("ImageBitmap")}}, {{domxref("HTMLVideoElement")}}, {{domxref("VideoFrame")}}, {{domxref("HTMLCanvasElement")}}, or {{domxref("OffscreenCanvas")}}. The image source data is captured at the exact moment `copyExternalImageToTexture()` is invoked. + - : An object providing the source of the snapshot to copy. This can be an {{domxref("HTMLCanvasElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("ImageBitmap")}}, {{domxref("ImageData")}}, {{domxref("OffscreenCanvas")}}, or {{domxref("VideoFrame")}} object. The image source data is captured at the exact moment `copyExternalImageToTexture()` is invoked. - `origin` {{optional_inline}} - : An object or array specifying the origin of the copy — the top-left corner of the source sub-region to copy from. Together with `copySize`, this defines the full extent of the source sub-region. The `x` and `y` values default to 0 if any of all of `origin` is omitted. From 07bcffffe4c08e8c75d3ac64ebb91e5fe50d8fd6 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 5 Nov 2024 05:20:34 -0800 Subject: [PATCH 06/70] add ::highlight() to pseudos (#36602) * add ::highlight() to pseudos * add ::highlight() to pseudos * see also --- files/en-us/web/css/_doublecolon_highlight/index.md | 5 +++++ files/en-us/web/css/css_pseudo-elements/index.md | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/files/en-us/web/css/_doublecolon_highlight/index.md b/files/en-us/web/css/_doublecolon_highlight/index.md index 531e20716ec6c0f..931f489679e6fb7 100644 --- a/files/en-us/web/css/_doublecolon_highlight/index.md +++ b/files/en-us/web/css/_doublecolon_highlight/index.md @@ -122,3 +122,8 @@ for (let i = 0; i < textNode.textContent.length; i++) { ## Browser compatibility {{Compat}} + +## See also + +- [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) +- [CSS pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo-elements) module diff --git a/files/en-us/web/css/css_pseudo-elements/index.md b/files/en-us/web/css/css_pseudo-elements/index.md index 56c039b7cdd99bd..e2f6a974a4a5db6 100644 --- a/files/en-us/web/css/css_pseudo-elements/index.md +++ b/files/en-us/web/css/css_pseudo-elements/index.md @@ -23,12 +23,15 @@ Pseudo-elements enable targeting entities not included in HTML and sections of c - {{CSSXref("::first-letter")}} - {{CSSXref("::first-line")}} - {{CSSXref("::grammar-error")}} +- {{CSSXref("::highlight()")}} - {{CSSXref("::marker")}} - {{CSSXref("::placeholder")}} - {{CSSXref("::selection")}} - {{CSSXref("::spelling-error")}} - {{CSSXref("::target-text")}} +The specification also defines the `::details-content` and `::search-text` pseudo-elements and the `::postfix` and `::prefix` sub-pseudo elements. These are not yet supported by any browser. The {{CSSXref("::highlight()")}} pseudo-element is included within this module, but most details are provided in the [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API). + ### Interfaces - {{DOMxRef("CSSPseudoElement")}} interface @@ -116,3 +119,4 @@ Pseudo-elements enable targeting entities not included in HTML and sections of c - [CSS shadow-parts](/en-US/docs/Web/CSS/CSS_shadow_parts) module - [CSS generated content](/en-US/docs/Web/CSS/CSS_generated_content) module - [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module +- [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) From 65c47ca4811ecd225b826e00fcf64f7d93043591 Mon Sep 17 00:00:00 2001 From: Andi Pieper Date: Tue, 5 Nov 2024 17:29:23 +0100 Subject: [PATCH 07/70] convert to the new dot handling logic on jsxref (#36663) --- files/en-us/web/javascript/reference/index.md | 4 ++-- files/en-us/web/javascript/reference/operators/index.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/javascript/reference/index.md b/files/en-us/web/javascript/reference/index.md index 1fecc56a6c81774..1819afebd62827f 100644 --- a/files/en-us/web/javascript/reference/index.md +++ b/files/en-us/web/javascript/reference/index.md @@ -206,8 +206,8 @@ If you are new to JavaScript, start with the [guide](/en-US/docs/Web/JavaScript/ - {{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}} - {{jsxref("Operators/Optional_chaining", "?.")}} - {{jsxref("Operators/new", "new")}} -- {{jsxref("Operators/new%2Etarget", "new.target")}} -- {{jsxref("Operators/import%2Emeta", "import.meta")}} +- {{jsxref("Operators/new.target", "new.target")}} +- {{jsxref("Operators/import.meta", "import.meta")}} - {{jsxref("Operators/super", "super")}} - {{jsxref("Operators/import", "import()")}} diff --git a/files/en-us/web/javascript/reference/operators/index.md b/files/en-us/web/javascript/reference/operators/index.md index 3032468dcbbb928..db58973cde98a39 100644 --- a/files/en-us/web/javascript/reference/operators/index.md +++ b/files/en-us/web/javascript/reference/operators/index.md @@ -52,9 +52,9 @@ Left values are the destination of an assignment. - : The optional chaining operator returns `undefined` instead of causing an error if a reference is [nullish](/en-US/docs/Glossary/Nullish) ([`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null) or [`undefined`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)). - {{jsxref("Operators/new", "new")}} - : The `new` operator creates an instance of a constructor. -- {{jsxref("Operators/new%2Etarget", "new.target")}} +- {{jsxref("Operators/new.target", "new.target")}} - : In constructors, `new.target` refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}. -- {{jsxref("Operators/import%2Emeta", "import.meta")}} +- {{jsxref("Operators/import.meta", "import.meta")}} - : An object exposing context-specific metadata to a JavaScript module. - {{jsxref("Operators/super", "super")}} - : The `super` keyword calls the parent constructor or allows accessing properties of the parent object. From bb0f798e4116c14840f1a3dad3ee7e176ca70a6a Mon Sep 17 00:00:00 2001 From: Christian Bates-White <45979878+Whitecx@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:28:01 -0500 Subject: [PATCH 08/70] Updated webdriver doc (#36652) --- files/en-us/web/api/navigator/webdriver/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/navigator/webdriver/index.md b/files/en-us/web/api/navigator/webdriver/index.md index 8c13a42f6b14a2c..b5de2d49bceaf15 100644 --- a/files/en-us/web/api/navigator/webdriver/index.md +++ b/files/en-us/web/api/navigator/webdriver/index.md @@ -19,8 +19,8 @@ alternate code paths can be triggered during automation. The `navigator.webdriver` property is true when in: - Chrome - - : The `--enable-automation` or the `--headless` flag or the - `--remote-debugging-port` is used. + - : The `--enable-automation` or `--headless` flag is used, or the + `--remote-debugging-port` flag specifying port 0 is used. - Firefox - : The `marionette.enabled` preference or `--marionette` flag is passed. From 5309f49a300166809b098f1b7604d563f3332af2 Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 6 Nov 2024 04:34:34 +0800 Subject: [PATCH 09/70] fix: highlight the replaceable items (#36640) --- files/en-us/web/opensearch/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/opensearch/index.md b/files/en-us/web/opensearch/index.md index db14544f7c85bc8..1e76a9b58f277f3 100644 --- a/files/en-us/web/opensearch/index.md +++ b/files/en-us/web/opensearch/index.md @@ -81,11 +81,11 @@ To support autodiscovery, add a `` element for each plugin to the `` + title="[searchTitle]" + href="[pluginURL]" /> ``` -Replace the bolded items as explained below: +Replace the items in _\[square brackets\]_ as explained below: - searchTitle - : The name of the search to perform, such as "Search MDC" or "Yahoo! Search". This must match your plugin file's ``. From 4752e8a68c630b2fc8354dc4af4573701d6dfe28 Mon Sep 17 00:00:00 2001 From: Tom Van Goethem Date: Tue, 5 Nov 2024 21:34:47 +0100 Subject: [PATCH 10/70] Update OffscreenCanvas.getContext() options for Blink (#36659) --- files/en-us/web/api/offscreencanvas/getcontext/index.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/offscreencanvas/getcontext/index.md b/files/en-us/web/api/offscreencanvas/getcontext/index.md index ac7659c8d478207..6523f15d852c39e 100644 --- a/files/en-us/web/api/offscreencanvas/getcontext/index.md +++ b/files/en-us/web/api/offscreencanvas/getcontext/index.md @@ -50,12 +50,10 @@ getContext(contextType, contextAttributes) - `alpha` - : Boolean that indicates if the canvas contains an alpha channel. If set to `false`, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then. - - `willReadFrequently` {{non-standard_inline}} (Firefox only) + - `willReadFrequently` - : Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. - This option is only available, if the flag `gfx.canvas.willReadFrequently.enable` is set to `true` (which, by default, is only the case for B2G/Firefox OS). - - `storage` {{non-standard_inline}} (Blink only) - - : String that indicates which storage is used ("persistent" by default). + In Firefox this option is only available if the flag `gfx.canvas.willReadFrequently.enable` is set to `true` (which, by default, is only the case for B2G/Firefox OS). WebGL context attributes: From caff4a64ad91783cb22d08f6c622664521b594c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Demi=C3=ABn=20Drost?= <36162937+DemienDrost@users.noreply.github.com> Date: Wed, 6 Nov 2024 09:10:07 +0100 Subject: [PATCH 11/70] Removed confusing use of accolades behind pseudoselector. (#36662) --- files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md b/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md index e01b679ce923367..03dc0961bfe585e 100644 --- a/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md +++ b/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md @@ -30,11 +30,11 @@ You can use the following pseudo-elements to customize various parts of the scro - `::-webkit-scrollbar` — the entire scrollbar. - `::-webkit-scrollbar-button` — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time). -- `::-webkit-scrollbar:horizontal{}` — the horizontal scrollbar. +- `::-webkit-scrollbar:horizontal` — the horizontal scrollbar. - `::-webkit-scrollbar-thumb` — the draggable scrolling handle. - `::-webkit-scrollbar-track` — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar. - `::-webkit-scrollbar-track-piece` — the part of the track (progress bar) not covered by the handle. -- `::-webkit-scrollbar:vertical{}` — the vertical scrollbar. +- `::-webkit-scrollbar:vertical` — the vertical scrollbar. - `::-webkit-scrollbar-corner` — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window. - `::-webkit-resizer` — the draggable resizing handle that appears at the bottom corner of some elements. From 40590706f9ab23242bcd8c8966cc683d7d5b18aa Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Wed, 6 Nov 2024 16:46:19 +0100 Subject: [PATCH 12/70] chore(css): Move CSS examples - Learn CSS, How To, Flexbox basics (#36661) * chore(css): Move CSS examples - Getting started with CSS * chore(css): Move CSS examples - How CSS is structured * chore(css): Move CSS examples - Styling a biography page * chore(css): Move CSS examples - How to add a shadow to an element * chore(css): Move CSS examples - How to add a shadow to text * chore(css): Move CSS examples - How to center an item * chore(css): Move CSS examples - How to fill a box with an image without distorting it * chore(css): Move CSS examples - How to highlight the first line of a paragraph * chore(css): Move CSS examples - How to highlight the first paragraph * chore(css): Move CSS examples - How to highlight a paragraph that comes after a heading * chore(css): Move CSS examples - How to make a box semi-transparent * chore(css): Move CSS examples - How to fade a button on hover * chore(css): Move CSS examples - Basic concepts of flexbox * chore(css): Move CSS examples - Controlling ratios of flex items along the main axis --- .../css/first_steps/getting_started/index.md | 99 +++++++- .../how_css_is_structured/index.md | 28 ++- .../styling_a_biography_page/index.md | 75 +++++- .../learn/css/howto/add_a_shadow/index.md | 33 ++- .../css/howto/add_a_text_shadow/index.md | 15 +- .../learn/css/howto/center_an_item/index.md | 24 +- .../howto/fill_a_box_with_an_image/index.md | 51 +++- .../css/howto/highlight_first_line/index.md | 48 +++- .../css/howto/highlight_first_para/index.md | 24 +- .../howto/highlight_para_after_h1/index.md | 26 +- .../css/howto/make_box_transparent/index.md | 48 +++- .../css/howto/transition_button/index.md | 49 +++- .../basic_concepts_of_flexbox/index.md | 237 ++++++++++++++++-- .../index.md | 214 +++++++++++++++- 14 files changed, 907 insertions(+), 64 deletions(-) diff --git a/files/en-us/learn/css/first_steps/getting_started/index.md b/files/en-us/learn/css/first_steps/getting_started/index.md index f7c58f3a6566c5b..f9c91ba66819439 100644 --- a/files/en-us/learn/css/first_steps/getting_started/index.md +++ b/files/en-us/learn/css/first_steps/getting_started/index.md @@ -63,7 +63,7 @@ Our starting point is an HTML document. You can copy the code from below if you ``` > [!NOTE] -> If you are reading this on a device or an environment where you can't easily create files, then don't worry — live code editors are provided below to allow you to write example code right here in the page. +> If you are reading this on a device or an environment where you can't easily create files, then don't worry — the live examples below have a "Play" button that allows you to edit the CSS & HTML code in the MDN Playground and see the combined results live. ## Adding CSS to our document @@ -108,13 +108,38 @@ li { } ``` -Try this out in the interactive editor below (edit the code boxes) or in your local CSS document. +Try this out in the example below (click "Play") or in your local copy: -{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} +```html live-sample___started1 +

I am a level one heading

+ +

+ This is a paragraph of text. In the text is a span element and + also a link. +

+ +

This is the second paragraph. It contains an emphasized element.

+ +
    +
  • Item one
    • +
  • Item two
    • +
  • Item three
    • +
+``` + +```css live-sample___started1 +h1 { +} + +p { +} +``` + +{{EmbedLiveSample("started1", "", "240px")}} ## Changing the default behavior of elements -When we look at a well-marked up HTML document, even something as simple as our example, we can see how the browser is making the HTML readable by adding some default styling. Headings are large and bold and our list has bullets. This happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch. All modern browsers display HTML content by default in pretty much the same way. +When we look at a well-marked up HTML document, we can see how the browser is making the HTML readable by adding some default styling. Headings are large and bold and our list has bullets. This happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch. All modern browsers display HTML content by default in pretty much the same way. However, you will often want something other than the choice the browser has made. This can be done by choosing the HTML element that you want to change and using a CSS rule to change the way it looks. A good example is `
    `, an unordered list. It has list bullets. If you don't want those bullets, you can remove them like so: @@ -155,7 +180,7 @@ So far, we have styled elements based on their HTML element names. This works as 3. Save and refresh to see what the result is. -You can apply the class of `special` to any element on your page that you want to have the same look as this list item. For example, you might want the `` in the paragraph to also be orange and bold. Try adding a `class` of `special` to it, then reload your page and see what happens. +You can apply the class of `special` to any element on your page that you want to have the same look as this list item. For example, you might want the `` in the paragraph to also be orange and bold. Try adding a class of `special` to it, then reload your page and see what happens. Sometimes you will see rules with a selector that lists the HTML element selector along with the class: @@ -204,7 +229,34 @@ h1 + p { The live example below includes the two rules above. Try adding a rule to make a span red if it is inside a paragraph. You will know if you have it right because the span in the first paragraph will be red, but the one in the first list item will not change color. -{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}} +```html live-sample___started2 +

    I am a level one heading

    + +

    + This is a paragraph of text. In the text is a span element and + also a link. +

    + +

    This is the second paragraph. It contains an emphasized element.

    + +
      +
    • Item one
      • +
    • Item two
      • +
    • Item three
      • +
    +``` + +```css live-sample___started2 +li em { + color: rebeccapurple; +} + +h1 + p { + font-size: 200%; +} +``` + +{{EmbedLiveSample("started2", "", "340px")}} > [!NOTE] > As you can see, CSS gives us several ways to target elements, and we've only scratched the surface so far! We will be taking a proper look at all of these selectors and many more in our [Selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors) articles later on in the course. @@ -231,9 +283,40 @@ a:hover { } ``` -In the live example below, you can play with different values for the various states of a link. We have added the rules above to it, and now realize that the pink color is quite light and hard to read — why not change that to a better color? Can you make the links bold? +In the example below, you can play with different values for the various states of a link. We have added the rules above to it, and now realize that the pink color is quite light and hard to read — why not change that to a better color? Can you make the links bold? + +```html live-sample___started3 +

    I am a level one heading

    + +

    + This is a paragraph of text. In the text is a span element and + also a link. +

    + +

    This is the second paragraph. It contains an emphasized element.

    + +
      +
    • Item one
      • +
    • Item two
      • +
    • Item three
      • +
    +``` + +```css live-sample___started3 +a:link { + color: pink; +} + +a:visited { + color: green; +} + +a:hover { + text-decoration: none; +} +``` -{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 1000)}} +{{EmbedLiveSample("started3", "", "240px")}} We have removed the underline on our link on hover. You could remove the underline from all states of a link. It is worth remembering however that in a real site, you want to ensure that visitors know that a link is a link. Leaving the underline in place can be an important clue for people to realize that some text inside a paragraph can be clicked on — this is the behavior they are used to. As with everything in CSS, there is the potential to make the document less accessible with your changes — we will aim to highlight potential pitfalls in appropriate places. diff --git a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md index 9e02b57b08b572e..6d07b1d3ca439be 100644 --- a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md @@ -64,16 +64,16 @@ p { } ``` -The `href` attribute of the {{htmlelement("link")}} element needs to reference a file on your file system. In the example above, the CSS file is in the same folder as the HTML document, but you could place it somewhere else and adjust the path. Here are three examples: +The `href` attribute of the {{htmlelement("link")}} element needs to reference a file on a file system. In the example above, the CSS file is in the same folder as the HTML document, but you could place it somewhere else and adjust the path. Here are three examples: ```html - + - + - + ``` @@ -169,9 +169,21 @@ p { When you find CSS that you want to experiment with, replace the HTML `` contents with some HTML to style, and then add your test CSS code to your CSS file. -As an alternative, you can also use the interactive editor below. +As an alternative, you can click "Play" on the example below to open a starting point in the MDN Playground: -{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} +```html live-sample___experiment-sandbox +

    Create your test HTML here

    +``` + +```css live-sample___experiment-sandbox +/* Create your test CSS here */ + +p { + color: red; +} +``` + +{{EmbedLiveSample("experiment-sandbox")}} Read on and have fun! @@ -184,8 +196,8 @@ Each CSS rule starts with a selector — or a list of selectors — in order to ```css h1 a:link -.many-things -#one-thing +.manythings +#onething * .box p .box p:first-child diff --git a/files/en-us/learn/css/first_steps/styling_a_biography_page/index.md b/files/en-us/learn/css/first_steps/styling_a_biography_page/index.md index 372459f42753cae..d7ae03648121a30 100644 --- a/files/en-us/learn/css/first_steps/styling_a_biography_page/index.md +++ b/files/en-us/learn/css/first_steps/styling_a_biography_page/index.md @@ -8,6 +8,10 @@ page-type: learn-module-assessment With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS to add your own style to them. This assessment gives you a chance to do that. +> [!NOTE] +> You can click "Play" in the live samples below to open the code in the MDN Playground, or you can copy and paste the code into your own IDE or an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). +> If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels). + @@ -28,18 +32,9 @@ With the things you have learned in the last few lessons you should find that yo
    -## Starting point - -You can work in the live editor below, or you can [download the starting point file](https://github.com/mdn/css-examples/blob/main/learn/getting-started/biog-download.html) to work with in your own editor. This is a single page containing both the HTML and the starting point CSS (in the head of the document). If you prefer you could move this CSS to a separate file and link to it when you create the example on your local computer. - -> [!NOTE] -> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). -> -> If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels). - ## Project brief -The following live example shows a biography, which has been styled using CSS. The CSS properties that are used are as follows — each one links to its property page on MDN, which will give you more examples of its use. +The following live sample shows a biography, which has been styled using CSS. The CSS properties that are used are as follows — each one links to its property page on MDN, which will give you more examples of its use. - {{cssxref("font-family")}} - {{cssxref("color")}} @@ -49,7 +44,7 @@ The following live example shows a biography, which has been styled using CSS. T - {{cssxref("font-style")}} - {{cssxref("text-decoration")}} -In the interactive editor you will find some CSS already in place. This selects parts of the document using element selectors, classes, and pseudo-classes. Make the following changes to this CSS: +In the example, there is some CSS already in place which selects parts of the document using element selectors, classes, and pseudo-classes. Make the following changes to this CSS: 1. Make the level one heading pink, using the CSS color keyword `hotpink`. 2. Give the heading a 10px dotted {{cssxref("border-bottom")}} which uses the CSS color keyword `purple`. @@ -69,6 +64,62 @@ You should end up with something like this image. ![Screenshot of how the example should look after completing the assessment.](learn-css-basics-assessment.png) -{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} +Here are HTML and CSS code blocks and the result of combining them: + +```html live-sample___biog +

    Jane Doe

    +
    Web Developer
    +

    + Far far away, behind the word mountains, far from the countries Vokalia and + Consonantia, there live the blind texts. Separated they live in Bookmarksgrove + right at the coast of the Semantics, a large language ocean. +

    + +

    + A small river named Duden flows by their place and supplies it with the + necessary regelialia. It is a paradisematic country, in which roasted parts of + sentences fly into your mouth. +

    + +

    Contact information

    + +``` + +```css live-sample___biog +body { + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + color: #375e97; + font-size: 2em; + font-family: Georgia, "Times New Roman", Times, serif; + border-bottom: 1px solid #375e97; +} + +h2 { + font-size: 1.5em; +} + +.job-title { + color: #999999; + font-weight: bold; +} + +a:link, +a:visited { + color: #fb6542; +} + +a:hover { + text-decoration: none; +} +``` + +{{EmbedLiveSample("biog", "", "400px")}} {{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} diff --git a/files/en-us/learn/css/howto/add_a_shadow/index.md b/files/en-us/learn/css/howto/add_a_shadow/index.md index cbb085a0c88c381..8e046c59b3ab5ce 100644 --- a/files/en-us/learn/css/howto/add_a_shadow/index.md +++ b/files/en-us/learn/css/howto/add_a_shadow/index.md @@ -23,7 +23,38 @@ The `box-shadow` property takes a number of values: In the example below we have set the X and Y axes to 5px, the blur to 10px and the spread to 2px. I am using a semi-transparent black as my color. Play with the different values to see how they change the shadow. -{{EmbedGHLiveSample("css-examples/howto/box-shadow-button.html", '100%', 500)}} +```html live-sample___box-shadow-button +
    + +
    +``` + +```css hidden live-sample___box-shadow-button +.wrapper { + height: 150px; + display: flex; + align-items: center; + justify-content: center; +} + +button { + padding: 5px 10px; + border: 0; + border-radius: 5px; + font-weight: bold; + font-size: 140%; + background-color: #db1f48; + color: #fff; +} +``` + +```css live-sample___box-shadow-button +.shadow { + box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8); +} +``` + +{{EmbedLiveSample("box-shadow-button")}} > [!NOTE] > We are not using `inset` in this example, this means that the shadow is the default drop shadow with the box on top of the shadow. Inset shadows appear inside the box as if the content were pushed back into the page. diff --git a/files/en-us/learn/css/howto/add_a_text_shadow/index.md b/files/en-us/learn/css/howto/add_a_text_shadow/index.md index cf74a6550938a43..e9c5cd69e5b36d8 100644 --- a/files/en-us/learn/css/howto/add_a_text_shadow/index.md +++ b/files/en-us/learn/css/howto/add_a_text_shadow/index.md @@ -21,7 +21,20 @@ The `text-shadow` property takes a number of values: In the example below we have set the x-axis offset to 2px, the y-axis offset to 4px, the blur radius to 4px, and the color to a semi-transparent blue. Play with the different values to see how they change the shadow. -{{EmbedGHLiveSample("css-examples/howto/text-shadow.html", '100%', 500)}} +```html live-sample___text-shadow +
    +

    Adding a shadow to text

    +
    +``` + +```css live-sample___text-shadow +h1 { + color: royalblue; + text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6); +} +``` + +{{EmbedLiveSample("text-shadow")}} > [!NOTE] > It can be quite easy to make text hard to read with text shadows. Make sure that the choices you make still leave your text readable and provide enough [color contrast](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) for visitors who have difficulty with low-contrast text. diff --git a/files/en-us/learn/css/howto/center_an_item/index.md b/files/en-us/learn/css/howto/center_an_item/index.md index d5c16cfb3c38909..babc323b31892b3 100644 --- a/files/en-us/learn/css/howto/center_an_item/index.md +++ b/files/en-us/learn/css/howto/center_an_item/index.md @@ -14,7 +14,29 @@ To center one box inside another using CSS you will need to use [CSS box alignme In the example below we have given the parent container `display: flex`; then set {{cssxref("justify-content")}} to center to align it horizontally, and {{cssxref("align-items")}} to center to align it vertically. -{{EmbedGHLiveSample("css-examples/howto/center.html", '100%', 700)}} +```html live-sample___center +
    +
    center me!
    +
    +``` + +```css live-sample___center +.wrapper { + height: 200px; + display: flex; + align-items: center; + justify-content: center; +} + +.box { + background-color: rgb(69 164 181); + border-radius: 5px; + padding: 10px; + color: #fff; +} +``` + +{{EmbedLiveSample("center", "", "220px")}} > [!NOTE] > You can use this technique to do any kind of alignment of one or more elements inside another. In the example above you can try changing the values to any valid values for {{cssxref("justify-content")}} and {{cssxref("align-items")}}. diff --git a/files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md b/files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md index 289800212780984..ac03871e102f890 100644 --- a/files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md +++ b/files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md @@ -18,4 +18,53 @@ When you add an image to a page using the HTML {{htmlelement("img")}} element, t The {{cssxref("object-fit")}} property makes each of these approaches possible. In the example below you can see how different values of `object-fit` work when using the same image. Select the approach that works best for your design. -{{EmbedGHLiveSample("css-examples/howto/object-fit.html", '100%', 800)}} +```html live-sample___object-fit +
    +
    + a colorful hot air balloon against a clear sky +
    +
    + a colorful hot air balloon against a clear sky +
    +
    + a colorful hot air balloon against a clear sky +
    +
    +``` + +```css live-sample___object-fit +.wrapper { + height: 200px; + display: flex; + gap: 20px; +} + +.box { + border: 5px solid #000; +} + +.box img { + width: 100%; + height: 100%; +} + +.box1 img { + object-fit: cover; +} + +.box2 img { + object-fit: contain; +} + +.box3 img { + object-fit: fill; +} +``` + +{{EmbedLiveSample("object-fit", "", "220px")}} diff --git a/files/en-us/learn/css/howto/highlight_first_line/index.md b/files/en-us/learn/css/howto/highlight_first_line/index.md index a87d732da37947f..3bafbd2de07ad91 100644 --- a/files/en-us/learn/css/howto/highlight_first_line/index.md +++ b/files/en-us/learn/css/howto/highlight_first_line/index.md @@ -18,7 +18,29 @@ A {{cssxref("pseudo-elements", "pseudo-element")}} can take the place of the ` +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

    + +``` + +```css live-sample___highlight_first_line +.wrapper p::first-line { + font-weight: bold; + font-size: 130%; +} +``` + +{{EmbedLiveSample("highlight_first_line")}} > [!NOTE] > All pseudo-elements act in this way. They behave as if you had inserted an element into the document, but they do so dynamically based on the content as it displays at runtime. @@ -27,7 +49,29 @@ In this case we need to use the {{cssxref("::first-line")}} pseudo-element. It s In the example above, the pseudo-element selects the first line of every paragraph. To select only the first line of the first paragraph, you can combine it with another selector. In this case, we use the {{cssxref(":first-child")}} {{cssxref("pseudo-classes", "pseudo-class")}}. This allows us to select the first line of the first child of `.wrapper` if that first child is a paragraph. -{{EmbedGHLiveSample("css-examples/howto/highlight_first_line2.html", '100%', 700)}} +```html live-sample___highlight_first_line2 +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    +``` + +```css live-sample___highlight_first_line2 +.wrapper p:first-child::first-line { + font-weight: bold; + font-size: 130%; +} +``` + +{{EmbedLiveSample("highlight_first_line2")}} > [!NOTE] > When combining pseudo-elements with other selectors in a [complex](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector) or [compound](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector) selector, the pseudo-elements must appear after all the other components in the selector in which they appear. diff --git a/files/en-us/learn/css/howto/highlight_first_para/index.md b/files/en-us/learn/css/howto/highlight_first_para/index.md index 0a7ef89c92a7dce..c23bdf3756bf9e7 100644 --- a/files/en-us/learn/css/howto/highlight_first_para/index.md +++ b/files/en-us/learn/css/howto/highlight_first_para/index.md @@ -16,7 +16,29 @@ You would like to make the first paragraph larger and bold. You could add a clas A {{cssxref("pseudo-classes","pseudo-class")}} acts as if you have applied a class; however, rather than using a class selector CSS selects based on the document structure. There are a number of different pseudo-classes that can select different things. In our case we are going to use {{cssxref(":first-child")}}. This will select the element that is the first-child of a parent. -{{EmbedGHLiveSample("css-examples/howto/highlight_first_para.html", '100%', 770)}} +```html live-sample___highlight_first_para +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    +``` + +```css live-sample___highlight_first_para +.wrapper p:first-child { + font-weight: bold; + font-size: 130%; +} +``` + +{{EmbedLiveSample("highlight_first_para")}} You can try changing {{cssxref(":first-child")}} to {{cssxref(":last-child")}} in the live example above, and you will select the last paragraph. diff --git a/files/en-us/learn/css/howto/highlight_para_after_h1/index.md b/files/en-us/learn/css/howto/highlight_para_after_h1/index.md index b498183b29feab3..016aab6f9699ea8 100644 --- a/files/en-us/learn/css/howto/highlight_para_after_h1/index.md +++ b/files/en-us/learn/css/howto/highlight_para_after_h1/index.md @@ -16,7 +16,31 @@ A common pattern is to style the first paragraph in an article differently to th CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [next-sibling combinator](/en-US/docs/Web/CSS/Next-sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `

    ` is the next sibling of the `

    ` so we can select it with `h1 + p`. -{{EmbedGHLiveSample("css-examples/howto/highlight_h1_plus_para.html", '100%', 800)}} +```html live-sample___highlight_h1_plus_para +
    +

    A heading

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    +``` + +```css live-sample___highlight_h1_plus_para +.wrapper h1 + p { + font-weight: bold; + font-size: 130%; + color: rebeccapurple; +} +``` + +{{EmbedLiveSample("highlight_h1_plus_para", "", "220px")}} ## See also diff --git a/files/en-us/learn/css/howto/make_box_transparent/index.md b/files/en-us/learn/css/howto/make_box_transparent/index.md index cb51026e4cd4ad1..e87b43724c30755 100644 --- a/files/en-us/learn/css/howto/make_box_transparent/index.md +++ b/files/en-us/learn/css/howto/make_box_transparent/index.md @@ -20,7 +20,53 @@ In many cases you will only want to make the background color itself partly tran Try changing the opacity and alpha channel values in the below examples to see more or less of the background image behind the box. -{{EmbedGHLiveSample("css-examples/howto/opacity.html", '100%', 770)}} +```html live-sample___opacity +
    +
    This box uses opacity
    +
    + This box has a background color with an alpha channel +
    +
    +``` + +```css hidden live-sample___opacity +body { + font-family: sans-serif; +} + +.wrapper { + height: 200px; + display: flex; + gap: 20px; + background-image: url("https://mdn.github.io/shared-assets/images/examples/balloon.jpg"); + background-repeat: no-repeat; + background-size: cover; + padding: 20px; +} + +.box { + flex: 1; + border: 5px solid #000; + border-radius: 0.5em; + font-size: 140%; + padding: 20px; +} +``` + +```css live-sample___opacity +.box1 { + background-color: #000; + color: #fff; + opacity: 0.5; +} + +.box2 { + background-color: rgb(0 0 0 / 0.5); + color: #fff; +} +``` + +{{EmbedLiveSample("opacity", "", "280px")}} > [!NOTE] > Take care that your text retains enough contrast with the background in cases where you are overlaying an image; otherwise you may make the content hard to read. diff --git a/files/en-us/learn/css/howto/transition_button/index.md b/files/en-us/learn/css/howto/transition_button/index.md index cf4d096189f4d70..cdf4214cf12d36c 100644 --- a/files/en-us/learn/css/howto/transition_button/index.md +++ b/files/en-us/learn/css/howto/transition_button/index.md @@ -18,7 +18,54 @@ For the `:active` and `:focus` pseudo-classes the {{cssxref("transition")}} prop In the example the transition takes 1 second, you can try changing this to see the difference a change in speed makes. -{{EmbedGHLiveSample("css-examples/howto/transition-button.html", '100%', 720)}} +```html live-sample___transition-button +
    + +
    +``` + +```css hidden live-sample___transition-button +.wrapper { + height: 150px; + display: flex; + align-items: center; + justify-content: center; +} + +button { + padding: 5px 10px; + border: 0; + border-radius: 5px; + font-weight: bold; + font-size: 140%; + cursor: pointer; +} + +.fade:focus, +.fade:active { + background-color: black; +} +``` + +```css live-sample___transition-button +.fade { + background-color: #db1f48; + color: #fff; + transition: background-color 1s; +} + +.fade:hover { + background-color: #004369; +} + +.fade:focus, +.fade:active { + background-color: black; + transition: none; +} +``` + +{{EmbedLiveSample("transition-button")}} > [!NOTE] > The {{cssxref("transition")}} property is a shorthand for {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, and {{cssxref("transition-timing-function")}}. See the pages for these properties on MDN to find ways to tweak your transitions. diff --git a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index d3e420806f8bddd..de07994348aac5c 100644 --- a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -76,9 +76,30 @@ As with all properties in CSS, some initial values are defined, so the contents The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the full length of the cross-axis. -You can see in the live example below how this looks. Try editing the items or adding additional items to test the initial behavior of flexbox. - -{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} +You can see in the live sample below how this looks. Click "Play" to open the example in the MDN Playground and edit the items or add new items to try out the initial behavior of flexbox: + +```html live-sample___the-flex-container +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    +
    +``` + +```css live-sample___the-flex-container +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} +``` + +{{EmbedLiveSample("the-flex-container")}} ### Changing flex-direction @@ -86,9 +107,31 @@ Adding the {{cssxref("flex-direction")}} property to the flex container allows u If we change `flex-direction` to `column` the main axis switches and our items now display in a column. Set `column-reverse` and the start and end lines are again switched. -The live example below has `flex-direction` set to `row-reverse`. Try the other values — `row`, `column` and `column-reverse` — to see what happens to the content. +The live sample below has `flex-direction` set to `row-reverse`. Try the other values — `row`, `column` and `column-reverse` — to see what happens to the content. + +```html live-sample___flex-direction +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-direction +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}} +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-direction: row-reverse; +} +``` + +{{EmbedLiveSample("flex-direction")}} ## Multi-line flex containers with flex-wrap @@ -96,7 +139,31 @@ While flexbox is a one dimensional model, it is possible to make flex items wrap To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, if your items are too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a `width`. The total width of the items is too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap across multiple lines. If you set it to `nowrap`, which is the initial value, and they will shrink to fit the container. They shrink because they are using initial flexbox values, including `flex-shrink: 1`, that allows items to shrink. Using `nowrap` would cause an [overflow](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content) if the items were not able to shrink, or could not shrink small enough to fit. -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}} +```html live-sample___flex-wrap +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-wrap +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + width: 200px; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; +} +``` + +{{EmbedLiveSample("flex-wrap")}} Find out more about wrapping flex items in the guide [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items). @@ -104,9 +171,33 @@ Find out more about wrapping flex items in the guide [Mastering wrapping of flex You can combine the two properties `flex-direction` and `flex-wrap` into the {{cssxref("flex-flow")}} shorthand. -In the live example below, try changing the first value to one of the allowable values for `flex-direction` - `row`, `row-reverse`, `column` or `column-reverse`, and also change the second to `wrap` and `nowrap`. - -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}} +In the live sample below, try changing the first value to one of the allowable values for `flex-direction` - `row`, `row-reverse`, `column` or `column-reverse`, and also change the second to `wrap` and `nowrap`. + +```html live-sample___flex-flow +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-flow +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + width: 200px; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-flow: row wrap; +} +``` + +{{EmbedLiveSample("flex-flow")}} ## Properties applied to flex items @@ -151,9 +242,42 @@ An item can shrink down to its {{cssxref("min-content")}} size. This minimum siz You will very rarely see the `flex-grow`, `flex-shrink`, and `flex-basis` properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The `flex` shorthand allows you to set the three values in this order — `flex-grow`, `flex-shrink`, `flex-basis`. -The live example below allows you to test out the different values of the flex shorthand; remember that the first value is `flex-grow`. Giving this a positive value means the item can grow. The second is `flex-shrink` — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is `flex-basis`; this is the value the items are using as their base value to grow and shrink from. +The live sample below allows you to test out the different values of the flex shorthand; remember that the first value is `flex-grow`. Giving this a positive value means the item can grow. The second is `flex-shrink` — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is `flex-basis`; this is the value the items are using as their base value to grow and shrink from. + +```html live-sample___flex-properties +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-properties +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.one { + flex: 1 1 auto; +} -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}} +.two { + flex: 1 1 auto; +} + +.three { + flex: 1 1 auto; +} +``` + +{{EmbedLiveSample("flex-properties")}} There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows: @@ -170,9 +294,42 @@ Using `flex: none` will create fully inflexible flex items. It is as if you wrot The shorthand you often see in tutorials is `flex: 1` or `flex: 2` and so on. This is the same as writing `flex: 1 1 0` or `flex: 2 1 0` and so on, respectively. The items can grow and shrink from a `flex-basis` of `0`. -Try these shorthand values in the live example below. +Try these shorthand values in the live sample below. + +```html live-sample___flex-shorthands +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-shorthands +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.one { + flex: 1; +} + +.two { + flex: 1; +} + +.three { + flex: 1; +} +``` -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}} +{{EmbedLiveSample("flex-shorthands")}} ## Alignment, justification and distribution of free space between items @@ -184,7 +341,7 @@ The {{cssxref("align-items")}} property align all the flex items on the cross ax The initial value for this property is `stretch` and is why flex items stretch to the height of the flex container by default (or the width if `flex-direction` is set to `column` or `column-reverse`). This height may come from the tallest item in the container or the size set on the flex container itself. -You could instead set `align-items` to `flex-start`, or simply `start`, in order to make the items line up at the start of the flex container, `flex-end`, or just `end`, to align them to the end, or `center` to align them in the center. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to: +You could instead set `align-items` to `flex-start`, or simply `start`, in order to make the items line up at the start of the flex container, `flex-end`, or just `end`, to align them to the end, or `center` to align them in the center. Try this in the live sample — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to: - `stretch` - `flex-start` @@ -195,7 +352,31 @@ You could instead set `align-items` to `flex-start`, or simply `start`, in order - `baseline` - `last baseline` -{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}} +```html live-sample___align-items +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    +
    +``` + +```css live-sample___align-items +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + width: 500px; + height: 130px; + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: flex-start; +} +``` + +{{EmbedLiveSample("align-items")}} The `align-items` is set on the flex container and impacts all the flex items. If you want to align a flex item differently from others, you can set the {{cssxref("align-self")}} on the flex item. @@ -205,7 +386,7 @@ The {{cssxref("justify-content")}} property is used to align the items on the ma You can also use the value `space-between` to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left (or top and bottom for columns) of each item use the value `space-around`. With `space-around`, items have a half-size space on either end. Or, to cause items to have equal space around them use the value `space-evenly`. With `space-evenly`, items have a full-size space on either end. -Try the following values of `justify-content` in the live example: +Try the following values of `justify-content` in the live sample: - `start` - `end` @@ -220,7 +401,29 @@ Try the following values of `justify-content` in the live example: - `space-evenly` - `stretch` -{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}} +```html live-sample___justify-content +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___justify-content +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + justify-content: flex-start; +} +``` + +{{EmbedLiveSample("justify-content")}} The article [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) explores these properties in more depth, in order to have a better understanding of how they work. These basic examples, however, are useful in the majority of use cases. diff --git a/files/en-us/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md b/files/en-us/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md index b75fa252498ad64..8a8bb4617640f6d 100644 --- a/files/en-us/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md @@ -38,7 +38,29 @@ The example below contains two paragraph elements with different strings of text The second paragraph, with a value of `max-content`, does the opposite. It grows as large as it needs to be to fit the content without taking soft-wrapping opportunities. It will overflow the box it is in if that container is too narrow. -{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}} +```html live-sample___min-max-content +

    + I am sized with min-content and so I will take all of the soft-wrapping + opportunities. +

    +

    + I am sized with max-content and so I will take none of the soft-wrapping + opportunities. +

    +``` + +```css live-sample___min-max-content +.min-content { + width: min-content; + border: 2px dotted rgb(96 139 168); +} +.max-content { + width: max-content; + border: 2px dotted rgb(96 139 168); +} +``` + +{{EmbedLiveSample("min-max-content", "", "260px")}} Remember this behavior and what effects `min-content` and `max-content` have as we explore `flex-grow` and `flex-shrink` later in this article. @@ -64,7 +86,34 @@ If `flex-basis` is set to `auto`, the initial size of the item is the {{cssxref( This example contains three inflexible flex items, with both `flex-grow` and `flex-shrink` set to `0`. The first item, which has an explicit width of `150px`, takes a `flex-basis` of `150px`, whereas the other two items have no width set and so are sized according to their content width or `max-content`. -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}} +```html live-sample___flex-basis +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-basis +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 0 0 auto; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.box :first-child { + width: 150px; +} +``` + +{{EmbedLiveSample("flex-basis")}} In addition to the `auto` keyword and any other valid {{cssxref("width")}} value, you can use the `content` keyword as the `flex-basis`. This results in the `flex-basis` being based on the content size, even if there is a `width` set on the item. This creates the same effect as removing any width set and using `auto` as the `flex-basis`. While similar to setting `max-content`, the `content` value enables any {{cssxref("aspect-ratio")}} to be calculated based on the cross-axis size. @@ -80,7 +129,11 @@ If all items have the same `flex-grow` factor, the positive free space will be d Things can get confusing in terms of how `flex-grow` and `flex-basis` interact. Let's consider the case of three flex items of differing content lengths and the following `flex` rules applied to them: -`flex: 1 1 auto;` +```css +.class { + flex: 1 1 auto; +} +``` In this case, the `flex-basis` value is `auto` and the items don't have a width set, so they are auto-sized. This means the `flex-basis` used is the `max-content` size of each item. After laying out the items, there is some positive free space in the flex container, which is shown in the image below as the hatched area; the hatched area is the positive free space that will be distributed between the three items based on their `flex-grow` factors: @@ -92,13 +145,40 @@ We are working with a `flex-basis` equal to the content size. This means the ava To create three equally-sized items, even if the original elements have different sizes, set the `flex-basis` component to `0`: -`flex: 1 1 0;` +```css +.class { + flex: 1 1 0; +} +``` Here, for the purpose of space distribution calculation, we are setting the size of each item to `0`. This means all the space is available for distribution. Since all the items have the same `flex-grow` factor, they each get an equal amount of space. This results in three equal-width flex items. Try changing the `flex-grow` factor from 1 to 0 in this live example to see the different behavior: -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}} +```html live-sample___flex-grow +
    +
    One
    +
    Two
    +
    Three has more content
    +
    +``` + +```css live-sample___flex-grow +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 0; +} + +.box { + width: 400px; + border: 2px dotted rgb(96 139 168); + display: flex; +} +``` + +{{EmbedLiveSample("flex-grow")}} ### Giving items different flex-grow factors @@ -110,7 +190,41 @@ In the example below, we use `1` as the `flex-grow` factor for the first two ite 2. The positive free space in the flex container is divided by this total value. 3. The free space is distributed according to the individual values. In this case, the first item gets one part, the second one part, and the third two parts. This means that the third item is twice the size of the first and second items. -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}} +```html live-sample___flex-grow-ratios +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-grow-ratios +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 0; +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.one { + flex: 1 1 0; +} + +.two { + flex: 1 1 0; +} + +.three { + flex: 2 1 0; +} +``` + +{{EmbedLiveSample("flex-grow-ratios")}} Remember that you can use any positive value here. It is the ratio between the items that matters. You can use large numbers or decimals; it's up to you. To test this, change the `flex-grow` values in the above example to `.25`, `.25`, and `.50`. You should see the same result. @@ -124,7 +238,31 @@ While `flex-grow` is used to add available space to items that can grow, `flex-s In this example, there are three `200px`-wide flex items in a `500px`-wide container. With `flex-shrink` set to `0`, the items are not allowed to shrink, causing them to overflow the container. -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}} +```html live-sample___flex-shrink +
    +
    One
    +
    Two
    +
    Three has more content
    +
    +``` + +```css live-sample___flex-shrink +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 0 0 auto; + width: 200px; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} +``` + +{{EmbedLiveSample("flex-shrink")}} Change the `flex-shrink` value to `1`; each item will shrink by the same amount, fitting all the items into the container. The negative free space has been proportionally removed from each item, making each flex item smaller than its initial width. @@ -138,7 +276,30 @@ Small items will not shrink to less than their `min-content` size, which is the This example demonstrates `min-content` flooring, with the `flex-basis` resolving to the size of the content. If you change the width on the flex container, such as increasing it to `700px`, and then reduce the flex item width, you can see that the first two items will wrap. However, they will never become smaller than their `min-content` size. When the container gets small, the space is only removed from the third item when shrunken further. -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}} +```html live-sample___flex-shrink-min-content +
    +
    Item One
    +
    Item Two
    +
    Item Three has more content and so has a larger size
    +
    +``` + +```css live-sample___flex-shrink-min-content +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 auto; +} + +.box { + border: 2px dotted rgb(96 139 168); + width: 500px; + display: flex; +} +``` + +{{EmbedLiveSample("flex-shrink-min-content")}} In practice, this shrinking behavior provides reasonable results. It prevents content from disappearing completely and from becoming smaller than its minimum content size. The above rules are sensible for content that needs to shrink to fit its container. @@ -148,7 +309,42 @@ In the same way as `flex-grow`, you can give flex items different `flex-shrink` In this example, the first item has a `flex-shrink` factor of `1`, the second item `0` (so it won't shrink at all), and the third item `4`, making a total of `5` shrink factors. The third item, therefore, shrinks approximately four times more rapidly than the first, but neither will shrink below their `min-content` width. Play around with the different values: as with `flex-grow`, you can use decimals or larger numbers here as well. -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}} +```html live-sample___flex-shrink-ratios +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-shrink-ratios +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + width: 200px; +} + +.box { + display: flex; + width: 500px; + border: 2px dotted rgb(96 139 168); +} + +.one { + flex: 1 1 auto; +} + +.two { + flex: 1 0 auto; +} + +.three { + flex: 2 4 auto; +} +``` + +{{EmbedLiveSample("flex-shrink-ratios")}} ## Mastering sizing of flex items From f30dffedcab86e62919265f08238ed712434a817 Mon Sep 17 00:00:00 2001 From: Andi Pieper Date: Wed, 6 Nov 2024 19:15:45 +0100 Subject: [PATCH 13/70] Mp 1708 rari content fixes (#36680) * fixed anchor link * added notecard class to html table content --- files/en-us/web/css/list-style/index.md | 2 +- files/en-us/web/html/attributes/index.md | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/list-style/index.md b/files/en-us/web/css/list-style/index.md index d7e7d4bbbaf6704..7b81064ac41a70e 100644 --- a/files/en-us/web/css/list-style/index.md +++ b/files/en-us/web/css/list-style/index.md @@ -103,7 +103,7 @@ These CSS workarounds should only be used when an HTML solution is unavailable, - ['Fixing' Lists](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) (2023) - [VoiceOver and list-style-type: none](https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html) (2017) -- [Understanding WCAG: Create content that can be presented in different ways](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) +- [Understanding WCAG: Create content that can be presented in different ways](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_—_create_content_that_can_be_presented_in_different_ways) - [Understanding success criterion 1.3.1: Info and relationships | WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) ## Examples diff --git a/files/en-us/web/html/attributes/index.md b/files/en-us/web/html/attributes/index.md index d08f5ccbe883598..71e012272ad99c1 100644 --- a/files/en-us/web/html/attributes/index.md +++ b/files/en-us/web/html/attributes/index.md @@ -146,7 +146,7 @@ Elements in HTML have **attributes**; these are additional values that configure Specifies the URL of an image file. -
    +

    Note: Although browsers and email clients may still support this attribute, it is obsolete. Use CSS @@ -168,7 +168,7 @@ Elements in HTML have **attributes**; these are additional values that configure

    Background color of the element.

    -
    +

    Note: This is a legacy attribute. Please use the CSS {{ Cssxref("background-color") }} property instead. @@ -184,7 +184,7 @@ Elements in HTML have **attributes**; these are additional values that configure

    The border width.

    -
    +

    Note: This is a legacy attribute. Please use the CSS {{ Cssxref("border") }} property instead. @@ -250,7 +250,7 @@ Elements in HTML have **attributes**; these are additional values that configure This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

    -
    +

    Note: This is a legacy attribute. Please use the CSS {{ Cssxref("color") }} property instead. @@ -605,7 +605,7 @@ Elements in HTML have **attributes**; these are additional values that configure Specifies the height of elements listed here. For all other elements, use the CSS {{cssxref("height")}} property.

    -
    +

    Note: In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in @@ -1359,7 +1359,7 @@ Elements in HTML have **attributes**; these are additional values that configure

    For the elements listed here, this establishes the element's width.

    -
    +

    Note: For all other instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in From 34dd2105bc45085122da7b478990025c3e7fe988 Mon Sep 17 00:00:00 2001 From: Claas Augner <495429+caugner@users.noreply.github.com> Date: Wed, 6 Nov 2024 20:44:06 +0100 Subject: [PATCH 14/70] chore(deps): bump node from v18 to v20 (#36675) --- .nvmrc | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.nvmrc b/.nvmrc index 3f430af82b3dfa7..9a2a0e219c9b280 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18 +v20 diff --git a/package.json b/package.json index 7ff22839defe3cc..2edb166fd325806 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "url": "git+https://github.com/mdn/content.git" }, "engines": { - "node": ">=18.20.0" + "node": ">=20" }, "type": "module", "scripts": { From 33cd63a518c57caded1b43ff9fff071230a2397a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 6 Nov 2024 12:29:52 -0800 Subject: [PATCH 15/70] initial-letter: clarify usage and see also (#36581) * initial-letter: clarify usage and see also * syntax update * added an example * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update index.md * red outline * Update index.md * switch example order --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/initial-letter/index.md | 71 ++++++++++++++++++--- 1 file changed, 62 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/initial-letter/index.md b/files/en-us/web/css/initial-letter/index.md index 19b252eacd12c1a..31380f6d06c1208 100644 --- a/files/en-us/web/css/initial-letter/index.md +++ b/files/en-us/web/css/initial-letter/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.initial-letter {{CSSRef}} -The `initial-letter` CSS property sets styling for dropped, raised, and sunken initial letters. +The `initial-letter` CSS property sets the size and sink for dropped, raised, and sunken initial letters. This property applies to {{cssxref("::first-letter")}} pseudo-elements and inline-level first children of block containers. ## Syntax @@ -15,11 +15,13 @@ The `initial-letter` CSS property sets styling for dropped, raised, and sunken i /* Keyword values */ initial-letter: normal; -/* Numeric values */ -initial-letter: 1.5; /* Initial letter occupies 1.5 lines */ -initial-letter: 3; /* Initial letter occupies 3 lines */ -initial-letter: 3 2; /* Initial letter occupies 3 lines and - sinks 2 lines */ +/* One value */ +initial-letter: 3; /* 3 lines tall, baseline at line 3 */ +initial-letter: 1.5; /* 1.5 lines tall, baseline at line 2 */ + +/* Two values */ +initial-letter: 3 2; /* 3 lines tall, baseline at line 2 (raised 1 line) */ +initial-letter: 3 1; /* 3 lines tall, baseline unchanged (raised 2 lines) */ /* Global values */ initial-letter: inherit; @@ -29,10 +31,10 @@ initial-letter: revert-layer; initial-letter: unset; ``` -The keyword value `normal`, or a `` optionally followed by an ``. - ### Values +The keyword value `normal`, or a `` optionally followed by an ``. + - `normal` - : No special initial-letter effect. Text behaves as normal. - `` @@ -77,12 +79,61 @@ The keyword value `normal`, or a `` optionally followed by an ` -webkit-initial-letter: 3; initial-letter: 3; } + +p { + outline: 1px dashed red; +} ``` #### Result {{EmbedLiveSample('Setting_initial_letter_size', 250, 180)}} +### Setting the sink value + +In this example, all the initial letters are the same size, but with different sink values. + +#### HTML + +```html +

    Initial letter: Sink value = 4

    +

    Initial letter: Sink value not declared (same as size)

    +

    Initial letter: Sink value = 2

    +

    Initial letter: Sink value = 1

    +``` + +#### CSS + +```css +.four::first-letter { + -webkit-initial-letter: 3 4; + initial-letter: 3 4; +} + +.same::first-letter { + -webkit-initial-letter: 3; + initial-letter: 3; +} + +.two::first-letter { + -webkit-initial-letter: 3 2; + initial-letter: 3 2; +} + +.one::first-letter { + -webkit-initial-letter: 3 1; + initial-letter: 3 1; +} + +p { + outline: 1px dashed red; +} +``` + +#### Result + +{{EmbedLiveSample('Setting_the_sink_value', 250, 240)}} + ## Specifications {{Specifications}} @@ -93,4 +144,6 @@ The keyword value `normal`, or a `` optionally followed by an ` ## See also -- [Drop caps in CSS](https://www.oddbird.net/2017/01/03/initial-letter/) +- {{cssxref("::first-letter")}} +- {{cssxref(":first-child")}} +- [Drop caps in CSS](https://www.oddbird.net/2017/01/03/initial-letter/) via Oddbird (2017) From c7c79d1b1b5a537308b59537e27ec20f8c48f22c Mon Sep 17 00:00:00 2001 From: mikoloism Date: Thu, 7 Nov 2024 07:45:41 +0330 Subject: [PATCH 16/70] Clarify WebSocket connection initialization (#36672) Co-authored-by: sideshowbarker --- files/en-us/web/api/websocket/websocket/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/websocket/websocket/index.md b/files/en-us/web/api/websocket/websocket/index.md index b066a8ffde0ed79..b89a12f7c5bc630 100644 --- a/files/en-us/web/api/websocket/websocket/index.md +++ b/files/en-us/web/api/websocket/websocket/index.md @@ -58,20 +58,20 @@ The examples below show how you might connect to a `WebSocket`. The code below shows how we can connect to a socket using an URL with the `wss` schema: ```js -const httpsWebSocket = new WebSocket('wss://websocket.example.org'); -console.log(httpsWebSocket.url); // 'wss://websocket.example.org' +const wssWebSocket = new WebSocket('wss://websocket.example.org'); +console.log(wssWebSocket.url); // 'wss://websocket.example.org' ... // Do something with socket -httpsWebSocket.close(); +wssWebSocket.close(); ``` The code for connecting to an HTTPS URL is nearly the same. Under the hood the browser resolves this to a "WSS" connection, so the {{domxref("WebSocket.url")}} will have the schema "wss:". ```js -let wssWebSocket = new WebSocket('https://websocket.example.org'); -console.log(wssWebSocket.url); // 'wss://websocket.example.org' +const httpsWebSocket = new WebSocket('https://websocket.example.org'); +console.log(httpsWebSocket.url); // 'wss://websocket.example.org' ... // Do something with socket -wssWebSocket.close(); +httpsWebSocket.close(); ``` We can also resolve relative URLs. From 7782020d48b20a95fab6767f574cddda8ff59b86 Mon Sep 17 00:00:00 2001 From: jolka-ef <94794622+jolka-ef@users.noreply.github.com> Date: Thu, 7 Nov 2024 05:17:02 +0100 Subject: [PATCH 17/70] fix incorrect return value in RTCTrackEvent.receiver (#36674) --- files/en-us/web/api/rtctrackevent/receiver/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/rtctrackevent/receiver/index.md b/files/en-us/web/api/rtctrackevent/receiver/index.md index a8022e191c3742c..d020a34de022c60 100644 --- a/files/en-us/web/api/rtctrackevent/receiver/index.md +++ b/files/en-us/web/api/rtctrackevent/receiver/index.md @@ -15,7 +15,7 @@ of the {{domxref("RTCTrackEvent")}} interface indicates the ## Value -The {{domxref("RTCRtpTransceiver")}} which pairs the `receiver` with a +The {{domxref("RTCRtpReceiver")}} which pairs the `receiver` with a sender and other properties which establish a single bidirectional {{Glossary("RTP", "SRTP")}} stream for use by the {{domxref("RTCTrackEvent.track", "track")}} associated with the `RTCTrackEvent`. From 8a7e911652fcb4a61cc95f458d53f39ad08c0946 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Thu, 7 Nov 2024 12:43:32 +0100 Subject: [PATCH 18/70] chore(css): Move CSS examples - Flexbox, Flow (#36671) * chore(css): Move CSS examples - CSS flexible box layout * chore(css): Move CSS examples - Mastering wrapping of flex items * chore(css): Move CSS examples - Ordering flex items * chore(css): Move CSS examples - Relationship of flexbox to other layout methods * chore(css): Move CSS examples - Typical use cases of flexbox * chore(css): Move CSS examples - Block and inline layout in normal flow * chore(css): Move CSS examples - Block and inline layout in normal flow * chore(css): Move CSS examples - Block and inline layout in normal flow * chore(css): Move CSS examples - CSS flexible box layout - show height stretching mentioned in prose * chore(css): Move CSS examples - CSS flexible box layout - changes following reviewer feedback --- .../web/css/css_flexible_box_layout/index.md | 50 +-- .../mastering_wrapping_of_flex_items/index.md | 268 ++++++++++++++- .../ordering_flex_items/index.md | 153 ++++++++- .../index.md | 146 +++++++- .../typical_use_cases_of_flexbox/index.md | 312 +++++++++++++++++- .../index.md | 173 +++++++++- 6 files changed, 1045 insertions(+), 57 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/index.md b/files/en-us/web/css/css_flexible_box_layout/index.md index e7eaf982347337d..6c0e02f18c94b5b 100644 --- a/files/en-us/web/css/css_flexible_box_layout/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/index.md @@ -11,9 +11,36 @@ The **CSS flexible box layout** module defines a CSS box model optimized for use ## Flexible box layout in action -In the following example a container has been set to `display: flex`, which means that the three child items become flex items. The value of `justify-content` has been set to `space-between` in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of `align-items` being `stretch`. The items stretch to the height of the flex container, making them each appear as tall as the tallest item. - -{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 600)}} +In the following example, a container has been set to `display: flex`, which means that the three child items become flex items. The value of `justify-content` has been set to `space-between` in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of `align-items` being `stretch`. The items stretch to the height of the flex container, making them each appear as tall as the tallest item. + +```html live-sample___simple-example +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    +
    +``` + +```css live-sample___simple-example +body { + font-family: sans-serif; +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + justify-content: space-between; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 1em; +} +``` + +{{EmbedLiveSample("simple-example")}} ## Reference @@ -43,39 +70,22 @@ In the following example a container has been set to `display: flex`, which mean ## Guides - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - - : An overview of the features of Flexbox. - - [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) - - : How Flexbox relates to other layout methods and other CSS specifications. - - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) - - : How the box alignment properties work with Flexbox. - - [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) - - : Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so. - - [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) - - : Explaining the flex-grow, flex-shrink and flex-basis properties. - - [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) - - : How to create flex containers with multiple lines and control the display of the items in those lines. - - [Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) - - : Common design patterns that are typical Flexbox use cases. - - [CSS layout: flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - - : Learn how to use flexbox layout to create web layouts. - - [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) - - : Details features of [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) which are specific to flexbox. ## Related concepts diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 5e70c94792613d8..f692ff0e2f5366b 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -14,17 +14,110 @@ The initial value of the {{cssxref("flex-wrap")}} property is `nowrap`. This mea In this example, there are ten flex items with a `flex-basis` of `160px` that can grow and shrink. Once there is not enough space to place another 160 pixel item in a row, a new flex line is created. New lines are created as needed until all of the items are placed. As the items can grow, they will expand to fill each row completely. If there is only one item on the final line it will stretch to fill the entire line. -{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}} +```html live-sample___row-wrap +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    +
    +``` + +```css live-sample___row-wrap +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 160px; +} +``` + +{{EmbedLiveSample("row-wrap")}} The same thing happens with flex columns. To wrap and create new columns, the container needs to have a height. In the case of columns, items stretch vertically to fill each column completely. -{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}} +```html live-sample___column-wrap +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    +
    +``` + +```css live-sample___column-wrap +.box { + border: 2px dotted rgb(96 139 168); + height: 300px; + display: flex; + flex-direction: column; + flex-wrap: wrap; +} +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 80px; +} +``` + +{{EmbedLiveSample("column-wrap", "", "320px")}} ## Wrapping and flex-direction Wrapping works as you might expect when combined with `flex-direction`. If `flex-direction` is set to `row-reverse` then the items will start from the end edge of the container and lay themselves out in reverse ordered lines. -{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}} +```html live-sample___row-reverse-wrap +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    +
    +``` + +```css live-sample___row-reverse-wrap +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; + flex-direction: row-reverse; + width: 500px; +} +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 160px; +} +``` + +{{EmbedLiveSample("row-reverse-wrap")}} Note that the reversing is only happening in the inline, row direction. We start on the right then go onto the second line and again start from the right. We aren't reversing in both directions, starting from the bottom coming up the container! @@ -36,7 +129,37 @@ There are no flexbox features to tell items in one row to line up with items in This example demonstrates the difference, using CSS grid layout to create a layout with as many columns of at least `160px` as will fit, distributing the extra space between all columns. We use the same HTML as the [flexbox wrapped row example](#making_things_wrap) above but set `display: grid` on it. Instead of the {{cssxref("flex")}} shorthand, which has no effect outside of flexbox, we set the item's minimum width and ability to grow directly on the container with {{cssxref("grid-template-columns")}}. With CSS grid, the last item stays in its grid cell; grid items don't stretch when there are fewer of them in the last row. -{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}} +```html live-sample___grid-example +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    +
    +``` + +```css live-sample___grid-example +.box { + border: 2px dotted rgb(96 139 168); + display: grid; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + width: 500px; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("grid-example")}} This is the difference between one and two-dimensional layouts. In a one-dimensional layout method like flexbox, we only control the row or column. In a two-dimensional grid layout, we control both at the same time. If you want the space distribution row by row, use Flexbox. If you don't, use CSS grid. @@ -46,7 +169,42 @@ Flexbox-based layouts can be forced to line up as grid systems, but that is not In this example, `flex-grow` and `flex-shrink` have been set to `0` to make inflexible flex items. The flexibility is controlled via percentages. -{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}} +```html live-sample___flex-grid +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    +
    +``` + +```css live-sample___flex-grid +* { + box-sizing: border-box; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 0 0 33.3333%; +} +``` + +{{EmbedLiveSample("flex-grid")}} This technique allows you to line up flex items on the cross-axis. However, when you catch yourself adding widths to flex items in this way or adding empty flex items to take up space, it is a good indication you may want to switch to CSS grid layout for that component. @@ -58,7 +216,42 @@ The `gap` property is not the only thing that can add space between items. Margi To see how the `gap` property differs from `margin` in both axes, try changing the `gap` value in the container `.box` and adding a `margin` value to the `.box > *` rule in the stylesheet below. Click the "Reset" button to revert to the previous values. -{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}} +```html live-sample___gaps +
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    +
    +
    +``` + +```css live-sample___gaps +.wrapper { + border: 2px dotted rgb(96 139 168); + width: 500px; +} +.box { + display: flex; + flex-wrap: wrap; + gap: 10px; +} +.box > * { + flex: 1 1 160px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("gaps", "", "220px")}} ## Collapsed items @@ -73,7 +266,32 @@ In the following live example, I have a non-wrapped flex container. The third it > [!NOTE] > Use Firefox for the below two examples as Chrome and Safari treat collapse as hidden. -{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}} +```html live-sample___visibility-collapse +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    +
    +``` + +```css live-sample___visibility-collapse +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + width: 600px; +} +.box > * { + flex: 1 1 200px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +.hide { + visibility: collapse; +} +``` + +{{EmbedLiveSample("visibility-collapse")}} When dealing with multiple-line flex containers however you need to understand that the wrapping is re-done _after_ collapsing. So the browser needs to re-do the wrapping behavior to account for the new space that the collapsed item has left in the inline direction. @@ -81,7 +299,41 @@ This means that items might end up on a different line to the one they started o I have created this behavior in the next live example. You can see how the stretching changes row based on the location of the collapsed item. If you add more content to the second item, it changes row once it gets long enough. That top row then only becomes as tall as a single line of text. -{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}} +```html live-sample___wrapped-visibility-collapse +
    +
    One
    +
    Add more text to this box to make it grow
    +
    Three
    has
    extra
    text
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    +
    +``` + +```css live-sample___wrapped-visibility-collapse +.box { + border: 2px dotted rgb(96 139 168); + width: 500px; + display: flex; + flex-wrap: wrap; +} +.box > * { + padding: 10px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 auto; +} +.hide { + visibility: collapse; +} +``` + +{{EmbedLiveSample("wrapped-visibility-collapse")}} If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can't shift rows. diff --git a/files/en-us/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/ordering_flex_items/index.md index 1cb6bc3b01f9a70..d5158d7b8301f0a 100644 --- a/files/en-us/web/css/css_flexible_box_layout/ordering_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/ordering_flex_items/index.md @@ -43,7 +43,35 @@ The flexible box layout specification warns us not to use reordering as a way of As you tab from link to link in the live example below, the focus style is highlighted, demonstrating that changing the order of flex-items with `flex-direction` does not change the tabbing order, which will continue to follow the source code order. -{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}} +```html live-sample___flex-direction +
    + + + +
    +``` + +```css live-sample___flex-direction +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 10px; +} + +.box > * a:focus { + background-color: yellow; + color: black; +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-direction: row-reverse; +} +``` + +{{EmbedLiveSample("flex-direction")}} In the same way that changing the value of `flex-direction` does not change the tabbing order, changing this value does not change paint order. It is a visual reversal of the items only. @@ -73,7 +101,47 @@ These items would be displayed on the page in the following order: Play around with the values in this live example below and see how that changes the order. Also, try changing `flex-direction` to `row-reverse` and see what happens — the start line is switched so the ordering begins from the opposite side. -{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}} +```html live-sample___order +
    + + + + + +
    +``` + +```css live-sample___order +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 10px; +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-direction: row; +} +.box :nth-child(1) { + order: 2; +} +.box :nth-child(2) { + order: 3; +} +.box :nth-child(3) { + order: 1; +} +.box :nth-child(4) { + order: 3; +} +.box :nth-child(5) { + order: 1; +} +``` + +{{EmbedLiveSample("order")}} Flex items have a default `order` value of `0`. Therefore, items with an integer value greater than `0` will be displayed after any items that have not been given an explicit `order` value. @@ -81,7 +149,43 @@ You can also use negative values with `order`, which can be quite useful. If you In the live code example below, the items are laid out using flexbox. By changing which item has the class `active` assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. -{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}} +```html live-sample___negative-order +
    + + +
    3
    + + +
    +``` + +```css live-sample___negative-order +* { + box-sizing: border-box; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 10px; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.active { + order: -1; + flex: 1 0 100%; +} +``` + +{{EmbedLiveSample("negative-order")}} The items are displayed in _order-modified document order_ meaning the value of the `order` property is taken into account before the items are displayed. @@ -109,7 +213,48 @@ Visually, the date appears above the heading, in the source. However, if the car The card is our flex container, with `flex-direction` set to `column`. We give the date an `order` of `-1`, placing it above the heading. -{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}} +```html live-sample___usecase-order +
    +
    +

    News item title

    +
    1 Nov 2017
    +

    This is the content of my news item. Very newsworthy.

    +
    +
    +

    Another title

    +
    6 Nov 2017
    +

    This is the content of my news item. Very newsworthy.

    +
    +
    +``` + +```css live-sample___usecase-order +body { + font-family: sans-serif; +} + +.wrapper { + display: flex; + flex: 1 1 200px; + gap: 1em; +} + +.card { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 1em; + display: flex; + flex-direction: column; +} + +.date { + order: -1; + text-align: right; +} +``` + +{{EmbedLiveSample("usecase-order", "", "220px")}} These small tweaks are the sort of cases where the `order` property makes sense. Keep the logical order the same as the reading and tab order of the document, and maintain that in the most accessible and structured fashion. Then use `order` for purely visual design tweaks. Don't reorder items that receive keyboard focus. Ensure you always test your content using only a keyboard rather than a mouse or a touchscreen; this will reveal if your development choices make it more complex to navigate the content. diff --git a/files/en-us/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/en-us/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md index 0fefe736b5453b1..7fbded0d784181c 100644 --- a/files/en-us/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md @@ -30,7 +30,30 @@ The writing modes specification defines the following values of the {{cssxref("w - `sideways-rl` - `sideways-lr` -{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} +```html live-sample___writing-modes +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___writing-modes +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + writing-mode: horizontal-tb; +} +``` + +{{EmbedLiveSample("writing-modes")}} The `sideways-rl` and `sideways-lr` have support only in Firefox currently. @@ -44,7 +67,30 @@ With regard to flex items, if an item was floated or cleared and then becomes a In this next live example the child elements have been floated, and then their container has had `display: flex` added. If you remove `display: flex`, you should see that the `.box` element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply `display: flex` and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items. -{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}} +```html live-sample___floats +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___floats +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + float: left; +} +``` + +{{EmbedLiveSample("floats")}} ## Flexbox and grid layout @@ -56,11 +102,68 @@ A common question is to ask what the difference is between flexbox and CSS grid The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas grid layout is a two-dimensional layout method. The example below has a flex layout. As already described in the [Basic concepts](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) article, flex items can be allowed to wrap but, once they do, each line behaves as if it were a flex container of its own. When space is distributed, flexbox does not look at the placement of items in other rows and tries to line things up with each other. -{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}} +```html live-sample___flex-layout +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    +``` + +```css live-sample___flex-layout +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; + padding: 1em; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 1em; + flex: 1 1 200px; +} +``` + +{{EmbedLiveSample("flex-layout", "", "300px")}} If we create a very similar layout using grid, we can control the layout in both rows and columns. -{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}} +```html live-sample___grid-layout +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    +``` + +```css live-sample___grid-layout +.box { + border: 2px dotted rgb(96 139 168); + padding: 1em; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, auto)); +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 1em; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("grid-layout", "", "300px")}} These examples point to another key difference between these layout methods. In grid layout, you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves. @@ -88,7 +191,38 @@ Note that this only removes the box from the layout; the sub-children don't beco As the box is removed, you cannot then use it to — for example — add a background color behind the nested sub children. If you remove `display: contents` in this live example you will see that the direct child we are removing has an orange background color. This also disappears when the box disappears. -{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}} +```html live-sample___display-contents +
    +
    One
    +
    Two
    +
    +
    Sub-item 1
    +
    Sub-item 2
    +
    +
    +``` + +```css live-sample___display-contents +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 1em; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + padding: 1em; + display: flex; +} + +.nested { + background-color: orange; + display: contents; +} +``` + +{{EmbedLiveSample("display-contents")}} > [!WARNING] -> Some browsers incorrectly remove some elements with `display: contents` from the accessibility tree (but descendants will remain), removing those elements' semantics while maintaining their child content. This means the element itself may not be announced by screen readers. See [`display: contents`](/en-US/docs/Web/CSS/display#display_contents) and [`display: contents` considered harmful`](https://ericwbailey.design/published/display-contents-considered-harmful/). +> Some browsers incorrectly remove some elements with `display: contents` from the accessibility tree (but descendants will remain), removing those elements' semantics while maintaining their child content. This means the element itself may not be announced by screen readers. See [`display: contents`](/en-US/docs/Web/CSS/display#display_contents) and [`display: contents` considered harmful](https://ericwbailey.design/published/display-contents-considered-harmful/). diff --git a/files/en-us/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md b/files/en-us/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md index 1186eb566f76f29..e42ecf4940f8ac1 100644 --- a/files/en-us/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md @@ -10,11 +10,11 @@ In this guide, we will take a look at some of the common use cases for flexbox ## Why choose flexbox? -Flexbox is generally the right CSS layout solution when you want to lay out a collection of items in one dimension or control the spacing between items. In this guide, we'll look at some of the typical use cases of Flexbox. +Flexbox is generally the right CSS layout solution when you want to lay out a collection of items in one dimension or control the spacing between items. In this guide, we'll look at some of the typical use cases of flexbox. ## Navigation -A common pattern for navigation is to have a list of items displayed as a horizontal bar. It is likely the most common of flexbox examples, and could be considered the ideal flexbox use case. +A common pattern for navigation is to have a list of items displayed as a horizontal bar. It's probably the most common of flexbox examples, and could be considered an ideal flexbox use case. When we have a set of items that we want to display horizontally, we may well end up with additional space. We need to decide what to do with that space, and have a couple of options. We either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space. @@ -24,7 +24,42 @@ To distribute the space between or around the items, we use the alignment proper In this example, we display the items at their natural size and use `justify-content: space-between` to space the items equally. You can change how the space is distributed using the `space-around` or `space-evenly` values. You could also use `start` to put the space at the end of the items, `end` to place it before them, or `center` to center the navigation items. -{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}} +```html live-sample___navigation + +``` + +```css live-sample___navigation +nav { + border: 2px solid #eeeeee; +} + +nav a { + text-decoration: none; + color: #000; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 10px; + display: block; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: space-between; +} +``` + +{{EmbedLiveSample("navigation")}} ### Space distributed within the items @@ -34,7 +69,44 @@ If you wanted to respect the size property of your navigation items but have the In the live example below try changing `flex: auto` to `flex: 1`. This shorthand for `flex: 1 1 0` causes all of the items to become the same width, as they are working from a `flex-basis` of `0`, allowing all of the space to be distributed evenly. -{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}} +```html live-sample___navigation-flex + +``` + +```css live-sample___navigation-flex +nav { + border: 2px solid #eeeeee; +} +nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +nav a { + text-decoration: none; + color: #000; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 10px; + display: block; +} + +nav li { + flex: auto; +} +``` + +{{EmbedLiveSample("navigation-flex")}} ## Split navigation @@ -42,15 +114,78 @@ Another way to align items on the main axis is to use auto margins. This enables The items are aligned on the main axis with `normal`, which behaves as `start`, as this is the initial behavior of flexbox. The [`gap`](/en-US/docs/Web/CSS/gap) property creates gaps between items. And we are aligning the last item to the right by giving it a `margin-left` value of `auto`. You can move the class from one item to another to change where the split happens. -{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}} +```html live-sample___split-navigation + +``` + +```css live-sample___split-navigation +nav { + border: 2px solid #eeeeee; +} + +nav a { + text-decoration: none; + color: #000; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 10px; + display: block; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + gap: 20px; +} + +.push-right { + margin-left: auto; +} +``` + +{{EmbedLiveSample("split-navigation")}} ## Center item A long-standing joke among developers is that the hardest problem in web design is vertical centering. Vertically centering content is very straightforward with flexbox alignment properties, as the following live example shows. -You can play with the alignment, aligning the item to the start with `start` or end with `end`. +Click **"Play"** and try changing the alignment, for example aligning the item to the start with `start` or end with `end`: -{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}} +```html live-sample___center +
    +
    +
    +``` + +```css live-sample___center +.box { + height: 300px; + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: center; + justify-content: center; +} + +.box div { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + width: 100px; + height: 100px; +} +``` + +{{EmbedLiveSample("center", "", "320px")}} With [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) properties, you can vertically center an element inside another without flexbox. In the example above, try removing the flex properties from the box and adding `align-content: center`. Then add `margin: auto` to the element you want to horizontally center. @@ -62,7 +197,56 @@ Whether you use flexbox or grid to lay out a list of card components, these layo Flexbox solves this. We make the card a flex container, with {{cssxref("flex-direction", "flex-direction: column")}}. We then set the content area to `flex: 1`, which is the shorthand for `flex: 1 1 0` — the item can grow and shrink from a flex basis of `0`. As this is the only item that can grow, it takes up all available space in the flex container and pushes the footer to the bottom. If you remove the `flex` property from the live example you will see the footer moves up to sit directly under the content. -{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}} +```html live-sample___cards +
    +
    +
    +

    This card doesn't have much content.

    +
    +
    Card footer
    +
    +
    +
    +

    + This card has a lot more content which means that it defines the height + of the container the cards are in. I've laid the cards out using grid + layout, so the cards themselves will stretch to the same height. +

    +
    +
    Card footer
    +
    +
    +``` + +```css live-sample___cards +body { + font-family: sans-serif; +} +.cards { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-gap: 10px; +} + +.card { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + display: flex; + flex-direction: column; +} + +.card .content { + padding: 10px; + flex: 1 1 auto; +} + +.card footer { + background-color: rgb(96 139 168 / 0.2); + padding: 10px; +} +``` + +{{EmbedLiveSample("cards", "", "280px")}} ## Media objects @@ -72,7 +256,39 @@ This pattern is used for comments and other places where images are placed next In this example, the media object is aligned to `flex-start` and the `.content` is set to grow, with the grow factor set to `1`. These properties are the same as those used for our column layout card pattern above. -{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}} +```html live-sample___media +
    +
    + A colorful balloon against a blue sky +
    +
    + This is the content of my media object. Items directly inside the flex + container will be aligned to flex-start. +
    +
    +``` + +```css live-sample___media +img { + max-width: 100%; + display: block; +} + +.media { + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: flex-start; +} + +.media .content { + flex: 1; + padding: 10px; +} +``` + +{{EmbedLiveSample("media", "", "320px")}} Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design. @@ -116,7 +332,43 @@ To switch the display of the media object and have the image on the right and co In this example, we added a `flipped` class next to the `media` class. Remove the class from the HTML to see how the display changes. -{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}} +```html live-sample___media-flipped +
    +
    + A colorful balloon against a blue sky +
    +
    + This is the content of my media object. Items directly inside the flex + container will be aligned to flex-start. +
    +
    +``` + +```css live-sample___media-flipped +img { + max-width: 100%; + display: block; +} + +.media { + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: flex-start; +} + +.flipped { + flex-direction: row-reverse; +} + +.media .content { + flex: 1; + padding: 10px; +} +``` + +{{EmbedLiveSample("media-flipped", "", "320px")}} ## Form controls @@ -124,7 +376,45 @@ Flexbox is particularly useful when it comes to styling form controls. Forms hav Flexbox makes this type of layout easy to achieve. The `