diff --git a/files/en-us/games/anatomy/index.md b/files/en-us/games/anatomy/index.md index c79733312f61b83..d6ee051ddf5530b 100644 --- a/files/en-us/games/anatomy/index.md +++ b/files/en-us/games/anatomy/index.md @@ -19,7 +19,7 @@ Other games demand control over each of the smallest possible individual timesli But it might not need per-frame control. Your game loop might be similar to the _find the differences_ example and base itself on input events. It might require both input and simulated time. It might even loop based on something else entirely. -Modern JavaScript — as described in the next sections — thankfully makes it easy to develop an efficient, execute-once-per-frame main loop. Of course, your game will only be as optimized as you make it. If something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always). +Modern JavaScript — as described in the next sections — thankfully makes it less difficult to develop an efficient, execute-once-per-frame main loop. Of course, your game will only be as optimized as you make it. If something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always). ## Building a main loop in JavaScript @@ -50,7 +50,7 @@ But do not immediately assume animations require frame-by-frame control. Simple ## Building a better main loop in JavaScript -There are two obvious issues with our previous main loop: `main()` pollutes the {{ domxref("window") }} object (where all global variables are stored) and the example code did not leave us with a way to _stop_ the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an Immediately-Invoked Function Expression (IIFE). +There are two obvious issues with our previous main loop: `main()` pollutes the {{ domxref("window") }} object (where all global variables are stored) and the example code did not leave us with a way to _stop_ the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need direct access to it, you could create it as an Immediately-Invoked Function Expression (IIFE). ```js diff --git a/files/en-us/games/techniques/3d_collision_detection/index.md b/files/en-us/games/techniques/3d_collision_detection/index.md index 83aaa34cfb3f6aa..d06c432340410f9 100644 --- a/files/en-us/games/techniques/3d_collision_detection/index.md +++ b/files/en-us/games/techniques/3d_collision_detection/index.md @@ -107,7 +107,7 @@ function isPointInsideSphere(point, sphere) { ``` > [!NOTE] -> The code above features a square root, which can be expensive to calculate. An easy optimization to avoid it consists of comparing the squared distance with the squared radius, so the optimized equation would instead involve `distanceSqr < sphere.radius * sphere.radius`. +> The code above features a square root, which can be expensive to calculate. An effective optimization to avoid it consists of comparing the squared distance with the squared radius, so the optimized equation would instead involve `distanceSqr < sphere.radius * sphere.radius`. ### Sphere vs. sphere diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md index a3c03f6ddc3ce15..18291eb2884a082 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md @@ -320,7 +320,7 @@ render(); ## Summary -A-Frame targets web developers by offering easy to use web markup and all the advantages that brings, such as JavaScript manipulation. It is easy to start with, but also provides a powerful API for advanced concepts, as well as dealing with cross browser differences. It's a great time to start experimenting with such frameworks. +A-Frame targets web developers by offering web markup with advantages such as JavaScript manipulation. It provides a powerful API for advanced concepts, as well as dealing with cross browser differences. It's a great time to start experimenting with such frameworks. ## See also diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md index be6393b4bdaea60..3df6e6bce226aae 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md @@ -169,7 +169,7 @@ The `StandardMaterial` takes two parameters: a name, and the scene you want to a ## Babylon.js shapes example -Congratulations, you've created your first object in a 3D environment using Babylon.js! It was easier than you thought, right? +Congratulations, you've created your first object in a 3D environment using Babylon.js! It was less painful than you thought, right? Here's what we have created so far in a live sample. You can click "Play" to edit the code in the MDN Playground: @@ -283,7 +283,7 @@ The `t` variable will be incremented on every rendered frame. ### Rotation -Applying rotation is as easy as adding this line at the end of the `renderLoop` function: +Applying rotation requires adding this line at the end of the `renderLoop` function: ```js box.rotation.y = t * 2; 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 a7c8407484aeb8e..1f4ba4d30301856 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 @@ -7,8 +7,7 @@ sidebar: games A typical 3D scene in a game — even the simplest one — contains standard items like shapes located in a coordinate system, a camera to view it, lights and materials to make it look better, animations to make it look alive, etc. **Three.js**, as with any other 3D library, provides built-in helper functions to help you implement common 3D functionality more quickly. In this article we'll take you through the real basics of using Three.js, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo. -Three is one of the most popular [WebGL](/en-US/docs/Web/API/WebGL_API) libraries, and it is easy to get started with. -We are not saying it is better than any other WebGL library, and you should feel free to try other libraries. +Three is one of the most popular [WebGL](/en-US/docs/Web/API/WebGL_API) libraries, though we are not saying it is better than any other WebGL library, and you should feel free to try other libraries. > [!NOTE] > This guide was last updated in November 2024, and is compatible with Three.js version `r79`. @@ -184,7 +183,7 @@ cube.rotation.set(0.4, 0.2, 0); ## Three.js shape example If you've followed everything so far without any problems, you've created your first object in a 3D environment using Three.js! -It was easier than you thought, right? +Congratulations. Your code should look like the following live sample. You can click "Play" to view and edit the code in the MDN Playground: diff --git a/files/en-us/games/techniques/3d_on_the_web/index.md b/files/en-us/games/techniques/3d_on_the_web/index.md index 892f76eca620b29..959e91f16a8ce6e 100644 --- a/files/en-us/games/techniques/3d_on_the_web/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/index.md @@ -36,7 +36,7 @@ It's hard to imagine a game without collision detection — we always need to wo The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the [Meta Quest](https://www.meta.com/quest/), and the (currently experimental) [WebXR API](/en-US/docs/Web/API/WebXR_Device_API) for capturing information from XR hardware and making it available for use in JavaScript applications. For more, read [WebXR — Virtual and Augmented Reality for the Web](/en-US/docs/Games/Techniques/3D_on_the_web/WebXR). -There's also the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) article showing you how easy it is to build 3D environments for virtual reality using the [A-Frame](https://aframe.io/) framework. +There's also the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) article showing you how to build 3D environments for virtual reality using the [A-Frame](https://aframe.io/) framework. ## The rise of libraries and frameworks @@ -58,7 +58,7 @@ PlayCanvas is a popular 3D WebGL game engine open-sourced on GitHub, with an edi ### Building up a basic demo with Three.js -Three.js, like any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the [Building up a basic demo with Three.js](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) subpage for the step-by-step process of creating the demo. +Three.js, like any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot faster. See the [Building up a basic demo with Three.js](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) subpage for the step-by-step process of creating the demo. ### Other tools 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 358edf8dcc346fc..a16c33f7ecd61ab 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 @@ -122,7 +122,7 @@ myAudio.addEventListener("timeupdate", () => { Music in games can have a powerful emotional effect. You can mix and match various music samples and assuming you can control the volume of your audio element you could cross-fade different musical pieces. Using the [`playbackRate()`](/en-US/docs/Web/API/HTMLMediaElement/playbackRate) method you can even adjust the speed of your music without affecting the pitch, to sync it up better with the action. -All this is possible using the standard {{htmlelement("audio")}} element and associated {{domxref("HTMLMediaElement")}}, but it becomes much easier and more flexible with the more advanced [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). Let's look at this next. +All this is possible using the standard {{htmlelement("audio")}} element and associated {{domxref("HTMLMediaElement")}}, but it becomes more flexible with the more advanced [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). Let's look at this next. ### Web Audio API for games diff --git a/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md b/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md index 2f1f44e5545b99f..7cbc89a64beedcc 100644 --- a/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md +++ b/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md @@ -9,10 +9,10 @@ sidebar: games Now, when we have our mobile controls in place and the game is playable on touch-enabled devices, it would be good to add mouse and keyboard support so the game can be playable on desktop also. That way we can broaden the list of supported platforms. We'll look at this below. -It's also easier to test control-independent features like gameplay on desktop if you develop it there, so you don't have to push the files to a mobile device every time you make a change in the source code. +It's also more straightforward to test control-independent features like gameplay on desktop if you develop it there, so you don't have to push the files to a mobile device every time you make a change in the source code. > [!NOTE] -> The [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for easier and faster development, but it's totally up to you which approach you chose. +> The [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for faster development, but it's totally up to you which approach you chose. ## Pure JavaScript approach @@ -79,7 +79,7 @@ You can see this example in action online at [end3r.github.io/JavaScript-Game-Co ## Phaser approach -As I mentioned before, you can write everything on your own, but you can also take advantage of built-in functions in frameworks like Phaser. These will make your life easier and development a lot faster. All the edge cases--differences between browser implementations, etc.--are handled by the framework, so you can focus on the actual task you want to do. +As I mentioned before, you can write everything on your own, but you can also take advantage of built-in functions in frameworks like Phaser. These should make development a lot faster. All the edge cases--differences between browser implementations, etc.--are handled by the framework, so you can focus on the actual task you want to do. ### Mouse diff --git a/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md b/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md index 85040933b6336f9..f354fd28513ae14 100644 --- a/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md +++ b/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md @@ -7,10 +7,10 @@ sidebar: games {{NextMenu("Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard", "Games/Techniques/Control_mechanisms")}} -The future of mobile gaming is definitely web, and many developers choose the [mobile first](/en-US/docs/Glossary/Mobile_First) approach in their game development process — in the modern world, this generally also involves implementing touch controls. In this tutorial, we will see how easy it is to implement mobile controls in an HTML game, and enjoy playing on a mobile touch-enabled device. +The future of mobile gaming is definitely web, and many developers choose the [mobile first](/en-US/docs/Glossary/Mobile_First) approach in their game development process — in the modern world, this generally also involves implementing touch controls. In this tutorial, we will implement mobile controls in an HTML game, and enjoy playing on a mobile touch-enabled device. > [!NOTE] -> The game [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for easier and faster development, but it's entirely up to you which approach you to choose. +> The game [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for faster development, but it's entirely up to you which approach you to choose. ## Pure JavaScript approach diff --git a/files/en-us/games/techniques/controls_gamepad_api/index.md b/files/en-us/games/techniques/controls_gamepad_api/index.md index 34533374f82d023..19839a588b386db 100644 --- a/files/en-us/games/techniques/controls_gamepad_api/index.md +++ b/files/en-us/games/techniques/controls_gamepad_api/index.md @@ -247,4 +247,4 @@ There were more events available in the spec than just `gamepadconnected` and `g ## Summary -The Gamepad API is very easy to develop with. Now it's easier than ever to deliver a console-like experience to the browser without the need for any plugins. You can play the full version of the [Hungry Fridge](https://enclavegames.com/games/hungry-fridge/) game directly in your browser. Check the other resources on the [Gamepad API Content Kit](https://end3r.github.io/Gamepad-API-Content-Kit/). +The Gamepad API enables delivering a console-like experience to the browser without the need for any plugins. You can play the full version of the [Hungry Fridge](https://enclavegames.com/games/hungry-fridge/) game directly in your browser. Check the other resources on the [Gamepad API Content Kit](https://end3r.github.io/Gamepad-API-Content-Kit/). diff --git a/files/en-us/games/tools/asm.js/index.md b/files/en-us/games/tools/asm.js/index.md index a9796ed163ded0d..427be25b005fe31 100644 --- a/files/en-us/games/tools/asm.js/index.md +++ b/files/en-us/games/tools/asm.js/index.md @@ -17,9 +17,9 @@ sidebar: games It is a very small, strict subset of JavaScript that only allows things like `while`, `if`, numbers, top-level named functions, and other simple constructs. It does not allow objects, strings, closures, and basically anything that requires heap allocation. Asm.js code resembles C in many ways, but it's still completely valid JavaScript that will run in all current engines. It pushes JS engines to optimize this kind of code, and gives compilers like [Emscripten](https://github.com/emscripten-core/emscripten) a clear definition of what kind of code to generate. We will show what asm.js code looks like and explain how it helps and how you can use it. -This subset of JavaScript is already highly optimized in many JavaScript engines using fancy Just-In-Time (JIT) compiling techniques. However, by defining an explicit standard we can work on optimizing this kind of code even more and getting as much performance as we can out of it. It makes it easier to collaborate across multiple JS engines because it's easy to talk about and benchmark. The idea is that this kind of code **should** run very fast in each engine, and if it doesn't, it's a bug and there's a clear spec that engines should optimize for. +This subset of JavaScript is already highly optimized in many JavaScript engines using fancy Just-In-Time (JIT) compiling techniques. However, by defining an explicit standard we can work on optimizing this kind of code even more and getting as much performance as we can out of it. With standard names and benchmarking, it enables collaborating across multiple JS engines. The idea is that this kind of code **should** run very fast in each engine, and if it doesn't, it's a bug and there's a clear spec that engines should optimize for. -It also makes it easy for people writing compilers that want to generate high-performant code on the web. They can consult the asm.js spec and know that it will run fast if they adhere to asm.js patterns. [Emscripten](https://github.com/emscripten-core/emscripten), a C/C++ to JavaScript compiler, emits asm.js code to make it run with near native performance on several browsers. +It also reduces the complexity for people writing compilers that want to generate high-performant code on the web. They can consult the asm.js spec and know that it will run fast if they adhere to asm.js patterns. [Emscripten](https://github.com/emscripten-core/emscripten), a C/C++ to JavaScript compiler, emits asm.js code to make it run with near native performance on several browsers. Additionally, if an engine chooses to specially recognize asm.js code, there even more optimizations that can be made. Firefox is the only browser to do this right now. diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md index 5a89df9d19eeaa3..6f4a1fd860222b5 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md @@ -7,7 +7,7 @@ sidebar: games {{PreviousNext("Games/Tutorials/2D_breakout_game_Phaser/Game_over", "Games/Tutorials/2D_breakout_game_Phaser/Collision_detection")}} -This is the **9th step** out of 16 of the [Gamedev Phaser tutorial](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser). Let's explore how to create a group of bricks and print them on the screen using a loop. Building the brick field is a little bit more complicated than adding a single object to the screen, although it's still easier with Phaser than in pure JavaScript. +This is the **9th step** out of 16 of the [Gamedev Phaser tutorial](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser). Let's explore how to create a group of bricks and print them on the screen using a loop. Building the brick field is a little bit more complicated than adding a single object to the screen, although likely less complicated to do with Phaser than in pure JavaScript. ## New properties @@ -21,7 +21,7 @@ class ExampleScene extends Phaser.Scene { } ``` -The `bricks` property will be used to create a group of bricks, which will make it easy to manage multiple bricks at once. +The `bricks` property will be used to create a group of bricks, which enables managing multiple bricks at once. ## Rendering the brick image diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md index c4426414996ae33..1d9c6beff8da62e 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md @@ -53,7 +53,7 @@ The `lifeLostText` will be shown only when the life is lost, so its visibility i ### Making our text styling DRY -As you probably noticed, we're using the same styling for all three texts: `scoreText`, `livesText`, and `lifeLostText`. If we ever want to change the font size or color, we will have to do it in multiple places. To make it easier for us to maintain in the future, we can create a separate variable that will hold our styling, let's call it `textStyle` and place it before the text definitions: +As you probably noticed, we're using the same styling for all three texts: `scoreText`, `livesText`, and `lifeLostText`. If we ever want to change the font size or color, we will have to do it in multiple places. To better enable us to maintain it in the future, we can create a separate variable that will hold our styling, let's call it `textStyle` and place it before the text definitions: ```js const textStyle = { font: "18px Arial", fill: "#0095dd" }; diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md index 93ede0ba8f05668..3c06c32c5897c52 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md @@ -22,7 +22,7 @@ class ExampleScene extends Phaser.Scene { ## Loading the ball sprite -Loading images and printing them on our canvas is a lot easier using Phaser than using pure JavaScript. To load the asset, we will use the `Phaser.Scene`'s `load.image()` method, available as `this.load.image`. Add the following new line inside the `preload()` method: +With Phaser, Loading images and printing them on our canvas is less complex than doing so using pure JavaScript. To load the asset, we will use the `Phaser.Scene`'s `load.image()` method, available as `this.load.image`. Add the following new line inside the `preload()` method: ```js class ExampleScene extends Phaser.Scene { @@ -33,7 +33,7 @@ class ExampleScene extends Phaser.Scene { } ``` -The first parameter gives the asset its name that will be used across our game code. For consistency, use the same name as the backing property, which is `ball`. The second parameter is the relative path to the graphic asset. In our case, we will load the image for our ball. (Note that the file name does not need to be called `ball`, but we'd recommend it, as it makes everything easier to follow.) +The first parameter gives the asset its name that will be used across our game code. For consistency, use the same name as the backing property, which is `ball`. The second parameter is the relative path to the graphic asset. In our case, we will load the image for our ball. (Note that the file name does not need to be called `ball`, but we'd recommend it, as it makes everything more intuitive to follow.) Of course, to load the image, it must be available in our code directory. [Grab the ball image from our assets website](https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser/ball.png), and save it inside an `/img` directory in the same place as your `index.html` file. diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md index ddd406e6a5ca75e..1c03ff642634c57 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md @@ -54,7 +54,7 @@ this.paddle = this.add.sprite( We can use the `scale.width` and `scale.height` values to position the paddle exactly where we want it: `this.scale.width * 0.5` will be right in the middle of the screen. In our case, the world is the same as the canvas, but for other types of games, like side-scrollers, the world will be bigger, and you can tinker with it to create interesting effects. -As you'll notice, if you reload your `index.html` at this point, the paddle is currently at the complete bottom of the screen, too low for the paddle. Why? Because the origin from which the position is calculated starts from the center of the object. We can change that to have the origin in the middle of the paddle's width and at the bottom of its height, so it's easier to position it against the bottom edge. Add the following line below the previous new one: +As you'll notice, if you reload your `index.html` at this point, the paddle is currently at the complete bottom of the screen, too low for the paddle. Why? Because the origin from which the position is calculated starts from the center of the object. We can change that to have the origin in the middle of the paddle's width and at the bottom of its height, so it' more straightforward to position it against the bottom edge. Add the following line below the previous new one: ```js this.paddle.setOrigin(0.5, 1); diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index c6d19b46fd219d3..29a342eccb66a6c 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -15,7 +15,7 @@ It is nice to see our ball moving, but it quickly disappears from the screen, li To detect the collision we will check whether the ball is touching (colliding with) the wall, and if so, we will change the direction of its movement accordingly. -To make the calculations easier let's define a variable called `ballRadius` that will hold the radius of the drawn circle and be used for calculations. Add this to your code, somewhere below the existing variable declarations: +To enable the calculations, let's define a variable called `ballRadius` that will hold the radius of the drawn circle and be used for calculations. Add this to your code, somewhere below the existing variable declarations: ```js const ballRadius = 10; diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md index 7e300fd91877f69..4c2972c7f018a15 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -13,7 +13,7 @@ The game itself is actually finished, so let's work on polishing it up. We have ## Listening for mouse movement -Listening for mouse movement is even easier than listening for key presses: all we need is the listener for the {{domxref("Element/mousemove_event", "mousemove")}} event. Add the following line in the same place as the other event listeners, just below the `keyup event`: +Listening for mouse movement is less complex than listening for key presses: we only need the listener for the {{domxref("Element/mousemove_event", "mousemove")}} event. Add the following line in the same place as the other event listeners, just below the `keyup event`: ```js document.addEventListener("mousemove", mouseMoveHandler); diff --git a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md index df500a0164d3db5..f2e31df17458598 100644 --- a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md +++ b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -434,7 +434,7 @@ if (this.audioStatus) { } ``` -That's all — loading and playing the sounds is easy with Phaser. +That's all — loading and playing the sounds is achieved with Phaser. #### Implementing the Vibration API diff --git a/files/en-us/mozilla/add-ons/webextensions/match_patterns/index.md b/files/en-us/mozilla/add-ons/webextensions/match_patterns/index.md index 3a8a4f87ab38c1b..e180b84719db1ea 100644 --- a/files/en-us/mozilla/add-ons/webextensions/match_patterns/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/match_patterns/index.md @@ -54,7 +54,7 @@ The _scheme_ component may take one of two forms: ### host -The _host_ component may take one of three forms: +The _host_ component may take one of these forms: @@ -69,17 +69,18 @@ The _host_ component may take one of three forms: - - + + - - + +
Any host.
*. followed by part of the hostname.The given host and any of its subdomains.*. followed by part of the hostname, optionally, including a port.The given host (and port) and any of its subdomains.
A complete hostname, without wildcards.Only the given host.A complete hostname, without wildcards, optionally, including a port.Only the host (and port).
-_host_ must not include a port number. +> [!NOTE] +> Firefox doesn't support the inclusion of a port number due to ([Firefox bug 1362809](https://bugzil.la/1362809)) and ([Firefox bug 1468162](https://bugzil.la/1468162)). _host_ is optional only if the _scheme_ is "file". @@ -93,10 +94,7 @@ After that, it may subsequently contain any combination of the `*` wildcard and The value for the _path_ matches against the string which is the URL path plus the [URL query string](https://en.wikipedia.org/wiki/Query_string). This includes the `?` between the two, if the query string is present in the URL. For example, if you want to match URLs on any domain where the URL path ends with `foo.bar`, then you need to use an array of Match Patterns like `["*://*/*foo.bar", "*://*/*foo.bar?*"]`. The `?*` is needed, rather than just `bar*`, in order to anchor the ending `*` as applying to the URL query string and not some portion of the URL path. -Neither the [URL fragment identifier](https://en.wikipedia.org/wiki/Fragment_identifier), nor the `#` which precedes it, are considered as part of the _path_. - -> [!NOTE] -> The path pattern string should not include a port number. Adding a port, as in: `http://localhost:1234/*` causes the match pattern to be ignored. However, `http://localhost:1234` will match with `http://localhost/*`. +Neither the [URL fragment identifier](https://en.wikipedia.org/wiki/Fragment_identifier) nor the `#` that precedes it are considered as part of the _path_ and are ignored during pattern matching. A match pattern containing `#` will fail to match with any URL. ### \ @@ -192,6 +190,22 @@ The special value `` matches all URLs under any of the supported schem + + +

