diff --git a/.github/ISSUE_TEMPLATE/content-bug.yml b/.github/ISSUE_TEMPLATE/content-bug.yml index 6a18dc073dc4cde..2bad4412c180fe1 100644 --- a/.github/ISSUE_TEMPLATE/content-bug.yml +++ b/.github/ISSUE_TEMPLATE/content-bug.yml @@ -8,7 +8,7 @@ body: ### Before you start **Want to change a page yourself?** This content is open source! - ↩ Look for the _Edit on GitHub_ link on any MDN page. + ↩ Look for the _View this page on GitHub_ link on any MDN page to edit the content on GitHub.com afterwards. **Is your issue about a browser compatibility table?** ↩ Use the _Report problems with this compatibility data on GitHub_ link next to a compatibility table. diff --git a/.github/ISSUE_TEMPLATE/page-report.yml b/.github/ISSUE_TEMPLATE/page-report.yml index c1260f59928bfda..a3bf5b8519c90e3 100644 --- a/.github/ISSUE_TEMPLATE/page-report.yml +++ b/.github/ISSUE_TEMPLATE/page-report.yml @@ -8,7 +8,7 @@ body: ### Before you start **Want to change this page yourself?** This content is open source! - ↩ Go back and use the _Edit on GitHub_ link on the page. + ↩ Go back and use the _View this page on GitHub_ link on the page to edit the content on GitHub.com afterwards. **Is your issue about the browser compatibility table?** ↩ Go back and use the _Report problems with this compatibility data on GitHub_ link on the page. diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index cf6ea6df153ca55..a5545b4e1cc5251 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -10118,6 +10118,7 @@ /en-US/docs/Web/API/Web_Audio_API/Migrating_from_webkitAudioContext /en-US/docs/Web/API/Web_Audio_API /en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext /en-US/docs/Web/API/Web_Audio_API /en-US/docs/Web/API/Web_Audio_API/Targeting /en-US/docs/Web/API/WebXR_Device_API/Targeting +/en-US/docs/Web/API/Web_Audio_API/Tools /en-US/docs/Web/API/Web_Audio_API /en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics /en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics /en-US/docs/Web/API/Web_Audio_API/ended_event /en-US/docs/Web/API/AudioScheduledSourceNode/ended_event /en-US/docs/Web/API/Web_Crypto_API/Supported_algorithms /en-US/docs/Web/API/SubtleCrypto diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 1d7a283be7aa228..62927eab5bedeb1 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -65415,10 +65415,6 @@ "modified": "2020-06-16T14:49:12.422Z", "contributors": ["jmcantrell", "DianeLooney", "Sheppy"] }, - "Web/API/Web_Audio_API/Tools": { - "modified": "2019-03-18T21:37:44.787Z", - "contributors": ["chrisdavidmills", "alien35", "Sheppy"] - }, "Web/API/Web_Audio_API/Using_AudioWorklet": { "modified": "2020-10-11T19:28:05.402Z", "contributors": ["hamishwillee", "tcveatch", "Sheppy"] diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md index f426366e52cf110..d44ce90accda428 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md @@ -77,7 +77,7 @@ Now click on the play arrow in the top right corner of the scene to launch and r This looks great! Let's add more shapes to the scene to make it look more interesting. -![PlayCanvas Editor - Boxrender](playcanvas-editor-boxrender.png) +![PlayCanvas Editor - Box render](playcanvas-editor-boxrender.png) ## Adding more shapes @@ -97,7 +97,7 @@ Now follow the same steps as we did before when coloring the cube: ![PlayCanvas Editor - Cylinder material](playcanvas-editor-cylindermaterial.png) -Follow the same approach again to add a cone to the scene, giving it a grayish color (we used EAEFF2.) You should now have three shapes on your scene, something like the below screenshot. +Follow the same approach again to add a cone to the scene, giving it a grayish color (we used `#EAEFF2`.) You should now have three shapes on your scene, something like the below screenshot. ![PlayCanvas Editor - Cone](playcanvas-editor-cone.png) diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index b9d8454c21a9398..849b89cd4432e82 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -214,7 +214,7 @@ dodecahedron.position.x = 25; scene.add(dodecahedron); ``` -This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter, `DodecahedronGeometry(),` defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus. +This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter to `DodecahedronGeometry()` defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus. As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light. @@ -250,7 +250,7 @@ This rotates the cube on every frame, by a tiny bit, so the animation looks smoo ### Scaling -We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called `t,` for counting elapsed time. Add it right before the `render()` function: +We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable called `t` for counting elapsed time. Add it right before the `render()` function: ```js let t = 0; diff --git a/files/en-us/games/techniques/audio_for_web_games/index.md b/files/en-us/games/techniques/audio_for_web_games/index.md index a21425554bb5e9d..d2593d6b52808bd 100644 --- a/files/en-us/games/techniques/audio_for_web_games/index.md +++ b/files/en-us/games/techniques/audio_for_web_games/index.md @@ -143,7 +143,7 @@ The advantage is that we can prime one piece of audio and have our sprites ready ```js const myAudio = document.createElement("audio"); -myAudio.src = "mysprite.mp3"; +myAudio.src = "my-sprite.mp3"; myAudio.play(); myAudio.pause(); ``` diff --git a/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md b/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md index da104d7f69b9791..f75e1fb5aa5bdf8 100644 --- a/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md +++ b/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md @@ -346,9 +346,9 @@ if (gamepadAPI.buttonPressed("B")) { } ``` -## The paused and gameover states +## The paused and game-over states -We already learned how to control the whole lifecycle of the game: pausing the gameplay, restarting it, or getting back to the main menu. It works smooth on mobile and desktop, and adding gamepad controls is just as straightforward — in the `update()` function, we check to see if the current state status is `paused` — if so, the relevant actions are enabled: +We already learned how to control the whole lifecycle of the game: pausing the gameplay, restarting it, or getting back to the main menu. It works smooth on mobile and desktop, and adding gamepad controls is just as straightforward — in the `update()` function, we check to see if the current state status is "paused" — if so, the relevant actions are enabled: ```js if (GamepadAPI.buttons.pressed("Start")) { @@ -360,7 +360,7 @@ if (GamepadAPI.buttons.pressed("Back")) { } ``` -Similarly, when the `gameover` state status is active, then we can allow the user to restart the game instead of continuing it: +Similarly, when the "game-over" state status is active, then we can allow the user to restart the game instead of continuing it: ```js if (GamepadAPI.buttons.pressed("Start")) { diff --git a/files/en-us/games/techniques/control_mechanisms/other/index.md b/files/en-us/games/techniques/control_mechanisms/other/index.md index abbc4f722173692..463c0375a3bbde1 100644 --- a/files/en-us/games/techniques/control_mechanisms/other/index.md +++ b/files/en-us/games/techniques/control_mechanisms/other/index.md @@ -72,7 +72,7 @@ You can see it in action by watching [this video](https://www.youtube.com/watch? Have you ever thought about controlling a game only with your hands? It's possible with [Leap Motion](https://www.ultraleap.com/), an immersive controller for games and apps. -Leapmotion is becoming more and more popular due to very good integration with VR headsets — demoing [Rainbow Membrane](https://mozilla.github.io/rainbow/) on an Oculus Rift with Leap Motion attached to it was voted one of the best WebVR experiences by JavaScript developers visiting demo booths at conferences around the world. +Leap Motion is becoming more and more popular due to very good integration with VR headsets — demoing [Rainbow Membrane](https://mozilla.github.io/rainbow/) on an Oculus Rift with Leap Motion attached to it was voted one of the best WebVR experiences by JavaScript developers visiting demo booths at conferences around the world. As well as being great for virtual interfaces, it can also be used for a casual 2D gaming experiences. It would be very difficult to do everything with only your hands, but it's totally doable for the simple Captain Roger's gameplay — steering the ship and shooting the bullets. @@ -158,15 +158,15 @@ The `diff` would be the difference between the initial position of the hand and This approach won't give us the full flexibility of using a Gamepad, or even Leap Motion, but it's definitely an interesting, unconventional alternative. You can use it to scroll a page hands-free, or play theremin, but it should also be enough to move the ship up and down the screen if implemented correctly. -## MaKey MaKey +## Makey Makey -If you want to go completely bananas you can use [MaKey MaKey](https://makeymakey.com/), a board that can turn anything into a controller — it's all about connecting real-world, conductive objects to a computer and using them as touch interfaces. +If you want to go completely bananas you can use [Makey Makey](https://makeymakey.com/), a board that can turn anything into a controller — it's all about connecting real-world, conductive objects to a computer and using them as touch interfaces. ![Controlling a banana piano using Makey Makey.](controls-banana.png) Check out the [banana piano video](https://www.youtube.com/watch?v=_DWQ6ce2Ags), and be sure to visit the [quick start guide](https://learn.sparkfun.com/tutorials/makey-makey-quickstart-guide) for all the needed info. -There's even a [Cylon.js-supported Makey Button functionality](https://cylonjs.com/documentation/drivers/makey-button/) inspired by the MaKey MaKey board, so you can use the popular Cylon robotics framework for your experiments with Arduino or Raspberry Pi. Connecting the boards and using them may look like this: +There's even a [Cylon.js-supported Makey Button functionality](https://cylonjs.com/documentation/drivers/makey-button/) inspired by the Makey Makey board, so you can use the popular Cylon robotics framework for your experiments with Arduino or Raspberry Pi. Connecting the boards and using them may look like this: ```js const Cylon = require("cylon"); diff --git a/files/en-us/games/techniques/tilemaps/index.md b/files/en-us/games/techniques/tilemaps/index.md index d96511c9995b60c..456185408c7f465 100644 --- a/files/en-us/games/techniques/tilemaps/index.md +++ b/files/en-us/games/techniques/tilemaps/index.md @@ -133,4 +133,4 @@ In fast games that might still not be enough. An alternative method would be to - [Demos and source code](https://mozdevs.github.io/gamedev-js-tiles/) - [Grid parts and relationships](https://www.redblobgames.com/grids/parts/) by Amit Patel (May 2021) - - [Isometric graphics in videogames](https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art) (Wikipedia) + - [Isometric graphics in video games](https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art) (Wikipedia) diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md index 1dff3c1ff633907..c1fc64c70c6581f 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md @@ -28,7 +28,7 @@ All the lessons — and the different versions of the [MDN Breakout game](https: 6. [Bounce off the walls](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls) 7. [Player paddle and controls](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls) 8. [Game over](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over) -9. [Build the brickfield](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field) +9. [Build the brick field](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field) 10. [Collision detection](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection) 11. [The score](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score) 12. [Win the game](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Win_the_game) diff --git a/files/en-us/glossary/accessible_name/index.md b/files/en-us/glossary/accessible_name/index.md index d573dcb58d1eb39..7e5cbe6cdb81c7a 100644 --- a/files/en-us/glossary/accessible_name/index.md +++ b/files/en-us/glossary/accessible_name/index.md @@ -18,7 +18,7 @@ Other elements get their accessible name from the content of associated elements For some elements, the accessible name comes from the element's attributes; for example, the `alt` attribute in the case of {{HTMLElement("img")}}. Given `banana`, the image's accessible name is "banana." -To create an association between visible content and an element or multiple text nodes and an element, the [`aria-labeledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute can be used. If there is no visible text to associate with a UI element needing an accessible name, the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute can be used. Names should not be added to elements marking up inline text, like {{HTMLElement("code")}}, {{HTMLElement("del")}}, and {{HTMLElement("mark")}}. +To create an association between visible content and an element or multiple text nodes and an element, the [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute can be used. If there is no visible text to associate with a UI element needing an accessible name, the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute can be used. Names should not be added to elements marking up inline text, like {{HTMLElement("code")}}, {{HTMLElement("del")}}, and {{HTMLElement("mark")}}. Many elements, such as sections of textual content, don't need an accessible name. All controls should have an accessible name. All images that convey information and aren't purely presentational do too. diff --git a/files/en-us/glossary/application_context/index.md b/files/en-us/glossary/application_context/index.md index 1156f35a3b40078..98458b26eb5b2d7 100644 --- a/files/en-us/glossary/application_context/index.md +++ b/files/en-us/glossary/application_context/index.md @@ -1,18 +1,30 @@ --- -title: Application Context +title: Application context slug: Glossary/Application_context page-type: glossary-definition --- {{GlossarySidebar}} -An **application context** is a top-level {{glossary("browsing context")}} that has a [manifest](/en-US/docs/Web/Manifest) applied to it. +**Application context** refers to the top-level {{glossary("browsing context")}} of a [web application](/en-US/docs/Web/Progressive_web_apps). +It determines how an app's browsing context, such as a tab or a window, is presented and behaves. -If an application context is created as a result of the user agent being asked to navigate to a deep link, the user agent must immediately navigate to the deep link with replacement enabled. Otherwise, when the application context is created, the user agent must immediately navigate to the start URL with replacement enabled. +Web developers define the application context in the [web app's manifest file](/en-US/docs/Web/Manifest). +They use the [`scope`](/en-US/docs/Web/Manifest/scope) member in the manifest to specify the set of URLs that are considered part of the application context and to which the manifest applies. -Please note that the start URL is not necessarily the value of the start_url member: the user or user agent could have changed it when the application was added to home-screen or otherwise bookmarked. +The manifest is applied after the application context is created but before navigation begins to either a start URL or a deep link. +A **start URL** is the initial page of the web app. +A **deep link** is a URL that directs users to a specific page within the web app, bypassing the home page. +The application context ensures that the app's defined behavior and presentation are maintained within its scope. + +When an application context is created, browsers must immediately navigate to a start URL or a deep link. +This navigation replaces the current entry in the browsing history. +If the application context is created to navigate to a deep link, the browser navigates directly to that deep link; otherwise, it navigates to the start URL. + +Note that the start URL is not necessarily the value of the [`start_url`](/en-US/docs/Web/Manifest/start_url) member in the manifest. Browsers may ignore the specified `start_url` or may allow users to change its value when adding the web app to their device's home screen or bookmarking it. ## See also -- [Progressive web apps (PWA)](/en-US/docs/Web/Progressive_web_apps) - [`scope`](/en-US/docs/Web/Manifest/scope) +- [Web app manifests](/en-US/docs/Web/Manifest) +- [Progressive web apps (PWA)](/en-US/docs/Web/Progressive_web_apps) diff --git a/files/en-us/glossary/baseline/compatibility/index.md b/files/en-us/glossary/baseline/compatibility/index.md index 4b4c72f9e88d453..64fee9b0b72bc41 100644 --- a/files/en-us/glossary/baseline/compatibility/index.md +++ b/files/en-us/glossary/baseline/compatibility/index.md @@ -18,7 +18,7 @@ Baseline considers support in the following browsers: - Mozilla Firefox (Android) - Mozilla Firefox (desktop) -Baseline is a summary of browser support. It is not a substitute for accessibility, usability, performance, security, or other testing. Baseline may not tell if you if a feature works with: +Baseline is a summary of browser support. It is not a substitute for accessibility, usability, performance, security, or other testing. Baseline may not tell you if a feature works with: - Older devices and browser releases - Browsers not covered by the Baseline definition, such as operating system web views diff --git a/files/en-us/glossary/boolean/html/index.md b/files/en-us/glossary/boolean/html/index.md index 14de1fd571c1184..06577fcf0b8c0de 100644 --- a/files/en-us/glossary/boolean/html/index.md +++ b/files/en-us/glossary/boolean/html/index.md @@ -6,13 +6,13 @@ page-type: glossary-definition {{GlossarySidebar}} -A **boolean attribute** in {{Glossary("HTML")}} is an {{glossary("attribute")}} that represents `true` or `false` values. If an HTML tag contains a boolean attribute - no matter the value of that attribute - the attribute is set to `true` on that element. If an HTML tag does not contain the attribute, the attribute is set to `false`. +A **boolean attribute** in {{Glossary("HTML")}} is an {{glossary("attribute")}} that represents `true` or `false` values. If an HTML tag contains a boolean attribute — no matter the value of that attribute — the attribute is set to `true` on that element. If an HTML tag does not contain the attribute, the attribute is set to `false`. -If the attribute is present, it can have one of the following values: +If the attribute is present, it can have one of the following forms: -- no value at all, e.g. `attribute` -- the empty string, e.g. `attribute=""` -- attribute's name itself, with no leading or trailing whitespace, e.g. `attribute="attribute"` +- the attribute name alone; e.g., `attribute`, meaning its implicit value is the empty string +- the attribute with a value of the empty string; e.g., `attribute=""` +- the attribute with a value of the attribute's name itself, with no leading or trailing whitespace and case ignored; e.g., `attribute="attribute"`, `attribute="ATTRIBUTE"` > [!NOTE] > The strings "true" and "false" are invalid values. To set the attribute to `false`, the attribute should be omitted altogether. Though modern browsers treat _any_ string value as `true`, you should not rely on that behavior. @@ -24,6 +24,7 @@ Here's an example of a HTML boolean attribute `checked`: + diff --git a/files/en-us/glossary/cloud/index.md b/files/en-us/glossary/cloud/index.md new file mode 100644 index 000000000000000..04bdc36da012248 --- /dev/null +++ b/files/en-us/glossary/cloud/index.md @@ -0,0 +1,21 @@ +--- +title: Cloud +slug: Glossary/Cloud +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +The **Cloud** refers to servers located worldwide that are accessed over the Internet, and the software and databases that run on those servers. + +Instead of storing data or running programs on a local computer or server, users can access cloud resources to perform tasks: this is known as {{glossary("Cloud computing")}}. + +Key features of the cloud include: + +- Remote Access: Data and services are accessed remotely. +- Scalability: Resources can be scaled up or down based on demand. +- Availability: Services and data are typically accessible from anywhere with internet access. + +## See also + +- [What is the Cloud?](https://www.cloudflare.com/en-gb/learning/cloud/what-is-the-cloud/) on Cloudflare diff --git a/files/en-us/glossary/cloud_computing/index.md b/files/en-us/glossary/cloud_computing/index.md new file mode 100644 index 000000000000000..ae1da01b885d93c --- /dev/null +++ b/files/en-us/glossary/cloud_computing/index.md @@ -0,0 +1,27 @@ +--- +title: Cloud computing +slug: Glossary/Cloud_computing +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Cloud computing** refers to the on-demand delivery of a wide range of computing services such as storage, databases, networking, analytics, and intelligence via the Internet — also known as **cloud services**. + +Cloud services are infrastructure, platforms, or software made available to users via the internet, hosted by third-party providers such as Google (Google Cloud Platform), Amazon AWS (Amazon Web Services), and Microsoft (Azure). Users can access cloud services through a _pay-as-you-go_ pricing model, ensuring they only pay for what they use, and without requiring any complex software set up on their own computers. This model enables faster innovation, flexible scalability, and significant cost savings. + +The three main types of cloud computing are Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). Each type of cloud computing provides different levels of control, flexibility, and management. + +- Infrastructure as a Service + - : IaaS provides virtualized computing resources over the internet, including servers, storage, and networking, allowing users to manage their infrastructure. This gives users a high level of flexibility and control over the resources. Companies using IaaS can scale their server infrastructure rapidly without owning physical servers. Examples include Amazon Web Services (AWS EC2), Microsoft Azure Virtual Machines, and Google Compute Engine (GCE). +- Platform as a Service + - : PaaS provides a platform allowing customers to develop, run, and manage applications without worrying about the underlying infrastructure such as servers, storage, and networking. PaaS allows developers to focus on writing code and application logic, without managing servers or operating systems. Examples include Google App Engine, Microsoft Azure App Service, Heroku, and AWS Elastic Beanstalk. +- Software as a Service + - : SaaS delivers software applications over the internet, which users can access via a web browser. The provider manages all the underlying infrastructure, platform, and data. Businesses using SaaS don't need to install or manage software locally. Instead, they can access software such as email, CRM, and collaboration tools directly from a web browser. Examples include Google Workspace, Microsoft 365, Slack, Github, and ChatGPT. + +## See also + +- [Cloud Computing](https://en.wikipedia.org/wiki/Cloud_computing) on Wikipedia +- [What is Cloud Computing?](https://cloud.google.com/learn/what-is-cloud-computing?hl=en) on Google Cloud +- [Cloud Service Provider](https://cloud.google.com/learn/what-is-a-cloud-service-provider?hl=en) on Google Cloud +- [NIST Definition of Cloud Computing](https://nvlpubs.nist.gov/nistpubs/legacy/sp/nistspecialpublication800-145.pdf) diff --git a/files/en-us/glossary/entity_header/index.md b/files/en-us/glossary/entity_header/index.md index dc5698d0773e74c..d8d80d70fd26478 100644 --- a/files/en-us/glossary/entity_header/index.md +++ b/files/en-us/glossary/entity_header/index.md @@ -14,7 +14,7 @@ An entity header is an {{glossary("HTTP_header", "HTTP header")}} that describes In the following example, {{HTTPHeader("Content-Length")}} is an entity header, while {{HTTPHeader("Host")}} and {{HTTPHeader("User-Agent")}} are requests headers: ```http -POST /myform.html HTTP/1.1 +POST /my-form.html HTTP/1.1 Host: developer.mozilla.org User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 Content-Length: 128 diff --git a/files/en-us/glossary/falsy/index.md b/files/en-us/glossary/falsy/index.md index 220cbfd7449fdee..f8c80f3ed761ebb 100644 --- a/files/en-us/glossary/falsy/index.md +++ b/files/en-us/glossary/falsy/index.md @@ -6,6 +6,8 @@ page-type: glossary-definition {{GlossarySidebar}} + + A **falsy** (sometimes written **falsey**) value is a value that is considered false when encountered in a {{Glossary("Boolean")}} context. {{Glossary("JavaScript")}} uses {{Glossary("Type_Conversion", "type conversion")}} to coerce any value to a Boolean in contexts that require it, such as {{Glossary("Conditional", "conditionals")}} and {{Glossary("Loop", "loops")}}. diff --git a/files/en-us/glossary/fetch_metadata_request_header/index.md b/files/en-us/glossary/fetch_metadata_request_header/index.md index 916af11fa2b5dc5..a0790b55248a064 100644 --- a/files/en-us/glossary/fetch_metadata_request_header/index.md +++ b/files/en-us/glossary/fetch_metadata_request_header/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition A **fetch metadata request header** is an {{Glossary("Request header", "HTTP request header")}} that provides additional information about the context from which the request originated. This allows the server to make decisions about whether a request should be allowed based on where the request came from and how the resource will be used. -With this information a server can implement a resource isolation policy, allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as {{Glossary("CSRF")}}, Cross-site Script Inclusion('XSSI'), timing attacks, and cross-origin information leaks. +With this information a server can implement a resource isolation policy, allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as {{Glossary("CSRF")}}, Cross-site Script Inclusion (XSSI), timing attacks, and cross-origin information leaks. These headers are prefixed with `Sec-`, and hence have {{Glossary("Forbidden header name", "forbidden header names")}}. As such, they cannot be modified from JavaScript. diff --git a/files/en-us/glossary/google_chrome/index.md b/files/en-us/glossary/google_chrome/index.md index 8de6d95b3453efe..68effab268a1e90 100644 --- a/files/en-us/glossary/google_chrome/index.md +++ b/files/en-us/glossary/google_chrome/index.md @@ -6,7 +6,9 @@ page-type: glossary-definition {{GlossarySidebar}} -Google Chrome is a free Web {{glossary("browser")}} developed by Google. It's based on the [Chromium](https://www.chromium.org/) open source project. Some key differences are described on [BrowserStack](https://www.browserstack.com/guide/difference-between-chrome-and-chromium#toc5). Chrome supports its own layout called {{glossary("Blink")}}. Note that the iOS version of Chrome uses that platform's WebView, not Blink. +Google Chrome is a free Web {{glossary("browser")}} developed by Google, based on the [Chromium](https://www.chromium.org/) open source project. Some key differences are described in BrowserStack's [Chrome vs Chromium: Core Differences](https://www.browserstack.com/guide/difference-between-chrome-and-chromium) guide. + +Chromium also has its own layout engine called {{glossary("Blink")}}; note however that the iOS version of Chrome uses that platform's WebView rather than Blink, due to platform restrictions. ## See also diff --git a/files/en-us/glossary/http_2/index.md b/files/en-us/glossary/http_2/index.md index ec4aaf9dca94daf..3aa06aa3dc1fd7e 100644 --- a/files/en-us/glossary/http_2/index.md +++ b/files/en-us/glossary/http_2/index.md @@ -8,7 +8,11 @@ page-type: glossary-definition **HTTP/2** is a major revision of the [HTTP network protocol](/en-US/docs/Web/HTTP). -The primary goals for HTTP/2 are to reduce {{glossary("latency")}} and head-of-line blocking by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of HTTP header fields, and add support for request prioritization and server push. +The primary goals for HTTP/2 are to reduce {{glossary("latency")}} and head-of-line blocking by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of HTTP header fields (HPACK), and support for request prioritization. + +HTTP/2 also introduced a mechanism called Server Push, which allowed a server to send resources to a client in anticipation that the client would need them very soon. +Server Push proved tricky to implement in practice, and has been removed from most major browser engines. +It has been replaced by alternative methods such as [`rel="preload"`](/en-US/docs/Web/HTML/Attributes/rel/preload) and {{HTTPStatus("103", "103 Early hints")}}. HTTP/2 does not modify the semantics of HTTP, meaning the core concepts found in HTTP/1.1, such as methods, status codes, URIs, and header fields, remain the same. Instead, HTTP/2 modifies how the data is formatted (framed) and transported between the client and server, both of which manage the entire process, and hides protocol complexity within a framing layer. @@ -17,7 +21,8 @@ As a result, all existing applications can be delivered over the protocol withou ## See also - [HTTP on MDN](/en-US/docs/Web/HTTP) -- [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) on Wikipedia - Related glossary terms: - {{glossary("HTTP")}} - {{glossary("Latency")}} +- {{RFC("7540", "Server Push", "8.2")}} +- [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) on Wikipedia diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index 90e6be3785bb3a7..2b51089acf2a0ef 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -64,6 +64,8 @@ The opposite of _intrinsic size_ is **_extrinsic size_**, which is based on the ## See also - CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} property values. -- CSS {{cssxref("aspect-ratio")}} property +- {{cssxref("interpolate-size")}} +- {{cssxref("aspect-ratio")}} +- {{cssxref("calc-size()")}} - [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module - [CSS sizing specification: intrinsic sizes](https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes) diff --git a/files/en-us/glossary/page_load_time/index.md b/files/en-us/glossary/page_load_time/index.md index 7a56ad16b4b2b03..9ae8ce6cd31ab18 100644 --- a/files/en-us/glossary/page_load_time/index.md +++ b/files/en-us/glossary/page_load_time/index.md @@ -11,7 +11,7 @@ page-type: glossary-definition ```js let time = performance.timing; -let pageloadtime = time.loadEventStart - time.navigationStart; +let pageloadTime = time.loadEventStart - time.navigationStart; ``` While page load time 'sounds' like the perfect web performance metric, it isn't. Load times can vary greatly between users depending on device capabilities, network conditions, and, to a lesser extent, distance from the server. The development environment, where page load time is measured, is likely an optimal experience, not reflective of your users' reality. In addition, web performance isn't just about when the load event happens. It's also about {{Glossary("perceived performance")}}, responsiveness, {{Glossary("jank")}} and jitter. diff --git a/files/en-us/glossary/php/index.md b/files/en-us/glossary/php/index.md index 9aadb7a83e2c0db..9e8317259dfc554 100644 --- a/files/en-us/glossary/php/index.md +++ b/files/en-us/glossary/php/index.md @@ -33,15 +33,15 @@ PHP (a recursive initialism for PHP: Hypertext Preprocessor) is an open-source s ```php ``` diff --git a/files/en-us/glossary/rate_limit/index.md b/files/en-us/glossary/rate_limit/index.md index ef949672c1d98b6..1153e2b090701bf 100644 --- a/files/en-us/glossary/rate_limit/index.md +++ b/files/en-us/glossary/rate_limit/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -In computing, especially in networking, **rate limiting** means controlling how many operations can be performed in a given amount of time, usually to avoid overloading the system and causing performance degredation. For example, a server might limit the number of requests it will accept from a single client in a given time period, which not only optimizes the server's overall performance but also mitigates attacks like {{glossary("DoS attack")}}. +In computing, especially in networking, **rate limiting** means controlling how many operations can be performed in a given amount of time, usually to avoid overloading the system and causing performance degradation. For example, a server might limit the number of requests it will accept from a single client in a given time period, which not only optimizes the server's overall performance but also mitigates attacks like {{glossary("DoS attack")}}. Rate limiting is typically synonymous with {{glossary("throttle", "throttling")}}, although {{glossary("debounce", "debouncing")}} is another viable strategy which provides better semantics and user experience in certain cases. diff --git a/files/en-us/glossary/response_header/index.md b/files/en-us/glossary/response_header/index.md index a7d68b21ee05377..7a272a0910d653a 100644 --- a/files/en-us/glossary/response_header/index.md +++ b/files/en-us/glossary/response_header/index.md @@ -23,7 +23,7 @@ Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a" Keep-Alive: timeout=5, max=997 Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT Server: Apache -Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure +Set-Cookie: my-key=my value; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure Transfer-Encoding: chunked Vary: Cookie, Accept-Encoding X-Backend-Server: developer2.webapp.scl3.mozilla.com diff --git a/files/en-us/glossary/scroll_container/index.md b/files/en-us/glossary/scroll_container/index.md index d214b2a883e66d2..6e3fed83849e6a7 100644 --- a/files/en-us/glossary/scroll_container/index.md +++ b/files/en-us/glossary/scroll_container/index.md @@ -15,3 +15,11 @@ A scroll container includes a scrollport and scroll bars. ## Scrollport The scrollport is the visible part of a scroll container and coincides with the padding box of the scroll container. The scroll bars are used to move content in and out of the scrollport so that the content can be viewed. + +## See also + +- [CSS building blocks: overflowing content](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content) +- [Scroll snapping](/en-US/docs/Glossary/Scroll_snap), including [scroll snap container](/en-US/docs/Glossary/Scroll_snap#scroll_snap_container) +- [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module +- [CSS overscroll behavior](/en-US/docs/Web/CSS/CSS_overscroll_behavior) module +- [CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap) module diff --git a/files/en-us/glossary/scroll_snap/index.md b/files/en-us/glossary/scroll_snap/index.md new file mode 100644 index 000000000000000..8fd59588aa48a54 --- /dev/null +++ b/files/en-us/glossary/scroll_snap/index.md @@ -0,0 +1,30 @@ +--- +title: Scroll snap +slug: Glossary/Scroll_snap +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Scroll snapping** is when content "snaps" to a specific position, rather than stopping at any random point, when a scroll operation finishes. Normal scrolling operations lack precision. They don't align to a paragraph, a sentence, or an image boundary. For example, in a carousel, a scrolling operation could finish in the middle of an image, leaving it partially visible. Web developers have long relied on JavaScript-based solutions. Browsers have recently started supporting [CSS scroll-snapping features](/en-US/docs/Web/CSS/CSS_scroll_snap) that enable defining scroll-snap containers and snapping behaviors. + +Scroll snapping is a well-controlled scrolling experience, whereby developers define an element as a [scroll container](/en-US/docs/Glossary/Scroll_container) with boundaries for scroll operations. Scroll operations then finish at these snap position boundaries, with the scrolled to content snapping into place. In the above carousel example, as the user finishes scrolling the carousel, its visible image will snap into place. + +- `Scroll snap container` + + - : The **scroll snap container** is a scroll container with scroll snapping applied. For example, if a box has overflowing content and a {{CSSXref("scroll-snap-type")}} set to a value other than `none`, then the box captures snap positions. A box's scroll snap container is the element's nearest snap-position capturing scroll container ancestor. If a box has no scroll snap container, its snap positions, if any, will not trigger snapping. + +- `Snapport` + + - : The **snapport** ​is the area of the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport) that is used as the alignment container for the scroll snap areas when calculating snap positions. By default, it is the same as the scroll container's visual viewport, but is the area of the scrollport defined by the {{CSSXref("scroll-padding")}} property. The [snap areas](#snap_area) are aligned to the scrollport. + +- `Snap area` + - : The **snap area** of an element in a scroll container is the area defined using {{CSSXref("scroll-margin")}} outsets specified on the element. The snap area is used to snap the element to its snapport. + +## See also + +- {{CSSXref("scroll-snap-type")}} +- {{CSSXref("scroll-snap-align")}} +- {{CSSXref("scroll-padding")}} +- {{CSSXref("scroll-margin")}} +- [CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap) module diff --git a/files/en-us/learn/accessibility/multimedia/index.md b/files/en-us/learn/accessibility/multimedia/index.md index 5346fe1120e2d0d..5f5129e9b3c7490 100644 --- a/files/en-us/learn/accessibility/multimedia/index.md +++ b/files/en-us/learn/accessibility/multimedia/index.md @@ -118,7 +118,7 @@ First of all, let's look at the HTML for the video player, in the HTML:
- + @@ -134,7 +134,7 @@ We've inserted some simple control buttons below our video. These controls of co We will first need to store references to each of the controls — add the following to the top of your JavaScript file: ```js -const playPauseBtn = document.querySelector(".playpause"); +const playPauseBtn = document.querySelector(".play-pause"); const stopBtn = document.querySelector(".stop"); const rwdBtn = document.querySelector(".rwd"); const fwdBtn = document.querySelector(".fwd"); @@ -250,7 +250,7 @@ It is not OK to publish an audio resource but promise to publish the transcript If you use an automated service, then you'll probably have to use the user interface that the tool provides. For example, take a look at our [Wait, ARIA Roles Have Categories?](https://www.youtube.com/watch?v=mwF-PpJOjMs) video and choose the three-dot menu (. . .) _> Show Transcript_. You'll see the transcript come up in a separate panel. -If you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hideable panel; see our [audio-transcript-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) example (also see the [source code](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/audio-transcript-ui)). +If you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hidable panel; see our [audio-transcript-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) example (also see the [source code](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/audio-transcript-ui)). ### Audio descriptions diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index c8307f478b91fe1..57c7fb54fab30c8 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -343,18 +343,18 @@ which is hidden from view using absolute positioning. When this is checked/unche ```js function toggleMusician(bool) { - const instruItem = formItems[formItems.length - 1]; + const instrument = formItems[formItems.length - 1]; if (bool) { - instruItem.input.disabled = false; - instruItem.label.style.color = "#000"; - instruItem.input.setAttribute("aria-disabled", "false"); + instrument.input.disabled = false; + instrument.label.style.color = "#000"; + instrument.input.setAttribute("aria-disabled", "false"); hiddenAlert.textContent = "Instruments played field now enabled; use it to tell us what you play."; } else { - instruItem.input.disabled = true; - instruItem.label.style.color = "#999"; - instruItem.input.setAttribute("aria-disabled", "true"); - instruItem.input.removeAttribute("aria-label"); + instrument.input.disabled = true; + instrument.label.style.color = "#999"; + instrument.input.setAttribute("aria-disabled", "true"); + instrument.input.removeAttribute("aria-label"); hiddenAlert.textContent = "Instruments played field now disabled."; } } diff --git a/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md index f16d6caa5f29015..079b3802ef54df6 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md @@ -54,7 +54,7 @@ There are several SFTP clients out there. Our demo covers [FileZilla](https://fi Open the FileZilla application; you should see something like this: -![Screenshot of the user interface of Filezilla FTP application. Host input has focus.](filezilla-ui.png) +![Screenshot of the user interface of FileZilla FTP application. Host input has focus.](filezilla-ui.png) ### Logging in diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md index 67912ad1ea97140..4cf5855b9b8f03f 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md @@ -251,20 +251,21 @@ Uploading files to a web server is a very important step while creating a websit -### Browsing websites +### Testing websites -As you already know, you need a web browser to view websites. There are [dozens](https://en.wikipedia.org/wiki/List_of_web_browsers) of browser options for your personal use, but when you're developing a website you should test it at least with the following major browsers, to make sure your site works for most people: +There are [many web browsers available](https://en.wikipedia.org/wiki/List_of_web_browsers). When you're developing a website you should test it at least with the following major browsers on both desktop and mobile platforms, to make sure your site works for most people: - [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/) - [Google Chrome](https://www.google.com/chrome/) - [Apple Safari](https://www.apple.com/safari/) -If you're targeting a specific group (e.g., technical platform or country), you may have to test the site with additional browsers, like [Opera](https://www.opera.com/), [Konqueror](https://apps.kde.org/konqueror/). +If you're targeting a specific group (e.g., technical platform or locale), you may have to test the site with additional browsers, like [UC Browser](https://www.ucweb.com/) or [Opera Mini](https://www.opera.com/browsers/opera-mini). + +Testing gets complicated because some browsers only run on certain operating systems. Notably, Apple Safari runs on iOS, iPadOS, and macOS. It's best to take advantage of services like [Browsershots](https://browsershots.org/) or [Browserstack](https://www.browserstack.com/). Browsershots creates screenshots of your website as it will look in various browsers. Browserstack gives you full remote access to virtual machines, so you can test your site in the most common environments and on different operating systems. Alternatively, you can set up your own virtual machines, but that takes some expertise. -Testing gets complicated because some browsers only run on certain operating systems. Notably, Apple Safari runs on iOS, iPadOS, and macOS. It's best to take advantage of services like [Browsershots](https://browsershots.org/) or [Browserstack](https://www.browserstack.com/). Browsershots furnishes screenshots of your website as it will look in various browsers. Browserstack gives you full remote access to virtual machines, so you can test your site in the most common environments and on different operating systems. Alternatively, you can set up your own virtual machines, but that takes some expertise. See [Strategies for carrying out testing: Putting together a testing lab](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#putting_together_a_testing_lab) for more information. -By all means run some tests on a real device, especially on real mobile devices. Mobile device simulation is a new, evolving technology and less reliable than desktop simulation. Mobile devices cost money, of course, so we suggest taking a look at the [Open Device Lab initiative](https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/#odls-have-opened-doors-for-idls). You can also share devices if you want to test on many platforms without spending too much. +By all means run some tests on a real device, especially on real mobile devices. Mobile devices cost money, of course, so we recommend sharing devices across a team if you want to test on many platforms without spending too much. For scalable cloud access to real device testing, we'd also recommend taking a look at [App Live: BrowserStack's Interactive Mobile App Testing platform](https://www.browserstack.com/app-live). ## Next steps diff --git a/files/en-us/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/en-us/learn/common_questions/web_mechanics/what_is_a_web_server/index.md index cb28428f967feb1..0019de10b5459f2 100644 --- a/files/en-us/learn/common_questions/web_mechanics/what_is_a_web_server/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/what_is_a_web_server/index.md @@ -74,7 +74,7 @@ Once you have web hosting service, you must [upload your files to your web serve ### Communicating through HTTP -Second, a web server provides support for {{Glossary("HTTP")}} (**H**yper**t**ext **T**ransfer **P**rotocol). As its name implies, HTTP specifies how to transfer hypertext (linked web documents) between two computers. +Second, a web server provides support for {{Glossary("HTTP")}} (Hypertext Transfer Protocol). As its name implies, HTTP specifies how to transfer hypertext (linked web documents) between two computers. A {{Glossary("Protocol")}} is a set of rules for communication between two computers. HTTP is a textual, stateless protocol. @@ -83,9 +83,11 @@ A {{Glossary("Protocol")}} is a set of rules for communication between two compu - Stateless - : Neither the server nor the client remember previous communications. For example, relying on HTTP alone, a server can't remember a password you typed or remember your progress on an incomplete transaction. You need an application server for tasks like that. (We'll cover that sort of technology in other articles.) -HTTP provides clear rules for how a client and server communicate. We'll cover HTTP itself in a [technical article](/en-US/docs/Web/HTTP) later. For now, just be aware of these things: +HTTP provides clear rules for how a client and server communicate. +If you want to learn more, you can read the [HTTP documentation](/en-US/docs/Web/HTTP). +For now, there are a few things to keep in mind: -- Usually only _clients_ make HTTP requests, and only to _servers_. Servers _respond_ to a _client_'s HTTP request. A server can also populate data into a client cache, in advance of it being requested, through a mechanism called [server push](https://en.wikipedia.org/wiki/HTTP/2_Server_Push). +- _Clients_ make HTTP requests to _servers_. Servers _respond_ to a _client_'s HTTP request. - When requesting a file via HTTP, clients must provide the file's {{Glossary("URL")}}. - The web server _must answer_ every HTTP request, at least with an error message. diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md index 5fcaf7b4fc5cb57..37a5fa7bd2e1be1 100644 --- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -260,7 +260,7 @@ The individual properties include the {{cssxref("border-width")}}, {{cssxref("bo } ``` -There are longhand properities for width, style, and color for each of the four sides: +There are longhand properties for width, style, and color for each of the four sides: ```css .box { diff --git a/files/en-us/learn/css/building_blocks/cascade_layers/index.md b/files/en-us/learn/css/building_blocks/cascade_layers/index.md index 6ce5a06656373ca..a30e6cd800f4a7e 100644 --- a/files/en-us/learn/css/building_blocks/cascade_layers/index.md +++ b/files/en-us/learn/css/building_blocks/cascade_layers/index.md @@ -285,12 +285,12 @@ Let's look at the following example: ```css @import url("components-lib.css") layer(components); -@import url("narrowtheme.css") layer(components.narrow); +@import url("narrow-theme.css") layer(components.narrow); ``` In the first line, we import `components-lib.css` into the `components` layer. If that file contains any layers, named or not, those layers become nested layers within the `components` layer. -The second line imports `narrowtheme.css` into the `narrow` layer, which is a sub-layer of `components`. The nested `components.narrow` gets created as the last layer within the `components` layer, unless `components-lib.css` already contains a `narrow` layer, in which case, the contents of `narrowtheme.css` would be appended to the `components.narrow` nested layer. Additional nested named layers can be added to the `components` layer using the pattern `components.`. As mentioned before, unnamed layers can be created but they cannot be accessed subsequently. +The second line imports `narrow-theme.css` into the `narrow` layer, which is a sub-layer of `components`. The nested `components.narrow` gets created as the last layer within the `components` layer, unless `components-lib.css` already contains a `narrow` layer, in which case, the contents of `narrow-theme.css` would be appended to the `components.narrow` nested layer. Additional nested named layers can be added to the `components` layer using the pattern `components.`. As mentioned before, unnamed layers can be created but they cannot be accessed subsequently. Let's look at another example, where we [import `layers1.css` into a named layer](#the_layer_block_at-rule_for_named_and_anonymous_layers) using the following statement: diff --git a/files/en-us/learn/css/building_blocks/images_tasks/index.md b/files/en-us/learn/css/building_blocks/images_tasks/index.md index 8419f0c11a2c30e..7b6ae4f9a36e15c 100644 --- a/files/en-us/learn/css/building_blocks/images_tasks/index.md +++ b/files/en-us/learn/css/building_blocks/images_tasks/index.md @@ -33,7 +33,7 @@ Try updating the live code below to recreate the finished example: In this task, you have a simple form. Your task is to make the following changes: -- Use attribute selectors to target the search field and button inside `.myform`. +- Use attribute selectors to target the search field and button inside `.my-form`. - Make the form field and button use the same text size as the rest of the form. - Give the form field and button 10 px of padding. - Give the button a background of `rebeccapurple`, white foreground, no border and rounded corners of 5px. diff --git a/files/en-us/learn/css/building_blocks/organizing/index.md b/files/en-us/learn/css/building_blocks/organizing/index.md index 0a33fddc876f462..46e65d7f178c17a 100644 --- a/files/en-us/learn/css/building_blocks/organizing/index.md +++ b/files/en-us/learn/css/building_blocks/organizing/index.md @@ -157,7 +157,7 @@ After this section, we could define a few utility classes, for example, a class ```css /* || UTILITIES */ -.nobullets { +.no-bullets { list-style: none; margin: 0; padding: 0; @@ -169,7 +169,7 @@ After this section, we could define a few utility classes, for example, a class Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on. ```css -/* || SITEWIDE */ +/* SITEWIDE */ .main-nav { /* … */ 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 8efff32c9d6d0ee..9e02b57b08b572e 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 @@ -184,8 +184,8 @@ Each CSS rule starts with a selector — or a list of selectors — in order to ```css h1 a:link -.manythings -#onething +.many-things +#one-thing * .box p .box p:first-child diff --git a/files/en-us/learn/css/styling_text/web_fonts/index.md b/files/en-us/learn/css/styling_text/web_fonts/index.md index 3da26ecf79b015b..f190270ebf0f6a2 100644 --- a/files/en-us/learn/css/styling_text/web_fonts/index.md +++ b/files/en-us/learn/css/styling_text/web_fonts/index.md @@ -90,7 +90,7 @@ You should use the [web-font-start.html](https://github.com/mdn/learning-area/bl For this example, we'll use two web fonts: one for the headings and one for the body text. To start with, we need to find the font files that contain the fonts. Fonts are created by font foundries and are stored in different file formats. There are generally three types of sites where you can obtain fonts: -- A free font distributor: This is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). Examples include [Font Squirrel](https://www.fontsquirrel.com/), [dafont](https://www.dafont.com/), and [Everything Fonts](https://everythingfonts.com/). +- A free font distributor: This is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). Examples include [Font Squirrel](https://www.fontsquirrel.com/), [DaFont](https://www.dafont.com/), and [Everything Fonts](https://everythingfonts.com/). - A paid font distributor: This is a site that makes fonts available for a charge, such as [fonts.com](https://www.fonts.com/) or [myfonts.com](https://www.myfonts.com/). You can also buy fonts directly from font foundries, for example [Linotype](https://www.linotype.com/), [Monotype](https://www.monotype.com/), or [Exljbris](https://www.exljbris.com/). - An online font service: This is a site that stores and serves the fonts for you, making the whole process easier. See the [Using an online font service](#using_an_online_font_service) section for more details. @@ -118,7 +118,7 @@ If you need to support legacy browsers, select the "Expert" mode in the Fontsqui Web services for font generation typically limit file sizes. In such a case, consider using tools such as: 1. [sfnt2woff-zopfli](https://github.com/bramstein/sfnt2woff-zopfli) for converting ttf to woff -2. [fontforge](https://fontforge.org/) for converting from ttf to svg +2. [FontForge](https://fontforge.org/) for converting from ttf to svg 3. [batik ttf2svg](https://xmlgraphics.apache.org/batik/tools/font-converter.html) for converting from ttf to svg 4. [woff2](https://github.com/google/woff2) for converting from ttf to woff2 diff --git a/files/en-us/learn/forms/basic_native_form_controls/index.md b/files/en-us/learn/forms/basic_native_form_controls/index.md index 5a6255a361fb0e4..628cb55ee614985 100644 --- a/files/en-us/learn/forms/basic_native_form_controls/index.md +++ b/files/en-us/learn/forms/basic_native_form_controls/index.md @@ -222,7 +222,7 @@ Then we also have the {{htmlelement("button")}} element itself. This can take a ``` ```html hidden -
+

Using <input>

@@ -243,8 +243,8 @@ button, input { display: none; } -.buttondemo button, -.buttondemo input { +.button-demo button, +.button-demo input { all: revert; } ``` diff --git a/files/en-us/learn/forms/form_validation/index.md b/files/en-us/learn/forms/form_validation/index.md index 7ff8c7033360ead..8fcc4762571654c 100644 --- a/files/en-us/learn/forms/form_validation/index.md +++ b/files/en-us/learn/forms/form_validation/index.md @@ -520,6 +520,49 @@ You can try it out below: > [!NOTE] > You can find this example live on GitHub as [custom-error-message.html](https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html) (see also the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html).) +#### Extending built-in form validation + +The previous example showed how you can add a customized message for a particular type of error (`validity.typeMismatch`). +It is also possible to use all of the built in form validation, and then add to it using `setCustomValidity()`. + +Here we demonstrate how you can extend the built in [``](/en-US/docs/Web/HTML/Element/input/email) validation to only accept addresses with the `@example.com` domain. +We start with the HTML {{htmlelement("form")}} below. + +```html +

+ + + +
+``` + +The validation code is shown below. +In the event of any new input the code first resets the custom validity message by calling `setCustomValidity("")`. +It then uses `email.validity.valid` to check if the entered address is invalid and if so, returns from the event handler. +This ensures that all the normal built-in validation checks are run while the entered text is not a valid email address. + +Once the email address is valid, the code adds a custom constraint, calling `setCustomValidity()` with an error message if the address does not end with `@example.com`. + +```js +const email = document.getElementById("mail"); + +email.addEventListener("input", (event) => { + // Validate with the built-in constraints + email.setCustomValidity(""); + if (!email.validity.valid) { + return; + } + + // Extend with a custom constraints + if (!email.value.endsWith("@example.com")) { + email.setCustomValidity("Please enter an email address of @example.com"); + } +}); +``` + +You can try this example in the page at the {{LiveSampleLink('Extending_built-in_form_validation', 'Live sample demo link')}}. +Try submitting an invalid email address, a valid email address that doesn't end in `@example.com`, and one that does end in `@example.com`. + #### A more detailed example Now that we've seen a really simple example, let's see how we can use this API to build some slightly more complex custom validation. diff --git a/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md b/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md index ea509ab353c9bd7..4fb9b79cd177dfb 100644 --- a/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md +++ b/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md @@ -56,7 +56,7 @@ This the example for a basic payment form for the article [How to structure an H Email: * - +

- +

- +

- +

- - + +
@@ -378,10 +378,10 @@ Let's have a look at an example that does just this. First of all, the HTML is a
-
@@ -438,7 +438,7 @@ You can see the example in action below (also [see it live here](https://mdn.git ### Read-only and read-write -In a similar manner to `:disabled` and `:enabled`, the `:read-only` and `:read-write` pseudo-classes target two states that form inputs toggle between. Read-only inputs have their values submitted to the server, but the user can't edit them, whereas read-write means they can be edited — their default state. +In a similar manner to `:disabled` and `:enabled`, the `:read-only` and `:read-write` pseudo-classes target two states that form inputs toggle between. As with disabled inputs, the user can't edit read-only inputs. However, unlike disabled inputs, read-only input values will be submitted to the server. Read-write means they can be edited — their default state. An input is set to read-only using the `readonly` attribute. As an example, imagine a confirmation page where the developer has sent the details filled in on previous pages over to this page, with the aim of getting the user to check them all in one place, add any final data that is needed, and then confirm the order by submitting. At this point, all the final form data can be sent to the server in one go. @@ -453,7 +453,7 @@ A fragment of the HTML is as follows — note the readonly attribute:
``` -If you try the live example, you'll see that the top set of form elements are not focusable, however, the values are submitted when the form is submitted. We've styled the form controls using the `:read-only` and `:read-write` pseudo-classes, like so: +If you try the live example, you'll see that the top set of form elements are not editable, however, the values are submitted when the form is submitted. We've styled the form controls using the `:read-only` and `:read-write` pseudo-classes, like so: ```css input:read-only, diff --git a/files/en-us/learn/forms/your_first_form/index.md b/files/en-us/learn/forms/your_first_form/index.md index a961ef1f442e70b..944fd714185d06e 100644 --- a/files/en-us/learn/forms/your_first_form/index.md +++ b/files/en-us/learn/forms/your_first_form/index.md @@ -214,7 +214,7 @@ label { input, textarea { /* To make sure that all text fields have the same font settings - By default, textareas have a monospace font */ + By default, text areas have a monospace font */ font: 1em sans-serif; /* Uniform text field size */ width: 300px; @@ -225,8 +225,10 @@ textarea { input:focus, textarea:focus { - /* Additional highlight for focused elements */ - border-color: #000; + /* Set the outline width and style */ + outline-style: solid; + /* To give a little highlight on active elements */ + outline-color: #000; } textarea { diff --git a/files/en-us/learn/getting_started_with_the_web/css_basics/index.md b/files/en-us/learn/getting_started_with_the_web/css_basics/index.md index 9ee6d422b58681e..30d546a8c54837c 100644 --- a/files/en-us/learn/getting_started_with_the_web/css_basics/index.md +++ b/files/en-us/learn/getting_started_with_the_web/css_basics/index.md @@ -125,7 +125,7 @@ There are many different types of selectors. The examples above use **element se The element(s) on the page with the specified attribute. img[src]
selects - <img src="myimage.png"> but not + <img src="my-image.png"> but not <img> diff --git a/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md index 73ba249874039fe..f621dde2388c892 100644 --- a/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -19,7 +19,7 @@ When you are working on a website locally on your computer, you should keep all You'll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces. This is because: -1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/MyImage.jpg` and then in a different file you try to invoke the image as `test-site/myimage.jpg`, it may not work. +1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/My_Image.jpg` and then in a different file you try to invoke the image as `test-site/my_image.jpg`, it may not work. 2. There are many ways in which using spaces in file names create issues: - When you invoke commands in the terminal, you have to put quotes around file names with spaces in them, or the path will be interpreted as two separate items. - Some programming languages (e.g. Python) do not work well with spaces in file names if these files are modules to be imported. diff --git a/files/en-us/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/en-us/learn/getting_started_with_the_web/how_the_web_works/index.md index 299c541f377698f..894eb3b8988d651 100644 --- a/files/en-us/learn/getting_started_with_the_web/how_the_web_works/index.md +++ b/files/en-us/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -74,6 +74,6 @@ Earlier we used the term "packets" to describe the format in which the data is t ## Credit -Street photo: [Street composing](https://www.pinterest.com/pin/400538960580676851/), by [kevin digga](https://www.pinterest.com/kevindigga/). +Street photo: [Street composing](https://www.pinterest.com/pin/400538960580676851/), by [Kevin Digga](https://www.pinterest.com/kevindigga/). {{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}} diff --git a/files/en-us/learn/html/cheatsheet/index.md b/files/en-us/learn/html/cheatsheet/index.md index dd1adb460417b58..b4191cf605fbcc0 100644 --- a/files/en-us/learn/html/cheatsheet/index.md +++ b/files/en-us/learn/html/cheatsheet/index.md @@ -188,7 +188,7 @@ see <cite>The Monster Book of Monsters</cite>. 
 Used to format the date. For example:
-<time datetime="2020-05-24" pubdate>
+<time datetime="2020-05-24">
 published on 23-05-2020</time>.
{{EmbedLiveSample("time-example", 100, 60)}} diff --git a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md index 185e81b2e334bda..098010eb8b8aef4 100644 --- a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -993,6 +993,8 @@ Always keep an accessibility mindset. The concept of italics isn't very helpful > [!NOTE] > People strongly associate underlining with hyperlinks. Therefore, on the web, it's best to only underline links. Use the `` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the web. The example below illustrates how it can be done. + + ```html

diff --git a/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md index 15db567f93636fc..6a6163ceb0dd1a8 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -52,7 +52,7 @@ Using your favorite image editor, create 400px wide and 120px wide versions of: - `firefox-addons.jpg` - `mozilla-dinosaur-head.png` -Call them something sensible, e.g. `firefoxlogo400.png` and `firefoxlogo120.png`. +Call them something sensible, e.g. `firefox-logo400.png` and `firefox-logo120.png`. Along with `mdn.svg`, these images will be your icons to link to further resources, inside the `further-info` area. You'll also link to the Firefox logo in the site header. Save copies of all these inside the same directory as `index.html`. diff --git a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index 42ad829f9990ff6..e749e333252b673 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -356,10 +356,10 @@ If you find yourself needing to embed plugin content, this is the kind of inform Let's look at an `` example that embeds a PDF into a page (see the [live example](https://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) and the [source code](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)): ```html - +

You don't have a PDF plugin, but you can - download the PDF file. + download the PDF file.

``` diff --git a/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md b/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md index d9188631f11a823..7a18f7533968803 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md @@ -54,7 +54,7 @@ Try updating the live code below to recreate the finished example: In this task, we want you to: -- Embed a PDF into the page. The PDF is called `mypdf.pdf`, and is contained in the `media` folder. +- Embed a PDF into the page. The PDF is called `my-pdf.pdf`, and is contained in the `media` folder. - Go to a sharing site like YouTube or Google Maps, and embed a video or other media item into the page. Try updating the live code below to recreate the finished example: diff --git a/files/en-us/learn/html/tables/advanced/index.md b/files/en-us/learn/html/tables/advanced/index.md index 2009bfd86da0987..c977ebbd5d3ab51 100644 --- a/files/en-us/learn/html/tables/advanced/index.md +++ b/files/en-us/learn/html/tables/advanced/index.md @@ -80,11 +80,9 @@ To use them, they should be included in the following order: Let's put these new elements into action. 1. First of all, make a local copy of [spending-record.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/spending-record.html) and [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/minimal-table.css) in a new folder. -2. Try opening it in a browser — You'll see that it looks OK, but it could stand to be improved. The "SUM" row that contains a summation of the spent amounts seems to be in the wrong place, and there are some details missing from the code. -3. Put the obvious headers row inside a `` element, the "SUM" row inside a `` element, and the rest of the content inside a `` element. -4. Save and refresh, and you'll see that adding the `` element has caused the "SUM" row to go down to the bottom of the table. -5. Next, add a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute to make the "SUM" cell span across the first four columns, so the actual number appears at the bottom of the "Cost" column. -6. Let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Inside the head of your HTML document, you'll see an empty {{htmlelement("style")}} element. Inside this element, add the following lines of CSS code: +2. Try putting the obvious headers row inside a `` element, the "SUM" row inside a `` element, and the rest of the content inside a `` element. +3. Next, add a [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute to make the "SUM" cell span across the first four columns, so the actual number appears at the bottom of the "Cost" column. +4. Let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Inside the head of your HTML document, you'll see an empty {{htmlelement("style")}} element. Inside this element, add the following lines of CSS code: ```css tbody { @@ -97,7 +95,7 @@ Let's put these new elements into action. } ``` -7. Save and refresh, and have a look at the result. If the `` and `` elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling. +5. Save and refresh, and have a look at the result. If the `` and `` elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling. > [!NOTE] > We don't expect you to fully understand the CSS right now. You'll learn more about this when you go through our CSS modules ([Introduction to CSS](/en-US/docs/Learn/CSS/First_steps) is a good place to start; we also have an article specifically on [styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)). diff --git a/files/en-us/learn/html/tables/structuring_planet_data/index.md b/files/en-us/learn/html/tables/structuring_planet_data/index.md index 22606cfac8662d7..3b22fb6d07cef93 100644 --- a/files/en-us/learn/html/tables/structuring_planet_data/index.md +++ b/files/en-us/learn/html/tables/structuring_planet_data/index.md @@ -46,7 +46,7 @@ The following steps describe what you need to do to complete the table example. 3. Add a row to the table header containing all the column headers. 4. Create all the content rows inside the table body, remembering to make all the row headings into headings semantically. 5. Ensure all the content is placed into the right cells — in the raw data, each row of planet data is shown next to its associated planet. -6. Add attributes to make the row and column headers unambiguously associated with the rows, columns, or rowgroups that they act as headings for. +6. Add attributes to make the row and column headers unambiguously associated with the rows, columns, or row groups that they act as headings for. 7. Add a black [border](/en-US/docs/Web/CSS/border) just around the column that contains all the planet name row headers. ## Hints and tips diff --git a/files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md index 9b48f4321a2fe2f..20512c17024707f 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md @@ -197,6 +197,8 @@ However, a complete website would handle this error more gracefully by displayin You can test the failure case yourself: + + 1. Make a local copy of the example files. 2. Run the code through a web server (as described above, in [Serving your example from a server](#serving_your_example_from_a_server)). 3. Modify the path to the file being fetched, to something like 'produc.json' (make sure it is misspelled). diff --git a/files/en-us/learn/javascript/first_steps/a_first_splash/index.md b/files/en-us/learn/javascript/first_steps/a_first_splash/index.md index 570aa44761d8671..b9ae1f7e65b813c 100644 --- a/files/en-us/learn/javascript/first_steps/a_first_splash/index.md +++ b/files/en-us/learn/javascript/first_steps/a_first_splash/index.md @@ -337,7 +337,7 @@ This is a lot of code — phew! Let's go through each section and explain what i - Now we've chained another test onto the end of the last one using an `else if (){ }` structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message. - The final block chained onto the end of this code (the `else { }`) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower. -- The last three lines in the function get us ready for the next guess to be submitted. We add 1 to the `guessCount` variable so the player uses up their turn (`++` is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered. +- The last three lines in the function get us ready for the next guess to be submitted. We add 1 to the `guessCount` variable so the player uses up their turn (`++` is an increment operation — increase by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered. ### Events diff --git a/files/en-us/learn/javascript/objects/classes_in_javascript/index.md b/files/en-us/learn/javascript/objects/classes_in_javascript/index.md index 7722dd6813ca606..1bed34638e4eeda 100644 --- a/files/en-us/learn/javascript/objects/classes_in_javascript/index.md +++ b/files/en-us/learn/javascript/objects/classes_in_javascript/index.md @@ -35,7 +35,7 @@ In this article, we'll go through these features. It's worth keeping in mind tha - +
## Classes and constructors diff --git a/files/en-us/learn/learning_and_getting_help/index.md b/files/en-us/learn/learning_and_getting_help/index.md index 277a2224e4cb9d7..fa2c99cab79b8be 100644 --- a/files/en-us/learn/learning_and_getting_help/index.md +++ b/files/en-us/learn/learning_and_getting_help/index.md @@ -277,5 +277,5 @@ You could also try attending full-fledged web conferences. While these can be ex ## See also - [Coursera: Learning to learn](https://www.coursera.org/learn/learning-how-to-learn) -- [Freecodecamp](https://www.freecodecamp.org/) +- [freeCodeCamp](https://www.freecodecamp.org/) - [Codecademy](https://www.codecademy.com/) diff --git a/files/en-us/learn/performance/multimedia/index.md b/files/en-us/learn/performance/multimedia/index.md index f07298bfbf6d54a..a0eadfc040f55a4 100644 --- a/files/en-us/learn/performance/multimedia/index.md +++ b/files/en-us/learn/performance/multimedia/index.md @@ -49,7 +49,7 @@ Despite being the largest consumer of bandwidth, the impact of image downloading ### Loading strategy -One of the biggest improvements to most websites is [lazy-loading](/en-US/docs/Web/Performance/Lazy_loading) images beneath the fold, rather than downloading them all on initial page load regardless of whether a visitor scrolls to see them or not. Many JavaScript libraries can implement this for you, such as [lazysizes](https://github.com/aFarkas/lazysizes), and browser vendors are working on a native `lazyload` attribute that is currently in the experimental phase. +One of the biggest improvements to most websites is [lazy-loading](/en-US/docs/Web/Performance/Lazy_loading) images beneath the fold, rather than downloading them all on initial page load regardless of whether a visitor scrolls to see them or not. Browsers provide this natively via the [`loading="lazy"`](/en-US/docs/Web/HTML/Element/img#loading) attribute on the `` element, and there are also many client-side JavaScript libraries that can do this. Beyond loading a subset of images, you should look into the format of the images themselves: diff --git a/files/en-us/learn/server-side/django/deployment/index.md b/files/en-us/learn/server-side/django/deployment/index.md index a3f17c3a4d35273..3096a1b5836ee66 100644 --- a/files/en-us/learn/server-side/django/deployment/index.md +++ b/files/en-us/learn/server-side/django/deployment/index.md @@ -473,15 +473,15 @@ We'll also configure the default database and collect static files so that they PythonAnywhere expects you to install applications in a folder named after your site URL. > [!NOTE] - > Because we're using the free account you can only name your account `.pythonanywhere.com` (for example, if your username is "Odtsetseg" you will have to put the local library source into a folder named `odtsetseg.pythonanywhere.com`). + > Because we're using the free account you can only name your account `.pythonanywhere.com` (for example, if your username is "Odtsetseg" you will have to put the local library source into a folder named `odtsetseg.pythonanywhere.com`). Enter the following command to clone your library sources into an appropriately named folder (you will need to replace the username values with your own name): ```bash - git clone https://github.com//django-locallibrary-tutorial.git .pythonanywhere.com + git clone https://github.com//django-locallibrary-tutorial.git .pythonanywhere.com # Navigate into the new folder - cd .pythonanywhere.com + cd .pythonanywhere.com ``` 5. Install the library dependencies using the `requirements.txt` file: @@ -659,7 +659,7 @@ We're already set up for that, so all we need to do is create the file. The steps are: -1. Open a PythonAware Bash prompt. +1. Open a PythonAnywhere Bash prompt. 2. Navigate to your application directory (replacing `` with your own account): ```bash @@ -830,7 +830,7 @@ You can click the site URL (highlighted above) to open the site in a browser (it When the site is opened, at this point you'll see an error debug screen as shown below. This is a Django security error that is raised because our source code is not running on an "allowed host". -![A detailed error page with a full traceback of an invalid HTTP_HOST header](site_error_dissallowed_host.png) +![A detailed error page with a full traceback of an invalid HTTP_HOST header](site_error_disallowed_host.png) > [!NOTE] > This kind of debug information is very useful when you're getting set up, but is a security risk in a deployed site. diff --git a/files/en-us/learn/server-side/django/deployment/site_error_dissallowed_host.png b/files/en-us/learn/server-side/django/deployment/site_error_disallowed_host.png similarity index 100% rename from files/en-us/learn/server-side/django/deployment/site_error_dissallowed_host.png rename to files/en-us/learn/server-side/django/deployment/site_error_disallowed_host.png diff --git a/files/en-us/learn/server-side/django/forms/index.md b/files/en-us/learn/server-side/django/forms/index.md index 494663b0d904187..0ae555372fcf4fc 100644 --- a/files/en-us/learn/server-side/django/forms/index.md +++ b/files/en-us/learn/server-side/django/forms/index.md @@ -181,7 +181,7 @@ The arguments that are common to most fields are listed below (these have sensib #### Validation -Django provides numerous places where you can validate your data. The easiest way to validate a single field is to override the method `clean_()` for the field you want to check. So for example, we can validate that entered `renewal_date` values are between now and 4 weeks by implementing `clean_renewal_date()` as shown below. +Django provides numerous places where you can validate your data. The easiest way to validate a single field is to override the method `clean_()` for the field you want to check. So for example, we can validate that entered `renewal_date` values are between now and 4 weeks by implementing `clean_renewal_date()` as shown below. Update your forms.py file so it looks like this: diff --git a/files/en-us/learn/server-side/django/generic_views/index.md b/files/en-us/learn/server-side/django/generic_views/index.md index 27bc98fc233d221..e881dea18c36287 100644 --- a/files/en-us/learn/server-side/django/generic_views/index.md +++ b/files/en-us/learn/server-side/django/generic_views/index.md @@ -410,10 +410,10 @@ You can capture multiple patterns in the one match, and hence encode lots of dif One feature that we haven't used here, but which you may find valuable, is that you can pass a [dictionary containing additional options](https://docs.djangoproject.com/en/5.0/topics/http/urls/#views-extra-options) to the view (using the third un-named argument to the `path()` function). This approach can be useful if you want to use the same view for multiple resources, and pass data to configure its behavior in each case. -For example, given the path shown below, for a request to `/myurl/halibut/` Django will call `views.my_view(request, fish='halibut', my_template_name='some_path')`. +For example, given the path shown below, for a request to `/my-url/halibut/` Django will call `views.my_view(request, fish='halibut', my_template_name='some_path')`. ```python -path('myurl/', views.my_view, {'my_template_name': 'some_path'}, name='aurl'), +path('my-url/', views.my_view, {'my_template_name': 'some_path'}, name='aurl'), ``` > [!NOTE] diff --git a/files/en-us/learn/server-side/django/models/index.md b/files/en-us/learn/server-side/django/models/index.md index 7d2d049b2c56920..86084d4cecab127 100644 --- a/files/en-us/learn/server-side/django/models/index.md +++ b/files/en-us/learn/server-side/django/models/index.md @@ -170,7 +170,7 @@ One of the most useful features of this metadata is to control the _default orde So as an example, if we chose to sort books like this by default: ```python -ordering = ['title', '-pubdate'] +ordering = ['title', '-publish_date'] ``` the books would be sorted alphabetically by title, from A-Z, and then by publication date inside each title, from newest to oldest. @@ -207,7 +207,7 @@ def get_absolute_url(self): ``` > [!NOTE] -> Assuming you will use URLs like `/myapplication/mymodelname/2` to display individual records for your model (where "2" is the `id` for a particular record), you will need to create a URL mapper to pass the response and id to a "model detail view" (which will do the work required to display the record). The `reverse()` function above is able to "reverse" your URL mapper (in the above case named _'model-detail-view'_) in order to create a URL of the right format. +> Assuming you will use URLs like `/my-application/my-model-name/2` to display individual records for your model (where "2" is the `id` for a particular record), you will need to create a URL mapper to pass the response and id to a "model detail view" (which will do the work required to display the record). The `reverse()` function above is able to "reverse" your URL mapper (in the above case named _'model-detail-view'_) in order to create a URL of the right format. > > Of course to make this work you still have to write the URL mapping, view, and template! @@ -468,7 +468,7 @@ class Author(models.Model): return f'{self.last_name}, {self.first_name}' ``` -All of the fields/methods should now be familiar. The model defines an author as having a first name, last name, and dates of birth and death (both optional). It specifies that by default the `__str__()` returns the name in _last name_, _firstname_ order. The `get_absolute_url()` method reverses the `author-detail` URL mapping to get the URL for displaying an individual author. +All of the fields/methods should now be familiar. The model defines an author as having a first name, last name, and dates of birth and death (both optional). It specifies that by default the `__str__()` returns the name in _last name_, _first name_ order. The `get_absolute_url()` method reverses the `author-detail` URL mapping to get the URL for displaying an individual author. ## Re-run the database migrations diff --git a/files/en-us/learn/server-side/django/testing/index.md b/files/en-us/learn/server-side/django/testing/index.md index 2b5cc340d15fb3e..ca9f57d1d0590f6 100644 --- a/files/en-us/learn/server-side/django/testing/index.md +++ b/files/en-us/learn/server-side/django/testing/index.md @@ -696,9 +696,9 @@ The rest of the tests verify that our view only returns books that are on loan t self.assertTrue('bookinstance_list' in response.context) # Confirm all books belong to testuser1 and are on loan - for bookitem in response.context['bookinstance_list']: - self.assertEqual(response.context['user'], bookitem.borrower) - self.assertEqual(bookitem.status, 'o') + for book_item in response.context['bookinstance_list']: + self.assertEqual(response.context['user'], book_item.borrower) + self.assertEqual(book_item.status, 'o') def test_pages_ordered_by_due_date(self): # Change all books to be on loan diff --git a/files/en-us/learn/server-side/express_nodejs/development_environment/index.md b/files/en-us/learn/server-side/express_nodejs/development_environment/index.md index 6bf91b0e9d73198..8878c8898f47a65 100644 --- a/files/en-us/learn/server-side/express_nodejs/development_environment/index.md +++ b/files/en-us/learn/server-side/express_nodejs/development_environment/index.md @@ -414,7 +414,7 @@ The DEBUG command creates useful logging, resulting in an output like the follow ```bash >SET DEBUG=helloworld:* & npm start -> helloworld@0.0.0 start D:\GitHub\expresstests\helloworld +> helloworld@0.0.0 start D:\GitHub\express-tests\helloworld > node ./bin/www helloworld:server Listening on port 3000 +0ms diff --git a/files/en-us/learn/server-side/express_nodejs/introduction/index.md b/files/en-us/learn/server-side/express_nodejs/introduction/index.md index c64cce05f780a99..e0c6041aaff8a2f 100644 --- a/files/en-us/learn/server-side/express_nodejs/introduction/index.md +++ b/files/en-us/learn/server-side/express_nodejs/introduction/index.md @@ -361,7 +361,7 @@ const a_middleware_function = function (req, res, next) { app.use(a_middleware_function); // Function added with use() for a specific route -app.use("/someroute", a_middleware_function); +app.use("/some-route", a_middleware_function); // A middleware function added for a specific HTTP verb and route app.get("/", a_middleware_function); diff --git a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md index 0900182cfcff69e..197cfbc2f97fb1f 100644 --- a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md +++ b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md @@ -547,7 +547,7 @@ While you can create schemas and models using any file structure you like, we hi This is shown below: ```js -// File: ./models/somemodel.js +// File: ./models/some-model.js // Require Mongoose const mongoose = require("mongoose"); @@ -568,7 +568,7 @@ You can then require and use the model immediately in other files. Below we show ```js // Create a SomeModel model just by requiring the module -const SomeModel = require("../models/somemodel"); +const SomeModel = require("../models/some-model"); // Use the SomeModel object (model) to find all SomeModel records const modelInstances = await SomeModel.find().exec(); diff --git a/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md b/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md index 53c9d67918ef94e..890ae97d744e346 100644 --- a/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md +++ b/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md @@ -284,7 +284,7 @@ We can now start the server in almost exactly the same way as previously, but us > [!NOTE] > Now if you edit any file in the project the server will restart (or you can restart it by typing `rs` on the command prompt at any time). You will still need to reload the browser to refresh the page. > -> We now have to call `npm run ` rather than just `npm start`, because "start" is actually an npm command that is mapped to the named script. We could have replaced the command in the _start_ script but we only want to use _nodemon_ during development, so it makes sense to create a new script command. +> We now have to call `npm run ` rather than just `npm start`, because "start" is actually an npm command that is mapped to the named script. We could have replaced the command in the _start_ script but we only want to use _nodemon_ during development, so it makes sense to create a new script command. > > The `serverstart` command added to the scripts in the **package.json** above is a very good example. Using this approach means you no longer have to type a long command to start the server. Note that the particular command added to the script works for macOS or Linux only. diff --git a/files/en-us/learn/server-side/first_steps/client-server_overview/index.md b/files/en-us/learn/server-side/first_steps/client-server_overview/index.md index 2730657d1a18fbd..ff64b66948617a0 100644 --- a/files/en-us/learn/server-side/first_steps/client-server_overview/index.md +++ b/files/en-us/learn/server-side/first_steps/client-server_overview/index.md @@ -129,7 +129,7 @@ X-Cache-Info: caching Content-Length: 41823 - + @@ -194,7 +194,7 @@ Content-Length: 0 ## Static sites -A _static site_ is one that returns the same hard coded content from the server whenever a particular resource is requested. So for example if you have a page about a product at `/static/myproduct1.html`, this same page will be returned to every user. If you add another similar product to your site you will need to add another page (e.g. `myproduct2.html`) and so on. This can start to get really inefficient — what happens when you get to thousands of product pages? You would repeat a lot of code across each page (the basic page template, structure, etc.), and if you wanted to change anything about the page structure — like add a new "related products" section for example — then you'd have to change every page individually. +A _static site_ is one that returns the same hard coded content from the server whenever a particular resource is requested. So for example if you have a page about a product at `/static/my-product1.html`, this same page will be returned to every user. If you add another similar product to your site you will need to add another page (e.g. `my-product2.html`) and so on. This can start to get really inefficient — what happens when you get to thousands of product pages? You would repeat a lot of code across each page (the basic page template, structure, etc.), and if you wanted to change anything about the page structure — like add a new "related products" section for example — then you'd have to change every page individually. > [!NOTE] > Static sites are excellent when you have a small number of pages and you want to send the same content to every user. However they can have a significant cost to maintain as the number of pages becomes larger. diff --git a/files/en-us/learn/server-side/first_steps/web_frameworks/index.md b/files/en-us/learn/server-side/first_steps/web_frameworks/index.md index 57cd117c86d8b65..aa8417d6aff0385 100644 --- a/files/en-us/learn/server-side/first_steps/web_frameworks/index.md +++ b/files/en-us/learn/server-side/first_steps/web_frameworks/index.md @@ -79,8 +79,8 @@ While Django expects developers to define a list of URL mappings between a URL p ```python urlpatterns = [ url(r'^$', views.index), - # example: /best/myteamname/5/ - url(r'^best/(?P\w.+?)/(?P[0-9]+)/$', views.best), + # example: /best/my_team_name/5/ + url(r'^best/(?P\w+?)/(?P[0-9]+)/$', views.best), ] ``` diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md index 6833485317ec46a..c4b118a1f3858f6 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md @@ -84,7 +84,7 @@ Our TypeScript code will be able to run everywhere JavaScript can run. How is th > [!NOTE] > If you are curious about how TypeScript transpiles our code to JavaScript, you can have a look at the [TypeScript Playground](https://www.typescriptlang.org/play/?target=1&e=4#example/hello-world). -First-class TypeScript support has been Svelte's most requested feature for quite some time. Thanks to the hard work of the Svelte team, together with many contributors, we have an [official solution](https://svelte.dev/blog/svelte-and-typescript) ready to be put to the test. In this section we'll show you how to set up a Svelte project with TypeScript support to give it a try. +First-class TypeScript support has been Svelte's most requested feature for quite some time. Thanks to the hard work of the Svelte team, together with many contributors, they have an [official solution](https://svelte.dev/blog/svelte-and-typescript) ready to be put to the test. In this section we'll show you how to set up a Svelte project with TypeScript support to give it a try. ## Why TypeScript? @@ -171,7 +171,9 @@ Once you have TypeScript configured, you can start using it from a Svelte compon > See the [Module resolution for bundlers, TypeScript runtimes, and Node.js loaders](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution-for-bundlers-typescript-runtimes-and-nodejs-loaders) section of the TypeScript manual for more information. > [!NOTE] -> Using TypeScript in component markup sections is [not supported yet](https://github.com/sveltejs/svelte/issues/4701). You'll have to use JavaScript from the markup, and TypeScript in the ` diff --git a/files/en-us/web/api/document/createtextnode/index.md b/files/en-us/web/api/document/createtextnode/index.md index 7fda6251a734ac6..5841fa5a16b9fe6 100644 --- a/files/en-us/web/api/document/createtextnode/index.md +++ b/files/en-us/web/api/document/createtextnode/index.md @@ -35,10 +35,10 @@ A {{domxref("Text")}} node. createTextNode example diff --git a/files/en-us/web/api/document/evaluate/index.md b/files/en-us/web/api/document/evaluate/index.md index f05cb8967d0868f..b725821505ad017 100644 --- a/files/en-us/web/api/document/evaluate/index.md +++ b/files/en-us/web/api/document/evaluate/index.md @@ -149,10 +149,10 @@ See [Introduction to using XPath in JavaScript](/en-US/docs/Web/XPath/Introducti This function is a replacement for {{domxref("Document.getElementById()")}} for when you need to search by `xml:id` instead. ```js -function getElementByIdWrapper(xmldoc, id) { - return xmldoc.evaluate( +function getElementByIdWrapper(xmlDoc, id) { + return xmlDoc.evaluate( `//*[@xml:id="${id}"]`, - xmldoc, + xmlDoc, () => "http://www.w3.org/XML/1998/namespace", XPathResult.FIRST_ORDERED_NODE_TYPE, null, diff --git a/files/en-us/web/api/document/execcommand/index.md b/files/en-us/web/api/document/execcommand/index.md index 1e10bad751ae477..38b3a8d9db26d3a 100644 --- a/files/en-us/web/api/document/execcommand/index.md +++ b/files/en-us/web/api/document/execcommand/index.md @@ -66,7 +66,7 @@ execCommand(aCommandName, aShowDefaultUI, aValueArgument) - : Deletes the character ahead of the [cursor](https://en.wikipedia.org/wiki/Cursor_%28computers%29)'s position, identical to hitting the Delete key on a Windows keyboard. - `heading` - : Adds a heading element around a selection or insertion point line. Requires the tag-name string as a value argument (i.e., `"H1"`, `"H6"`). (Not supported by Safari.) - - `hiliteColor` + - `highlightColor` - : Changes the background color for the selection or at the insertion point. Requires a color value string as a value argument. `useCSS` must be `true` for this to function. - `increaseFontSize` - : Adds a {{HTMLElement("big")}} tag around the selection or at the insertion point. @@ -149,7 +149,7 @@ An example of [how to use execCommand with contentEditable elements](https://cod ### Using insertText -This example shows two very basic HTML editors, one using a {{HTMLElement("textarea")}} element and one using a {{HTMLElement("pre")}} element with the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute set. +This example shows two very basic HTML editors, one using a {{HTMLElement("textarea")}} element and one using a {{HTMLElement("pre")}} element with the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute set. Clicking the "Bold" or "Italic" buttons inserts the appropriate tags in the element, using `insertText` to preserve the edit history, so the user can undo the action. diff --git a/files/en-us/web/api/document/fullscreenchange_event/index.md b/files/en-us/web/api/document/fullscreenchange_event/index.md index 7d8714e49a17c66..dbd46b3c9ae3e78 100644 --- a/files/en-us/web/api/document/fullscreenchange_event/index.md +++ b/files/en-us/web/api/document/fullscreenchange_event/index.md @@ -83,7 +83,7 @@ function log(message) { logger.textContent = `${logger.textContent}\n${message}`; } -function fullscreenchanged(event) { +function fullscreenchangeHandler(event) { // document.fullscreenElement will point to the element that // is in fullscreen mode if there is one. If there isn't one, // the value of the property is null. @@ -94,7 +94,7 @@ function fullscreenchanged(event) { } } -document.addEventListener("fullscreenchange", fullscreenchanged); +document.addEventListener("fullscreenchange", fullscreenchangeHandler); // When the toggle button is clicked, enter/exit fullscreen document.getElementById("toggle-fullscreen").addEventListener("click", () => { diff --git a/files/en-us/web/api/document/getelementbyid/index.md b/files/en-us/web/api/document/getelementbyid/index.md index 22ad9b65619efd1..69b297ae3feb153 100644 --- a/files/en-us/web/api/document/getelementbyid/index.md +++ b/files/en-us/web/api/document/getelementbyid/index.md @@ -99,8 +99,8 @@ Elements not in the document are not searched by `getElementById()`. When creati ```js const element = document.createElement("div"); -element.id = "testqq"; -const el = document.getElementById("testqq"); // el will be null! +element.id = "test"; +const el = document.getElementById("test"); // el will be null! ``` In non-HTML documents, the DOM implementation must have information on which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document's DTD. The `id` attribute is defined to be of ID type in the common cases of [XHTML](/en-US/docs/Glossary/XHTML), XUL, and others. Implementations that do not know whether attributes are of type ID or not are expected to return `null`. diff --git a/files/en-us/web/api/document/getelementsbytagnamens/index.md b/files/en-us/web/api/document/getelementsbytagnamens/index.md index d375169bcf9f1ee..e617f365206f8f8 100644 --- a/files/en-us/web/api/document/getelementsbytagnamens/index.md +++ b/files/en-us/web/api/document/getelementsbytagnamens/index.md @@ -35,7 +35,7 @@ A live {{DOMxRef("HTMLCollection")}} of found elements in the order they appear ## Examples In the following example `getElementsByTagNameNS` starts from a particular -parent element, and searches topdown recursively through the DOM from that parent +parent element, and searches top-down recursively through the DOM from that parent element, looking for child elements matching the tag `name` parameter. Note that when the node on which `getElementsByTagName` is invoked is not diff --git a/files/en-us/web/api/document/index.md b/files/en-us/web/api/document/index.md index 5d0f2154974f89e..10126b3967d9a6a 100644 --- a/files/en-us/web/api/document/index.md +++ b/files/en-us/web/api/document/index.md @@ -364,6 +364,10 @@ Listen to these events using `addEventListener()` or by assigning an event liste - : Fired when the document view or an element has been scrolled. - {{DOMxRef("Document/scrollend_event", "scrollend")}} - : Fired when the document view or an element has completed scrolling. +- {{domxref("Document/scrollsnapchange_event", "scrollsnapchange")}} {{experimental_inline}} + - : Fired on the scroll container at the end of a scrolling operation when a new scroll snap target has been selected. +- {{domxref("Document/scrollsnapchanging_event", "scrollsnapchanging")}} {{experimental_inline}} + - : Fired on the scroll container when the browser determines a new scroll snap target is pending, i.e. it will be selected when the current scroll gesture ends. ### Selection events diff --git a/files/en-us/web/api/document/mozsetimageelement/index.md b/files/en-us/web/api/document/mozsetimageelement/index.md index a5d44dfd8968b86..d37c11bb29a1c84 100644 --- a/files/en-us/web/api/document/mozsetimageelement/index.md +++ b/files/en-us/web/api/document/mozsetimageelement/index.md @@ -44,8 +44,8 @@ block is clicked by the user. ```html ``` -The CSS defined by the {{ HTMLElement("style") }} block above is used by our {{HTMLElement("div")}} to use an element with the id "canvasbg" as its background. +The CSS defined by the {{ HTMLElement("style") }} block above is used by our {{HTMLElement("div")}} to use an element with the id "canvas-bg" as its background. ```js let c = 0x00; @@ -72,7 +72,7 @@ function clicked() { c = 0x00; } - document.mozSetImageElement("canvasbg", canvas); + document.mozSetImageElement("canvas-bg", canvas); } ``` @@ -84,7 +84,7 @@ the user clicks the element, the background is filled with a brighter and bright pattern of red tiles. Once the canvas is drawn, `document.mozSetImageElement()` is called to set -the background for any CSS using the ID "canvasbg" as its background element ID to be +the background for any CSS using the ID "canvas-bg" as its background element ID to be our new canvas. ## Specifications diff --git a/files/en-us/web/api/document/queryselectorall/index.md b/files/en-us/web/api/document/queryselectorall/index.md index 15c90d7c8ff01a9..46e520025535553 100644 --- a/files/en-us/web/api/document/queryselectorall/index.md +++ b/files/en-us/web/api/document/queryselectorall/index.md @@ -78,11 +78,11 @@ const matches = document.querySelectorAll("iframe[data-src]"); ``` Here, an attribute selector is used to return a list of the list items contained within -a list whose ID is `userlist` which have a `data-active` attribute +a list whose ID is `user-list` which have a `data-active` attribute whose value is `1`: ```js -const container = document.querySelector("#userlist"); +const container = document.querySelector("#user-list"); const matches = container.querySelectorAll("li[data-active='1']"); ``` diff --git a/files/en-us/web/api/document/scrollsnapchange_event/index.md b/files/en-us/web/api/document/scrollsnapchange_event/index.md new file mode 100644 index 000000000000000..1a79b97dff40f2e --- /dev/null +++ b/files/en-us/web/api/document/scrollsnapchange_event/index.md @@ -0,0 +1,85 @@ +--- +title: "Document: scrollsnapchange event" +short-title: scrollsnapchange +slug: Web/API/Document/scrollsnapchange_event +page-type: web-api-event +status: + - experimental +browser-compat: api.Document.scrollsnapchange_event +--- + +{{APIRef}}{{SeeCompatTable}} + +The **`scrollsnapchange`** event of the {{domxref("Document")}} interface is fired on the document [scroll container](/en-US/docs/Glossary/Scroll_container) at the end of a scrolling operation when a new scroll snap target is selected. + +This event works in much the same way as the {{domxref("Element")}} interface's [`scrollsnapchange`](/en-US/docs/Web/API/Element/scrollsnapchange_event) event, except that the overall HTML document has to be set as the scroll snap container (i.e., {{cssxref("scroll-snap-type")}} is set on the {{htmlelement("html")}} element). + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener("scrollsnapchange", (event) => {}); + +onscrollsnapchange = (event) => {}; +``` + +## Event type + +A {{domxref("SnapEvent")}}, which inherits from the generic {{domxref("Event")}} type. + +## Examples + +### Basic usage + +Let's say we have a {{htmlelement("main")}} element containing significant content that causes it to scroll: + +```html +
+ +
+``` + +The `
` element can be turned into a scroll container using a combination of CSS properties, for example: + +```css +main { + width: 250px; + height: 450px; + overflow: scroll; +} +``` + +We can then implement scroll snapping behavior on the scrolling content by specifying the {{cssxref("scroll-snap-type")}} property on the {{htmlelement("html")}} element: + +```css +html { + scroll-snap-type: block mandatory; +} +``` + +The following JavaScript snippet would cause the `scrollsnapchange` event to fire on the HTML document when a child of the `
` element becomes a newly-selected snap target. In the handler function, we set a `selected` class on the child referenced by the {{domxref("SnapEvent.snapTargetBlock")}}, which could be used to style it to look like it has been selected (for example, with an animation) when the event fires. + +```js +document.addEventListener("scrollsnapchange", (event) => { + event.snapTargetBlock.classList.add("selected"); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Document/scrollsnapchanging_event", "scrollsnapchanging")}} event +- {{DOMxRef("Document/scrollend_event", "scrollend")}} event +- {{domxref("SnapEvent")}} +- CSS {{cssxref("scroll-snap-type")}} property +- [CSS scroll snap module](/en-US/docs/Web/CSS/CSS_scroll_snap) +- [Using scroll snap events](/en-US/docs/Web/CSS/CSS_scroll_snap/Using_scroll_snap_events) +- [Scroll Snap Events](https://developer.chrome.com/blog/scroll-snap-events) on developer.chrome.com (2024) diff --git a/files/en-us/web/api/document/scrollsnapchanging_event/index.md b/files/en-us/web/api/document/scrollsnapchanging_event/index.md new file mode 100644 index 000000000000000..1f758b980649c7b --- /dev/null +++ b/files/en-us/web/api/document/scrollsnapchanging_event/index.md @@ -0,0 +1,94 @@ +--- +title: "Document: scrollsnapchanging event" +short-title: scrollsnapchanging +slug: Web/API/Document/scrollsnapchanging_event +page-type: web-api-event +status: + - experimental +browser-compat: api.Document.scrollsnapchanging_event +--- + +{{APIRef}}{{SeeCompatTable}} + +The **`scrollsnapchanging`** event of the {{domxref("Document")}} interface is fired on the [scroll container](/en-US/docs/Glossary/Scroll_container) when the browser determines a new scroll snap target is pending, i.e. it will be selected when the current scroll gesture ends. + +This event works in much the same way as the {{domxref("Element")}} interface's [`scrollsnapchanging`](/en-US/docs/Web/API/Element/scrollsnapchanging_event) event, except that the overall HTML document has to be set as the scroll snap container (i.e., {{cssxref("scroll-snap-type")}} is set on the {{htmlelement("html")}} element). + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener("scrollsnapchanging", (event) => {}); + +onscrollsnapchanging = (event) => {}; +``` + +## Event type + +A {{domxref("SnapEvent")}}, which inherits from the generic {{domxref("Event")}} type. + +## Examples + +### Basic usage + +Let's say we have a {{htmlelement("main")}} element containing significant content that causes it to scroll: + +```html +
+ +
+``` + +The `
` element can be turned into a scroll container using a combination of CSS properties, for example: + +```css +main { + width: 250px; + height: 450px; + overflow: scroll; +} +``` + +We can then implement scroll snapping behavior on the scrolling content by specifying the {{cssxref("scroll-snap-type")}} property on the {{htmlelement("html")}} element: + +```css +html { + scroll-snap-type: block mandatory; +} +``` + +The following JavaScript snippet would cause the `scrollsnapchanging` event to fire on the HTML document when a child of the `
` element becomes a pending snap target. In the handler function, we set a `pending` class on the child referenced by the {{domxref("SnapEvent.snapTargetBlock", "snapTargetBlock")}} property, which could be used to style it differently when the event fires. + +```js +document.addEventListener("scrollsnapchanging", (event) => { + // remove previously-set "pending" classes + const pendingElems = document.querySelectorAll(".pending"); + pendingElems.forEach((elem) => { + elem.classList.remove("pending"); + }); + + // Set current pending snap target class to "pending" + event.snapTargetBlock.classList.add("pending"); +}); +``` + +At the start of the function, we select all elements that previously had the `pending` class applied and remove it, so that only the most recent pending snap target is styled. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Document/scrollsnapchange_event", "scrollsnapchange")}} event +- {{DOMxRef("Document/scrollend_event", "scrollend")}} event +- {{domxref("SnapEvent")}} +- CSS {{cssxref("scroll-snap-type")}} property +- [CSS scroll snap module](/en-US/docs/Web/CSS/CSS_scroll_snap) +- [Using scroll snap events](/en-US/docs/Web/CSS/CSS_scroll_snap/Using_scroll_snap_events) +- [Scroll Snap Events](https://developer.chrome.com/blog/scroll-snap-events) on developer.chrome.com (2024) diff --git a/files/en-us/web/api/document_object_model/using_the_document_object_model/index.md b/files/en-us/web/api/document_object_model/using_the_document_object_model/index.md index ea5d106253677d6..7b1525daa94c241 100644 --- a/files/en-us/web/api/document_object_model/using_the_document_object_model/index.md +++ b/files/en-us/web/api/document_object_model/using_the_document_object_model/index.md @@ -116,7 +116,7 @@ root.appendChild(body); ## How can I learn more? -Now that you are familiar with the basic concepts of the DOM, you may want to learn about the more about fundamental features of the Document API by reading [how to traverse an HTML table with JavaScript and DOM interfaces](/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces). +Now that you are familiar with the basic concepts of the DOM, you may want to learn more about the fundamental features of the Document API by reading [how to traverse an HTML table with JavaScript and DOM interfaces](/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces). ## See also diff --git a/files/en-us/web/api/document_picture-in-picture_api/index.md b/files/en-us/web/api/document_picture-in-picture_api/index.md index 912e26fb9013293..209fdd3fe93e8cd 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/index.md @@ -62,7 +62,7 @@ See [Using the Document Picture-in-Picture API](/en-US/docs/Web/API/Document_Pic ## Examples -See [Document Picture-in-Picture API Example](https://mdn.github.io/dom-examples/document-picture-in-picture/) for a full working demo (see the full [source code](https://github.com/chrisdavidmills/dom-examples/tree/main/document-picture-in-picture) also). +See [Document Picture-in-Picture API Example](https://mdn.github.io/dom-examples/document-picture-in-picture/) for a full working demo (see the full [source code](https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture) also). ## Specifications diff --git a/files/en-us/web/api/document_picture-in-picture_api/using/index.md b/files/en-us/web/api/document_picture-in-picture_api/using/index.md index 567fa7db9f2deee..6bd9451a421b133 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/using/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/using/index.md @@ -36,7 +36,7 @@ The following HTML sets up a basic video player. -
+

Document Picture-in-Picture API not available

@@ -59,7 +59,7 @@ if ("documentPictureInPicture" in window) { togglePipButton.textContent = "Toggle Picture-in-Picture"; togglePipButton.addEventListener("click", togglePictureInPicture, false); - document.getElementById("controlbar").appendChild(togglePipButton); + document.getElementById("control-bar").appendChild(togglePipButton); } ``` diff --git a/files/en-us/web/api/documentfragment/queryselectorall/index.md b/files/en-us/web/api/documentfragment/queryselectorall/index.md index b0d8c115cf76722..2dc7919b6304dbb 100644 --- a/files/en-us/web/api/documentfragment/queryselectorall/index.md +++ b/files/en-us/web/api/documentfragment/queryselectorall/index.md @@ -41,7 +41,7 @@ This example returns a list of all `div` elements within the `alert`: ```js -const matches = documentfrag.querySelectorAll("div.note, div.alert"); +const matches = documentFrag.querySelectorAll("div.note, div.alert"); ``` ## Specifications diff --git a/files/en-us/web/api/documentpictureinpicture/index.md b/files/en-us/web/api/documentpictureinpicture/index.md index 730a821c35220e5..4e20b9392a77e49 100644 --- a/files/en-us/web/api/documentpictureinpicture/index.md +++ b/files/en-us/web/api/documentpictureinpicture/index.md @@ -17,16 +17,22 @@ It is accessed via the {{domxref("Window.documentPictureInPicture")}} property. ## Instance properties +_Inherits properties from its parent, {{DOMxRef("EventTarget")}}._ + - {{domxref("DocumentPictureInPicture.window", "window")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : Returns a {{domxref("Window")}} instance representing the browsing context inside the Picture-in-Picture window. ## Instance methods +_Inherits methods from its parent, {{DOMxRef("EventTarget")}}._ + - {{domxref("DocumentPictureInPicture.requestWindow", "requestWindow()")}} {{Experimental_Inline}} - : Opens the Picture-in-Picture window for the current main browsing context. Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("Window")}} instance representing the browsing context inside the Picture-in-Picture window. ## Events +_Inherits events from its parent, {{DOMxRef("EventTarget")}}._ + - {{domxref("DocumentPictureInPicture/enter_event", "enter")}} {{Experimental_Inline}} - : Fired when the Picture-in-Picture window is successfully opened. @@ -46,7 +52,7 @@ const pipWindow = await window.documentPictureInPicture.requestWindow({ // ... ``` -See [Document Picture-in-Picture API Example](https://mdn.github.io/dom-examples/document-picture-in-picture/) for a full working demo (see the full [source code](https://github.com/chrisdavidmills/dom-examples/tree/main/document-picture-in-picture) also). +See [Document Picture-in-Picture API Example](https://mdn.github.io/dom-examples/document-picture-in-picture/) for a full working demo (see the full [source code](https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture) also). ## Specifications diff --git a/files/en-us/web/api/documentpictureinpictureevent/index.md b/files/en-us/web/api/documentpictureinpictureevent/index.md index 28b9d9180f3b57c..be2439023828532 100644 --- a/files/en-us/web/api/documentpictureinpictureevent/index.md +++ b/files/en-us/web/api/documentpictureinpictureevent/index.md @@ -18,10 +18,6 @@ The **`DocumentPictureInPictureEvent`** interface of the {{domxref("Document Pic - {{domxref("DocumentPictureInPictureEvent.DocumentPictureInPictureEvent", "DocumentPictureInPictureEvent()")}} {{Experimental_Inline}} - : Creates a new `DocumentPictureInPictureEvent` object instance. -## Instance methods - -_Inherits methods from its parent, {{DOMxRef("Event")}}._ - ## Instance properties _Inherits properties from its parent, {{DOMxRef("Event")}}._ @@ -29,6 +25,10 @@ _Inherits properties from its parent, {{DOMxRef("Event")}}._ - {{domxref("DocumentPictureInPictureEvent.window", "window")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : Returns a {{domxref("Window")}} instance representing the browsing context inside the `DocumentPictureInPicture` window the event was fired on. +## Instance methods + +_Inherits methods from its parent, {{DOMxRef("Event")}}._ + ## Examples ```js diff --git a/files/en-us/web/api/documenttype/index.md b/files/en-us/web/api/documenttype/index.md index 6c4fce4e8e54fde..e8743301ad19a2a 100644 --- a/files/en-us/web/api/documenttype/index.md +++ b/files/en-us/web/api/documenttype/index.md @@ -18,9 +18,9 @@ _Inherits properties from its parent, {{domxref("Node")}}._ - {{domxref("DocumentType.name")}} {{ReadOnlyInline}} - : The type of the document. It is always `"html"` for HTML documents, but will vary for XML documents. - {{domxref("DocumentType.publicId")}} {{ReadOnlyInline}} - - : A string with an identifier of the type of document. Always empty (`""`) for HTML, it will be, for example, `"-//W3C//DTD SVG 1.1//EN"` for SVG documents. + - : A string with an identifier of the type of document. Empty if the doctype given specifies no public ID. - {{domxref("DocumentType.systemId")}} {{ReadOnlyInline}} - - : A string containing the URL to the associated DTD. Always empty (`""`) for HTML, it will be, for example, `"http://www.w3.org/2000/svg"` for SVG documents. + - : A string containing the URL to the associated DTD. Empty if the doctype given specifies no system ID. ## Instance methods diff --git a/files/en-us/web/api/documenttype/publicid/index.md b/files/en-us/web/api/documenttype/publicid/index.md index c9dc479823ab3a9..8aa5b70c11b6933 100644 --- a/files/en-us/web/api/documenttype/publicid/index.md +++ b/files/en-us/web/api/documenttype/publicid/index.md @@ -12,8 +12,6 @@ The read-only **`publicId`** property of the {{domxref("DocumentType")}} returns For synthetic `DocumentType`, this property reflects the value given in parameter to {{domxref("DOMImplementation.createDocumentType()")}}. -For HTML documents, browsers always set it up to `html`, whatever the actual `doctype` in the source code is. For SVG documents, for example, it can be `"-//W3C//DTD SVG 1.1//EN"`. - ## Value A string. diff --git a/files/en-us/web/api/documenttype/systemid/index.md b/files/en-us/web/api/documenttype/systemid/index.md index c58f61cd03f93b6..277c6f6da48af05 100644 --- a/files/en-us/web/api/documenttype/systemid/index.md +++ b/files/en-us/web/api/documenttype/systemid/index.md @@ -12,8 +12,6 @@ The read-only **`systemId`** property of the {{domxref("DocumentType")}} returns For synthetic `DocumentType`, this property reflects the value given in parameter to {{domxref("DOMImplementation.createDocumentType()")}}. -For HTML documents, browsers always set it up to `html`, whatever the actual `doctype` in the source code is. For SVG documents, for example, it can be `"http://www.w3.org/2000/svg"`. - ## Value A string. diff --git a/files/en-us/web/api/domexception/code/index.md b/files/en-us/web/api/domexception/code/index.md index 1f8916ab730daef..4ef2fe8ab4185fe 100644 --- a/files/en-us/web/api/domexception/code/index.md +++ b/files/en-us/web/api/domexception/code/index.md @@ -8,7 +8,7 @@ status: browser-compat: api.DOMException.code --- -{{ APIRef("DOM") }} {{deprecated_header}} +{{APIRef("DOM")}}{{AvailableInWorkers}}{{deprecated_header}} The **`code`** read-only property of the {{domxref("DOMException")}} interface returns one of the legacy [error code constants](/en-US/docs/Web/API/DOMException#error_names), or `0` if none match. diff --git a/files/en-us/web/api/domexception/domexception/index.md b/files/en-us/web/api/domexception/domexception/index.md index a93423f955778c7..afc118f14157e88 100644 --- a/files/en-us/web/api/domexception/domexception/index.md +++ b/files/en-us/web/api/domexception/domexception/index.md @@ -6,7 +6,7 @@ page-type: web-api-constructor browser-compat: api.DOMException.DOMException --- -{{ APIRef("DOM") }} +{{APIRef("DOM")}}{{AvailableInWorkers}} The **`DOMException()`** constructor returns a {{domxref("DOMException")}} object with a specified message and name. @@ -22,10 +22,9 @@ new DOMException(message, name) ### Parameters - `message` {{optional_inline}} - - : A description of the exception. If not present, the empty string `''` is - used. + - : A description of the exception. If not present, the empty string `''` is used. - `name` {{optional_inline}} - - : A string. If the specified name is a [standard error name](/en-US/docs/Web/API/DOMException#error_names), then getting the [`code`](/en-US/docs/Web/API/DOMException/code) property of the `DOMException` object will return the code number corresponding to the specified name. + - : A string. If the specified name is a [standard error name](/en-US/docs/Web/API/DOMException#error_names), then getting the [`code`](/en-US/docs/Web/API/DOMException/code) property of the `DOMException` object will return the code number corresponding to the specified name. If not present, the string `'Error'` is used. ### Return value diff --git a/files/en-us/web/api/domexception/index.md b/files/en-us/web/api/domexception/index.md index ee4523d3a39b367..af8bdebafcff396 100644 --- a/files/en-us/web/api/domexception/index.md +++ b/files/en-us/web/api/domexception/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMException --- -{{ APIRef("DOM") }} +{{APIRef("DOM")}}{{AvailableInWorkers}} The **`DOMException`** interface represents an abnormal event (called an **exception**) that occurs as a result of calling a method or accessing a property of a web API. This is how error conditions are described in web APIs. diff --git a/files/en-us/web/api/domexception/message/index.md b/files/en-us/web/api/domexception/message/index.md index c44298c7d10c44f..0ea2019ee7f9f75 100644 --- a/files/en-us/web/api/domexception/message/index.md +++ b/files/en-us/web/api/domexception/message/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMException.message --- -{{ APIRef("DOM") }} +{{APIRef("DOM")}}{{AvailableInWorkers}} The **`message`** read-only property of the {{domxref("DOMException")}} interface returns a string representing diff --git a/files/en-us/web/api/domexception/name/index.md b/files/en-us/web/api/domexception/name/index.md index b4655e557060dba..1e2e0bd839b49ab 100644 --- a/files/en-us/web/api/domexception/name/index.md +++ b/files/en-us/web/api/domexception/name/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMException.name --- -{{ APIRef("DOM") }} +{{APIRef("DOM")}}{{AvailableInWorkers}} The **`name`** read-only property of the {{domxref("DOMException")}} interface returns a string that contains diff --git a/files/en-us/web/api/dommatrix/dommatrix/index.md b/files/en-us/web/api/dommatrix/dommatrix/index.md index 1161b1baf59d55b..a9da83261ab0c86 100644 --- a/files/en-us/web/api/dommatrix/dommatrix/index.md +++ b/files/en-us/web/api/dommatrix/dommatrix/index.md @@ -6,7 +6,7 @@ page-type: web-api-constructor browser-compat: api.DOMMatrix.DOMMatrix --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMMatrix`** constructor creates a new {{domxref("DOMMatrix")}} object which represents 4x4 matrices, suitable for 2D and 3D diff --git a/files/en-us/web/api/dommatrix/index.md b/files/en-us/web/api/dommatrix/index.md index 76801e867921d1b..24780fb6fa05a46 100644 --- a/files/en-us/web/api/dommatrix/index.md +++ b/files/en-us/web/api/dommatrix/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMMatrix --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMMatrix`** interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the {{domxref("DOMMatrixReadOnly")}} interface. diff --git a/files/en-us/web/api/dommatrixreadonly/dommatrixreadonly/index.md b/files/en-us/web/api/dommatrixreadonly/dommatrixreadonly/index.md index e875b733c8237b6..e09fdd7a8a23967 100644 --- a/files/en-us/web/api/dommatrixreadonly/dommatrixreadonly/index.md +++ b/files/en-us/web/api/dommatrixreadonly/dommatrixreadonly/index.md @@ -6,7 +6,7 @@ page-type: web-api-constructor browser-compat: api.DOMMatrixReadOnly.DOMMatrixReadOnly --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMMatrixReadOnly`** constructor creates a new {{domxref("DOMMatrixReadOnly")}} object which represents 4x4 matrices, suitable for 2D diff --git a/files/en-us/web/api/dommatrixreadonly/flipx/index.md b/files/en-us/web/api/dommatrixreadonly/flipx/index.md index 8442b8324bfffa2..9f8453d972956c4 100644 --- a/files/en-us/web/api/dommatrixreadonly/flipx/index.md +++ b/files/en-us/web/api/dommatrixreadonly/flipx/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.DOMMatrixReadOnly.flipX --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The `flipX()` method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the original matrix flipped about the x-axis. diff --git a/files/en-us/web/api/dommatrixreadonly/index.md b/files/en-us/web/api/dommatrixreadonly/index.md index de608cbfe0fc93c..0940b043bd7e4ca 100644 --- a/files/en-us/web/api/dommatrixreadonly/index.md +++ b/files/en-us/web/api/dommatrixreadonly/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMMatrixReadOnly --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMMatrixReadOnly`** interface represents a read-only 4×4 matrix, suitable for 2D and 3D operations. The {{domxref("DOMMatrix")}} interface — which is based upon `DOMMatrixReadOnly`—adds [mutability](https://en.wikipedia.org/wiki/Immutable_object), allowing you to alter the matrix after creating it. diff --git a/files/en-us/web/api/dommatrixreadonly/scale/index.md b/files/en-us/web/api/dommatrixreadonly/scale/index.md index a4803e3bc3ef02e..405eda3b658a35f 100644 --- a/files/en-us/web/api/dommatrixreadonly/scale/index.md +++ b/files/en-us/web/api/dommatrixreadonly/scale/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.DOMMatrixReadOnly.scale --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`scale()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the diff --git a/files/en-us/web/api/dommatrixreadonly/translate/index.md b/files/en-us/web/api/dommatrixreadonly/translate/index.md index 28bc49196d427c9..9f17d0d3b382d39 100644 --- a/files/en-us/web/api/dommatrixreadonly/translate/index.md +++ b/files/en-us/web/api/dommatrixreadonly/translate/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.DOMMatrixReadOnly.translate --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The `translate()` method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the original matrix with a translation applied. diff --git a/files/en-us/web/api/dompoint/dompoint/index.md b/files/en-us/web/api/dompoint/dompoint/index.md index 2d7f54857a1ec3f..c0b0e512eed5b05 100644 --- a/files/en-us/web/api/dompoint/dompoint/index.md +++ b/files/en-us/web/api/dompoint/dompoint/index.md @@ -6,7 +6,7 @@ page-type: web-api-constructor browser-compat: api.DOMPoint.DOMPoint --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPoint()`** constructor creates and returns a new {{domxref("DOMPoint")}} object, given the values for some or diff --git a/files/en-us/web/api/dompoint/frompoint_static/index.md b/files/en-us/web/api/dompoint/frompoint_static/index.md index 74b472a85e0c2ec..e7166d4031ebefc 100644 --- a/files/en-us/web/api/dompoint/frompoint_static/index.md +++ b/files/en-us/web/api/dompoint/frompoint_static/index.md @@ -6,7 +6,7 @@ page-type: web-api-static-method browser-compat: api.DOMPoint.fromPoint_static --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`fromPoint()`** static method of the {{domxref("DOMPoint")}} interface creates and returns a new mutable `DOMPoint` object given a source point. diff --git a/files/en-us/web/api/dompoint/index.md b/files/en-us/web/api/dompoint/index.md index e624f4a1fd9573d..4eae8e2d7d35795 100644 --- a/files/en-us/web/api/dompoint/index.md +++ b/files/en-us/web/api/dompoint/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMPoint --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} A **`DOMPoint`** object represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value. `DOMPoint` is based on {{domxref("DOMPointReadOnly")}} but allows its properties' values to be changed. diff --git a/files/en-us/web/api/dompoint/w/index.md b/files/en-us/web/api/dompoint/w/index.md index c8231e508bbc9f2..af28cdf6b80c31d 100644 --- a/files/en-us/web/api/dompoint/w/index.md +++ b/files/en-us/web/api/dompoint/w/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMPoint.w --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPoint`** interface's **`w`** property holds the point's perspective value, w, for a diff --git a/files/en-us/web/api/dompoint/x/index.md b/files/en-us/web/api/dompoint/x/index.md index 0340bc3eb9b8a9e..bad488a53730eae 100644 --- a/files/en-us/web/api/dompoint/x/index.md +++ b/files/en-us/web/api/dompoint/x/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMPoint.x --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPoint`** interface's **`x`** property holds the horizontal coordinate, x, for a diff --git a/files/en-us/web/api/dompoint/y/index.md b/files/en-us/web/api/dompoint/y/index.md index 47ee54d15e1d708..736255c65b38e89 100644 --- a/files/en-us/web/api/dompoint/y/index.md +++ b/files/en-us/web/api/dompoint/y/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMPoint.y --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPoint`** interface's **`y`** property holds the vertical coordinate, _y_, diff --git a/files/en-us/web/api/dompoint/z/index.md b/files/en-us/web/api/dompoint/z/index.md index 7d72ffa3ecd94fc..19871a9802fc224 100644 --- a/files/en-us/web/api/dompoint/z/index.md +++ b/files/en-us/web/api/dompoint/z/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMPoint.z --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPoint`** interface's **`z`** property specifies the depth coordinate of a point in diff --git a/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md b/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md index 442117312c1168d..834241332e3a33e 100644 --- a/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md +++ b/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md @@ -6,7 +6,7 @@ page-type: web-api-constructor browser-compat: api.DOMPointReadOnly.DOMPointReadOnly --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPointReadOnly()`** constructor returns a new {{domxref("DOMPointReadOnly")}} object representing a point diff --git a/files/en-us/web/api/dompointreadonly/frompoint_static/index.md b/files/en-us/web/api/dompointreadonly/frompoint_static/index.md index c40b5c753cbbdee..58f6f20ed9bf78c 100644 --- a/files/en-us/web/api/dompointreadonly/frompoint_static/index.md +++ b/files/en-us/web/api/dompointreadonly/frompoint_static/index.md @@ -6,7 +6,7 @@ page-type: web-api-static-method browser-compat: api.DOMPointReadOnly.fromPoint_static --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The static **{{domxref("DOMPointReadOnly")}}** method `fromPoint()` creates and returns a new diff --git a/files/en-us/web/api/dompointreadonly/index.md b/files/en-us/web/api/dompointreadonly/index.md index 3027ed046e847b7..9f44516631f1c5a 100644 --- a/files/en-us/web/api/dompointreadonly/index.md +++ b/files/en-us/web/api/dompointreadonly/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMPointReadOnly --- -{{APIRef("Geometry Interfaces")}} {{AvailableInWorkers}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPointReadOnly`** interface specifies the coordinate and perspective fields used by {{domxref("DOMPoint")}} to define a 2D or 3D point in a coordinate system. diff --git a/files/en-us/web/api/dompointreadonly/tojson/index.md b/files/en-us/web/api/dompointreadonly/tojson/index.md index ab6a106c7e74520..084dc9e49566fb5 100644 --- a/files/en-us/web/api/dompointreadonly/tojson/index.md +++ b/files/en-us/web/api/dompointreadonly/tojson/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.DOMPointReadOnly.toJSON --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The {{domxref("DOMPointReadOnly")}} method `toJSON()` returns an object giving the diff --git a/files/en-us/web/api/dompointreadonly/w/index.md b/files/en-us/web/api/dompointreadonly/w/index.md index 288cd877f448451..6f67e1d1b93f343 100644 --- a/files/en-us/web/api/dompointreadonly/w/index.md +++ b/files/en-us/web/api/dompointreadonly/w/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMPointReadOnly.w --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPointReadOnly`** interface's **`w`** property holds the point's perspective value, diff --git a/files/en-us/web/api/dompointreadonly/x/index.md b/files/en-us/web/api/dompointreadonly/x/index.md index 6b03d55357a4076..276ef1c515b572b 100644 --- a/files/en-us/web/api/dompointreadonly/x/index.md +++ b/files/en-us/web/api/dompointreadonly/x/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMPointReadOnly.x --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPointReadOnly`** interface's **`x`** property holds the horizontal coordinate, x, for a diff --git a/files/en-us/web/api/dompointreadonly/y/index.md b/files/en-us/web/api/dompointreadonly/y/index.md index 7465bc408bf0611..f5c9de3d8ea5e3d 100644 --- a/files/en-us/web/api/dompointreadonly/y/index.md +++ b/files/en-us/web/api/dompointreadonly/y/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMPointReadOnly.y --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPointReadOnly`** interface's **`y`** property holds the vertical coordinate, y, for a diff --git a/files/en-us/web/api/dompointreadonly/z/index.md b/files/en-us/web/api/dompointreadonly/z/index.md index 94c413e22a3869b..920dde1c0117748 100644 --- a/files/en-us/web/api/dompointreadonly/z/index.md +++ b/files/en-us/web/api/dompointreadonly/z/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMPointReadOnly.z --- -{{APIRef("DOM")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMPointReadOnly`** interface's **`z`** property holds the depth coordinate, z, for a diff --git a/files/en-us/web/api/domquad/index.md b/files/en-us/web/api/domquad/index.md index 3b1f96c19b1181a..0daa33c62e3143d 100644 --- a/files/en-us/web/api/domquad/index.md +++ b/files/en-us/web/api/domquad/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMQuad --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} A `DOMQuad` is a collection of four `DOMPoint`s defining the corners of an arbitrary quadrilateral. Returning `DOMQuad`s lets `getBoxQuads()` return accurate information even when arbitrary 2D or 3D transforms are present. It has a handy `bounds` attribute returning a `DOMRectReadOnly` for those cases where you just want an axis-aligned bounding rectangle. diff --git a/files/en-us/web/api/domrect/domrect/index.md b/files/en-us/web/api/domrect/domrect/index.md index 1c66276beb05297..01eb502dd82a2fd 100644 --- a/files/en-us/web/api/domrect/domrect/index.md +++ b/files/en-us/web/api/domrect/domrect/index.md @@ -6,7 +6,7 @@ page-type: web-api-constructor browser-compat: api.DOMRect.DOMRect --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMRect()`** constructor creates a new {{domxref("DOMRect")}} object. diff --git a/files/en-us/web/api/domrect/fromrect_static/index.md b/files/en-us/web/api/domrect/fromrect_static/index.md index 4d75ead367877c4..30b8d7d56020917 100644 --- a/files/en-us/web/api/domrect/fromrect_static/index.md +++ b/files/en-us/web/api/domrect/fromrect_static/index.md @@ -6,7 +6,7 @@ page-type: web-api-static-method browser-compat: api.DOMRect.fromRect_static --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`fromRect()`** static method of the {{domxref("DOMRect")}} object creates a new `DOMRect` diff --git a/files/en-us/web/api/domrect/index.md b/files/en-us/web/api/domrect/index.md index 747f7d1b61371f3..f9b6a0b84f5061a 100644 --- a/files/en-us/web/api/domrect/index.md +++ b/files/en-us/web/api/domrect/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMRect --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} A **`DOMRect`** describes the size and position of a rectangle. diff --git a/files/en-us/web/api/domrectreadonly/bottom/index.md b/files/en-us/web/api/domrectreadonly/bottom/index.md index 235da5616a50572..b3fc32f8ffc23a4 100644 --- a/files/en-us/web/api/domrectreadonly/bottom/index.md +++ b/files/en-us/web/api/domrectreadonly/bottom/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMRectReadOnly.bottom --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`bottom`** read-only property of the **`DOMRectReadOnly`** interface returns the bottom coordinate value of the `DOMRect`. (Has the same value as `y + height`, or `y` if `height` is negative.) diff --git a/files/en-us/web/api/domrectreadonly/domrectreadonly/index.md b/files/en-us/web/api/domrectreadonly/domrectreadonly/index.md index 940c930840ee4a9..23bfa4538fc027a 100644 --- a/files/en-us/web/api/domrectreadonly/domrectreadonly/index.md +++ b/files/en-us/web/api/domrectreadonly/domrectreadonly/index.md @@ -6,7 +6,7 @@ page-type: web-api-constructor browser-compat: api.DOMRectReadOnly.DOMRectReadOnly --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMRectReadOnly()`** constructor creates a new {{domxref("DOMRectReadOnly")}} object. diff --git a/files/en-us/web/api/domrectreadonly/fromrect_static/index.md b/files/en-us/web/api/domrectreadonly/fromrect_static/index.md index fdcf3ef039d3b6d..27dc80fb51124e2 100644 --- a/files/en-us/web/api/domrectreadonly/fromrect_static/index.md +++ b/files/en-us/web/api/domrectreadonly/fromrect_static/index.md @@ -6,7 +6,7 @@ page-type: web-api-static-method browser-compat: api.DOMRectReadOnly.fromRect_static --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`fromRect()`** static method of the {{domxref("DOMRectReadOnly")}} object creates a new `DOMRectReadOnly` diff --git a/files/en-us/web/api/domrectreadonly/height/index.md b/files/en-us/web/api/domrectreadonly/height/index.md index f893f6885452855..2efc24bdc8a2aa2 100644 --- a/files/en-us/web/api/domrectreadonly/height/index.md +++ b/files/en-us/web/api/domrectreadonly/height/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMRectReadOnly.height --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`height`** read-only property of the **`DOMRectReadOnly`** interface represents the height of the `DOMRect`. diff --git a/files/en-us/web/api/domrectreadonly/index.md b/files/en-us/web/api/domrectreadonly/index.md index 6fcdcfba97b8efa..9f2a44f5766c15e 100644 --- a/files/en-us/web/api/domrectreadonly/index.md +++ b/files/en-us/web/api/domrectreadonly/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMRectReadOnly --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`DOMRectReadOnly`** interface specifies the standard properties (also used by {{domxref("DOMRect")}}) to define a rectangle whose properties are immutable. diff --git a/files/en-us/web/api/domrectreadonly/left/index.md b/files/en-us/web/api/domrectreadonly/left/index.md index ee440c8dbb2e41a..4c31648bbaeab7e 100644 --- a/files/en-us/web/api/domrectreadonly/left/index.md +++ b/files/en-us/web/api/domrectreadonly/left/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMRectReadOnly.left --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`left`** read-only property of the **`DOMRectReadOnly`** interface returns the left coordinate value of the `DOMRect`. (Has the same value as `x`, or `x + width` if `width` is negative.) diff --git a/files/en-us/web/api/domrectreadonly/right/index.md b/files/en-us/web/api/domrectreadonly/right/index.md index 35952604c36f1df..7cec09f1b8c238f 100644 --- a/files/en-us/web/api/domrectreadonly/right/index.md +++ b/files/en-us/web/api/domrectreadonly/right/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMRectReadOnly.right --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`right`** read-only property of the **`DOMRectReadOnly`** interface returns the right coordinate value of the `DOMRect`. (Has the same value as `x + width`, or `x` if `width` is negative.) diff --git a/files/en-us/web/api/domrectreadonly/top/index.md b/files/en-us/web/api/domrectreadonly/top/index.md index 37872d99f2f414b..08d84fce5d64325 100644 --- a/files/en-us/web/api/domrectreadonly/top/index.md +++ b/files/en-us/web/api/domrectreadonly/top/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMRectReadOnly.top --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`top`** read-only property of the **`DOMRectReadOnly`** interface returns the top coordinate value of the `DOMRect`. (Has the same value as `y`, or `y + height` if `height` is negative.) diff --git a/files/en-us/web/api/domrectreadonly/width/index.md b/files/en-us/web/api/domrectreadonly/width/index.md index 6bba85fe63da7e3..97cd2a3c2b2e80d 100644 --- a/files/en-us/web/api/domrectreadonly/width/index.md +++ b/files/en-us/web/api/domrectreadonly/width/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMRectReadOnly.width --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`width`** read-only property of the **`DOMRectReadOnly`** interface represents the width of the `DOMRect`. diff --git a/files/en-us/web/api/domrectreadonly/x/index.md b/files/en-us/web/api/domrectreadonly/x/index.md index fc5ddda02671c77..b6bdde39e89329d 100644 --- a/files/en-us/web/api/domrectreadonly/x/index.md +++ b/files/en-us/web/api/domrectreadonly/x/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMRectReadOnly.x --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`x`** read-only property of the **`DOMRectReadOnly`** interface represents the x coordinate of the `DOMRect`'s origin. diff --git a/files/en-us/web/api/domrectreadonly/y/index.md b/files/en-us/web/api/domrectreadonly/y/index.md index 21abf03d451ead0..11b681cd6d42e3f 100644 --- a/files/en-us/web/api/domrectreadonly/y/index.md +++ b/files/en-us/web/api/domrectreadonly/y/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMRectReadOnly.y --- -{{APIRef("Geometry Interfaces")}} +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} The **`y`** read-only property of the **`DOMRectReadOnly`** interface represents the y coordinate of the `DOMRect`'s origin. diff --git a/files/en-us/web/api/domstringlist/contains/index.md b/files/en-us/web/api/domstringlist/contains/index.md index 29afd92f13a70c4..6108a35c53a6932 100644 --- a/files/en-us/web/api/domstringlist/contains/index.md +++ b/files/en-us/web/api/domstringlist/contains/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.DOMStringList.contains --- -{{APIRef("DOM")}} +{{APIRef("DOM")}}{{AvailableInWorkers}} The **`contains()`** method returns a boolean indicating whether the given string is in the list. diff --git a/files/en-us/web/api/domstringlist/index.md b/files/en-us/web/api/domstringlist/index.md index 0afd97d90d1438b..19b713da7a130f8 100644 --- a/files/en-us/web/api/domstringlist/index.md +++ b/files/en-us/web/api/domstringlist/index.md @@ -5,7 +5,7 @@ page-type: web-api-interface browser-compat: api.DOMStringList --- -{{APIRef("DOM")}} +{{APIRef("DOM")}}{{AvailableInWorkers}} The **`DOMStringList`** interface is a legacy type returned by some APIs and represents a non-modifiable list of strings (`DOMString`). diff --git a/files/en-us/web/api/domstringlist/item/index.md b/files/en-us/web/api/domstringlist/item/index.md index 7e1dc30d399a01f..df44e583c46011b 100644 --- a/files/en-us/web/api/domstringlist/item/index.md +++ b/files/en-us/web/api/domstringlist/item/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.DOMStringList.item --- -{{APIRef("DOM")}} +{{APIRef("DOM")}}{{AvailableInWorkers}} The **`item()`** method returns a string from a [`DOMStringList`](/en-US/docs/Web/API/DOMStringList) by index. diff --git a/files/en-us/web/api/domstringlist/length/index.md b/files/en-us/web/api/domstringlist/length/index.md index 7867d9b7d8c19d4..bb74ad4c9729dd1 100644 --- a/files/en-us/web/api/domstringlist/length/index.md +++ b/files/en-us/web/api/domstringlist/length/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.DOMStringList.length --- -{{APIRef("DOM")}} +{{APIRef("DOM")}}{{AvailableInWorkers}} The read-only **`length`** property indicates the number of strings in the {{domxref("DOMStringList")}}. diff --git a/files/en-us/web/api/editcontext/textformatupdate_event/ime-nodepad.png b/files/en-us/web/api/editcontext/textformatupdate_event/ime-notepad.png similarity index 100% rename from files/en-us/web/api/editcontext/textformatupdate_event/ime-nodepad.png rename to files/en-us/web/api/editcontext/textformatupdate_event/ime-notepad.png diff --git a/files/en-us/web/api/editcontext/textformatupdate_event/index.md b/files/en-us/web/api/editcontext/textformatupdate_event/index.md index 2437a1c2f2fec3a..9b9b4f8001a9958 100644 --- a/files/en-us/web/api/editcontext/textformatupdate_event/index.md +++ b/files/en-us/web/api/editcontext/textformatupdate_event/index.md @@ -14,9 +14,9 @@ The `textformatupdate` event of the {{domxref("EditContext")}} interface fires w The event is fired when the IME decides that certain parts of the text being composed should be formatted differently to indicate the composition state. -The following screenshot shows an example of text being written in the Nodepad app on Windows, by using the Japanese IME. The text is formatted with a thick underline to indicate that it's been composed from one of the IME's suggestions. +The following screenshot shows an example of text being written in the Notepad app on Windows, by using the Japanese IME. The text is formatted with a thick underline to indicate that it's been composed from one of the IME's suggestions. -![Nodepad on Windows with some Japanese text being composed from the IME window](./ime-nodepad.png) +![Notepad on Windows with some Japanese text being composed from the IME window](./ime-notepad.png) As a web developer, you should listen for the `textformatupdate` event and update the formatting of the text displayed in your editable region accordingly. diff --git a/files/en-us/web/api/editcontext_api/guide/index.md b/files/en-us/web/api/editcontext_api/guide/index.md index a2d1868b9d8aca1..5019be3952c443d 100644 --- a/files/en-us/web/api/editcontext_api/guide/index.md +++ b/files/en-us/web/api/editcontext_api/guide/index.md @@ -199,7 +199,7 @@ As seen in the previous `render()` function code example, each token is given a ### Rendering the selection -Even though the demo app uses a `
` element for the editor, which already supports displaying a blinking text cursor and highlighting user selections, the EditContext API still requires to render the selection. This is because the EditContext API can be used with other types of elements that don't support these behaviors. Rendering the selection ourselves also gives us more control over how the selection is displayed. Finally, because the `render()` function clears the HTML content of the editor element everytime it runs, any selection that the user might have made is lost the next time the `render()` function runs. +Even though the demo app uses a `
` element for the editor, which already supports displaying a blinking text cursor and highlighting user selections, the EditContext API still requires to render the selection. This is because the EditContext API can be used with other types of elements that don't support these behaviors. Rendering the selection ourselves also gives us more control over how the selection is displayed. Finally, because the `render()` function clears the HTML content of the editor element every time it runs, any selection that the user might have made is lost the next time the `render()` function runs. To render the selection, the demo app uses the {{domxref("Selection.setBaseAndExtent()")}} method at the end of the `render()` function. To use the `setBaseAndExtent()` method, we need a pair of DOM nodes and character offsets that represent the start and end of the selection. However, the EditContext API maintains the state for the current selection only as a pair of start and end character offsets into the entire edit buffer. The demo app code uses another function, called `fromOffsetsToSelection()` that's used to convert these character offsets into four values: diff --git a/files/en-us/web/api/element/animationcancel_event/index.md b/files/en-us/web/api/element/animationcancel_event/index.md index a1da5587fea1e12..55ff04044464b19 100644 --- a/files/en-us/web/api/element/animationcancel_event/index.md +++ b/files/en-us/web/api/element/animationcancel_event/index.md @@ -95,11 +95,11 @@ animated.style.display = "none"; .animation.active { animation-duration: 2s; - animation-name: slidein; + animation-name: slide-in; animation-iteration-count: 2; } -@keyframes slidein { +@keyframes slide-in { from { transform: translateX(100%) scaleX(3); } diff --git a/files/en-us/web/api/element/animationend_event/index.md b/files/en-us/web/api/element/animationend_event/index.md index 05bd758135ac98c..c5761fb2002ffe9 100644 --- a/files/en-us/web/api/element/animationend_event/index.md +++ b/files/en-us/web/api/element/animationend_event/index.md @@ -90,11 +90,11 @@ animated.onanimationend = () => { .animation.active { animation-duration: 2s; - animation-name: slidein; + animation-name: slide-in; animation-iteration-count: 2; } -@keyframes slidein { +@keyframes slide-in { from { transform: translateX(100%) scaleX(3); } diff --git a/files/en-us/web/api/element/animationiteration_event/index.md b/files/en-us/web/api/element/animationiteration_event/index.md index 0db594b9725ff6a..f800651dfa7631b 100644 --- a/files/en-us/web/api/element/animationiteration_event/index.md +++ b/files/en-us/web/api/element/animationiteration_event/index.md @@ -96,11 +96,11 @@ animated.onanimationiteration = () => { .animation.active { animation-duration: 2s; - animation-name: slidein; + animation-name: slide-in; animation-iteration-count: 2; } -@keyframes slidein { +@keyframes slide-in { from { transform: translateX(100%) scaleX(3); } diff --git a/files/en-us/web/api/element/animationstart_event/index.md b/files/en-us/web/api/element/animationstart_event/index.md index f2b4b9696d499dc..6276e5f68cd0218 100644 --- a/files/en-us/web/api/element/animationstart_event/index.md +++ b/files/en-us/web/api/element/animationstart_event/index.md @@ -90,11 +90,11 @@ animated.onanimationstart = () => { .animation.active { animation-duration: 2s; - animation-name: slidein; + animation-name: slide-in; animation-iteration-count: 2; } -@keyframes slidein { +@keyframes slide-in { from { transform: translateX(100%) scaleX(3); } diff --git a/files/en-us/web/api/element/ariacolcount/index.md b/files/en-us/web/api/element/ariacolcount/index.md index c48a42e86599733..92921e1f6ea839f 100644 --- a/files/en-us/web/api/element/ariacolcount/index.md +++ b/files/en-us/web/api/element/ariacolcount/index.md @@ -73,4 +73,6 @@ console.log(el.ariaColCount); // 3 {{Compat}} +## See also + - [ARIA: table role](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) diff --git a/files/en-us/web/api/element/ariaplaceholder/index.md b/files/en-us/web/api/element/ariaplaceholder/index.md index 5818af7e8f816f9..c6b26e6d3e55608 100644 --- a/files/en-us/web/api/element/ariaplaceholder/index.md +++ b/files/en-us/web/api/element/ariaplaceholder/index.md @@ -22,18 +22,18 @@ A string. In this example the `aria-placeholder` attribute on the element with an ID of `txtBoxInput` has been set to a string. Using `ariaPlaceholder` we update the string to another value. ```html -
Enter your five-digit zipcode
+
Enter your five-digit zip code
``` ```js let el = document.getElementById("txtBoxInput"); -console.log(el.ariaPlaceholder); // "5-digit zipcode" +console.log(el.ariaPlaceholder); // "5-digit zip code" el.ariaPlaceholder = "12345"; console.log(el.ariaPlaceholder); // "12345" ``` diff --git a/files/en-us/web/api/element/ariaroledescription/index.md b/files/en-us/web/api/element/ariaroledescription/index.md index 2128ed00042cd74..83d725d6a3d7bc2 100644 --- a/files/en-us/web/api/element/ariaroledescription/index.md +++ b/files/en-us/web/api/element/ariaroledescription/index.md @@ -42,4 +42,6 @@ console.log(el.ariaRoleDescription); // "an updated description of this widget" {{Compat}} +## See also + - [ARIA: application role](/en-US/docs/Web/Accessibility/ARIA/Roles/application_role) diff --git a/files/en-us/web/api/element/ariarowcount/index.md b/files/en-us/web/api/element/ariarowcount/index.md index 52427016e3f1f91..7acfe7840559e49 100644 --- a/files/en-us/web/api/element/ariarowcount/index.md +++ b/files/en-us/web/api/element/ariarowcount/index.md @@ -72,4 +72,6 @@ console.log(el.ariaRowCount); // 101 {{Compat}} +## See also + - [ARIA: table role](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) diff --git a/files/en-us/web/api/element/classlist/index.md b/files/en-us/web/api/element/classlist/index.md index 1023dbcef90bb61..9eb98299f654ace 100644 --- a/files/en-us/web/api/element/classlist/index.md +++ b/files/en-us/web/api/element/classlist/index.md @@ -37,9 +37,9 @@ console.log(div.outerHTML); // use the classList API to remove and add classes div.classList.remove("foo"); -div.classList.add("anotherclass"); +div.classList.add("another-class"); -//
+//
console.log(div.outerHTML); // if visible is set remove it, otherwise add it diff --git a/files/en-us/web/api/element/click_event/index.md b/files/en-us/web/api/element/click_event/index.md index 2d4ed873ee6afb6..865c737c5f64fec 100644 --- a/files/en-us/web/api/element/click_event/index.md +++ b/files/en-us/web/api/element/click_event/index.md @@ -12,10 +12,7 @@ An element receives a **`click`** event when any of the following occurs: - A pointing-device button (such as a mouse's primary button) is both pressed and released while the pointer is located inside the element. - A touch gesture is performed on the element. -- Any user interaction that is equivalent to a click occurs, such as pressing the Space key or Enter key while the element is focused. - -> [!NOTE] -> In practice, browsers don't fire the `click` event for custom controls such as a `
` with `tabindex="0"`. To check the reason behind this behavior, see this [Chromium issue](https://crbug.com/40776466). +- Any user interaction that is equivalent to a click, such as pressing the Space key or Enter key while the element is focused. Note that this only applies to elements with a default key event handler, and therefore, excludes other elements that have been made focusable by setting the [`tabindex`](/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute. If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements. diff --git a/files/en-us/web/api/element/currentcsszoom/index.md b/files/en-us/web/api/element/currentcsszoom/index.md index d9c700abb5d565c..df4a9a8d3e394cf 100644 --- a/files/en-us/web/api/element/currentcsszoom/index.md +++ b/files/en-us/web/api/element/currentcsszoom/index.md @@ -38,8 +38,8 @@ The "child2" element contains two nested elements, one of which is not rendered,
child2 (zoom: 3)
child3_rendered
-
@@ -81,9 +81,9 @@ if ("currentCSSZoom" in Element.prototype) { log( `child3_rendered (unzoomed). currentCSSZoom: ${child3_rendered.currentCSSZoom}`, ); - const top_child3_notrendered = document.querySelector("#child3_notrendered"); + const top_child3_notRendered = document.querySelector("#child3_not-rendered"); log( - `child3_notrendered (not rendered): ${child3_notrendered.currentCSSZoom}`, + `child3_notRendered (not rendered): ${child3_notRendered.currentCSSZoom}`, ); } else { log("Element.currentCSSZoom not supported in this browser"); diff --git a/files/en-us/web/api/element/fullscreenchange_event/index.md b/files/en-us/web/api/element/fullscreenchange_event/index.md index 6951271f18166e1..c858c49999a809f 100644 --- a/files/en-us/web/api/element/fullscreenchange_event/index.md +++ b/files/en-us/web/api/element/fullscreenchange_event/index.md @@ -52,7 +52,7 @@ What that means to the example code is that, if an element is currently in fulls ### JavaScript ```js -function fullscreenchanged(event) { +function fullscreenchangeHandler(event) { // document.fullscreenElement will point to the element that // is in fullscreen mode if there is one. If not, the value // of the property is null. @@ -67,9 +67,9 @@ function fullscreenchanged(event) { const el = document.getElementById("fullscreen-div"); -el.addEventListener("fullscreenchange", fullscreenchanged); +el.addEventListener("fullscreenchange", fullscreenchangeHandler); // or -el.onfullscreenchange = fullscreenchanged; +el.onfullscreenchange = fullscreenchangeHandler; // When the toggle button is clicked, enter/exit fullscreen document diff --git a/files/en-us/web/api/element/getelementsbyclassname/index.md b/files/en-us/web/api/element/getelementsbyclassname/index.md index 068dd93654ce5ce..afe27a5557f2069 100644 --- a/files/en-us/web/api/element/getelementsbyclassname/index.md +++ b/files/en-us/web/api/element/getelementsbyclassname/index.md @@ -84,31 +84,31 @@ You can use either the {{domxref("HTMLCollection.item", "item()")}} method on th returned `HTMLCollection` or standard array syntax to examine individual elements in the collection. However, the following code will not work as one might expect because `"matches"` will change as -soon as any `"colorbox"` class is removed. +soon as any `"color-box"` class is removed. ```js -const matches = element.getElementsByClassName("colorbox"); +const matches = element.getElementsByClassName("color-box"); for (let i = 0; i < matches.length; i++) { - matches[i].classList.remove("colorbox"); - matches.item(i).classList.add("hueframe"); + matches[i].classList.remove("color-box"); + matches.item(i).classList.add("hue-frame"); } ``` Instead, use another method, such as: ```js -const matches = element.getElementsByClassName("colorbox"); +const matches = element.getElementsByClassName("color-box"); while (matches.length > 0) { - matches.item(0).classList.add("hueframe"); - matches[0].classList.remove("colorbox"); + matches.item(0).classList.add("hue-frame"); + matches[0].classList.remove("color-box"); } ``` -This code finds descendant elements with the `"colorbox"` class, adds the -class `"hueframe"`, by calling `item(0)`, then removes -`"colorbox"` (using array notation). Another element (if any are left) will +This code finds descendant elements with the `"color-box"` class, adds the +class `"hue-frame"`, by calling `item(0)`, then removes +`"color-box"` (using array notation). Another element (if any are left) will then become `item(0)`. ### Filtering the results using array methods diff --git a/files/en-us/web/api/element/index.md b/files/en-us/web/api/element/index.md index 0d5b2919a7ba1e4..b0ad6997e40da8e 100644 --- a/files/en-us/web/api/element/index.md +++ b/files/en-us/web/api/element/index.md @@ -307,10 +307,6 @@ Listen to these events using `addEventListener()` or by assigning an event liste - : Fired before WebXR select events ({{domxref("XRSession/select_event", "select")}}, {{domxref("XRSession/selectstart_event", "selectstart")}}, {{domxref("XRSession/selectend_event", "selectend")}}) are dispatched. - {{domxref("Element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} - : Fires on any element with {{cssxref("content-visibility", "content-visibility: auto")}} set on it when it starts or stops being [relevant to the user](/en-US/docs/Web/CSS/CSS_containment/Using_CSS_containment#relevant_to_the_user) and [skipping its contents](/en-US/docs/Web/CSS/CSS_containment/Using_CSS_containment#skips_its_contents). -- {{domxref("Element/scroll_event", "scroll")}} - - : Fired when the document view or an element has been scrolled. -- {{domxref("Element/scrollend_event", "scrollend")}} - - : Fires when the document view has completed scrolling. - {{domxref("Element/securitypolicyviolation_event","securitypolicyviolation")}} - : Fired when a [Content Security Policy](/en-US/docs/Web/HTTP/CSP) is violated. - {{domxref("Element/wheel_event","wheel")}} @@ -405,7 +401,7 @@ Listen to these events using `addEventListener()` or by assigning an event liste - {{domxref("Element/MozMousePixelScroll_event", "MozMousePixelScroll")}} {{Deprecated_Inline}} {{Non-standard_Inline}} - : Fired when a mouse wheel or similar device is operated. - {{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}} {{Non-standard_Inline}} - - : Fired each time the amount of pressure changes on the trackpadtouchscreen. + - : Fired each time the amount of pressure changes on the trackpad touch screen. - {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} {{Non-standard_Inline}} - : Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click". - {{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}} {{Non-standard_Inline}} @@ -438,6 +434,17 @@ Listen to these events using `addEventListener()` or by assigning an event liste - {{domxref("Element/pointerup_event", "pointerup")}} - : Fired when a pointer is no longer active. +### Scroll events + +- {{domxref("Element/scroll_event", "scroll")}} + - : Fired when the document view or an element has been scrolled. +- {{domxref("Element/scrollend_event", "scrollend")}} + - : Fires when the document view has completed scrolling. +- {{domxref("Element/scrollsnapchange_event", "scrollsnapchange")}} {{experimental_inline}} + - : Fired on the scroll container at the end of a scrolling operation when a new scroll snap target has been selected. +- {{domxref("Element/scrollsnapchanging_event", "scrollsnapchanging")}} {{experimental_inline}} + - : Fired on the scroll container when the browser determines a new scroll snap target is pending, i.e. it will be selected when the current scroll gesture ends. + ### Touch events - {{domxref("Element/gesturechange_event","gesturechange")}} {{Non-standard_Inline}} diff --git a/files/en-us/web/api/element/innerhtml/index.md b/files/en-us/web/api/element/innerhtml/index.md index 1da152d820bffcb..99ea7180f67b063 100644 --- a/files/en-us/web/api/element/innerhtml/index.md +++ b/files/en-us/web/api/element/innerhtml/index.md @@ -17,7 +17,7 @@ To insert the HTML into the document rather than replace the contents of an elem The serialization of the DOM tree read from the property does not include {{glossary("shadow tree", "shadow roots")}} — if you want to get a HTML string that includes shadow roots, you must instead use the {{domxref("Element.getHTML()")}} or {{domxref("ShadowRoot.getHTML()")}} methods. Similarly, when setting element content using `innerHTML`, the HTML string is parsed into DOM elements that do not contain shadow roots. -So for example [`