Merge branch 'main' into cookies.get-orders-cookies-according-to-RFC-…

…6265

.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.

.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.

.vscode/ignore-list.txt

@@ -4819,6 +4819,7 @@ Tamaran
 tamen
 taml
 tamldec
+tanuki
 Tanx
 targetable
 TARGETDURATION
@@ -5279,6 +5280,7 @@ usermail
 usermessage
 userpic
 userproximity
+userscript
 userscripts
 USERSPACEONUSE
 usertext

.vscode/terms-abbreviations.txt

@@ -57,13 +57,17 @@ nolint
 okan
 Oklab
 oklch
+onscrollsnapchange
+onscrollsnapchanging
 Paciello
 Pinia
 prophoto
 reprioritize
 rgba
 ripgrep
 rustc
+scrollsnapchange
+scrollsnapchanging
 sctp
 SMIL
 srgb

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;

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

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)

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
 

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)

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

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

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
   </tbody>
 </table>
 
-### 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
 

files/en-us/learn/forms/your_first_form/index.md

@@ -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 {

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 `<thead>` element, the "SUM" row inside a `<tfoot>` element, and the rest of the content inside a `<tbody>` element.
-4. Save and refresh, and you'll see that adding the `<tfoot>` 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 `<thead>` element, the "SUM" row inside a `<tfoot>` element, and the rest of the content inside a `<tbody>` 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 `<tbody>` and `<tfoot>` 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 `<tbody>` and `<tfoot>` 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)).