https://mozilla.org:8080/

+

+ Match all HTTPS URLs that are hosted at "mozilla.org/" on port 8080. + Note: Ports are supported in Chrome, not in Firefox. +

+ + +

https://mozilla.org:8080/

+ + +

http://a.mozilla.org/
(unmatched host)

+

http://mozilla.org:8081
(unmatched host)

+ +

ftp://mozilla.org/

Match only "ftp://mozilla.org/".

@@ -323,47 +337,56 @@ The special value `` matches all URLs under any of the supported schem -### Invalid match patterns +### Invalid or unmatched patterns - + + + + + + + + + + + + - - - - + - + +
Invalid patternPatternIssue Reason
resource://path/Invalid Unsupported scheme.
https://mozilla.orgInvalid No path.
https://www.mozilla.org/#section1UnmatchedContains a reference fragment: the URL that the pattern is matched against has any reference fragment removed before matching.
https://mozilla.*.org/Invalid "*" in host must be at the start.
https://*zilla.org/Invalid "*" in host must be the only character or be followed by ".".
http*://mozilla.org/Invalid "*" in scheme must be the only character.
https://mozilla.org:80/Host must not include a port number.
*://*Invalid Empty path: this should be *://*/*.
file://*Empty path: this should be file:///*.InvalidEmpty path: this should be file:///*. file://* is accepted when declared in `host_permissions` in Chrome, which auto-corrects the entry to file:///*.
diff --git a/files/en-us/mozilla/firefox/releases/145/index.md b/files/en-us/mozilla/firefox/releases/145/index.md index 3bc9db5124aabb1..c34c88bd6c4f45f 100644 --- a/files/en-us/mozilla/firefox/releases/145/index.md +++ b/files/en-us/mozilla/firefox/releases/145/index.md @@ -1,8 +1,8 @@ --- -title: Firefox 145 release notes for developers (Stable) -short-title: Firefox 145 (Stable) +title: Firefox 145 release notes for developers +short-title: Firefox 145 slug: Mozilla/Firefox/Releases/145 -page-type: firefox-release-notes-active +page-type: firefox-release-notes sidebar: firefox --- diff --git a/files/en-us/mozilla/firefox/releases/146/index.md b/files/en-us/mozilla/firefox/releases/146/index.md index 2828aec2d844ed9..83a5d1097fd9a2b 100644 --- a/files/en-us/mozilla/firefox/releases/146/index.md +++ b/files/en-us/mozilla/firefox/releases/146/index.md @@ -1,18 +1,13 @@ --- -title: Firefox 146 release notes for developers (Beta) -short-title: Firefox 146 (Beta) +title: Firefox 146 release notes for developers (Stable) +short-title: Firefox 146 (Stable) slug: Mozilla/Firefox/Releases/146 page-type: firefox-release-notes-active sidebar: firefox --- This article provides information about the changes in Firefox 146 that affect developers. -Firefox 146 is the current [Beta version of Firefox](https://www.firefox.com/en-US/channel/desktop/#beta) and ships on [December 9, 2025](https://whattrainisitnow.com/release/?version=146). - -> [!NOTE] -> The release notes for this Firefox version are still a work in progress. - - +Firefox 146 was released on [December 9, 2025](https://whattrainisitnow.com/release/?version=146). ## Changes for web developers @@ -21,11 +16,9 @@ Firefox 146 is the current [Beta version of Firefox](https://www.firefox.com/en- - In the Rule view of the Inspector, when a displayed ruleset declares 10 or more [CSS custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*) that are unused, those properties are hidden by default. This reduces clutter, and in some cases also speeds up the rendering of the Inspector panel. In such cases, the hidden properties can be displayed via a "Show..." button provided at the bottom of the ruleset. ([Firefox bug 1719461](https://bugzil.la/1719461)). - - - +### HTML - +No notable changes. ### MathML @@ -34,12 +27,6 @@ Firefox 146 is the current [Beta version of Firefox](https://www.firefox.com/en- - The {{cssxref("math-shift")}} property is now supported. This allows developers to indicate whether superscript rendering in MathML formulas should be normal or compact, affecting the height to which superscript text is shifted. ([Firefox bug 1994171](https://bugzil.la/1994171)). - - - - - - ### CSS - The {{cssxref("color_value/contrast-color()")}} function is now supported. This function takes a [``](/en-US/docs/Web/CSS/Reference/Values/color_value) value and returns a contrasting color that ensures at least [WCAG AA minimum contrast](https://w3c.github.io/wcag/guidelines/22/#contrast-minimum). @@ -57,38 +44,14 @@ Firefox 146 is the current [Beta version of Firefox](https://www.firefox.com/en- This keyword is an alias for the recently-standardized `stretch` keyword (i.e., [`width: stretch`](/en-US/docs/Web/CSS/Reference/Properties/width#stretch) and [`height: stretch`](/en-US/docs/Web/CSS/Reference/Properties/height#stretch)), which isn't yet supported in Firefox. ([Firefox bug 1988938](https://bugzil.la/1988938), [Firefox bug 1789477](https://bugzil.la/1789477)). - - ### JavaScript - {{jsxref("WeakMap")}} and {{jsxref("WeakSet")}} now accept {{jsxref("Symbol")}} objects as keys, except for those that are [registered](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#shared_symbols_in_the_global_symbol_registry). ([Firefox bug 1966745](https://bugzil.la/1966745)). - - - - - - - - - - - - ### APIs - {{domxref("SubtleCrypto.importKey()")}} now allows you to import keys defined as compressed elliptic curve points when using the [ECDSA](/en-US/docs/Web/API/SubtleCrypto/sign#ecdsa) or [ECDH](/en-US/docs/Web/API/SubtleCrypto/deriveKey#ecdh) algorithms. ([Firefox bug 1971499](https://bugzil.la/1971499)). - - - - - - - - - - ### WebDriver conformance (WebDriver BiDi, Marionette) #### WebDriver BiDi @@ -112,10 +75,6 @@ Firefox 146 is the current [Beta version of Firefox](https://www.firefox.com/en- - {{WebExtAPIRef("browsingData.removeLocalStorage")}} and {{WebExtAPIRef("browsingData.remove")}} (when `localStorage` is set in {{WebExtAPIRef("browsingData.DataTypeSet")}}) now delete objects from [`sessionStorage`](/en-US/docs/Web/API/Window/sessionStorage). ([Firefox bug 1886894](https://bugzil.la/1886894)) - - - - ## Experimental web features These features are shipping in Firefox 146 but are disabled by default. diff --git a/files/en-us/mozilla/firefox/releases/147/index.md b/files/en-us/mozilla/firefox/releases/147/index.md index 01ffa7afeeffbb8..2ce147ad1da92e9 100644 --- a/files/en-us/mozilla/firefox/releases/147/index.md +++ b/files/en-us/mozilla/firefox/releases/147/index.md @@ -1,13 +1,13 @@ --- -title: Firefox 147 release notes for developers (Nightly) -short-title: Firefox 147 (Nightly) +title: Firefox 147 release notes for developers (Beta) +short-title: Firefox 147 (Beta) slug: Mozilla/Firefox/Releases/147 page-type: firefox-release-notes-active sidebar: firefox --- This article provides information about the changes in Firefox 147 that affect developers. -Firefox 147 is the current [Nightly version of Firefox](https://www.firefox.com/en-US/channel/desktop/#nightly) and ships on [January 13, 2026](https://whattrainisitnow.com/release/?version=147). +Firefox 147 is the current [Beta version of Firefox](https://www.firefox.com/en-US/channel/desktop/#beta) and ships on [January 13, 2026](https://whattrainisitnow.com/release/?version=147). > [!NOTE] > The release notes for this Firefox version are still a work in progress. diff --git a/files/en-us/mozilla/firefox/releases/148/index.md b/files/en-us/mozilla/firefox/releases/148/index.md new file mode 100644 index 000000000000000..0e87e3d85ff0c64 --- /dev/null +++ b/files/en-us/mozilla/firefox/releases/148/index.md @@ -0,0 +1,83 @@ +--- +title: Firefox 148 release notes for developers (Nightly) +short-title: Firefox 148 (Nightly) +slug: Mozilla/Firefox/Releases/148 +page-type: firefox-release-notes-active +sidebar: firefox +--- + +This article provides information about the changes in Firefox 148 that affect developers. +Firefox 148 is the current [Nightly version of Firefox](https://www.firefox.com/en-US/channel/desktop/#nightly) and ships on [February 24, 2026](https://whattrainisitnow.com/release/?version=148). + +> [!NOTE] +> The release notes for this Firefox version are still a work in progress. + + + +## Changes for web developers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +## Changes for add-on developers + + + + + +## Experimental web features + +These features are shipping in Firefox 148 but are disabled by default. +To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`. +You can find more such features on the [Experimental features](/en-US/docs/Mozilla/Firefox/Experimental_features) page. diff --git a/files/en-us/web/css/reference/properties/animation-timeline/scroll/index.md b/files/en-us/web/css/reference/properties/animation-timeline/scroll/index.md index 1b552b09e2db2c5..6d66b7e163e0364 100644 --- a/files/en-us/web/css/reference/properties/animation-timeline/scroll/index.md +++ b/files/en-us/web/css/reference/properties/animation-timeline/scroll/index.md @@ -6,7 +6,7 @@ browser-compat: css.properties.animation-timeline.scroll sidebar: cssref --- -The **`scroll()`** [CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) can be used to define the scroller and axis of an [anonymous scroll progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#anonymous_scroll_progress_timelines). +The **`scroll()`** [CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) can be used with the {{cssxref("animation-timeline")}} property to create an [anonymous scroll progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#anonymous_scroll_progress_timelines), defining the scroller and axis of the timeline. ## Syntax diff --git a/files/en-us/web/css/reference/properties/animation-timeline/view/index.md b/files/en-us/web/css/reference/properties/animation-timeline/view/index.md index e262a1f79a6e955..8a007602b735ab5 100644 --- a/files/en-us/web/css/reference/properties/animation-timeline/view/index.md +++ b/files/en-us/web/css/reference/properties/animation-timeline/view/index.md @@ -6,30 +6,20 @@ browser-compat: css.properties.animation-timeline.view sidebar: cssref --- -The **`view()`** [CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) can be used with {{cssxref("animation-timeline")}} to indicate a subject element that will provide an anonymous view progress timeline to animate. The view progress timeline is progressed through by a change in visibility of the subject element inside the nearest ancestor scroller. The visibility of the subject inside the scroller is tracked — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller, and 100% when it reaches the opposite edge. - -The function parameters can specify the scrollbar axis along which timeline progress will be tracked and an inset that adjusts the position of the box in which the subject is deemed to be visible. - -> [!NOTE] -> If the indicated axis does not contain a scrollbar, then the animation timeline will be inactive (have zero progress). - -> [!NOTE] -> Each use of `view()` corresponds to its own unique instance of {{domxref("ViewTimeline")}} in the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API). +The **`view()`** [CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used with the {{cssxref("animation-timeline")}} property to create an [anonymous view progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#anonymous_view_progress_timelines_the_view_function) based on when an element comes into view inside its nearest {{glossary("scroll container")}}. You can adjust the tracking axis and the optional insets to control when the element is considered "in view". ## Syntax ```css -/* Function with no parameters set */ +/* No parameters */ animation-timeline: view(); -/* Values for selecting the axis */ -animation-timeline: view(block); /* Default */ -animation-timeline: view(inline); -animation-timeline: view(y); +/* Axis parameter */ +animation-timeline: view(block); animation-timeline: view(x); -/* Values for the inset */ -animation-timeline: view(auto); /* Default */ +/* Inset parameter */ +animation-timeline: view(auto); animation-timeline: view(20%); animation-timeline: view(200px); animation-timeline: view(20% 40%); @@ -37,36 +27,32 @@ animation-timeline: view(20% 200px); animation-timeline: view(100px 200px); animation-timeline: view(auto 200px); -/* Examples that specify axis and inset */ -animation-timeline: view(block auto); /* Default */ +/* Axis and inset parameters */ +animation-timeline: view(block auto); animation-timeline: view(inline 20%); animation-timeline: view(x 200px auto); ``` ### Parameters -- axis - - : The scrollbar axis value can be any one of the following: - - `block` - - : The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line. - For horizontal writing modes, such as standard English, this is the same as `y`, while for vertical writing modes, it is the same as `x`. This is the default value. - - `inline` - - : The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. - For horizontal writing modes, this is the same as `x`, while for vertical writing modes, this is the same as `y`. - - `y` - - : The scrollbar on the vertical axis of the scroll container. - - `x` - - : The scrollbar on the horizontal axis of the scroll container. - -- inset - - : The inset value can be one or two values, which can be either `auto` or a {{cssxref("length-percentage")}}. It specifies an inset (positive) or outset (negative) adjustment of the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport). The inset is used to determine whether the element is in view which determines the length of the animation timeline. In other words, the animation lasts as long as the element is in the inset-adjusted view. - - start - - : Inward offset from beginning of the scrollport. - - end - - : Inward offset from end of the scrollport. - -> [!NOTE] -> The scroller and inset values can be specified in any order. +- `` + - : Specifies the scroll direction used by the view progress timeline. The value can be one of the {{cssxref("axis")}} keywords: `block`, `inline`, `x`, or `y`. The default value is `block`. +- `` + - : Specifies the inset area that defines when an element is considered "in view". The value can be the keyword `auto` or up to two {{cssxref("length-percentage")}} values. + +## Description + +A view progress timeline progresses based on changes in the visibility of a subject element inside its nearest scroll container. The `view()` function is used with the {{cssxref("animation-timeline")}} property to create such a view progress timeline. + +The function's parameters can specify the scrollbar axis along which timeline progress is tracked and insets that adjust the position of the box in which the subject is considered visible. + +- **Axis**: By default, `view()` uses the block axis. You can change this by providing an explicit `` value. If the chosen axis does not contain a scrollbar, then the animation timeline will be inactive (zero progress). +- **Inset**: By default, the timeline is at `0%` (the `from` keyframe in the {{cssxref("@keyframes")}} animation) when the subject is first visible at one edge of the scroller, and at `100%` (the `to` keyframe) when the subject's outer border edge reaches the opposite edge of the scroller. You can control these points with the `` parameters. + The animation lasts as long as the element is in the inset-adjusted view. The inset is used to determine whether the element is in view, which in turn determines the length of the animation timeline. The inset consists of up to two values, each of which can be either `auto` or a {{cssxref("length-percentage")}}. + - The first value defines the start, an inward offset from the scrollport's beginning. + - The second value, if present, specifies the end, an inward offset from the scrollport's end. If the value is greater than `0`, it specifies an inset (positive). A negative value defines an outset adjustment to the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport). + +The axis and inset components can be specified in any order. Within the inset component, the first value defines the start inset, and the second value defines the end inset. ## Formal syntax @@ -74,9 +60,9 @@ animation-timeline: view(x 200px auto); ## Examples -### Setting an anonymous view progress timeline +### Creating an anonymous view progress timeline using `view()` -An anonymous view progress timeline is set on an element with class `subject` using `animation-timeline: view()`. The result is that the `subject` element animates as it moves upwards through the document as it is scrolled. +In this example, we create an anonymous view progress timeline for the element with the `subject` and `animation` classes using `animation-timeline: view()`. The result is that as you scroll the document, this element animates as it moves upward through the document. #### HTML @@ -122,7 +108,7 @@ The HTML for the example is shown below. #### CSS -The `subject` element and `content` elements are minimally styled and the text content is given some basic font settings: +The `subject` and `content` classes are minimally styled, and the text content has some basic font settings: ```css .subject { @@ -143,7 +129,7 @@ p { } ``` -To aid the understanding of the result, extra elements `subject-container`, `top`, and `bottom` have been used. The `subject-container` shows the bounds of the animation. And semi-transparent `top` and `bottom` overlays mark inset offsetted scrollport. +To help show the result, we've defined a few extra classes. The `subject-container` class shows the bounds of the animation. And the semi-transparent `top` and `bottom` overlays mark inset-adjusted scrollport. ```css .subject-container { @@ -175,18 +161,16 @@ To aid the understanding of the result, extra elements `subject-container`, `top } ``` -In the following code, the `
` with the class of `subject` is also given a class of `animation`. The `grow` animation causes the `subject` element to grow or shrink. The `animation-timeline: view(block 55% 10%)` is set to declare that it will be animated as it progresses through the view progress timeline provided by its scrolling ancestor (in this case the document's root element). +The `
` element with the `subject` class is also given a class of `animation`. The `grow` animation causes the `subject` element to grow or shrink. The `animation-timeline: view(block 55% 10%)` rule sets the element to be animated as it progresses through the view progress timeline created by its nearest scroll container (in this case, the document's root element). -While scrolling down, note how the inset value of `50% 10%` causes the animation to start at 10% from the bottom and finish at 50% from the top. As animation moves forward along the timeline the `subject` grows. Conversely, when scrolling up the animation proceeds in the reverse direction, starting at 50% from the top, moving backward through the animation, and ending at 10% from the bottom. So, as the animation happens backwards the `subject` shrinks. +While scrolling down, note how the inset values `50% 10%` cause the animation to start when the element is 10% from the bottom of the scrollport and to finish when it is 50% from the top. As the animation progresses along the timeline, the `subject` grows. Conversely, when scrolling up, the animation proceeds in reverse, starting at 50% from the top, moving backward through the keyframes, and ending at 10% from the bottom. So, as the animation runs backward, the `subject` shrinks. -An important point to remember is that the animation lasts as long as the `subject` element is in the view which has been set and to be offset using `50% 10%` inset values. +An important point to remember is that the animation lasts only as long as the `subject` element is within view, which is defined here by `50% 10%` inset values. ```css .animation { animation-timeline: view(block 50% 10%); - animation-name: grow; - animation-fill-mode: both; animation-duration: 1ms; /* Firefox requires this to apply the animation */ animation-timing-function: linear; } @@ -202,11 +186,25 @@ An important point to remember is that the animation lasts as long as the `subje } ``` +```css hidden +@layer no-support { + @supports not (animation-timeline: view()) { + body::before { + content: "Your browser doesn't support the CSS `view()` function."; + background-color: wheat; + display: block; + text-align: center; + padding: 1em; + } + } +} +``` + #### Result -Scroll to see the subject element being animated. +Scroll to see the element with the `subject` class animate as it enters and leaves the adjusted inset view. -{{EmbedLiveSample("Setting an anonymous view progress timeline", "100%", "480px")}} +{{EmbedLiveSample("Examples", "100%", "480px")}} ## Specifications @@ -218,6 +216,10 @@ Scroll to see the subject element being animated. ## See also -- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) -- [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using) - {{cssxref("animation-timeline")}} +- [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines) +- [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using_CSS_animations) +- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module +- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module +- {{domxref("ViewTimeline")}} +- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) diff --git a/scripts/content/release-firefox.js b/scripts/content/release-firefox.js index 68c2a921226cbf3..4388936e4647689 100644 --- a/scripts/content/release-firefox.js +++ b/scripts/content/release-firefox.js @@ -55,6 +55,7 @@ function formatDate(dateString) { year: "numeric", month: "long", day: "numeric", + timeZone: "UTC", }).format(date); }