diff --git a/.github/labeler.yml b/.github/labeler.yml index c7a6880ee1b203d..9be34fc852f4f6a 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -1,3 +1,15 @@ +system: + - package.json + - yarn.lock + - .github/**/* + - .husky/**/* + - .vscode/**/* + - .* + - scripts/**/* + - tests/**/* + - jest.config.json + - front-matter-config.json + Content:Accessibility: - files/en-us/web/accessibility/**/* Content:CSS: diff --git a/.github/workflows/markdown-lint-fix.yml b/.github/workflows/markdown-lint-fix.yml index cbcb50ff9ed99db..f8aa03703d21c6c 100644 --- a/.github/workflows/markdown-lint-fix.yml +++ b/.github/workflows/markdown-lint-fix.yml @@ -28,6 +28,7 @@ jobs: - name: Lint markdown files run: | + yarn content fix-flaws yarn fix:md yarn fix:fm diff --git a/.markdownlint-cli2.jsonc b/.markdownlint-cli2.jsonc index 596d3cfb007dc94..c863b6131d3fff2 100644 --- a/.markdownlint-cli2.jsonc +++ b/.markdownlint-cli2.jsonc @@ -1,35 +1,38 @@ +// This file defines our configuration for Markdownlint. See +// https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md +// for more details on each rule. + { "config": { "default": true, - // MD001 - Heading levels should only increment by one level at a time. - // -> Disabled, as some callouts include headings. - "MD001": false, - "MD004": { + // Disabled, as some callouts include headings. + "header-increment": false, + "ul-style": { "style": "dash" }, - "MD007": { + "ul-indent": { "indent": 2 }, - "MD010": { + "no-hard-tabs": { "spaces_per_tab": 2 }, - "MD013": false, - "MD024": { + "line-length": false, + "no-duplicate-header": { "allow_different_nesting": true }, - "MD025": { + "single-title": { "front_matter_title": "^\\s*title\\s*[:=]" }, - "MD026": { + "no-trailing-punctuation": { "punctuation": ".,;:" }, // Consecutive Notes/Callouts currently don't conform with this rule - "MD028": false, + "no-blanks-blockquote": false, // Force ordered numbering to catch accidental list ending from indenting - "MD029": { + "ol-prefix": { "style": "ordered" }, - "MD033": { + "no-inline-html": { "allowed_elements": [ "a", "abbr", @@ -100,24 +103,25 @@ "var" ] }, - "MD034": false, - // Pending https://github.com/mdn/content/pull/20115 - "MD037": false, - "MD040": false, + "no-bare-urls": false, + // Produces too many false positives + "no-space-in-emphasis": false, + "fenced-code-language": false, // See https://github.com/mdn/content/pull/20026, as macros currently break this - "MD042": false, - "MD046": { + "no-empty-links": false, + "code-block-style": { "style": "fenced" }, - "MD049": { + "emphasis-style": { "style": "underscore" }, - "MD050": { + "strong-style": { "style": "asterisk" }, - // MD051 - Link fragments should be valid. - // -> Disabled, as yari generates link fragments by replacing spaces with underscores, not dashes. - "MD051": false, + // Disabled, as yari generates link fragments by replacing spaces with underscores, not dashes. + "link-fragments": false, + + // https://github.com/OnkarRuikar/markdownlint-rule-search-replace "search-replace": { "rules": [ { diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 46bb397dc644ea8..c4cb2dde453e697 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -380,7 +380,7 @@ /en-US/docs/CSS/:-moz-broken /en-US/docs/Web/CSS/:-moz-broken /en-US/docs/CSS/:-moz-drag-over /en-US/docs/Web/CSS/:-moz-drag-over /en-US/docs/CSS/:-moz-first-node /en-US/docs/Web/CSS/:-moz-first-node -/en-US/docs/CSS/:-moz-focusring /en-US/docs/Web/CSS/:-moz-focusring +/en-US/docs/CSS/:-moz-focusring /en-US/docs/Web/CSS/:focus-visible /en-US/docs/CSS/:-moz-full-screen /en-US/docs/Web/CSS/:fullscreen /en-US/docs/CSS/:-moz-handler-blocked /en-US/docs/Web/CSS/:-moz-handler-blocked /en-US/docs/CSS/:-moz-handler-crashed /en-US/docs/Web/CSS/:-moz-handler-crashed @@ -2084,7 +2084,6 @@ /en-US/docs/DOM/window.URL.createObjectURL /en-US/docs/Web/API/URL/createObjectURL_static /en-US/docs/DOM/window.URL.revokeObjectURL /en-US/docs/Web/API/URL/revokeObjectURL_static /en-US/docs/DOM/window.alert /en-US/docs/Web/API/Window/alert -/en-US/docs/DOM/window.applicationCache /en-US/docs/Web/API/Window/applicationCache /en-US/docs/DOM/window.atob /en-US/docs/Web/API/atob /en-US/docs/DOM/window.back /en-US/docs/Web/API/Window/back /en-US/docs/DOM/window.blur /en-US/docs/Web/API/Window/blur @@ -2549,7 +2548,6 @@ /en-US/docs/DOM:treeWalker.whatToShow /en-US/docs/Web/API/TreeWalker/whatToShow /en-US/docs/DOM:window /en-US/docs/Web/API/Window /en-US/docs/DOM:window.alert /en-US/docs/Web/API/Window/alert -/en-US/docs/DOM:window.applicationCache /en-US/docs/Web/API/Window/applicationCache /en-US/docs/DOM:window.atob /en-US/docs/Web/API/atob /en-US/docs/DOM:window.back /en-US/docs/Web/API/Window/back /en-US/docs/DOM:window.blur /en-US/docs/Web/API/Window/blur @@ -3268,7 +3266,6 @@ /en-US/docs/Document_Object_Model_(DOM)/window.URL /en-US/docs/Web/API/URL /en-US/docs/Document_Object_Model_(DOM)/window.URL.createObjectURL /en-US/docs/Web/API/URL/createObjectURL_static /en-US/docs/Document_Object_Model_(DOM)/window.URL.revokeObjectURL /en-US/docs/Web/API/URL/revokeObjectURL_static -/en-US/docs/Document_Object_Model_(DOM)/window.applicationCache /en-US/docs/Web/API/Window/applicationCache /en-US/docs/Document_Object_Model_(DOM)/window.captureEvents /en-US/docs/Web/API/Window/captureEvents /en-US/docs/Document_Object_Model_(DOM)/window.clearImmediate /en-US/docs/Web/API/Window/clearImmediate /en-US/docs/Document_Object_Model_(DOM)/window.clearInterval /en-US/docs/Web/API/clearInterval @@ -10243,7 +10240,7 @@ /en-US/docs/Web/API/WorkerConsole.info() /en-US/docs/Web/API/console/info /en-US/docs/Web/API/WorkerConsole.log /en-US/docs/Web/API/console/log /en-US/docs/Web/API/WorkerGlobalScope.close /en-US/docs/Web/API/DedicatedWorkerGlobalScope/close -/en-US/docs/Web/API/WorkerGlobalScope.console /en-US/docs/Web/API/WorkerGlobalScope/console +/en-US/docs/Web/API/WorkerGlobalScope.console /en-US/docs/Web/API/console /en-US/docs/Web/API/WorkerGlobalScope.dump /en-US/docs/Web/API/WorkerGlobalScope/dump /en-US/docs/Web/API/WorkerGlobalScope.importScripts /en-US/docs/Web/API/WorkerGlobalScope/importScripts /en-US/docs/Web/API/WorkerGlobalScope.location /en-US/docs/Web/API/WorkerGlobalScope/location @@ -10262,6 +10259,7 @@ /en-US/docs/Web/API/WorkerGlobalScope/clearInterval /en-US/docs/Web/API/clearInterval /en-US/docs/Web/API/WorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/WorkerGlobalScope/close /en-US/docs/Web/API/DedicatedWorkerGlobalScope/close +/en-US/docs/Web/API/WorkerGlobalScope/console /en-US/docs/Web/API/console /en-US/docs/Web/API/WorkerGlobalScope/fetch /en-US/docs/Web/API/fetch /en-US/docs/Web/API/WorkerGlobalScope/indexedDB /en-US/docs/Web/API/indexedDB /en-US/docs/Web/API/WorkerGlobalScope/onclose /en-US/docs/Web/API/DedicatedWorkerGlobalScope/close @@ -10693,7 +10691,6 @@ /en-US/docs/Web/API/window.URL.createObjectURL /en-US/docs/Web/API/URL/createObjectURL_static /en-US/docs/Web/API/window.URL.revokeObjectURL /en-US/docs/Web/API/URL/revokeObjectURL_static /en-US/docs/Web/API/window.alert /en-US/docs/Web/API/Window/alert -/en-US/docs/Web/API/window.applicationCache /en-US/docs/Web/API/Window/applicationCache /en-US/docs/Web/API/window.atob /en-US/docs/Web/API/atob /en-US/docs/Web/API/window.back /en-US/docs/Web/API/Window/back /en-US/docs/Web/API/window.blur /en-US/docs/Web/API/Window/blur @@ -11253,6 +11250,7 @@ /en-US/docs/Web/CSS/-webkit-user-select /en-US/docs/Web/CSS/user-select /en-US/docs/Web/CSS/:-moz-any /en-US/docs/Web/CSS/:is /en-US/docs/Web/CSS/:-moz-any-link /en-US/docs/Web/CSS/:any-link +/en-US/docs/Web/CSS/:-moz-focusring /en-US/docs/Web/CSS/:focus-visible /en-US/docs/Web/CSS/:-moz-full-screen /en-US/docs/Web/CSS/:fullscreen /en-US/docs/Web/CSS/:-moz-list-bullet /en-US/docs/Web/CSS/::-moz-list-bullet /en-US/docs/Web/CSS/:-moz-list-number /en-US/docs/Web/CSS/::-moz-list-number diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 558f5a508dbe463..060aca0bdd91d3c 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -66684,25 +66684,6 @@ "teoli" ] }, - "Web/API/Window/applicationCache": { - "modified": "2020-12-08T02:25:04.101Z", - "contributors": [ - "sideshowbarker", - "schalkneethling", - "placecarleen44", - "bershanskiy", - "alattalatta", - "chrisdavidmills", - "Sheppy", - "fscholz", - "teoli", - "ethertank", - "Jeremie", - "ebidel", - "Mgjbot", - "Kohei" - ] - }, "Web/API/Window/back": { "modified": "2020-02-23T02:06:28.448Z", "contributors": [ @@ -69540,17 +69521,6 @@ "teoli" ] }, - "Web/API/WorkerGlobalScope/console": { - "modified": "2020-10-15T21:32:18.184Z", - "contributors": [ - "sideshowbarker", - "fscholz", - "valentin.gosu", - "teoli", - "chrisdavidmills", - "kscarfone" - ] - }, "Web/API/WorkerGlobalScope/dump": { "modified": "2020-10-15T21:32:18.913Z", "contributors": [ @@ -73733,23 +73703,6 @@ "Mw22" ] }, - "Web/CSS/:-moz-focusring": { - "modified": "2020-12-01T16:39:52.169Z", - "contributors": [ - "mfluehr", - "cpmsmith", - "wbamberg", - "fscholz", - "chrisdavidmills", - "elharony", - "Enn2", - "Sebastianz", - "teoli", - "seth", - "Jonathan_Watt", - "Sheppy" - ] - }, "Web/CSS/:-moz-handler-blocked": { "modified": "2020-08-06T11:19:00.766Z", "contributors": ["Sheppy", "wbamberg", "mfluehr", "teoli"] diff --git a/files/en-us/games/introduction/index.md b/files/en-us/games/introduction/index.md index b6271a15db1fe17..385247eb4f9c60c 100644 --- a/files/en-us/games/introduction/index.md +++ b/files/en-us/games/introduction/index.md @@ -111,7 +111,7 @@ For the tech folks, let's dig into the APIs the Web brings to the table that cat - : The Pointer Lock API lets you lock the mouse or other pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and prevent the user from accidentally sending their input somewhere else, thereby missing important action. - [SVG](/en-US/docs/Web/SVG) (Scalable Vector Graphics) - : Lets you build vector graphics that scale smoothly regardless of the size or resolution of the user's display. -- [Typed Arrays](/en-US/docs/Web/JavaScript/Typed_arrays) +- [Typed Arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) - : JavaScript typed arrays give you access to raw binary data from within JavaScript; this lets you manipulate GL textures, game data, or anything else, even if it's not in a native JavaScript format. - [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) - : This API for controlling the playback, synthesis, and manipulation of audio from JavaScript code lets you create awesome sound effects as well as play and manipulate music in real time. diff --git a/files/en-us/games/introduction_to_html5_game_development/index.md b/files/en-us/games/introduction_to_html5_game_development/index.md index ed91a9458e9efcc..41ea423a4b8c081 100644 --- a/files/en-us/games/introduction_to_html5_game_development/index.md +++ b/files/en-us/games/introduction_to_html5_game_development/index.md @@ -102,7 +102,7 @@ page-type: guide - : Lock the mouse or other pointing device within your game's interface. - [SVG](/en-US/docs/Web/SVG) (Scalable Vector Graphics) - : Build vector graphics that scale smoothly regardless of the size or resolution of the user's display. -- [Typed Arrays](/en-US/docs/Web/JavaScript/Typed_arrays) +- [Typed Arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) - : Access raw binary data from within JavaScript; Manipulate GL textures, game data, or anything else. - [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) - : Control the playback, synthesis, and manipulation of audio in real time. 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 47eae0abfe90249..baf504541479dff 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 @@ -19,7 +19,7 @@ Browser autoplay policy now affects desktop _and_ mobile browsers. There is furt It is worth noting that autoplay with sound is allowed if: - the User has interacted with the domain. -- on mobile the user has [added the site to their home screen](/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen). +- on mobile the user has [made the application installable](/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable). Many browsers will ignore any requests made by your game to automatically play audio; instead playback for audio needs to be started by a user-initiated event, such as a click or tap. This means you will have to structure your audio playback to take account of that. This is usually mitigated against by loading the audio in advance and priming it on a user-initiated event. @@ -131,7 +131,7 @@ Although mobile browsers can present problems, there are ways to work around the ### Audio sprites -Audio sprites borrow their name from [CSS sprites](/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS), which is a visual technique for using CSS with a single graphic resource to break it into a series of sprites. We can apply the same principle to audio so that rather than having a bunch of small audio files that take time to load and play, we have one larger audio file containing all the smaller audio snippets we need. To play a specific sound from the file, we just use the known start and stop times for each audio sprite. +Audio sprites borrow their name from [CSS sprites](/en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS), which is a visual technique for using CSS with a single graphic resource to break it into a series of sprites. We can apply the same principle to audio so that rather than having a bunch of small audio files that take time to load and play, we have one larger audio file containing all the smaller audio snippets we need. To play a specific sound from the file, we just use the known start and stop times for each audio sprite. The advantage is that we can prime one piece of audio and have our sprites ready to go. To do this we can just play and instantly pause the larger piece of audio. You'll also reduce the number of server requests and save bandwidth. diff --git a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md index 354f1f1e426ea96..3cce1eb062d054a 100644 --- a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md +++ b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md @@ -1,6 +1,7 @@ --- title: "Square tilemaps implementation: Scrolling maps" slug: Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Scrolling_maps +page-type: guide --- {{GamesSidebar}} diff --git a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md index a7265bd0c054b53..a1db4d5f342523b 100644 --- a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md +++ b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md @@ -1,6 +1,7 @@ --- title: "Square tilemaps implementation: Static maps" slug: Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Static_maps +page-type: guide --- {{GamesSidebar}} diff --git a/files/en-us/glossary/adobe_flash/index.md b/files/en-us/glossary/adobe_flash/index.md index 7433fd4ca4da824..7eb0672a01726d0 100644 --- a/files/en-us/glossary/adobe_flash/index.md +++ b/files/en-us/glossary/adobe_flash/index.md @@ -1,6 +1,7 @@ --- title: Adobe Flash slug: Glossary/Adobe_Flash +page-type: glossary-definition --- {{GlossarySidebar}} diff --git a/files/en-us/glossary/baseline/compatibility/index.md b/files/en-us/glossary/baseline/compatibility/index.md index 6c4d5c63cbea652..09d843d2aa47206 100644 --- a/files/en-us/glossary/baseline/compatibility/index.md +++ b/files/en-us/glossary/baseline/compatibility/index.md @@ -1,6 +1,7 @@ --- title: Baseline (compatibility) slug: Glossary/Baseline/Compatibility +page-type: glossary-definition --- {{GlossarySidebar}} diff --git a/files/en-us/glossary/baseline/typography/index.md b/files/en-us/glossary/baseline/typography/index.md index 690fd9db930b219..05ed1f1609f7525 100644 --- a/files/en-us/glossary/baseline/typography/index.md +++ b/files/en-us/glossary/baseline/typography/index.md @@ -13,4 +13,4 @@ The **baseline** is a term used in European and West Asian typography meaning an ## See also - [Baseline]() on Wikipedia -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment#types_of_alignment) on MDN +- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment#types_of_alignment) on MDN diff --git a/files/en-us/glossary/bezier_curve/index.md b/files/en-us/glossary/bezier_curve/index.md index 230e7cee73d5739..8106e5f3dbae26c 100644 --- a/files/en-us/glossary/bezier_curve/index.md +++ b/files/en-us/glossary/bezier_curve/index.md @@ -17,5 +17,5 @@ To draw a quadratic Bézier curve, two imaginary lines are drawn, one from P` can refer to [a flexible length](/en-US/docs/Web/CSS/flex_v ### Further reading - _[CSS Flexible Box Layout Module Level 1 Specification](https://www.w3.org/TR/css-flexbox-1/)_ -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ -- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ -- CSS Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_ -- CSS Flexbox Guide: _[Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox)_ +- CSS Flexbox Guide: + - [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) + - [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) + - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) + - [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) + - [Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) + - [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) + - [Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) diff --git a/files/en-us/glossary/flex_container/index.md b/files/en-us/glossary/flex_container/index.md index aef4d5f04465885..ec6af13c65a89f9 100644 --- a/files/en-us/glossary/flex_container/index.md +++ b/files/en-us/glossary/flex_container/index.md @@ -24,7 +24,7 @@ A value of `flex` causes the element to become a block level flex container, and ### Further reading -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ -- CSS Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ +- CSS Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_ - Firefox Developer Tools > How to: _[CSS Flexbox Inspector: Examine Flexbox layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)_ diff --git a/files/en-us/glossary/flex_item/index.md b/files/en-us/glossary/flex_item/index.md index ed98468c1c6cdf1..33afd0aa4491bb8 100644 --- a/files/en-us/glossary/flex_item/index.md +++ b/files/en-us/glossary/flex_item/index.md @@ -22,6 +22,6 @@ Continuous runs of text inside flex containers will also become flex items. ### Further reading -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ +- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ diff --git a/files/en-us/glossary/flexbox/index.md b/files/en-us/glossary/flexbox/index.md index bacb8ac8bfaaf77..221223ba208df0f 100644 --- a/files/en-us/glossary/flexbox/index.md +++ b/files/en-us/glossary/flexbox/index.md @@ -32,10 +32,11 @@ Flexbox also enables alignment of items on the main or cross axis, thus providin ### Further reading - _[CSS Flexible Box Layout Module Level 1 Specification](https://www.w3.org/TR/css-flexbox-1/)_ -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ -- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ -- CSS Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_ -- CSS Flexbox Guide: _[Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox)_ +- CSS Flexbox Guide: + - [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) + - [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) + - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) + - [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) + - [Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) + - [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) + - [Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) diff --git a/files/en-us/glossary/fps/index.md b/files/en-us/glossary/fps/index.md index ef7fb8252a4f4cf..2a7f0e3947af8d1 100644 --- a/files/en-us/glossary/fps/index.md +++ b/files/en-us/glossary/fps/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition A **frame rate** is the speed at which the browser is able to recalculate, layout and paint content to the display. The **frames per second**, or **fps**, is how many frames can be repainted in one second. The goal frame rate for in website computer graphics is 60fps. -Movies generally have a frame rate of 24 fps. They are able to have fewer frames per second because the illusion of life is created with motion blurs. When moving on a computer screen there are no motion blurs (unless you are animating an image [sprite](/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS) with motion blurs). +Movies generally have a frame rate of 24 fps. They are able to have fewer frames per second because the illusion of life is created with motion blurs. When moving on a computer screen there are no motion blurs (unless you are animating an image [sprite](/en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS) with motion blurs). ## See also diff --git a/files/en-us/glossary/grid/index.md b/files/en-us/glossary/grid/index.md index a97d7b8827a81de..e7f3bb82961e358 100644 --- a/files/en-us/glossary/grid/index.md +++ b/files/en-us/glossary/grid/index.md @@ -61,7 +61,7 @@ In the example below I have created an _explicit grid_ of three columns and two ## See also -- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) +- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - Property reference: - {{cssxref("grid-template-columns")}} diff --git a/files/en-us/glossary/grid_areas/index.md b/files/en-us/glossary/grid_areas/index.md index db7e5ad6c041a0c..77c9a12f90c6897 100644 --- a/files/en-us/glossary/grid_areas/index.md +++ b/files/en-us/glossary/grid_areas/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -A **grid area** is one or more {{glossary("grid cell", "grid cells")}} that make up a rectangular area on the grid. Grid areas are created when you place an item using [line-based placement](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) or when defining areas using [named grid areas](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas). +A **grid area** is one or more {{glossary("grid cell", "grid cells")}} that make up a rectangular area on the grid. Grid areas are created when you place an item using [line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) or when defining areas using [named grid areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas). ![Image showing a highlighted grid area](1_grid_area.png) @@ -75,6 +75,7 @@ In the example below I have a grid container with two grid items. I have named t ### Further reading -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ -- CSS Grid Layout Guide: _[Grid template areas](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)_ +- CSS Grid Layout Guide: + - [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) + - [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) - [Definition of Grid Areas in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-area-concept) diff --git a/files/en-us/glossary/grid_axis/index.md b/files/en-us/glossary/grid_axis/index.md index 8d6d415687d6fc5..a50f98dfb74fc58 100644 --- a/files/en-us/glossary/grid_axis/index.md +++ b/files/en-us/glossary/grid_axis/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition CSS Grid Layout is a two-dimensional layout method enabling the laying out of content in _rows_ and _columns_. Therefore in any grid we have two axes. The _block or column axis_, and the _inline or row axis_. -It is along these axes that items can be aligned and justified using the properties defined in the [Box Alignment specification](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout). +It is along these axes that items can be aligned and justified using the properties defined in the [Box Alignment specification](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout). In CSS the _block or column axis_ is the axis used when laying out blocks of text. If you have two paragraphs and are working in a right to left, top to bottom language they lay out one below the other, on the block axis. @@ -18,10 +18,10 @@ The _inline or row axis_ runs across the Block Axis and is the direction along w ![Diagram showing the inline axis in CSS Grid Layout.](7_inline_axis.png) -The physical direction of these axes can change according to the [writing mode](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) of the document. +The physical direction of these axes can change according to the [writing mode](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) of the document. ## See also -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ -- CSS Grid Layout Guide: _[Box alignment in Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_ -- CSS Grid Layout Guide: _[Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes)_ +- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ +- CSS Grid Layout Guide: _[Box alignment in Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- CSS Grid Layout Guide: _[Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)_ diff --git a/files/en-us/glossary/grid_cell/index.md b/files/en-us/glossary/grid_cell/index.md index 71a1e17e9d1855f..09c966299455e81 100644 --- a/files/en-us/glossary/grid_cell/index.md +++ b/files/en-us/glossary/grid_cell/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -In a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout), a **grid cell** is the smallest unit you can have on your CSS grid. It is the space between four intersecting {{glossary("grid lines")}} and conceptually much like a table cell. +In a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), a **grid cell** is the smallest unit you can have on your CSS grid. It is the space between four intersecting {{glossary("grid lines")}} and conceptually much like a table cell. ![Diagram showing an individual cell on the grid.](1_grid_cell.png) @@ -67,5 +67,5 @@ In the example we have created a three column track grid. The five items are pla ### Further reading -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ +- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ - [Definition of Grid Cells in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-track-concept) diff --git a/files/en-us/glossary/grid_column/index.md b/files/en-us/glossary/grid_column/index.md index 1d1ba0d82b892eb..3cfa1dc16996f02 100644 --- a/files/en-us/glossary/grid_column/index.md +++ b/files/en-us/glossary/grid_column/index.md @@ -6,11 +6,11 @@ page-type: glossary-definition {{GlossarySidebar}} -A **grid column** is a vertical track in a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout), and is the space between two vertical grid lines. It is defined by the {{cssxref("grid-template-columns")}} property or in the shorthand {{cssxref("grid")}} or {{cssxref("grid-template")}} properties. +A **grid column** is a vertical track in a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), and is the space between two vertical grid lines. It is defined by the {{cssxref("grid-template-columns")}} property or in the shorthand {{cssxref("grid")}} or {{cssxref("grid-template")}} properties. In addition, columns may be created in the _implicit grid_ when items are placed outside of columns created in the _explicit grid_. These columns will be auto-sized by default, or can have a size specified with the {{cssxref("grid-auto-columns")}} property. -When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout), the axis down which columns run is known as the _block, or column, axis_. +When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), the axis down which columns run is known as the _block, or column, axis_. ## See also @@ -23,4 +23,4 @@ When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_La ### Further reading -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ +- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ diff --git a/files/en-us/glossary/grid_container/index.md b/files/en-us/glossary/grid_container/index.md index 54c447048d3b2fd..3d8dea2f190ee3b 100644 --- a/files/en-us/glossary/grid_container/index.md +++ b/files/en-us/glossary/grid_container/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -Using the value `grid` or `inline-grid` on an element turns it into a **grid container** using [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout), and any direct children of this element become grid items. +Using the value `grid` or `inline-grid` on an element turns it into a **grid container** using [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), and any direct children of this element become grid items. When an element becomes a grid container it establishes a **grid formatting context**. The direct children can now lay themselves out on any explicit grid defined using {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}, or on the _implicit grid_ created when an item is placed outside of the _explicit grid_. @@ -23,4 +23,4 @@ When an element becomes a grid container it establishes a **grid formatting cont ### Further reading -- CSS Grid Layout guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ +- CSS Grid Layout guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ diff --git a/files/en-us/glossary/grid_lines/index.md b/files/en-us/glossary/grid_lines/index.md index 1cc350487f1d2b5..b1ac3be923ff6be 100644 --- a/files/en-us/glossary/grid_lines/index.md +++ b/files/en-us/glossary/grid_lines/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -**Grid lines** are created when you define {{glossary("Grid tracks", "tracks")}} in the explicit grid using [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout). +**Grid lines** are created when you define {{glossary("Grid tracks", "tracks")}} in the explicit grid using [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout). ## Example @@ -55,7 +55,7 @@ In the following example there is a grid with three column tracks and two row tr {{ EmbedLiveSample('Example', '500', '250') }} -Lines can be addressed using their line number. In a left-to-right language such as English, column line 1 will be on the left of the grid, row line 1 on the top. Lines numbers respect the [writing mode](/en-US/docs/Web/CSS/CSS_Writing_Modes) of the document and so in a right-to-left language for example, column line 1 will be on the right of the grid. The image below shows the line numbers of the grid, assuming the language is left-to-right. +Lines can be addressed using their line number. In a left-to-right language such as English, column line 1 will be on the left of the grid, row line 1 on the top. Lines numbers respect the [writing mode](/en-US/docs/Web/CSS/CSS_writing_modes) of the document and so in a right-to-left language for example, column line 1 will be on the right of the grid. The image below shows the line numbers of the grid, assuming the language is left-to-right. ![Diagram showing the grid with lines numbered.](1_diagram_numbered_grid_lines.png) @@ -174,8 +174,9 @@ The lines created in the _explicit grid_ can be named, by adding the name in squ ### Further reading -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ -- CSS Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_ -- CSS Grid Layout Guide: _[Layout using named grid lines](/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)_ -- CSS Grid Layout Guide: _[CSS Grids, Logical Values and Writing Modes](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes)_ +- CSS Grid Layout Guide: + - [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) + - [Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) + - [Layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) + - [CSS Grids, Logical Values and Writing Modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) - [Definition of Grid Lines in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-line-concept) diff --git a/files/en-us/glossary/grid_row/index.md b/files/en-us/glossary/grid_row/index.md index 02de016e3b1e323..263c10e882b529f 100644 --- a/files/en-us/glossary/grid_row/index.md +++ b/files/en-us/glossary/grid_row/index.md @@ -6,11 +6,11 @@ page-type: glossary-definition {{GlossarySidebar}} -A **grid row** is a horizontal track in a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout), that is the space between two horizontal grid lines. It is defined by the {{cssxref("grid-template-rows")}} property or in the shorthand {{cssxref("grid")}} or {{cssxref("grid-template")}} properties. +A **grid row** is a horizontal track in a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), that is the space between two horizontal grid lines. It is defined by the {{cssxref("grid-template-rows")}} property or in the shorthand {{cssxref("grid")}} or {{cssxref("grid-template")}} properties. In addition, rows may be created in the _implicit grid_ when items are placed outside of rows created in the _explicit grid_. These rows will be auto sized by default, or can have a size specified with the {{cssxref("grid-auto-rows")}} property. -When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout), the axis along which rows run is known as the _inline, or row, axis_. +When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), the axis along which rows run is known as the _inline, or row, axis_. ## See also @@ -23,4 +23,4 @@ When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_La ### Further reading -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ +- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ diff --git a/files/en-us/glossary/grid_tracks/index.md b/files/en-us/glossary/grid_tracks/index.md index 136664b94f6a9ad..365c3f3ae7c2dfc 100644 --- a/files/en-us/glossary/grid_tracks/index.md +++ b/files/en-us/glossary/grid_tracks/index.md @@ -65,7 +65,7 @@ Tracks created in the implicit grid are auto-sized by default, however you can d ## See also -- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) +- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - [Definition of Grid Tracks in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-track-concept) - Property reference diff --git a/files/en-us/glossary/gutters/index.md b/files/en-us/glossary/gutters/index.md index 19ab40cfc2258e5..7a7cb313a7970c2 100644 --- a/files/en-us/glossary/gutters/index.md +++ b/files/en-us/glossary/gutters/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -**Gutters** or _alleys_ are spacing between content tracks. These can be created in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout) using the {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, or {{cssxref("gap")}} properties. +**Gutters** or _alleys_ are spacing between content tracks. These can be created in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) using the {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, or {{cssxref("gap")}} properties. ## Example @@ -56,7 +56,7 @@ In the example below we have a three-column and two-row track grid, with 20-pixe In terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. The gap acts as if the grid line at that location has gained extra size, so any grid item placed after that line begins at the end of the gap. -The `row-gap` and `column-gap` properties are not the only things that can cause tracks to space out. Margins, padding, or the use of the space distribution properties in [Box Alignment](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) can all contribute to the visible gap – therefore the `row-gap` and `column-gap` properties should not be seen as equal to the "gutter size" unless you know that your design has not introduced any additional space with one of these methods. +The `row-gap` and `column-gap` properties are not the only things that can cause tracks to space out. Margins, padding, or the use of the space distribution properties in [Box Alignment](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) can all contribute to the visible gap – therefore the `row-gap` and `column-gap` properties should not be seen as equal to the "gutter size" unless you know that your design has not introduced any additional space with one of these methods. ## See also @@ -68,5 +68,5 @@ The `row-gap` and `column-gap` properties are not the only things that can cause ### Further reading -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ +- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ - [Definition of gutters in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#gutters) diff --git a/files/en-us/glossary/ink_overflow/index.md b/files/en-us/glossary/ink_overflow/index.md index 3f90b9d1cb28a42..4f9c846339b19c1 100644 --- a/files/en-us/glossary/ink_overflow/index.md +++ b/files/en-us/glossary/ink_overflow/index.md @@ -8,10 +8,10 @@ page-type: glossary-definition The **ink overflow** of a box refers to the part of the box and its contents that creates a visual effect outside of the box's border box. Being visual only, ink overflow does not affect layout as it has no impact on box model properties. -Ink overflow is the overflow of painting effects such as [box shadows](/en-US/docs/Web/CSS/box-shadow), [border images](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders), [text decoration](/en-US/docs/Web/CSS/CSS_Text_Decoration), [outlines](/en-US/docs/Web/CSS/outline), etc. that do not affect layout or otherwise extend the scrollable overflow area. Ink overflow is also the overhanging of glyphs, such as ascenders and descenders extending outside the em box. +Ink overflow is the overflow of painting effects such as [box shadows](/en-US/docs/Web/CSS/box-shadow), [border images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), [text decoration](/en-US/docs/Web/CSS/CSS_text_decoration), [outlines](/en-US/docs/Web/CSS/outline), etc. that do not affect layout or otherwise extend the scrollable overflow area. Ink overflow is also the overhanging of glyphs, such as ascenders and descenders extending outside the em box. -As [replaced elements](/en-US/docs/Web/CSS/Replaced_element) always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content)). +As [replaced elements](/en-US/docs/Web/CSS/Replaced_element) always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content)). ## See also -- [CSS overflow module](/en-US/docs/Web/CSS/CSS_Overflow) +- [CSS overflow module](/en-US/docs/Web/CSS/CSS_overflow) diff --git a/files/en-us/glossary/internationalization_and_localization/index.md b/files/en-us/glossary/internationalization_and_localization/index.md index 457f489c3cec03e..392566ec0d3fcb1 100644 --- a/files/en-us/glossary/internationalization_and_localization/index.md +++ b/files/en-us/glossary/internationalization_and_localization/index.md @@ -14,4 +14,4 @@ Internationalization includes support for multiple character sets (usually via [ - [Internationalization extension](/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization) - [Internationalization API](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) -- [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) and [Grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) +- [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) and [Grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) diff --git a/files/en-us/glossary/javascript/index.md b/files/en-us/glossary/javascript/index.md index d80a0cdc444d4e2..0b566ee769e8727 100644 --- a/files/en-us/glossary/javascript/index.md +++ b/files/en-us/glossary/javascript/index.md @@ -27,5 +27,5 @@ Recently, JavaScript's popularity has expanded even further through the successf - [The "javascripting" workshop on NodeSchool](https://nodeschool.io/#workshoppers) - [The JavaScript course on codecademy.com](https://www.codecademy.com/catalog/language/javascript) - [The latest ECMAScript standard](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) -- The [JavaScript reference](/en-US/docs/Web/JavaScript/reference) on MDN +- The [JavaScript reference](/en-US/docs/Web/JavaScript/Reference) on MDN - [The _Eloquent JavaScript_ book](https://eloquentjavascript.net/) diff --git a/files/en-us/glossary/main_axis/index.md b/files/en-us/glossary/main_axis/index.md index a22e2642c737fcb..383ce0943a89771 100644 --- a/files/en-us/glossary/main_axis/index.md +++ b/files/en-us/glossary/main_axis/index.md @@ -36,6 +36,7 @@ On the main axis you can control the sizing of flex items by adding any availabl ### Further reading -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- CSS Flexbox Guide: + - [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) + - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) + - [Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) diff --git a/files/en-us/glossary/plugin/index.md b/files/en-us/glossary/plugin/index.md index 91437c737c3d2e9..b71c0ef80715dcf 100644 --- a/files/en-us/glossary/plugin/index.md +++ b/files/en-us/glossary/plugin/index.md @@ -1,6 +1,7 @@ --- title: Plugin slug: Glossary/Plugin +page-type: glossary-definition --- {{GlossarySidebar}} diff --git a/files/en-us/glossary/replay_attack/index.md b/files/en-us/glossary/replay_attack/index.md index 5ed09276c41c5db..f53d2647d697297 100644 --- a/files/en-us/glossary/replay_attack/index.md +++ b/files/en-us/glossary/replay_attack/index.md @@ -1,6 +1,7 @@ --- title: Replay attack slug: Glossary/Replay_attack +page-type: glossary-definition --- {{GlossarySidebar}} diff --git a/files/en-us/glossary/resource_timing/index.md b/files/en-us/glossary/resource_timing/index.md index bd86cd040fc38db..5f7d656cf88e5f7 100644 --- a/files/en-us/glossary/resource_timing/index.md +++ b/files/en-us/glossary/resource_timing/index.md @@ -6,9 +6,9 @@ page-type: glossary-definition {{GlossarySidebar}} -Diagnosing performance issues requires performance data at the granularity of the resource. The [Resource Timing API](/en-US/docs/Web/API/Resource_Timing_API) is a JavaScript API that is able to capture timing information for each individual resource that is fetched when a page is loaded. +Diagnosing performance issues requires performance data at the granularity of the resource. The [Resource Timing API](/en-US/docs/Web/API/Performance_API/Resource_timing) is a JavaScript API that is able to capture timing information for each individual resource that is fetched when a page is loaded. ## See also -- [Using the resource timing API](/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API) +- [Using the resource timing API](/en-US/docs/Web/API/Performance_API/Resource_timing) - [Server Timing](https://www.w3.org/TR/server-timing/) diff --git a/files/en-us/glossary/rsync/index.md b/files/en-us/glossary/rsync/index.md index 6d6bc49374e06e1..e0372aab608d2aa 100644 --- a/files/en-us/glossary/rsync/index.md +++ b/files/en-us/glossary/rsync/index.md @@ -1,6 +1,7 @@ --- title: Rsync slug: Glossary/Rsync +page-type: glossary-definition --- {{GlossarySidebar}} diff --git a/files/en-us/glossary/script-supporting_element/index.md b/files/en-us/glossary/script-supporting_element/index.md index 265915fb24cff4f..02ba85912162af1 100644 --- a/files/en-us/glossary/script-supporting_element/index.md +++ b/files/en-us/glossary/script-supporting_element/index.md @@ -14,4 +14,4 @@ There are only two script-supporting elements: {{HTMLElement("script")}} and {{H ## See also -[Script-supporting elements](/en-US/docs/Web/HTML/Kinds_of_HTML_content#script-supporting_elements) +[Script-supporting elements](/en-US/docs/Web/HTML/Content_categories#script-supporting_elements) diff --git a/files/en-us/glossary/snap_positions/index.md b/files/en-us/glossary/snap_positions/index.md index 60152e36aa85458..26a8ae9ffba73e2 100644 --- a/files/en-us/glossary/snap_positions/index.md +++ b/files/en-us/glossary/snap_positions/index.md @@ -6,6 +6,6 @@ page-type: glossary-definition {{GlossarySidebar}} -Snap positions are points where the [scrollport](/en-US/docs/Glossary/Scrollport) stops moving after the scrolling operation completes. Setting up snap positions allows to create a scrolling experience of paging through content instead of needing to drag content into view. +Snap positions are points where the [scrollport](/en-US/docs/Glossary/Scroll_container) stops moving after the scrolling operation completes. Setting up snap positions allows to create a scrolling experience of paging through content instead of needing to drag content into view. -Snap positions are set up on a [scroll container](/en-US/docs/Glossary/Scroll_container). See the [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) properties. +Snap positions are set up on a [scroll container](/en-US/docs/Glossary/Scroll_container). See the [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_scroll_snap) properties. diff --git a/files/en-us/glossary/stacking_context/index.md b/files/en-us/glossary/stacking_context/index.md index 2ff91412fe614d4..33f23d291ed3af8 100644 --- a/files/en-us/glossary/stacking_context/index.md +++ b/files/en-us/glossary/stacking_context/index.md @@ -10,4 +10,4 @@ page-type: glossary-definition ## See also -- [Explanation and example of the stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) +- [Explanation and example of the stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) diff --git a/files/en-us/glossary/static_method/index.md b/files/en-us/glossary/static_method/index.md index 00365645e4219d8..742ba96dee6b90c 100644 --- a/files/en-us/glossary/static_method/index.md +++ b/files/en-us/glossary/static_method/index.md @@ -14,7 +14,7 @@ Methods called on object instances are called _instance methods_. ## Examples -In the [Notifications API](/en-US/docs/Web/API/Notifications_API), the {{domxref("Notification.requestPermission()")}} method is called on the actual {{domxref("Notification")}} constructor itself — it is a static method: +In the [Notifications API](/en-US/docs/Web/API/Notifications_API), the {{domxref("Notification/requestPermission_static", "Notification.requestPermission()")}} method is called on the actual {{domxref("Notification")}} constructor itself — it is a static method: ```js let promise = Notification.requestPermission(); diff --git a/files/en-us/glossary/tcp_handshake/index.md b/files/en-us/glossary/tcp_handshake/index.md index 9b1528faf9a624a..1a623dcedb24f7a 100644 --- a/files/en-us/glossary/tcp_handshake/index.md +++ b/files/en-us/glossary/tcp_handshake/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -{{glossary('Transmission Control Protocol (TCP)','TCP (Transmission Control Protocol)')}} uses a **three-way handshake** (aka TCP-handshake, three message handshake, and/or SYN-SYN-ACK) to set up a TCP/IP connection over an IP based network. +{{glossary('TCP','TCP (Transmission Control Protocol)')}} uses a **three-way handshake** (aka TCP-handshake, three message handshake, and/or SYN-SYN-ACK) to set up a TCP/IP connection over an IP based network. The three messages transmitted by TCP to negotiate and start a TCP session are nicknamed SYN, _SYN-ACK_, and ACK for **SYN**chronize, **SYN**chronize-**ACK**nowledgement, and **ACK**nowledge respectively. The three message mechanism is designed so that two computers that want to pass information back and forth to each other can negotiate the parameters of the connection before transmitting data such as HTTP browser requests. diff --git a/files/en-us/glossary/top_layer/index.md b/files/en-us/glossary/top_layer/index.md index 3ba3634935e6dfc..fbd56b677a822bc 100644 --- a/files/en-us/glossary/top_layer/index.md +++ b/files/en-us/glossary/top_layer/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -The **top layer** is a specific layer in the [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context), which spans the entire width and height of the viewport and sits on top of all other layers displayed in a web document. It is created by the browser to contain elements that should appear on top of all other content on the page. +The **top layer** is a specific layer in the [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context), which spans the entire width and height of the viewport and sits on top of all other layers displayed in a web document. It is created by the browser to contain elements that should appear on top of all other content on the page. Elements that will appear in the top layer include: @@ -20,6 +20,6 @@ The following screenshot demonstrates how a shown popover element is placed in t ## See also -- [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) +- [The stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) - [The Fullscreen API](/en-US/docs/Web/API/Fullscreen_API) - [The Popover API](/en-US/docs/Web/API/Popover_API) diff --git a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md index ba8464831f70e7e..b4e4b5d3d4ab807 100644 --- a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md @@ -306,7 +306,7 @@ You can see here that the multiply mix blend has blended together not only the t ## CSS shapes -While it is true that everything in CSS is a rectangular box, and images are a physical rectangular box, we can make it look as if our content flows around non-rectangular things by using [CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes). +While it is true that everything in CSS is a rectangular box, and images are a physical rectangular box, we can make it look as if our content flows around non-rectangular things by using [CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes). The CSS Shapes specification enables the wrapping of text around a non-rectangular shape. It's especially useful when working with an image which has some white-space you might want to float text around. @@ -318,7 +318,7 @@ The shape in this example is not reacting to the content of the image file. Inst > **Note:** In Firefox you can use the DevTools [Shapes Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html) to inspect Shapes. -The `circle()` function is just one of a few basic shapes that are defined, however there are a number of different ways to create shapes. For more information and example code for CSS Shapes see the [Guides to CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) on MDN. +The `circle()` function is just one of a few basic shapes that are defined, however there are a number of different ways to create shapes. For more information and example code for CSS Shapes see the [Guides to CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) on MDN. ## -webkit-background-clip: text diff --git a/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md index 6497ea1e3a798f5..f9fe145d007b455 100644 --- a/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -179,11 +179,11 @@ The amount of specificity a selector has is measured using three different value - **Classes**: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector. - **Elements**: Score one in this column for each element selector or pseudo-element contained inside the overall selector. -> **Note:** The universal selector ([`*`](/en-US/docs/Web/CSS/Universal_selectors)), [combinators](/en-US/docs/Learn/CSS/Building_blocks//selectors/combinators) (`+`, `>`, `~`, ' '), and specificity adjustment selector ([`:where()`](/en-US/docs/Web/CSS/:where)) along with its parameters, have no effect on specificity. +> **Note:** The universal selector ([`*`](/en-US/docs/Web/CSS/Universal_selectors)), [combinators](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators) (`+`, `>`, `~`, ' '), and specificity adjustment selector ([`:where()`](/en-US/docs/Web/CSS/:where)) along with its parameters, have no effect on specificity. The negation ([`:not()`](/en-US/docs/Web/CSS/:not)), relational selector ([`:has()`](/en-US/docs/Web/CSS/:has)), and the matches-any ([`:is()`](/en-US/docs/Web/CSS/:is)) pseudo-classes themselves don't have effect on specificity, but their parameters do. The specificity that each contributes to the specificity algorithm is the specificity of the selector in the parameter that has the greatest weight. -The following table shows a few isolated examples to get you in the mood. Try going through these, and make sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN [selectors reference](/en-US/docs/Web/CSS/CSS_Selectors/Selectors_and_combinators). +The following table shows a few isolated examples to get you in the mood. Try going through these, and make sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN [selectors reference](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators). | Selector | Identifiers | Classes | Elements | Total specificity | | ----------------------------------------- | ----------- | ------- | -------- | ----------------- | 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 13884f8a6ff9242..3b70fc3d068b8c9 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 @@ -225,7 +225,7 @@ Try moving the last line, `@layer site, page;`, to make it the first line. What #### Layer creation and media queries -If you define a layer using [media](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) or [feature](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries) queries, and the media is not a match or the feature is not supported, the layer is not created. The example below shows how changing the size of your device or browser may change the layer order. In this example, we create the `site` layer only in wider browsers. We then assign styles to the `page` and `site` layers, in that order. +If you define a layer using [media](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) or [feature](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries) queries, and the media is not a match or the feature is not supported, the layer is not created. The example below shows how changing the size of your device or browser may change the layer order. In this example, we create the `site` layer only in wider browsers. We then assign styles to the `page` and `site` layers, in that order. {{EmbedGHLiveSample("css-examples/learn/layers/media-order.html", '100%', 500)}} @@ -252,7 +252,7 @@ You can import more than one CSS file into a single layer. The following declara @import url(sm-icons.css) layer(social); ``` -You can import styles and create layers based on specific conditions using [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) and [feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries). The following imports a style sheet into an `international` layer only if the browser supports `display: ruby`, and the file being imported is dependent on the width of the screen. +You can import styles and create layers based on specific conditions using [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) and [feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries). The following imports a style sheet into an `international` layer only if the browser supports `display: ruby`, and the file being imported is dependent on the width of the screen. ```css @import url("ruby-narrow.css") layer(international) supports(display: ruby) and diff --git a/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md b/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md index 0032fe09b85822e..785ec24ae6c369d 100644 --- a/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md @@ -109,7 +109,7 @@ You can see a comparison between physical and logical properties below. {{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1300)}} -There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_Logical_Properties). +There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). ### Logical values 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 fdd4c3a60ef374f..c5750410ef07f23 100644 --- a/files/en-us/learn/css/building_blocks/organizing/index.md +++ b/files/en-us/learn/css/building_blocks/organizing/index.md @@ -400,6 +400,6 @@ This is the final part of our building blocks module, and as you can see there a To learn more about layout in CSS, see the [CSS Layout](/en-US/docs/Learn/CSS/CSS_layout) module. -You should also now have the skills to explore the rest of the [MDN CSS](/en-US/docs/Web/CSS) material. You can look up properties and values, explore our [CSS Cookbook](/en-US/docs/Web/CSS/Layout_cookbook) for patterns to use, or continue reading in some of the specific guides, such as our [Guide to CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout). +You should also now have the skills to explore the rest of the [MDN CSS](/en-US/docs/Web/CSS) material. You can look up properties and values, explore our [CSS Cookbook](/en-US/docs/Web/CSS/Layout_cookbook) for patterns to use, or continue reading in some of the specific guides, such as our [Guide to CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout). {{PreviousMenuNext("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension", "Learn/CSS/Building_blocks")}} diff --git a/files/en-us/learn/css/building_blocks/selectors/index.md b/files/en-us/learn/css/building_blocks/selectors/index.md index 48e5c2c1d4ce48b..ceaed90954b8097 100644 --- a/files/en-us/learn/css/building_blocks/selectors/index.md +++ b/files/en-us/learn/css/building_blocks/selectors/index.md @@ -175,6 +175,6 @@ article > p { In this article we've introduced CSS selectors, which enable you to target particular HTML elements. Next, we'll take a closer look at [type, class, and ID selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors). -For a complete list of selectors, see our [CSS selectors reference](/en-US/docs/Web/CSS/CSS_selectors). +For a complete list of selectors, see our [CSS selectors reference](/en-US/docs/Web/CSS/CSS_Selectors). {{NextMenu("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} diff --git a/files/en-us/learn/css/building_blocks/the_box_model/index.md b/files/en-us/learn/css/building_blocks/the_box_model/index.md index efccbf12b921810..13e235c268a968f 100644 --- a/files/en-us/learn/css/building_blocks/the_box_model/index.md +++ b/files/en-us/learn/css/building_blocks/the_box_model/index.md @@ -74,7 +74,7 @@ You can change the inner display type for example by setting `display: flex;`. T When you move on to learn about CSS Layout in more detail, you will encounter [`flex`](/en-US/docs/Learn/CSS/CSS_layout/Flexbox), and various other inner values that your boxes can have, for example [`grid`](/en-US/docs/Learn/CSS/CSS_layout/Grids). -> **Note:** To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide [Block and Inline Layout](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow). +> **Note:** To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide [Block and Inline Layout](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow). ## Examples of different display types @@ -239,7 +239,7 @@ In the example below, we have two paragraphs. The top paragraph has a `margin-bo {{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 800)}} -A number of rules dictate when margins do and do not collapse. For further information see the detailed page on [mastering margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). The main thing to remember is that margin collapsing is a thing that happens if you are creating space with margins and don't get the space you expect. +A number of rules dictate when margins do and do not collapse. For further information see the detailed page on [mastering margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). The main thing to remember is that margin collapsing is a thing that happens if you are creating space with margins and don't get the space you expect. ### Borders diff --git a/files/en-us/learn/css/css_layout/flexbox/index.md b/files/en-us/learn/css/css_layout/flexbox/index.md index 2f2eeec3be722f3..049874e162a64ea 100644 --- a/files/en-us/learn/css/css_layout/flexbox/index.md +++ b/files/en-us/learn/css/css_layout/flexbox/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} -[Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) is a one-dimensional layout method for arranging items in rows or columns. Items _flex_ (expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the fundamentals. +[Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is a one-dimensional layout method for arranging items in rows or columns. Items _flex_ (expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the fundamentals. diff --git a/files/en-us/learn/css/css_layout/floats/index.md b/files/en-us/learn/css/css_layout/floats/index.md index 32b9e6305892bea..7ad52a52a4b0b46 100644 --- a/files/en-us/learn/css/css_layout/floats/index.md +++ b/files/en-us/learn/css/css_layout/floats/index.md @@ -166,9 +166,9 @@ Add a class of `special` to the first paragraph of text, the one immediately fol ```css .special { - background-color: rgb(79, 185, 227); + background-color: rgb(148, 255, 172); padding: 10px; - color: #fff; + color: purple; } ``` @@ -226,12 +226,6 @@ body { background-color: rgb(207, 232, 220); padding: 1em; } - -.special { - background-color: rgb(79, 185, 227); - padding: 10px; - color: #fff; -} ``` {{EmbedLiveSample('Visualizing_the_float', '100%', 500)}} @@ -304,9 +298,9 @@ body { } .special { - background-color: rgb(79, 185, 227); + background-color: rgb(148, 255, 172); padding: 10px; - color: #fff; + color: purple; } .cleared { @@ -330,9 +324,9 @@ You now know how to clear something following a floated element, but let's see w Change your document so that the first paragraph and the floated box are jointly wrapped with a {{htmlelement("div")}}, which has a class of `wrapper`. -```html +```html live-sample___the_problem
-
Float
+
Float1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus @@ -345,12 +339,11 @@ Change your document so that the first paragraph and the floated box are jointly In your CSS, add the following rule for the `.wrapper` class and then reload the page: -```css +```css live-sample___the_problem .wrapper { - background-color: rgb(79, 185, 227); + background-color: rgb(148, 255, 172); padding: 10px; - color: #fff; - overflow: auto; + color: purple; } ``` @@ -364,7 +357,7 @@ In addition, remove the original `.cleared` class: You'll see that, just like in the example where we put a background color on the paragraph, the background color runs behind the float. -```html hidden +```html hidden live-sample___the_problem

Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare @@ -385,7 +378,7 @@ You'll see that, just like in the example where we put a background color on the

``` -```css hidden +```css hidden live-sample___the_problem body { width: 90%; max-width: 900px; @@ -396,13 +389,6 @@ body { sans-serif; } -.wrapper { - background-color: rgb(79, 185, 227); - padding: 10px; - color: #fff; - overflow: auto; -} - .box { float: left; margin: 15px; @@ -411,22 +397,23 @@ body { border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; + color: black; } ``` -{{EmbedLiveSample('The_problem', '100%', 600)}} +{{EmbedLiveSample('the_problem', '100%', 600)}} -Once again, this is because the float has been taken out of normal flow. You might expect that by wrapping the floated box and the text of first paragraph that wraps around the float together, the subsequent content will be cleared of the box. But this is not the case, as shown above. To deal with this, the standards method is create a [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) using the {{cssxref("display")}} property. +Once again, this is because the float has been taken out of normal flow. You might expect that by wrapping the floated box and the text of first paragraph that wraps around the float together, the subsequent content will be cleared of the box. But this is not the case, as shown above. To deal with this, the standard method is to create a [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) using the {{cssxref("display")}} property. ### display: flow-root -To solve this problem is to use the value `flow-root` of the `display` property. This exists only to create a BFC without using hacks — there will be no unintended consequences when you use it. Remove `overflow: auto` from your `.wrapper` rule and add `display: flow-root` and the box will clear. +To solve this problem is to use the value `flow-root` of the `display` property. This exists only to create a BFC without using hacks — there will be no unintended consequences when you use it. ```css .wrapper { - background-color: rgb(79, 185, 227); + background-color: rgb(148, 255, 172); padding: 10px; - color: #fff; + color: purple; display: flow-root; } ``` @@ -474,13 +461,6 @@ body { sans-serif; } -.wrapper { - background-color: rgb(79, 185, 227); - padding: 10px; - color: #fff; - display: flow-root; -} - .box { float: left; margin: 15px; @@ -489,6 +469,7 @@ body { border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; + color: black; } ``` diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md index 4de4bf7de18fa4f..b6ab2139db6f18f 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -363,7 +363,7 @@ This works because grid is creating as many 200-pixel columns as will fit into t ## Line-based placement -We now move on from creating a grid to placing things on the grid. Our grid always has lines — these are numbered beginning with 1 and relate to the [writing mode](/en-US/docs/Web/CSS/CSS_Writing_Modes) of the document. For example, column line 1 in English (written left-to-right) would be on the left-hand side of the grid and row line 1 at the top, while in Arabic (written right-to-left), column line 1 would be on the right-hand side. +We now move on from creating a grid to placing things on the grid. Our grid always has lines — these are numbered beginning with 1 and relate to the [writing mode](/en-US/docs/Web/CSS/CSS_writing_modes) of the document. For example, column line 1 in English (written left-to-right) would be on the left-hand side of the grid and row line 1 at the top, while in Arabic (written right-to-left), column line 1 would be on the right-hand side. We can arrange things in accordance with these lines by specifying the start and end line. We do this using the following properties: @@ -699,7 +699,7 @@ In this overview, we've toured the main features of CSS Grid Layout. You should ## See also -- [CSS Grid guides](/en-US/docs/Web/CSS/CSS_Grid_Layout#guides) +- [CSS Grid guides](/en-US/docs/Web/CSS/CSS_grid_layout#guides) - [CSS Grid Inspector: Examine grid layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) - [CSS-Tricks Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) — an article explaining everything about Grid in a visually appealing way - [Grid Garden](https://cssgridgarden.com/) — an educational game to learn and better understand the basics of Grid diff --git a/files/en-us/learn/css/css_layout/index.md b/files/en-us/learn/css/css_layout/index.md index 3ebe15eef9dd66c..c49d3ad78ea9971 100644 --- a/files/en-us/learn/css/css_layout/index.md +++ b/files/en-us/learn/css/css_layout/index.md @@ -36,7 +36,7 @@ These articles will provide instruction on the fundamental layout tools and tech - [Normal flow](/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) - : Elements on webpages lay themselves out according to _normal flow_ - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it. - [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - - : [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox) is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can [test your flexbox skills](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills) to check your understanding before moving on. + - : [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can [test your flexbox skills](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills) to check your understanding before moving on. - [Grids](/en-US/docs/Learn/CSS/CSS_layout/Grids) - : CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then [test your grid skills](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills) before moving on. - [Floats](/en-US/docs/Learn/CSS/CSS_layout/Floats) diff --git a/files/en-us/learn/css/css_layout/introduction/index.md b/files/en-us/learn/css/css_layout/introduction/index.md index 04b38f41818f9fb..7525d66960fa742 100644 --- a/files/en-us/learn/css/css_layout/introduction/index.md +++ b/files/en-us/learn/css/css_layout/introduction/index.md @@ -77,7 +77,7 @@ The methods that can change how elements are laid out in CSS are: - **Floats** — Applying a {{cssxref("float")}} value such as `left` can cause block-level elements to wrap along one side of an element, like the way images sometimes have text floating around them in magazine layouts. - **The {{cssxref("position")}} property** — Allows you to precisely control the placement of boxes inside other boxes. `static` positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example, as fixed to the top of the browser viewport. - **Table layout** — Features designed for styling parts of an HTML table can be used on non-table elements using `display: table` and associated properties. -- **Multi-column layout** — The [Multi-column layout](/en-US/docs/Web/CSS/CSS_Columns) properties can cause the content of a block to layout in columns, as you might see in a newspaper. +- **Multi-column layout** — The [Multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout) properties can cause the content of a block to layout in columns, as you might see in a newspaper. ## The display property @@ -89,7 +89,7 @@ In addition to being able to change the default presentation by turning an item ## Flexbox -Flexbox is the short name for the [Flexible Box Layout](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) CSS module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply `display: flex` to the parent element of the elements you want to lay out; all its direct children then become _flex items_. We can see this in a simple example. +Flexbox is the short name for the [Flexible Box Layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) CSS module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply `display: flex` to the parent element of the elements you want to lay out; all its direct children then become _flex items_. We can see this in a simple example. ### Setting display: flex diff --git a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md index 5b7a4b47b8c6b9e..73884f55cde7d06 100644 --- a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md @@ -380,7 +380,7 @@ body { ### Setting break-inside -To control this behavior, we can use properties from the [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_Fragmentation) specification. This specification gives us properties to control the breaking of content in multicol and in paged media. For example, by adding the property {{cssxref("break-inside")}} with a value of `avoid` to the rules for `.card`. This is the container of the heading and text, so we don't want it fragmented. +To control this behavior, we can use properties from the [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) specification. This specification gives us properties to control the breaking of content in multicol and in paged media. For example, by adding the property {{cssxref("break-inside")}} with a value of `avoid` to the rules for `.card`. This is the container of the heading and text, so we don't want it fragmented. ```css .card { @@ -505,7 +505,7 @@ You now know how to use the basic features of multiple-column layout, another to ## See also -- [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_Fragmentation) -- [Using multi-column layouts](/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) +- [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) +- [Using multi-column layouts](/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) {{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}} diff --git a/files/en-us/learn/css/css_layout/normal_flow/index.md b/files/en-us/learn/css/css_layout/normal_flow/index.md index 703bfbffa14411e..94cd87ad6a7c9b3 100644 --- a/files/en-us/learn/css/css_layout/normal_flow/index.md +++ b/files/en-us/learn/css/css_layout/normal_flow/index.md @@ -48,7 +48,7 @@ That explains how elements are structured individually, but how about the way th Inline elements behave differently. They don't appear on new lines; instead, they all sit on the same line along with any adjacent (or wrapped) text content as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing content will move down to a new line. -If two vertically adjacent elements both have a margin set on them and their margins touch, the larger of the two margins remains and the smaller one disappears. This is known as [**margin collapsing**](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). +If two vertically adjacent elements both have a margin set on them and their margins touch, the larger of the two margins remains and the smaller one disappears. This is known as [**margin collapsing**](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). Collapsing margins is only relevant in the **vertical direction**. Let's look at a simple example that explains all of this: diff --git a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md index cfd744264f9941d..8a933cc7fb1ac44 100644 --- a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md +++ b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md @@ -203,7 +203,7 @@ The specification for feature queries also contains the ability to test if a bro The CSS Grid specification was initially prototyped In Internet Explorer 10; this means that while IE10 and IE11 do not have _modern_ grid support, they do have a version of Grid layout that is very usable, although different to the modern specification documented on this site. The IE10 and 11 implementations is `-ms-` prefixed, which means you can use it for these browsers and it will be ignored by non-Microsoft browsers. Edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid CSS. -The guide to [Progressive Enhancement in Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers. +The guide to [Progressive Enhancement in Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers. ## Testing older browsers @@ -220,8 +220,8 @@ Now that you have worked through our articles on CSS layout, it's time to test y ## See also - [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) -- [Backwards Compatibility of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) -- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [Backwards Compatibility of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox) +- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) - [Using CSS Grid: Supporting Browsers Without Grid](https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/) - [A tutorial which uses the IE10 and 11 version of Grid](https://24ways.org/2012/css3-grid-layout/) - [Should I try to use the IE10 implementation of Grid Layout?](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) diff --git a/files/en-us/learn/css/first_steps/what_is_css/index.md b/files/en-us/learn/css/first_steps/what_is_css/index.md index bf0bd00a5b8decf..f2963ddfe3acc09 100644 --- a/files/en-us/learn/css/first_steps/what_is_css/index.md +++ b/files/en-us/learn/css/first_steps/what_is_css/index.md @@ -54,7 +54,7 @@ A **document** is usually a text file structured using a markup language — {{G > **Note:** A browser is sometimes called a {{Glossary("User agent","user agent")}}, which basically means a computer program that represents a person inside a computer system. Browsers are the main type of user agents we think of when talking about CSS, however, they are not the only ones. There are other user agents available, such as those that convert HTML and CSS documents into PDFs to be printed. -CSS can be used for very basic document text styling — for example, for changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links. It can be used to create a layout — for example, [turning a single column of text into a layout](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) with a main content area and a sidebar for related information. It can even be used for effects such as [animation](/en-US/docs/Web/CSS/CSS_Animations). Have a look at the links in this paragraph for specific examples. +CSS can be used for very basic document text styling — for example, for changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links. It can be used to create a layout — for example, [turning a single column of text into a layout](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) with a main content area and a sidebar for related information. It can even be used for effects such as [animation](/en-US/docs/Web/CSS/CSS_animations). Have a look at the links in this paragraph for specific examples. ## CSS syntax @@ -95,7 +95,7 @@ You will find that you quickly learn some values, whereas others you will need t ## CSS modules -As there are so many things that you could style using CSS, the language is broken down into _modules_. You'll see reference to these modules as you explore MDN. Many of the documentation pages are organized around a particular module. For example, you could take a look at the MDN reference to the [Backgrounds and Borders](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to _Specifications_ that defines the technology (also see the section below). +As there are so many things that you could style using CSS, the language is broken down into _modules_. You'll see reference to these modules as you explore MDN. Many of the documentation pages are organized around a particular module. For example, you could take a look at the MDN reference to the [Backgrounds and Borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to _Specifications_ that defines the technology (also see the section below). At this stage, you don't need to worry too much about how CSS is structured; however, it can make it easier to find information if, for example, you are aware that a certain property is likely to be found among other similar things, and is therefore, probably in the same specification. diff --git a/files/en-us/learn/css/howto/add_a_shadow/index.md b/files/en-us/learn/css/howto/add_a_shadow/index.md index e8638429110009e..6c836aff42e9bc9 100644 --- a/files/en-us/learn/css/howto/add_a_shadow/index.md +++ b/files/en-us/learn/css/howto/add_a_shadow/index.md @@ -29,5 +29,5 @@ In the example below we have set the X and Y axes to 5px, the blur to 10px and t ## See also -- The [Box shadow generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator) +- The [Box shadow generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator) - [Learn CSS: Advanced styling effects.](/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects) diff --git a/files/en-us/learn/css/howto/center_an_item/index.md b/files/en-us/learn/css/howto/center_an_item/index.md index 38ac172a6ae75a8..2e4fccfc4afb97c 100644 --- a/files/en-us/learn/css/howto/center_an_item/index.md +++ b/files/en-us/learn/css/howto/center_an_item/index.md @@ -10,7 +10,7 @@ In this guide you can find out how to center an item inside another element, bot ## Center a box -To center one box inside another using CSS you will need to use [CSS box alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) properties on the parent container. As these alignment properties do not yet have browser support for block and inline layout you will need to make the parent a [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) or [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) container to turn on the ability to use alignment. +To center one box inside another using CSS you will need to use [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) properties on the parent container. As these alignment properties do not yet have browser support for block and inline layout you will need to make the parent a [flex](/en-US/docs/Web/CSS/CSS_flexible_box_layout) or [grid](/en-US/docs/Web/CSS/CSS_grid_layout) container to turn on the ability to use alignment. In the example below we have given the parent container `display: flex`; then set {{cssxref("justify-content")}} to center to align it horizontally, and {{cssxref("align-items")}} to center to align it vertically. @@ -20,5 +20,5 @@ In the example below we have given the parent container `display: flex`; then se ## See also -- [Box alignment in Flexbox](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) -- [Box alignment in Grid layout](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout) +- [Box alignment in Flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) +- [Box alignment in Grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) diff --git a/files/en-us/learn/css/howto/create_fancy_boxes/index.md b/files/en-us/learn/css/howto/create_fancy_boxes/index.md index dc4a1a77db1ffb7..0ebbe15bef09fa7 100644 --- a/files/en-us/learn/css/howto/create_fancy_boxes/index.md +++ b/files/en-us/learn/css/howto/create_fancy_boxes/index.md @@ -72,11 +72,11 @@ Yes, we get a circle: ## Backgrounds -When we talk about a fancy box, the core properties to handle that are [background-\* properties](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders). When you start fiddling with backgrounds it's like your CSS box is turned into a blank canvas you'll fill. +When we talk about a fancy box, the core properties to handle that are [background-\* properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders). When you start fiddling with backgrounds it's like your CSS box is turned into a blank canvas you'll fill. Before we jump to some practical examples, let's step back a bit as there are two things you should know about backgrounds. -- It's possible to set [several backgrounds](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) on a single box. They are stacked on top of each other like layers. +- It's possible to set [several backgrounds](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) on a single box. They are stacked on top of each other like layers. - Backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned. ```html hidden @@ -118,7 +118,7 @@ Okay, let's have fun with backgrounds: {{ EmbedLiveSample('Backgrounds', '100%', '200') }} -> **Note:** Gradients can be used in some very creative ways. If you want to see some creative examples, take a look at [Lea Verou's CSS patterns](https://projects.verou.me/css3patterns/). If you want to learn more about gradients, feel free to get into [our dedicated article](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients). +> **Note:** Gradients can be used in some very creative ways. If you want to see some creative examples, take a look at [Lea Verou's CSS patterns](https://projects.verou.me/css3patterns/). If you want to learn more about gradients, feel free to get into [our dedicated article](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients). ## Pseudo-elements diff --git a/files/en-us/learn/css/howto/index.md b/files/en-us/learn/css/howto/index.md index 027526d9b6174c6..2bd4d8541e613d6 100644 --- a/files/en-us/learn/css/howto/index.md +++ b/files/en-us/learn/css/howto/index.md @@ -14,7 +14,7 @@ This page rounds up questions and answers, and other material on the MDN site th - : Shadows can be added to boxes with the {{cssxref("box-shadow")}} property. This tutorial explains how it works and shows an example. - [How do I fill a box with an image without distorting the image?](/en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_image) - : The {{cssxref("object-fit")}} property provides different ways to fit an image into a box which has a different aspect ratio, and you can find out how to use them in this tutorial. -- [Which methods can be used to style boxes?](/en-US/docs/Learn/CSS/Howto/create_fancy_boxes) +- [Which methods can be used to style boxes?](/en-US/docs/Learn/CSS/Howto/Create_fancy_boxes) - : A rundown of the different properties that might be useful when styling boxes using CSS. - [How can I make elements semi-transparent?](/en-US/docs/Learn/CSS/Howto/Make_box_transparent) - : The {{cssxref("opacity")}} property and color values with an alpha channel can be used for this; find out which one to use when. @@ -49,9 +49,9 @@ This page rounds up questions and answers, and other material on the MDN site th ### Layout guides -- [Using CSS Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) -- [Using CSS multi-column layouts](/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) -- [Using CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) +- [Using CSS Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Using CSS multi-column layouts](/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) +- [Using CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - [Using CSS generated content](/en-US/docs/Learn/CSS/Howto/Generated_content) > **Note:** We have a cookbook dedicated to [CSS Layout solutions](/en-US/docs/Web/CSS/Layout_cookbook), with fully working examples and explanations of common layout tasks. Also check out [Practical Positioning Examples](/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples), which shows how you can use positioning to create a tabbed info box, and a sliding hidden panel. diff --git a/files/en-us/learn/css/howto/make_box_transparent/index.md b/files/en-us/learn/css/howto/make_box_transparent/index.md index 58447da4e0c27c5..998437c1d85de61 100644 --- a/files/en-us/learn/css/howto/make_box_transparent/index.md +++ b/files/en-us/learn/css/howto/make_box_transparent/index.md @@ -26,4 +26,4 @@ Try changing the opacity and alpha channel values in the below examples to see m ## See also -- [Applying color to HTML elements using CSS.](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) +- [Applying color to HTML elements using CSS.](/en-US/docs/Web/CSS/CSS_colors/Applying_color) diff --git a/files/en-us/learn/css/howto/transition_button/index.md b/files/en-us/learn/css/howto/transition_button/index.md index 30c925933af1f0b..944c85672ee3480 100644 --- a/files/en-us/learn/css/howto/transition_button/index.md +++ b/files/en-us/learn/css/howto/transition_button/index.md @@ -24,4 +24,4 @@ In the example the transition takes 1 second, you can try changing this to see t ## See also -- [Using CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- [Using CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) diff --git a/files/en-us/learn/css/styling_text/fundamentals/index.md b/files/en-us/learn/css/styling_text/fundamentals/index.md index 48ce1c2ceb4f7df..890f3817b940461 100644 --- a/files/en-us/learn/css/styling_text/fundamentals/index.md +++ b/files/en-us/learn/css/styling_text/fundamentals/index.md @@ -283,7 +283,9 @@ In such a case, the browser starts at the beginning of the list and looks to see It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasize this point, paragraphs are given the browser's default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font! -> **Note:** Font names that have more than one word — like `Trebuchet MS` — need to be surrounded by quotes, for example `"Trebuchet MS"`. +> **Note:** While you can use font family names that contain a space, such as `Trebuchet MS`, without quoting the name, to avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens. + +> **Warning: ** Any font family name which could be misinterpreted as a generic family name or a CSS-wide keyword must be quoted. While the font-family names can be included as a {{cssxref("custom-ident")}} or a {{cssxref("string")}}, font family names that happen to be the same as a CSS-wide property value, like `initial`, or `inherit`, or CSS have the same name as one to the generic font family names, like `sans-serif` or `fantasy`, must be included as a quoted string. Otherwise, the font family name will be interpreted as being the equivalent CSS keyword or generic family name. When used as keywords, the generic font family names —`serif`, `sans-serif`, `monospace`, `cursive`, and `fantasy` — and the global CSS keywords MUST NOT be quoted, as strings are not interpreted as CSS keywords. #### A font-family example 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 647892654666103..b4cc580c82d2a8f 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 @@ -197,7 +197,7 @@ Let's go through it to see what it does: ## Variable fonts -There is a newer font technology available in browsers called variable fonts. These are fonts that allow many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They are somewhat advanced for our beginner's course, but if you fancy stretching yourself and looking into them, read our [Variable fonts guide](/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide). +There is a newer font technology available in browsers called variable fonts. These are fonts that allow many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They are somewhat advanced for our beginner's course, but if you fancy stretching yourself and looking into them, read our [Variable fonts guide](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide). ## Summary diff --git a/files/en-us/learn/forms/sending_forms_through_javascript/index.md b/files/en-us/learn/forms/sending_forms_through_javascript/index.md index 3783ed814adb74e..2fcfceffaae56c7 100644 --- a/files/en-us/learn/forms/sending_forms_through_javascript/index.md +++ b/files/en-us/learn/forms/sending_forms_through_javascript/index.md @@ -217,7 +217,7 @@ Here's the live result: {{EmbedLiveSample("Using_FormData_bound_to_a_form_element", "100%", 50)}} -You can even get more involved with the process by using the form's {{domxref("HTMLFormElement.elements", "elements")}} property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the [Accessing form controls](/en-US/docs/Web/API/HTMLFormElement.elements#accessing_form_controls) example. +You can even get more involved with the process by using the form's {{domxref("HTMLFormElement.elements", "elements")}} property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the [Accessing form controls](/en-US/docs/Web/API/HTMLFormElement/elements#accessing_form_controls) example. ## Dealing with binary data diff --git a/files/en-us/learn/forms/styling_web_forms/index.md b/files/en-us/learn/forms/styling_web_forms/index.md index 4ac15d3ebe34aa2..5ecd7e4ff1668cc 100644 --- a/files/en-us/learn/forms/styling_web_forms/index.md +++ b/files/en-us/learn/forms/styling_web_forms/index.md @@ -255,7 +255,7 @@ form { } ``` -Notice that we've used some [CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) to lay out the form. Using this we can easily position our elements, including the title and all the form elements: +Notice that we've used some [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) to lay out the form. Using this we can easily position our elements, including the title and all the form elements: ```css h1 { diff --git a/files/en-us/learn/forms/ui_pseudo-classes/index.md b/files/en-us/learn/forms/ui_pseudo-classes/index.md index 7427a7776508a8e..47befbe9749ea6a 100644 --- a/files/en-us/learn/forms/ui_pseudo-classes/index.md +++ b/files/en-us/learn/forms/ui_pseudo-classes/index.md @@ -49,7 +49,7 @@ The original pseudo-classes (from [CSS 2.1](https://www.w3.org/TR/CSS21/selector key is being pressed down in the case of a keyboard activation). -These basic pseudo-classes should be familiar to you now. [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) provide several other pseudo-classes related to HTML forms. These provide several useful targeting conditions that you can take advantage of. We'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: +These basic pseudo-classes should be familiar to you now. [CSS selectors](/en-US/docs/Web/CSS/CSS_Selectors) provide several other pseudo-classes related to HTML forms. These provide several useful targeting conditions that you can take advantage of. We'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: - {{cssxref(':required')}} and {{cssxref(':optional')}}: Target elements that can be required (e.g. elements that support the [`required`](/en-US/docs/Web/HTML/Attributes/required) HTML attribute)), based on whether they are required or optional. - {{cssxref(":valid")}} and {{cssxref(":invalid")}}, and {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}}: Target form controls that are valid/invalid according to form validation constraints set on them, or in-range/out-of-range. diff --git a/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md index dfc2c0c1e6e09a1..c5d7d38733dfb55 100644 --- a/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md +++ b/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md @@ -42,7 +42,7 @@ You should still have your paragraphs and title from earlier. Keep these close b ### Theme color -To choose a color, go to [the Color Picker](/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) and find a color you like. When you click on a color, you'll see a strange six-character code like `#660066`. That's called a _hex code_ (short for hexadecimal), and represents your color. Copy the code down somewhere safe for now. +To choose a color, go to [the Color Picker](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool) and find a color you like. When you click on a color, you'll see a strange six-character code like `#660066`. That's called a _hex code_ (short for hexadecimal), and represents your color. Copy the code down somewhere safe for now. ![Color-Picker-Tool on MDN Docs website with RGB, HSL, and HEX colors ](color-picker.png) diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md index 18e451ccb46e8b0..41cc46baa871df8 100644 --- a/files/en-us/learn/html/introduction_to_html/getting_started/index.md +++ b/files/en-us/learn/html/introduction_to_html/getting_started/index.md @@ -522,7 +522,7 @@ You can now open this file in a web browser to see what the rendered code looks - Edit the paragraph content to include text about a topic that you find interesting. - Make important words stand out in bold by wrapping them inside a `` opening tag and `` closing tag. - Add a link to your paragraph, as [explained earlier in the article](#active_learning_adding_attributes_to_an_element). -- Add an image to your document. Place it below the paragraph, as [explained earlier in the article](/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#void_elements). Earn bonus points if you manage to link to a different image (either locally on your computer or somewhere else on the web). +- Add an image to your document. Place it below the paragraph, as [explained earlier in the article](#void_elements). Earn bonus points if you manage to link to a different image (either locally on your computer or somewhere else on the web). If you make a mistake, you can always reset it using the _Reset_ button. If you get really stuck, press the _Show solution_ button to see the answer. @@ -752,6 +752,6 @@ At this point, you should understand what HTML looks like, and how it works at a ## See also -- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) +- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) {{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/en-us/learn/html/tables/advanced/index.md b/files/en-us/learn/html/tables/advanced/index.md index d0fe7eb5a475e58..20f7228e3f077b3 100644 --- a/files/en-us/learn/html/tables/advanced/index.md +++ b/files/en-us/learn/html/tables/advanced/index.md @@ -1,6 +1,7 @@ --- title: HTML table advanced features and accessibility slug: Learn/HTML/Tables/Advanced +page-type: learn-module-chapter --- {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}} diff --git a/files/en-us/learn/html/tables/basics/index.md b/files/en-us/learn/html/tables/basics/index.md index 0be332fd1f24233..046bcb54474d876 100644 --- a/files/en-us/learn/html/tables/basics/index.md +++ b/files/en-us/learn/html/tables/basics/index.md @@ -1,6 +1,7 @@ --- title: HTML table basics slug: Learn/HTML/Tables/Basics +page-type: learn-module-chapter --- {{LearnSidebar}}{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/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 38ca74c84f7e48d..4bf9c2fc7f1be61 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 @@ -1,6 +1,7 @@ --- title: Structuring planet data slug: Learn/HTML/Tables/Structuring_planet_data +page-type: learn-module-chapter --- {{LearnSidebar}}{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} diff --git a/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md index 4637d0a9007dba4..5b858919caa94d7 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -625,7 +625,7 @@ Let's walk through the most interesting parts of the example. We won't look at i } ``` -5. Finally, we have `displayVideo()`, which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a `
- - - -
Manifest version 2 or higher
Example - 
-"icons": {
-  "48": "icon.png",
-  "96": "icon@2x.png"
-}
-
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 208d13e6264688b..033742e27294564 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 @@ -16,7 +16,7 @@ APIs that use match patterns usually accept a list of match patterns, and will p > **Note:** Some browsers don't support certain schemes. > Check the [Browser compatibility table](#browser_compatibility) for details. -All match patterns are specified as strings. Apart from the special [``](/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns#all_urls) pattern, match patterns consist of three parts: _scheme_, _host_, and _path_. The scheme and host are separated by `://`. +All match patterns are specified as strings. Apart from the special [``](#all_urls) pattern, match patterns consist of three parts: _scheme_, _host_, and _path_. The scheme and host are separated by `://`. ``` :// diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md index 6bdb4c4f388e37d..856fffbe4836815 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md @@ -23,7 +23,7 @@ You can style these elements to match the browser's style. The manifest.json key > Support for `browser_style` in Manifest V3 is deprecated. Starting from Firefox 115, the default value of `options_ui.browser_style` and `sidebar_action.browser_style` changes from `true` to `false`. In Firefox 118, `"browser_style": true` will no longer be supported in Manifest V3 extensions. > If your Manifest V3 extension depends on the `"browser_style": true` styles, follow the [Manifest V3 migration guide for `browser_style`](#manifest_v3_migration). > See ([Firefox bug 1827910](https://bugzil.la/1827910)) for more information. -> If you want to apply the Firefox style to your extension, see the [Firefox Style Guide](https://acorn.firefox.com/latest/acorn.html). +> If you want to apply the Firefox style to your extension, see the [Firefox Style Guide](https://acorn.firefox.com/latest/). When considering whether to use `browser_style: true`, test your extension with various themes (built-in or from AMO) to ensure that the extension UI behaves the way you expect it to. diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md index 1f38e878e15cccf..cb80b0769180778 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md @@ -52,7 +52,7 @@ browser.contextMenus.onClicked.addListener((info, tab) => { ## Icons -For details on how to create icons to use with your context menu, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation. +For details on how to create icons to use with your context menu, see [Iconography](https://acorn.firefox.com/latest/styles/iconography-q7JqGl5H) in the [Acorn Design System](https://acorn.firefox.com/latest/) documentation. ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md index 3848fc3b2051481..e22a78ec6e0fd3a 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md @@ -57,11 +57,11 @@ The extension can now run code in the inspected window using [`devtools.inspecte ## Developer panel design -For details on how to design your developer panel's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation. +For details on how to design your developer panel's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/) documentation. ## Icons -For details on how to create icons to use with your developer tools panel, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation. +For details on how to create icons to use with your developer tools panel, see [Iconography](https://acorn.firefox.com/latest/styles/iconography-q7JqGl5H) in the [Acorn Design System](https://acorn.firefox.com/latest/) documentation. ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md index b6dc5d07e5a28aa..211ab82e3639cec 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md @@ -70,7 +70,7 @@ To use the history API, you must request the "`history`" [permission](/en-US/doc ## Web page design -For details on how to design your web page's to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html). +For details on how to design your web page's to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/). ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/notifications/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/notifications/index.md index 1266a30279bb0d4..f7eeaf8c9b59faa 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/notifications/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/notifications/index.md @@ -45,7 +45,7 @@ If you are issuing calls to action through notifications, you will also want to ## Icons -For details on how to create icons to use with your notification, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation. +For details on how to create icons to use with your notification, see [Iconography](https://acorn.firefox.com/latest/styles/iconography-q7JqGl5H) in the [Acorn Design System](https://acorn.firefox.com/latest/) documentation. ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md index 7ff05be3272fc48..051c72e8cabaca3 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md @@ -55,7 +55,7 @@ See the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/o ## Options content design -For details on how to design your options content to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html). +For details on how to design your options content to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/). ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md index eecd562eeec4779..0ba6ea9b87ca5d8 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md @@ -85,7 +85,7 @@ You can change any of the page action properties programmatically using the [`pa ## Icons -For details on how to create icons to use with your page action, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation. +For details on how to create icons to use with your page action, see [Iconography](https://acorn.firefox.com/latest/styles/iconography-q7JqGl5H) in the [Acorn Design System](https://acorn.firefox.com/latest/) documentation. ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md index 93ae8ad2cd0af9a..1429e768d44f4ed 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md @@ -6,7 +6,7 @@ page-type: guide {{AddonSidebar}} -A popup is a dialog that's associated with a [toolbar button](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action) or [address bar button](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions). This page describes popups in general, specifying them, debugging, resizing, and designing them, as well as examples of use. +A popup is a dialog that's associated with a [toolbar button](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button) or [address bar button](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions). This page describes popups in general, specifying them, debugging, resizing, and designing them, as well as examples of use. ![Page action pop-up example with three options: kittens, puppies, and reset.](page_action_popup.png) @@ -48,7 +48,7 @@ In Firefox Android 57, the popup is shown as a normal page in a new tab. ## Popup design -For details on how to design your popup's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html). +For details on how to design your popup's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/). ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/sidebars/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/sidebars/index.md index e78bfb446f32147..cdd76711098fe5b 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/sidebars/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/sidebars/index.md @@ -53,7 +53,7 @@ Title and icon are shown to the user in any UI provided by the browser to list s ## Sidebar design -For details on how to design a sidebar's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation. +For details on how to design a sidebar's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/) documentation. ## Example diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/toolbar_button/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/toolbar_button/index.md index 171c5ee23e3dded..339968b3d480421 100644 --- a/files/en-us/mozilla/add-ons/webextensions/user_interface/toolbar_button/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/toolbar_button/index.md @@ -41,7 +41,7 @@ You can change many of the browser action properties programmatically using the ## Icons -For details on how to create icons to use with your browser action, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation. +For details on how to create icons to use with your browser action, see [Iconography](https://acorn.firefox.com/latest/styles/iconography-q7JqGl5H) in the [Acorn Design System](https://acorn.firefox.com/latest/) documentation. ## Examples diff --git a/files/en-us/mozilla/add-ons/webextensions/working_with_files/index.md b/files/en-us/mozilla/add-ons/webextensions/working_with_files/index.md index 49a94f02e061813..980def7c75e3edb 100644 --- a/files/en-us/mozilla/add-ons/webextensions/working_with_files/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/working_with_files/index.md @@ -26,7 +26,7 @@ browser.downloads.download({ url: "https://example.org/image.png" }); You can let the user download to a location of their choice by specifying the `saveAs` parameter. -> **Note:** Using [URL.createObjectURL()](/en-US/docs/Web/API/URL/createObjectURL) you can also download files and blobs defined in your JavaScript, which can include local content retrieved from IndexedDB. +> **Note:** Using [URL.createObjectURL()](/en-US/docs/Web/API/URL/createObjectURL_static) you can also download files and blobs defined in your JavaScript, which can include local content retrieved from IndexedDB. The downloads API also provides features to cancel, pause, resume, erase, and remove downloads; search for downloaded files in the download manager; show downloaded files in the computer's file manager; and open a file in an associated application. @@ -47,7 +47,7 @@ API references: [HTML input element](/en-US/docs/Web/HTML/Element/input/file) | ## Open files in an extension using drag and drop -The Web Drag and Drop API offers an alternative to using a file picker. To use this method, establish a 'drop zone' that fits with your UI, then add listeners for the [`dragenter`](/en-US/docs/Web/API/Document/dragenter_event), [`dragover`](/en-US/docs/Web/API/Document/dragover_event), and [`drop`](/en-US/docs/Web/API/Document/drop_event) events to the element. In the handler for the drop event, your code can access any file dropped by the user from the object offered by the `dataTransfer` property using [`DataTransfer.files`](/en-US/docs/Web/API/DataTransfer/files). Your code can then access and manipulate the files using the [DOM File API](/en-US/docs/Web/API/File). +The Web Drag and Drop API offers an alternative to using a file picker. To use this method, establish a 'drop zone' that fits with your UI, then add listeners for the [`dragenter`](/en-US/docs/Web/API/HTMLElement/dragenter_event), [`dragover`](/en-US/docs/Web/API/HTMLElement/dragover_event), and [`drop`](/en-US/docs/Web/API/HTMLElement/drop_event) events to the element. In the handler for the drop event, your code can access any file dropped by the user from the object offered by the `dataTransfer` property using [`DataTransfer.files`](/en-US/docs/Web/API/DataTransfer/files). Your code can then access and manipulate the files using the [DOM File API](/en-US/docs/Web/API/File). Example: [Imagify](https://github.com/mdn/webextensions-examples/tree/main/imagify) Guides: [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications) | [File drag and drop](/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop) @@ -112,7 +112,7 @@ export async function loadStoredImages(filter) { `loadStoredImages()` is called when the user clicks view or reload in the navigate collection page. `getFileStorage()` opens the `"stored-images"` database, then `imagesStore.list()` gets a filtered list of the stored images. This list is then used to retrieve images with `imagesStore.get()` and build a list to return to the UI. -Note the use of [`URL.createObjectURL(blob)`](/en-US/docs/Web/API/URL/createObjectURL) to create a URL that references the image blob. This URL is then used in the UI ([navigate-collection.js](https://github.com/mdn/webextensions-examples/blob/main/store-collected-images/webextension-plain/navigate-collection.js)) to display the image. +Note the use of [`URL.createObjectURL(blob)`](/en-US/docs/Web/API/URL/createObjectURL_static) to create a URL that references the image blob. This URL is then used in the UI ([navigate-collection.js](https://github.com/mdn/webextensions-examples/blob/main/store-collected-images/webextension-plain/navigate-collection.js)) to display the image. ### Delete collected images @@ -128,7 +128,7 @@ async function removeStoredImages(storedImages) { `removeStoredImages()` is called when the user clicks delete in the navigate collection page. Again, `getFileStorage()` opens the `"stored-images"` database then `imagesStore.remove()` removes each image from the filtered list of images. -Note the use of [`URL.revokeObjectURL()`](/en-US/docs/Web/API/URL/revokeObjectURL) to explicitly revoke the blob URL. This enables the garbage collector to free the memory allocated to the URL. If this is not done, the memory will not get returned until the page on which it was created is closed. If the URL was created in an extension's background page, this is not unloaded until the extension is disabled, uninstalled, or reloaded, so holding this memory unnecessarily could affect browser performance. If the URL is created in an extension's page (new tab, popup, or sidebar) the memory is released when the page is closed, but it is still a good practice to revoke the URL when it is no longer needed. +Note the use of [`URL.revokeObjectURL()`](/en-US/docs/Web/API/URL/revokeObjectURL_static) to explicitly revoke the blob URL. This enables the garbage collector to free the memory allocated to the URL. If this is not done, the memory will not get returned until the page on which it was created is closed. If the URL was created in an extension's background page, this is not unloaded until the extension is disabled, uninstalled, or reloaded, so holding this memory unnecessarily could affect browser performance. If the URL is created in an extension's page (new tab, popup, or sidebar) the memory is released when the page is closed, but it is still a good practice to revoke the URL when it is no longer needed. Once the blob URL has been revoked, any attempt to load it will result in an error. For example, if the blob URL was used as the `SRC` attribute of an `IMG` tag, the image will not load and will not be visible. It is therefore good practice to remove any revoked blob URLs from generated HTML elements when the blob URL is revoked. diff --git a/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md index da199829e67f951..5e91278533046d3 100644 --- a/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/your_second_webextension/index.md @@ -12,7 +12,7 @@ The extension adds a new button to the Firefox toolbar. When the user clicks the To implement this, we will: -- **define a [browser action](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action), which is a button attached to the Firefox toolbar**. +- **define a [browser action](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button), which is a button attached to the Firefox toolbar**. For the button we'll supply: - an icon, called "beasts-32.png" diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index 60b67b1efda88ad..846f304b8beb496 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -1,6 +1,7 @@ --- title: Experimental features in Firefox slug: Mozilla/Firefox/Experimental_features +page-type: guide --- {{FirefoxSidebar}} diff --git a/files/en-us/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.md b/files/en-us/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.md index 72b749c5c907b91..dbf38c0134665f2 100644 --- a/files/en-us/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.md +++ b/files/en-us/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.md @@ -9,7 +9,7 @@ page-type: guide > **Warning:** The approach described in this topic is non-standard, and not recommended. > > The best way to request resources over HTTP is to use [`fetch()`](/en-US/docs/Web/API/fetch), which allows you to specify the priority in [`Request.priority`](/en-US/docs/Web/API/Request/priority). -> You can also set the HTTP priority on [`HTMLLinkElement`](/en-US/docs/Web/API/HTMLLinkElement/fetchPriority), [`HTMLIFrameElement`](/en-US/docs/Web/API/HTMLIFrameElement/fetchPriority), and [`HTMLImageElement`](/en-US/docs/Web/API/HTMLImageElement/fetchPriority) elements (and associated tags) using the `fetchpriority` attribute. +> You can also set the HTTP priority on [`HTMLLinkElement`](/en-US/docs/Web/API/HTMLLinkElement/fetchPriority), [`HTMLIFrameElement`](/en-US/docs/Web/API/HTMLIFrameElement), and [`HTMLImageElement`](/en-US/docs/Web/API/HTMLImageElement/fetchPriority) elements (and associated tags) using the `fetchpriority` attribute. In [Firefox 1.5](/en-US/docs/Mozilla/Firefox/Releases/1.5), an API was added to support changing the priority of [HTTP](/en-US/docs/Web/HTTP) requests. Prior to this, there was no way to directly indicate that a request was of a different priority. The API is defined in `nsISupportsPriority`, but is defined in very generic terms so that any object can implement this interface to enable the concept of priority. This article deals specifically with using that interface to change the priority of HTTP requests. diff --git a/files/en-us/mozilla/firefox/releases/1.5/index.md b/files/en-us/mozilla/firefox/releases/1.5/index.md index 406d0f2a59e9972..5c720b30213a7e4 100644 --- a/files/en-us/mozilla/firefox/releases/1.5/index.md +++ b/files/en-us/mozilla/firefox/releases/1.5/index.md @@ -29,7 +29,7 @@ Some of the new features in Firefox 1.5: - : SVG can be used in XHTML pages. JavaScript and CSS can be used to manipulate the picture in the same way you would script regular XHTML. See [SVG in Firefox](/en-US/docs/Web/SVG/SVG_1.1_Support_in_Firefox) to learn about the status and known problems of SVG implementation in Firefox. - [Drawing Graphics with Canvas](/en-US/docs/Web/API/Canvas_API/Tutorial) - : Learn about the new `` tag and how to draw graphs and other objects in Firefox. -- [CSS3 Columns](/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) +- [CSS3 Columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) - : Learn about the new support for automatic multi-column text layout as proposed for [CSS3](/en-US/docs/Web/CSS). - [Using Firefox 1.5 caching](/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching) - : Learn about `bfcache` and how it speeds up back and forward navigation. @@ -86,7 +86,7 @@ Firefox support for Web standards continues to lead the industry with consistent - XML Path Language ([XPath](/en-US/docs/Web/XPath)): [XPath 1.0](https://www.w3.org/TR/xpath/) - Resource Description Framework ([RDF](/en-US/docs/Glossary/RDF)): [RDF](https://www.w3.org/RDF/) - Simple Object Access Protocol (SOAP): [SOAP 1.1](https://www.w3.org/TR/2000/NOTE-SOAP-20000508/) -- [JavaScript](/en-US/docs/Web/JavaScript) 1.6, based on [ECMA-262](/en-US/docs/Web/JavaScript/Language_Resources), revision 3: [ECMA-262](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) +- [JavaScript](/en-US/docs/Web/JavaScript) 1.6, based on [ECMA-262, revision 3](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) Firefox 1.5 supports the following data transport protocols (HTTP, FTP, SSL, TLS, and others), multilingual character data (Unicode), graphics (GIF, JPEG, PNG, SVG, and others) and the latest version of the world's most popular scripting language, [JavaScript 1.6](/en-US/docs/New_in_JavaScript_1.6). diff --git a/files/en-us/mozilla/firefox/releases/10/index.md b/files/en-us/mozilla/firefox/releases/10/index.md index 86b1e5e2bcf1ebb..6e264542c82f47f 100644 --- a/files/en-us/mozilla/firefox/releases/10/index.md +++ b/files/en-us/mozilla/firefox/releases/10/index.md @@ -92,7 +92,7 @@ Great progress has been made to update IndexedDB to the latest draft specificati ### CSS -- CSS 3D Transforms are now supported. This includes support for the {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }} and {{ cssxref("backface-visibility") }} properties, as well as for 3D transform functions in the {{ cssxref("transform") }} and {{ cssxref("transform-function") }} properties. See [Using CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#3d_specific_css_properties) for details. +- CSS 3D Transforms are now supported. This includes support for the {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }} and {{ cssxref("backface-visibility") }} properties, as well as for 3D transform functions in the {{ cssxref("transform") }} and {{ cssxref("transform-function") }} properties. See [Using CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms#3d_specific_css_properties) for details. - Two new values for the CSS property {{ cssxref("unicode-bidi") }} have been added: `-moz-isolation` and `-moz-plaintext`. The `-moz-isolation` value isolates, from a directionality point of view, the element from its environment, letting it have a different directionality. An element with `unicode-bidi:-moz-isolation` behaves like a {{ HTMLElement("bdi") }} element. The `-moz-plaintext` indicates the browser to use the Unicode browser heuristic to determine directionality and not the CSS {{ cssxref("direction") }} property. - The CSS {{ cssxref("linear-gradient()") }} and {{ cssxref("repeating-linear-gradient()") }} properties have been updated to support the new `to` syntax and the _magic corner_ algorithm. This allows to give a precise color on the corner of a gradient-filled box. - The {{ cssxref("text-overflow") }} property's handling of cases in which the box overflows on both sides while the `text-overflow` property is set to overflow on only one [has been corrected](/en-US/docs/Web/CSS/text-overflow#gecko_notes). diff --git a/files/en-us/mozilla/firefox/releases/100/index.md b/files/en-us/mozilla/firefox/releases/100/index.md index d18b1a8753f86fb..ab4e69443819ec9 100644 --- a/files/en-us/mozilla/firefox/releases/100/index.md +++ b/files/en-us/mozilla/firefox/releases/100/index.md @@ -34,7 +34,7 @@ No notable changes. #### DOM -- Code can now use the static method [`AbortSignal.timeout()`](/en-US/docs/Web/API/AbortSignal/timeout). +- Code can now use the static method [`AbortSignal.timeout()`](/en-US/docs/Web/API/AbortSignal/timeout_static). This returns an {{domxref("AbortSignal")}} that can be used to automatically abort an operation with `TimeoutError` after a specified time ([Firefox bug 1753309](https://bugzil.la/1753309)). ### WebAssembly diff --git a/files/en-us/mozilla/firefox/releases/101/index.md b/files/en-us/mozilla/firefox/releases/101/index.md index 74214338955fee3..f8c26b09eb1a904 100644 --- a/files/en-us/mozilla/firefox/releases/101/index.md +++ b/files/en-us/mozilla/firefox/releases/101/index.md @@ -44,7 +44,7 @@ No notable changes. #### Media, WebRTC, and Web Audio - [AV1 codec parameters](/en-US/docs/Web/Media/Formats/codecs_parameter#av1) are now properly parsed in media support queries. - This means that [`MediaCapabilities.decodingInfo()`](/en-US/docs/Web/API/MediaCapabilities/decodingInfo), [`HTMLMediaElement.canPlayType()`](/en-US/docs/Web/API/HTMLMediaElement/canPlayType), and [`MediaSource.isTypeSupported()`](/en-US/docs/Web/API/MediaSource/isTypeSupported) will now accurately report support for playback for AV1 sources based on the provided codec parameters. + This means that [`MediaCapabilities.decodingInfo()`](/en-US/docs/Web/API/MediaCapabilities/decodingInfo), [`HTMLMediaElement.canPlayType()`](/en-US/docs/Web/API/HTMLMediaElement/canPlayType), and [`MediaSource.isTypeSupported()`](/en-US/docs/Web/API/MediaSource/isTypeSupported_static) will now accurately report support for playback for AV1 sources based on the provided codec parameters. [`MediaCapabilities.decodingInfo()`](/en-US/docs/Web/API/MediaCapabilities/decodingInfo) will also use the information to accurately report on "efficient decoding" of AV1 videos. For more information, see [Firefox bug 1757861](https://bugzil.la/1757861). diff --git a/files/en-us/mozilla/firefox/releases/104/index.md b/files/en-us/mozilla/firefox/releases/104/index.md index 396ca7604ef36d4..19c6dc2c38594af 100644 --- a/files/en-us/mozilla/firefox/releases/104/index.md +++ b/files/en-us/mozilla/firefox/releases/104/index.md @@ -24,7 +24,7 @@ No notable changes. These are used to find the value and index (respectively) of the last element in an {{jsxref("Array")}} or {{jsxref("TypedArray")}} that matches a supplied test function. (See [Firefox bug 1775026](https://bugzil.la/1775026) for more details.) -- Serialization of [native Error types](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types) additionally includes the [`stack`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack) property when used with [`window.postMessage()`](/en-US/docs/Web/API/Window/postMessage) and [`structuredClone()`](/en-US/docs/Web/API/structuredClone) (on error types that include `stack`). +- Serialization of [native Error types](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types) additionally includes the [`stack`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack) property when used with [`window.postMessage()`](/en-US/docs/Web/API/Window/postMessage) and [`structuredClone()`](/en-US/docs/Web/API/structuredClone) (on error types that include `stack`). The `stack` is not yet serialized when errors are sent using other APIs, such as [`Worker.postMessage()`](/en-US/docs/Web/API/Worker/postMessage) (See [Firefox bug 1774866](https://bugzil.la/1774866) for more details.) diff --git a/files/en-us/mozilla/firefox/releases/107/index.md b/files/en-us/mozilla/firefox/releases/107/index.md index 1c1d3e59de21167..d4b253adb734501 100644 --- a/files/en-us/mozilla/firefox/releases/107/index.md +++ b/files/en-us/mozilla/firefox/releases/107/index.md @@ -21,9 +21,9 @@ No notable changes ### CSS -- The [`contain-intrinsic-size`](/en-US/docs/Web/CSS/contain-intrinsic-size) shorthand CSS property can now be applied to specify the size of a UI element that is subject to [size containment](/en-US/docs/Web/CSS/CSS_Containment#size_containment). +- The [`contain-intrinsic-size`](/en-US/docs/Web/CSS/contain-intrinsic-size) shorthand CSS property can now be applied to specify the size of a UI element that is subject to [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment). This allows a user agent to determine the size of an element without needing to render its child elements. - The shorthand properties [`contain-intrinsic-width`](/en-US/docs/Web/CSS/contain-intrinsic-width) and [`contain-intrinsic-height`](/en-US/docs/Web/CSS/contain-intrinsic-height) are also supported, along with the [logical properties](/en-US/docs/Web/CSS/CSS_Logical_Properties) [`contain-intrinsic-block-size`](/en-US/docs/Web/CSS/contain-intrinsic-block-size) and [`contain-intrinsic-inline-size`](/en-US/docs/Web/CSS/contain-intrinsic-inline-size). + The shorthand properties [`contain-intrinsic-width`](/en-US/docs/Web/CSS/contain-intrinsic-width) and [`contain-intrinsic-height`](/en-US/docs/Web/CSS/contain-intrinsic-height) are also supported, along with the [logical properties](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) [`contain-intrinsic-block-size`](/en-US/docs/Web/CSS/contain-intrinsic-block-size) and [`contain-intrinsic-inline-size`](/en-US/docs/Web/CSS/contain-intrinsic-inline-size). ([Firefox bug 1597529](https://bugzil.la/1597529)). - Color font is now supported via the [font-palette](/en-US/docs/Web/CSS/font-palette) property ([Firefox bug 1791558](https://bugzil.la/1791558)). Support has also been added for the [@font-palette-values](/en-US/docs/Web/CSS/@font-palette-values) CSS at-rule and its descriptors [font-family](/en-US/docs/Web/CSS/@font-palette-values/font-family), [base-palette](/en-US/docs/Web/CSS/@font-palette-values/base-palette), and [override-colors](/en-US/docs/Web/CSS/@font-palette-values/override-colors). Together they help to define the color palette ([Firefox bug 1791558](https://bugzil.la/1791558)). diff --git a/files/en-us/mozilla/firefox/releases/108/index.md b/files/en-us/mozilla/firefox/releases/108/index.md index 1d6e1b30a7ec966..7507c52d98dbb61 100644 --- a/files/en-us/mozilla/firefox/releases/108/index.md +++ b/files/en-us/mozilla/firefox/releases/108/index.md @@ -22,7 +22,7 @@ This article provides information about the changes in Firefox 108 that will aff - CSS [``](/en-US/docs/Web/CSS/calc-constant) type is implemented to allow for well-known constants such as `pi` and `e` within [math functions](/en-US/docs/Web/CSS/CSS_Functions#math_functions) ([Firefox bug 1682444](https://bugzil.la/1682444), [Firefox bug 1787070](https://bugzil.la/1787070)). - Container query length units are now supported via the `layout.css.container-queries.enabled` preference, which is set to `false` by default. Setting this preference to `true` allows the use of `cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, and `cqmax` units of length which are relative to the size of a query container. - For more information on these units, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units) documentation ([Firefox bug 1744231](https://bugzil.la/1744231)). + For more information on these units, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_container_queries#container_query_length_units) documentation ([Firefox bug 1744231](https://bugzil.la/1744231)). - The [`font-variant-emoji`](/en-US/docs/Web/CSS/font-variant-emoji) property is now supported via the `layout.css.font-variant-emoji.enabled` preference, which is set to `false` by default. This property allows you to set a default presentation style for displaying emojis ([Firefox bug 1461589](https://bugzil.la/1461589)). ### JavaScript diff --git a/files/en-us/mozilla/firefox/releases/109/index.md b/files/en-us/mozilla/firefox/releases/109/index.md index f27ab7ceabba830..19ad1073b13573a 100644 --- a/files/en-us/mozilla/firefox/releases/109/index.md +++ b/files/en-us/mozilla/firefox/releases/109/index.md @@ -69,9 +69,9 @@ No notable changes. - The {{WebExtAPIRef("action")}} API, and [`"action"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action) manifest key and [`_execute_action` special shortcut](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands#special_shortcuts) in the manifest `commands` key. - The [`"host_permissions"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/host_permissions) manifest key. -- The default [Content Security Policy (CSP)](/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) for Manifest V3 extensions has been updated to [include `upgrade-insecure-requests`](/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy#upgrade_insecure_network_requests_in_manifest_v3). This means that, by default, all network requests are upgraded to use `https:`. Extensions that need to use `http:` can do so by overriding the default CSP using the [`content_security_policy`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy) manifest.json key ([Firefox bug 1797086](https://bugzil.la/1797086)). +- The default [Content Security Policy (CSP)](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) for Manifest V3 extensions has been updated to [include `upgrade-insecure-requests`](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy#upgrade_insecure_network_requests_in_manifest_v3). This means that, by default, all network requests are upgraded to use `https:`. Extensions that need to use `http:` can do so by overriding the default CSP using the [`content_security_policy`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy) manifest.json key ([Firefox bug 1797086](https://bugzil.la/1797086)). - The property `secretKeyLength` has been added to {{WebExtAPIRef("webRequest.SecurityInfo")}}. This property provides the length in bits of the secret key in the security properties of a web request ([Firefox bug 1778473](https://bugzil.la/1778473)). -- With the introduction of the [extensions button](https://support.mozilla.org/kb/unified-extensions), the default value of `default_area` in the [`action`](/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action) and [`browser_action`](/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) manifest keys has changed from `"navbar"` to `"menupanel"` ([Firefox bug 1799947](https://bugzil.la/1799947)). +- With the introduction of the [extensions button](https://support.mozilla.org/kb/unified-extensions), the default value of `default_area` in the [`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action) and [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) manifest keys has changed from `"navbar"` to `"menupanel"` ([Firefox bug 1799947](https://bugzil.la/1799947)). - Support for {{WebExtAPIRef("omnibox.onDeleteSuggestion")}} and the `deletable` property in {{WebExtAPIRef("omnibox.SuggestResult")}}, enabling extensions to react to a user deleting an address bar search result ([Firefox bug 1799947](https://bugzil.la/1799947)). ## Older versions diff --git a/files/en-us/mozilla/firefox/releases/110/index.md b/files/en-us/mozilla/firefox/releases/110/index.md index 07886797c88260f..271f06172c1b745 100644 --- a/files/en-us/mozilla/firefox/releases/110/index.md +++ b/files/en-us/mozilla/firefox/releases/110/index.md @@ -17,14 +17,14 @@ No notable changes. ### CSS - Container queries and container query length units are now supported by default. - For more information on these queries and the related units of length, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units) documentation ([Firefox bug 1809720](https://bugzil.la/1809720)). + For more information on these queries and the related units of length, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_container_queries#container_query_length_units) documentation ([Firefox bug 1809720](https://bugzil.la/1809720)). - The [color-gamut media query](/en-US/docs/Web/CSS/@media/color-gamut) is now supported ([Firefox bug 1422237](https://bugzil.la/1422237)). - The [`list`](/en-US/docs/Web/HTML/Element/datalist#color_type) attribute is supported in `` elements with `type="color"` on Windows and Linux ([Firefox bug 960984](https://bugzil.la/960984)). - The [`@page`](/en-US/docs/Web/CSS/@page) at-rule now supports named pages, which allows a user to create page breaks for specific selectors using the [`page`](/en-US/docs/Web/CSS/page) property ([Firefox bug 1787947](https://bugzil.la/1787947)) ### JavaScript -- Serialization of [native Error types](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types) now includes the [`stack`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack) property in workers when using [`Worker.postMessage()`](/en-US/docs/Web/API/Worker/postMessage) and [`structuredClone()`](/en-US/docs/Web/API/structuredClone). +- Serialization of [native Error types](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types) now includes the [`stack`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack) property in workers when using [`Worker.postMessage()`](/en-US/docs/Web/API/Worker/postMessage) and [`structuredClone()`](/en-US/docs/Web/API/structuredClone). With this addition, cloning native error stacks now works for all methods that use the [structured clone algorithm](/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm), in both the main thread and workers. (See [Firefox bug 1774866](https://bugzil.la/1774866) for more details.) diff --git a/files/en-us/mozilla/firefox/releases/113/index.md b/files/en-us/mozilla/firefox/releases/113/index.md index df1bc81a5690a7a..1fc7c342fc47b3f 100644 --- a/files/en-us/mozilla/firefox/releases/113/index.md +++ b/files/en-us/mozilla/firefox/releases/113/index.md @@ -40,7 +40,7 @@ No notable changes. #### Media, WebRTC, and Web Audio - The [AV1 video codec](/en-US/docs/Web/Media/Formats/Video_codecs#av1) is now enabled on Android. Hardware accelerated decoding is used if supported by the device ([Firefox bug 1672276](https://bugzil.la/1672276)). -- The following WebRTC methods, properties, and dictionaries are now supported: [`RTCRtpSender.getCapabilities()`](/en-US/docs/Web/API/RTCRtpSender/getCapabilities), [`RTCRtpReceiver.getCapabilities()`](/en-US/docs/Web/API/RTCRtpReceiver/getCapabilities), [`RTCRtpSender.setStreams()`](/en-US/docs/Web/API/RTCRtpSender/setStreams), [`RTCSctpTransport`](/en-US/docs/Web/API/RTCSctpTransport) & [`RTCPeerConnection.sctp`](/en-US/docs/Web/API/RTCPeerConnection/sctp), [`RTCMediaSourceStats`](/en-US/docs/Web/API/RTCMediaSourceStats), [`RTCPeerConnection.connectionState`](/en-US/docs/Web/API/RTCPeerConnection/connectionState), and [`RTCPeerConnectionStats`](/en-US/docs/Web/API/RTCPeerConnectionStats). +- The following WebRTC methods, properties, and dictionaries are now supported: [`RTCRtpSender.getCapabilities()`](/en-US/docs/Web/API/RTCRtpSender/getCapabilities_static), [`RTCRtpReceiver.getCapabilities()`](/en-US/docs/Web/API/RTCRtpReceiver/getCapabilities_static), [`RTCRtpSender.setStreams()`](/en-US/docs/Web/API/RTCRtpSender/setStreams), [`RTCSctpTransport`](/en-US/docs/Web/API/RTCSctpTransport) & [`RTCPeerConnection.sctp`](/en-US/docs/Web/API/RTCPeerConnection/sctp), [`RTCMediaSourceStats`](/en-US/docs/Web/API/RTCMediaSourceStats), [`RTCPeerConnection.connectionState`](/en-US/docs/Web/API/RTCPeerConnection/connectionState), and [`RTCPeerConnectionStats`](/en-US/docs/Web/API/RTCPeerConnectionStats). The corresponding bug reports are, respectively: [Firefox bug 1531460](https://bugzil.la/1531460), [Firefox bug 1531461](https://bugzil.la/1531461), [Firefox bug 1510802](https://bugzil.la/1510802), [Firefox bug 1278299](https://bugzil.la/1278299), [Firefox bug 1804678](https://bugzil.la/1804678), [Firefox bug 1265827](https://bugzil.la/1265827), and [Firefox bug 1531087](https://bugzil.la/1531087). #### Removals diff --git a/files/en-us/mozilla/firefox/releases/114/index.md b/files/en-us/mozilla/firefox/releases/114/index.md index f5a33308efe2cc0..4e8ea98a1856c90 100644 --- a/files/en-us/mozilla/firefox/releases/114/index.md +++ b/files/en-us/mozilla/firefox/releases/114/index.md @@ -12,7 +12,7 @@ This article provides information about the changes in Firefox 114 that affect d ### Developer Tools -- Fixed an issue where the [Accessibility Inspector](/en-US/docs/Tools/Accessibility_inspector) did not correctly show ARIA roles on elements, which affected how [landmark roles](/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) were displayed. +- Fixed an issue where the [Accessibility Inspector](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html) did not correctly show ARIA roles on elements, which affected how [landmark roles](/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) were displayed. Roles that cannot be mapped to ARIA use a Gecko internal role name ([Firefox bug 1572512](https://bugzil.la/1572512)). ### HTML @@ -23,7 +23,7 @@ No notable changes. - The [`:lang()`](/en-US/docs/Web/CSS/:lang) pseudo-class now uses string-matching semantics (including `*` wildcards) for matching language codes rather than prefix-matching semantics. Additionally, comma-separated lists of languages are now supported for matching multiple languages ([Firefox bug 1121792](https://bugzil.la/1121792)). -- The [-webkit-text-security](/en-US/Web/CSS/-webkit-text-security) property that lets you replace characters with shapes is now supported. You can now control the rendering of text security using this property ([Firefox bug 1826629](https://bugzil.la/1826629)). +- The [-webkit-text-security](/en-US/docs/Web/CSS/-webkit-text-security) property that lets you replace characters with shapes is now supported. You can now control the rendering of text security using this property ([Firefox bug 1826629](https://bugzil.la/1826629)). - The `infinity` and `NaN` constants are now supported inside the [`calc()`](/en-US/docs/Web/CSS/calc) function ([Firefox bug 1830759](https://bugzil.la/1830759)). ### JavaScript diff --git a/files/en-us/mozilla/firefox/releases/116/index.md b/files/en-us/mozilla/firefox/releases/116/index.md index c9c1da94ab98a1a..fa3f6e404cf67db 100644 --- a/files/en-us/mozilla/firefox/releases/116/index.md +++ b/files/en-us/mozilla/firefox/releases/116/index.md @@ -14,6 +14,9 @@ This article provides information about the changes in Firefox 116 that affect d ### HTML +- The [`dirname`](/en-US/docs/Web/HTML/Element/input#dirname) attribute is now supported on [`input`](/en-US/docs/Web/HTML/Element/input#dirname) and [`textarea`](/en-US/docs/Web/HTML/Element/textarea#dirname) elements. + This attribute allows for passing text directionality information (`ltr` or `rtl`) to the server during form submission ([Firefox bug 675943](https://bugzil.la/675943)). + #### Removals ### CSS @@ -45,6 +48,9 @@ This article provides information about the changes in Firefox 116 that affect d ### APIs +- The {{domxref("TextMetrics.fontBoundingBoxAscent")}} and {{domxref("TextMetrics.fontBoundingBoxDescent")}} properties are now supported. + These metrics return, respectively, the distance above and below the {{domxref("CanvasRenderingContext2D.textBaseline")}} to the bounding rectangle of all the fonts used to render the text ([Firefox bug 1801198](https://bugzil.la/1801198)). + #### DOM #### Media, WebRTC, and Web Audio diff --git a/files/en-us/mozilla/firefox/releases/12/index.md b/files/en-us/mozilla/firefox/releases/12/index.md index cf585d1510478eb..5f37e44597006ca 100644 --- a/files/en-us/mozilla/firefox/releases/12/index.md +++ b/files/en-us/mozilla/firefox/releases/12/index.md @@ -36,7 +36,7 @@ Firefox 12 was shipped on April 24, 2012. This page summarizes the changes in Fi - {{domxref("DOMError")}} as defined in the DOM 4 specification has been implemented. - The {{domxref("Document.createNodeIterator()")}} method has been updated to match the DOM4 specification. This makes the `whatToShow` and `filter` parameters optional and removes the non-standard fourth parameter, `entityReferenceExpansion`. - The {{domxref("Blob")}} interface's `slice()` method was affected by a bug that prevented it from properly accepting `start` and `end` values outside the range of a signed 64-bit integer; this has been fixed. -- The {{domxref("element.getBoundingClientRect()")}} method now considers effect of [CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) when computing the element's bounding rectangle. +- The {{domxref("element.getBoundingClientRect()")}} method now considers effect of [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) when computing the element's bounding rectangle. - The `crossOrigin` property is now supported by {{domxref("HTMLMediaElement")}}. #### New WebAPIs diff --git a/files/en-us/mozilla/firefox/releases/15/index.md b/files/en-us/mozilla/firefox/releases/15/index.md index beceffc5ef4cdb1..326f3d53049e07a 100644 --- a/files/en-us/mozilla/firefox/releases/15/index.md +++ b/files/en-us/mozilla/firefox/releases/15/index.md @@ -59,7 +59,7 @@ Firefox 15 shipped on August 28, 2012. This article lists key changes that are u - Mathematical operators can now use downloadable fonts specified with {{cssxref("@font-face")}}. This makes the [MathML-fonts add-on](https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/) work with stretchy operators too. - The `selection` attribute of the {{MathMLElement("maction")}} is now only taken into account with the `toggle` actiontype. - [Deprecated namedspace binding](https://www.w3.org/TR/MathML3/chapter3.html#id.3.3.4.2.1) has been removed ([Firefox bug 673759](https://bugzil.la/673759)). -- Supported syntax for [Length](/en-US/docs/Web/MathML/Attribute/Values) and {{MathMLElement("mpadded")}} values have been made closer to the one specified in MathML3 spec. +- Supported syntax for [Length](/en-US/docs/Web/MathML/Values) and {{MathMLElement("mpadded")}} values have been made closer to the one specified in MathML3 spec. - New MathML mirrorable operators for Arabic math have been added to the operator dictionary ([Firefox bug 757125](https://bugzil.la/757125)). ### SVG diff --git a/files/en-us/mozilla/firefox/releases/16/index.md b/files/en-us/mozilla/firefox/releases/16/index.md index 5ef4bb13097e1f9..f91627c2f66532c 100644 --- a/files/en-us/mozilla/firefox/releases/16/index.md +++ b/files/en-us/mozilla/firefox/releases/16/index.md @@ -20,12 +20,12 @@ Firefox 16 shipped on October 9, 2012. This article lists key changes that are u ### CSS -- Support for the standard, unprefixed version of [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) has been landed ([bug 762302](https://bugzil.la/762302)). +- Support for the standard, unprefixed version of [CSS Animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) has been landed ([bug 762302](https://bugzil.la/762302)). - Support for reverse animation direction (keywords `reverse` and `alternate-reverse` on the {{cssxref("animation-direction")}} property) has been added. ([bug 655920](https://bugzil.la/655920)). - You can now animate the CSS {{cssxref("height")}} and {{cssxref("width")}} properties. - The {{cssxref("animation-duration")}} and {{cssxref("transition-duration")}} CSS properties now reject negative values (and do not handle them as `0s` anymore) ([bug 773102](https://bugzil.la/773102)). -- Support for the standard, unprefixed version of [CSS Transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) has been landed ([bug 745523](https://bugzil.la/745523)). {{cssxref("<length>")}} cannot be used for translation values in `matrix()` and `matrix3d()` anymore ([Firefox bug 719054](https://bugzil.la/719054)). -- Support for the standard, unprefixed version of [CSS Gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) has been landed. Note that the syntax has changed significantly since the prefixed version, so you should read up on this ([bug 752187](https://bugzil.la/752187)). +- Support for the standard, unprefixed version of [CSS Transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) has been landed ([bug 745523](https://bugzil.la/745523)). {{cssxref("<length>")}} cannot be used for translation values in `matrix()` and `matrix3d()` anymore ([Firefox bug 719054](https://bugzil.la/719054)). +- Support for the standard, unprefixed version of [CSS Gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) has been landed. Note that the syntax has changed significantly since the prefixed version, so you should read up on this ([bug 752187](https://bugzil.la/752187)). - The {{cssxref("box-sizing", "-moz-box-sizing")}} implementation has been updated to apply to table cells too ([bug 338554](https://bugzil.la/338554)). - Support for the standard, unprefixed version of {{cssxref("calc", "calc()")}} has been landed ([bug 771678](https://bugzil.la/771678)). - The {{cssxref("<resolution>")}} CSS data type has been extended to support the `dppx` ([bug 741644](https://bugzil.la/741644)). diff --git a/files/en-us/mozilla/firefox/releases/18/index.md b/files/en-us/mozilla/firefox/releases/18/index.md index 8163c9890a0c54f..a0213c02f531840 100644 --- a/files/en-us/mozilla/firefox/releases/18/index.md +++ b/files/en-us/mozilla/firefox/releases/18/index.md @@ -19,7 +19,7 @@ Firefox 18 was released on January 8, 2013. This article lists key changes that ### CSS - The {{cssxref("min-width")}} and {{cssxref("min-height")}} now uses the `auto` keyword as _initial value_ (This has an effect only on flex items as it resolves to `0`, the previous initial value, for other items). ([Firefox bug 763689](https://bugzil.la/763689)) -- The cascade has been updated: now author `!important` rules override [CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations). ([Firefox bug 783714](https://bugzil.la/783714)) +- The cascade has been updated: now author `!important` rules override [CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations). ([Firefox bug 783714](https://bugzil.la/783714)) - The {{cssxref("background")}} shorthand property now recognizes CSS3 {{cssxref("background-size")}} property specified inside. ([Firefox bug 570326](https://bugzil.la/570326)) - Initial support for the CSS Flexbox Module has been landed. It is disabled by default but can be enabled by setting `layout.css.flexbox.enabled` to true ([Firefox bug 666041](https://bugzil.la/666041)). diff --git a/files/en-us/mozilla/firefox/releases/20/index.md b/files/en-us/mozilla/firefox/releases/20/index.md index 4a2075ebf42d797..fe58cf008e55616 100644 --- a/files/en-us/mozilla/firefox/releases/20/index.md +++ b/files/en-us/mozilla/firefox/releases/20/index.md @@ -26,7 +26,7 @@ Firefox 20 was released on April, 2nd 2013. This article provides information ab ### CSS -- [CSS Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) is now available by default in pre-release builds only (excluding beta versions). It can be enabled in release and beta version by setting the `layout.css.flexbox.enabled` about:config preference to `true`. +- [CSS Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) is now available by default in pre-release builds only (excluding beta versions). It can be enabled in release and beta version by setting the `layout.css.flexbox.enabled` about:config preference to `true`. - The `mask-type` property from the [CSS Masking specification](https://www.w3.org/TR/css-masking-1/#the-mask-type) has been added ([Firefox bug 793617](https://bugzil.la/793617)). - Experimental support for the {{cssxref(":scope")}} pseudo-class has been added. Enabled by default in Aurora and Nightly, it can be enabled in release and beta version by setting the `layout.css.scope-pseudo.enabled` about:config preference to `true` ([Firefox bug 648722](https://bugzil.la/648722)). diff --git a/files/en-us/mozilla/firefox/releases/22/index.md b/files/en-us/mozilla/firefox/releases/22/index.md index 5bc12da26c82188..d367eab47f8b146 100644 --- a/files/en-us/mozilla/firefox/releases/22/index.md +++ b/files/en-us/mozilla/firefox/releases/22/index.md @@ -45,7 +45,7 @@ page-type: firefox-release-notes ### CSS -- Support for [CSS Flexbox layout](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) has been enabled by default ([Firefox bug 841876](https://bugzil.la/841876)). +- Support for [CSS Flexbox layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) has been enabled by default ([Firefox bug 841876](https://bugzil.la/841876)). - Following a spec change, the initial value for {{cssxref("min-width")}} and {{cssxref("min-height")}} has been changed back to `0`, even on flex items ([Firefox bug 848539](https://bugzil.la/848539)). - Support for CSS Conditionals ({{cssxref("@supports")}} and {{domxref("CSS.supports")}}) has been enabled by default ([Firefox bug 855455](https://bugzil.la/855455)). - Support for {{cssxref("background-clip")}} and {{cssxref("background-origin")}} properties in the {{cssxref("background")}} shorthand has been implemented ([Firefox bug 570896](https://bugzil.la/570896)). diff --git a/files/en-us/mozilla/firefox/releases/28/index.md b/files/en-us/mozilla/firefox/releases/28/index.md index b4e45cd652f2337..9ec1691ab22db84 100644 --- a/files/en-us/mozilla/firefox/releases/28/index.md +++ b/files/en-us/mozilla/firefox/releases/28/index.md @@ -27,7 +27,7 @@ More details in [this post](https://hacks.mozilla.org/2013/12/split-console-pret ### CSS -- Support for multi-line [flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) has been added ([Firefox bug 939901](https://bugzil.la/939901)). +- Support for multi-line [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) has been added ([Firefox bug 939901](https://bugzil.la/939901)). - Longhand East Asian [counter styles](/en-US/docs/Web/CSS/list-style-type) have been implemented ([Firefox bug 934072](https://bugzil.la/934072)). - Experimental support for the {{cssxref("background-blend-mode")}} property has been added, but is disabled by default ([Firefox bug 841601](https://bugzil.la/841601)). - The `none` value has been added to {{cssxref("font-variant-ligatures")}} ([Firefox bug 913264](https://bugzil.la/913264)). diff --git a/files/en-us/mozilla/firefox/releases/3.5/index.md b/files/en-us/mozilla/firefox/releases/3.5/index.md index 78b17f2e49f11bf..2ecb2210c29bd1c 100644 --- a/files/en-us/mozilla/firefox/releases/3.5/index.md +++ b/files/en-us/mozilla/firefox/releases/3.5/index.md @@ -1,6 +1,7 @@ --- title: Firefox 3.5 for developers slug: Mozilla/Firefox/Releases/3.5 +page-type: firefox-release-notes --- {{FirefoxSidebar}} @@ -58,7 +59,7 @@ slug: Mozilla/Firefox/Releases/3.5 - : These new CSS features were added to facilitate theming. - New values for `-moz-appearance` - : The `-moz-win-glass` and `-moz-mac-unified-toolbar` values have been added to `-moz-appearance`. -- [Using CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- [Using CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) - : Firefox 3.5 supports CSS transforms. See {{ cssxref("transform", "-moz-transform") }} and {{ cssxref("transform-origin", "-moz-transform-origin") }} for details. - {{ cssxref(":nth-child") }} @@ -104,7 +105,7 @@ slug: Mozilla/Firefox/Releases/3.5 - Using native JSON - : Firefox 3.5 has native support for [JSON](/en-US/docs/Glossary/JSON). - New trim methods on the String object - - : The [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) object now has [`trim()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim), [`trimLeft()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart), and [`trimRight()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd) methods. + - : The [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) object now has [`trim()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim), [`trimLeft()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart), and [`trimRight()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd) methods. #### Networking diff --git a/files/en-us/mozilla/firefox/releases/3.6/index.md b/files/en-us/mozilla/firefox/releases/3.6/index.md index 9c3a8796b83ca35..2f3d6e1e8dbe601 100644 --- a/files/en-us/mozilla/firefox/releases/3.6/index.md +++ b/files/en-us/mozilla/firefox/releases/3.6/index.md @@ -12,13 +12,13 @@ page-type: firefox-release-notes ### CSS -- [Using gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [Using gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) - : Firefox 3.6 adds support for the proposed `-moz-linear-gradient` and `-moz-radial-gradient` properties for {{Cssxref("background")}}. -- [Multiple backgrounds](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) +- [Multiple backgrounds](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) - : The {{cssxref("background")}} property (as well as {{Cssxref("background-color")}}, {{Cssxref("background-image")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, and {{Cssxref("background-attachment")}}) now supports multiple backgrounds. This lets you specify multiple backgrounds that are rendered atop one another in layers. - [Mozilla-specific media features](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#mozilla-specific_media_features) - : Media features have been added for Mozilla-specific system metrics, so that [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) can be used to more safely check on the availability of features such as touch support. -- [Scaling background images](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) +- [Scaling background images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images) - : The `background-size` property from the [CSS 3 Backgrounds and Borders draft](https://drafts.csswg.org/css-backgrounds-3/) is now supported under the name `-moz-background-size`. - [WOFF font support](/en-US/docs/Web/Guide/WOFF) - : {{cssxref("@font-face")}} now supports the WOFF downloadable font file format. diff --git a/files/en-us/mozilla/firefox/releases/30/index.md b/files/en-us/mozilla/firefox/releases/30/index.md index 2d9cd787dfee113..22abc5dc99f9cd0 100644 --- a/files/en-us/mozilla/firefox/releases/30/index.md +++ b/files/en-us/mozilla/firefox/releases/30/index.md @@ -29,7 +29,7 @@ _No change._ ### JavaScript -- New ES2015-compatible [array comprehensions](/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions) `[for (item of iterable) item]` and [generator comprehensions](/en-US/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions) `(for (item of iterable) item)` have been implemented ([Firefox bug 979865](https://bugzil.la/979865)). +- New ES2015-compatible [array comprehensions](/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features) `[for (item of iterable) item]` and [generator comprehensions](/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features) `(for (item of iterable) item)` have been implemented ([Firefox bug 979865](https://bugzil.la/979865)). - [Typed arrays](/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#property_access) are now extensible and support new named properties ([Firefox bug 695438](https://bugzil.la/695438)). - The {{jsxref("Error.prototype.stack")}} property now contains column numbers ([Firefox bug 762556](https://bugzil.la/762556)) and has been improved [when using `Function()` and `eval()` calls](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack#stack_of_evaled_code). This can help you to better debug minified or generated JavaScript code. - The `Promise.cast()` method has been renamed to {{jsxref("Promise.resolve()")}} ([Firefox bug 966348](https://bugzil.la/966348)). diff --git a/files/en-us/mozilla/firefox/releases/36/index.md b/files/en-us/mozilla/firefox/releases/36/index.md index 1d10f304bde8fa7..f6d663f6366af72 100644 --- a/files/en-us/mozilla/firefox/releases/36/index.md +++ b/files/en-us/mozilla/firefox/releases/36/index.md @@ -120,8 +120,8 @@ _No change._ #### Highlights -- The [`sdk/test/httpd`](/en-US/Add-ons/SDK/Low-Level_APIs/test_httpd) module was removed, use the [addon-httpd](https://www.npmjs.com/package/addon-httpd) npm module instead. -- Add badges to [`sdk/ui`](/en-US/Add-ons/SDK/High-Level_APIs/ui) buttons ([Firefox bug 994280](https://bugzil.la/994280)). +- The [`sdk/test/httpd`](/en-US/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/test_httpd) module was removed, use the [addon-httpd](https://www.npmjs.com/package/addon-httpd) npm module instead. +- Add badges to [`sdk/ui`](/en-US/docs/Mozilla/Add-ons/SDK/High-Level_APIs/ui) buttons ([Firefox bug 994280](https://bugzil.la/994280)). - Implemented global `require` function to access sdk modules anywhere ([Firefox bug 1070927](https://bugzil.la/1070927)), using: ```js diff --git a/files/en-us/mozilla/firefox/releases/37/index.md b/files/en-us/mozilla/firefox/releases/37/index.md index 41797ea9d45a2ec..99b2e6741e5d86f 100644 --- a/files/en-us/mozilla/firefox/releases/37/index.md +++ b/files/en-us/mozilla/firefox/releases/37/index.md @@ -23,7 +23,7 @@ Highlights: ### CSS - `display: contents` is now activated by default ([Firefox bug 1102374](https://bugzil.la/1102374) and [Firefox bug 1105369](https://bugzil.la/1105369)). -- [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) is now working on element with `display: table-caption` ([Firefox bug 1109571](https://bugzil.la/1109571)). +- [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) is now working on element with `display: table-caption` ([Firefox bug 1109571](https://bugzil.la/1109571)). - Relative positioning (`position: relative`) of table cells has been implemented ([Firefox bug 35168](https://bugzil.la/35168)). - The quirks mode behavior of {{cssxref("empty-cells")}} has been removed: it now defaults to `show` like in standard mode ([Firefox bug 1020400](https://bugzil.la/1020400)). @@ -38,7 +38,7 @@ Highlights: - The {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} and {{jsxref("WeakSet")}} constructors now supports monkey-patched `prototype.set` or `prototype.add` ([Firefox bug 804279](https://bugzil.la/804279)). - The Non-standard {{jsxref("String.quote","String.prototype.quote()")}} method has been removed ([Firefox bug 1103181](https://bugzil.la/1103181)). - The {{jsxref("RegExp.prototype.flags")}} property has been implemented ([Firefox bug 1108467](https://bugzil.la/1108467)). -- Several {{jsxref("Array")}} methods have been implemented for [typed arrays](/en-US/docs/Web/JavaScript/Typed_arrays) as well: +- Several {{jsxref("Array")}} methods have been implemented for [typed arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) as well: - The {{jsxref("TypedArray.every", "every()")}} and {{jsxref("TypedArray.some", "some()")}} methods ([Firefox bug 1116390](https://bugzil.la/1116390)). - The {{jsxref("TypedArray.find", "find()")}} and {{jsxref("TypedArray.findIndex", "findIndex()")}} methods ([Firefox bug 1078975](https://bugzil.la/1078975)). diff --git a/files/en-us/mozilla/firefox/releases/38/index.md b/files/en-us/mozilla/firefox/releases/38/index.md index 5f8a47bbc1e570c..926773fe25cbb43 100644 --- a/files/en-us/mozilla/firefox/releases/38/index.md +++ b/files/en-us/mozilla/firefox/releases/38/index.md @@ -40,7 +40,7 @@ Highlights: - Direction-independent equivalents of {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} and {{cssxref("border-left")}} and their longhands for width, style and color: {{cssxref("border-block-start")}}, {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end")}}, {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} and {{cssxref("border-inline-end-color")}} ([Firefox bug 649142](https://bugzil.la/649142)). - Direction-independent equivalents of {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} and {{cssxref("left")}}: {{cssxref("inset-block-start")}}, `offset-block-end`, `offset-inline-start` and `offset-inline-end` ([Firefox bug 1120283](https://bugzil.la/1120283)). -- How [CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) start has been modified to match a recent change of the specifications, aiming at having an interoperable behavior between browsers ([Firefox bug 960465](https://bugzil.la/960465)). +- How [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) start has been modified to match a recent change of the specifications, aiming at having an interoperable behavior between browsers ([Firefox bug 960465](https://bugzil.la/960465)). ### HTML @@ -53,7 +53,7 @@ Highlights: - {{jsxref("Generator/return", "Generator.prototype.return()")}} is implemented ([Firefox bug 1115868](https://bugzil.la/1115868)). - {{jsxref("Functions/set", "Setter")}} with a {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} is now a {{jsxref("SyntaxError")}} ([Firefox bug 1089632](https://bugzil.la/1089632)). - The {{jsxref("Function/name", "name")}} property of functions is configurable now ([Firefox bug 1084019](https://bugzil.la/1084019)). -- Several {{jsxref("Array")}} methods have been implemented for [typed arrays](/en-US/docs/Web/JavaScript/Typed_arrays) as well: +- Several {{jsxref("Array")}} methods have been implemented for [typed arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) as well: - The {{jsxref("TypedArray.of", "of()")}} and {{jsxref("TypedArray.from", "from()")}} methods ([Firefox bug 896608](https://bugzil.la/896608)). - The {{jsxref("TypedArray.forEach", "forEach()")}} method ([Firefox bug 1107645](https://bugzil.la/1107645)). diff --git a/files/en-us/mozilla/firefox/releases/4/index.md b/files/en-us/mozilla/firefox/releases/4/index.md index 124dc1a4eda1bb7..ef1e30b0259eded 100644 --- a/files/en-us/mozilla/firefox/releases/4/index.md +++ b/files/en-us/mozilla/firefox/releases/4/index.md @@ -46,13 +46,13 @@ The following changes were made to the {{domxref("CanvasRenderingContext2D")}} i - `canvas2dcontext.globalCompositeOperation` no longer throws an exception when set to an unrecognized value, and no longer supports the non-standard `darker` value. - Support for the obsolete `` element, which was absent in all other browsers, has been removed. - The {{HTMLElement("isindex")}} element, when created by calling {{domxref("document.createElement()")}}, is now created as a simple element with no properties or methods. -- Gecko now supports calling `click()` on {{HTMLElement("input")}} elements to open the file picker. See the [example](/en-US/docs/Web/API/File/Using_files_from_web_applications#using_hidden_file_input_elements_using_the_click_method) in the article [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications). +- Gecko now supports calling `click()` on {{HTMLElement("input")}} elements to open the file picker. See the [example](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#using_hidden_file_input_elements_using_the_click_method) in the article [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications). - The {{HTMLElement("input")}} element supports a new `mozactionhint` attribute, which lets you specify the label for the enter key on virtual keyboards. - {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}}, and {{HTMLElement("noframes")}} elements now get executed, which they weren't in previous versions of Firefox. This is in compliance with the specification, and matches the behavior of other browsers. ### CSS -- [CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) - : New CSS transitions support is available in Firefox 4. - Computed values in CSS - : Support for `-moz-calc` has been added. This lets you specify `{{cssxref("<length>")}}` values as mathematical expressions. @@ -247,7 +247,7 @@ The following changes were made to the {{domxref("CanvasRenderingContext2D")}} i ### DOM -- [JavaScript typed arrays](/en-US/docs/Web/JavaScript/Typed_arrays) +- [JavaScript typed arrays](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) - : Support has been added for JavaScript typed arrays; this allows you to manipulate buffers containing raw data using native data types. Several APIs make use of this, including the [File API](/en-US/docs/Web/API/File), [WebGL](/en-US/docs/Web/API/WebGL_API), and [WebSockets](/en-US/docs/Web/API/WebSockets_API). - Obtaining boundary rectangles for ranges - : The {{domxref("Range")}} object now has {{domxref("range.getClientRects()")}} and {{domxref("range.getBoundingClientRect()")}} methods. diff --git a/files/en-us/mozilla/firefox/releases/44/index.md b/files/en-us/mozilla/firefox/releases/44/index.md index 134c5bcce02212c..ca813c32ab2e952 100644 --- a/files/en-us/mozilla/firefox/releases/44/index.md +++ b/files/en-us/mozilla/firefox/releases/44/index.md @@ -84,7 +84,7 @@ Highlights: #### Changes - The [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) and [`const`](/en-US/docs/Web/JavaScript/Reference/Statements/const) bindings in the global level have been made compliant with ES2015 semantics. See [Firefox bug 589199](https://bugzil.la/589199) and the blog post ["Breaking changes in let and const in Firefox Nightly 44"](https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/). In addition, `let` is now available to default Web JavaScript (strict and non-strict) and does not require a version opt-in anymore ([Firefox bug 932517](https://bugzil.la/932517)). -- If [typed arrays'](/en-US/docs/Web/JavaScript/Typed_arrays) (like {{jsxref("Int8Array", "Int8Array")}}) and {{jsxref("ArrayBuffer", "ArrayBuffer")}}) constructors are called as a function without the {{jsxref("Operators/new", "new")}} operator, a {{jsxref("TypeError")}} is now thrown as per the ES2015 specification ([Firefox bug 980945](https://bugzil.la/980945), [Firefox bug 1214936](https://bugzil.la/1214936)). +- If [typed arrays'](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) (like {{jsxref("Int8Array", "Int8Array")}}) and {{jsxref("ArrayBuffer", "ArrayBuffer")}}) constructors are called as a function without the {{jsxref("Operators/new", "new")}} operator, a {{jsxref("TypeError")}} is now thrown as per the ES2015 specification ([Firefox bug 980945](https://bugzil.la/980945), [Firefox bug 1214936](https://bugzil.la/1214936)). - The {{jsxref("RegExp")}} sticky flag now follows the ES2015 standard for [anchored sticky regular expressions](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky#anchored_sticky_flag) ([Firefox bug 773687](https://bugzil.la/773687)). - The JavaScript shell (SpiderMonkey's REPL) now defaults to the default, Web-compatible JS version (and not JS1.7+ anymore) ([Firefox bug 1192329](https://bugzil.la/1192329)). diff --git a/files/en-us/mozilla/firefox/releases/46/index.md b/files/en-us/mozilla/firefox/releases/46/index.md index d7a9cd1208fd855..35cb55f0d3d6953 100644 --- a/files/en-us/mozilla/firefox/releases/46/index.md +++ b/files/en-us/mozilla/firefox/releases/46/index.md @@ -60,7 +60,7 @@ Highlights: - The deprecated {{domxref("Window.showModalDialog()")}} method is no more available when Firefox runs in multi-process mode (e10s) ([Firefox bug 1234700](https://bugzil.la/1234700)). - Added support for {{domxref("Document.elementsFromPoint()")}} ([Firefox bug 1164427](https://bugzil.la/1164427)). -- When a non-existent option of a {{HTMLElement("select")}} element is programmatically selected, instead of being incorrectly left unchanged, the [`selectedIndex`](/en-US/docs/Web/HTML/Element/select#selectedIndex) value is now set to `-1`, the [`selectedOptions`](/en-US/docs/Web/HTML/Element/select#selectedOptions) to an empty {{domxref("HTMLCollection")}}, and [`value`](/en-US/docs/Web/HTML/Element/select#value) to an empty string ([Firefox bug 1203668](https://bugzil.la/1203668)). +- When a non-existent option of a {{HTMLElement("select")}} element is programmatically selected, instead of being incorrectly left unchanged, the [`selectedIndex`](/en-US/docs/Web/HTML/Element/select#selectedindex) value is now set to `-1`, the [`selectedOptions`](/en-US/docs/Web/HTML/Element/select#selectedoptions) to an empty {{domxref("HTMLCollection")}}, and [`value`](/en-US/docs/Web/HTML/Element/select#value) to an empty string ([Firefox bug 1203668](https://bugzil.la/1203668)). #### Canvas diff --git a/files/en-us/mozilla/firefox/releases/48/index.md b/files/en-us/mozilla/firefox/releases/48/index.md index 0e2f33059ceb00e..5754ee0ef1881ac 100644 --- a/files/en-us/mozilla/firefox/releases/48/index.md +++ b/files/en-us/mozilla/firefox/releases/48/index.md @@ -56,7 +56,7 @@ page-type: firefox-release-notes - `-webkit-box-direction`, `-webkit-box-orient` ([Firefox bug 1262049](https://bugzil.la/1262049). - The value `-webkit-inline-box` is now an alias of `inline-flex` on the {{cssxref("display")}} property. ([Firefox bug 1257661](https://bugzil.la/1257661)). - `-webkit-flex-direction`, `-webkit-flex-wrap`, `-webkit-flex-flow`, `-webkit-order`, `-webkit-flex`, `-webkit-flex-grow`, `-webkit-flex-shrink`, `-webkit-flex-basis`, `-webkit-justify-content`, `-webkit-align-items`, `-webkit-align-self` and `-webkit-align-content` were added as aliases for the unprefixed properties and the values `-webkit-flex` and `-webkit-inline-flex` for the {{cssxref("display")}} property as aliases for the unprefixed values ([Firefox bug 1274096](https://bugzil.la/1274096)). - - Added `-webkit-box-flex`, `-webkit-box-ordinal-group`, `-webkit-box-align` and `-webkit-box-pack` properties and `-webkit-box` value to {{cssxref("display")}} as aliases for modern [CSS Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox) ([Firefox bug 1208635](https://bugzil.la/1208635)). + - Added `-webkit-box-flex`, `-webkit-box-ordinal-group`, `-webkit-box-align` and `-webkit-box-pack` properties and `-webkit-box` value to {{cssxref("display")}} as aliases for modern [CSS Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) ([Firefox bug 1208635](https://bugzil.la/1208635)). - The `text` value of {{cssxref("background-clip")}} is now available in all type of Firefox (and not only non-release builds) ([Firefox bug 1263516](https://bugzil.la/1263516)). - The `absolute` value of {{cssxref("position")}} properties on the top layer element ([Firefox bug 1236828](https://bugzil.la/1236828)). diff --git a/files/en-us/mozilla/firefox/releases/49/index.md b/files/en-us/mozilla/firefox/releases/49/index.md index 8f3d206e9976ce2..788b3e91377a753 100644 --- a/files/en-us/mozilla/firefox/releases/49/index.md +++ b/files/en-us/mozilla/firefox/releases/49/index.md @@ -52,13 +52,13 @@ page-type: firefox-release-notes - Added the [`q` length unit](/en-US/docs/Web/CSS/length#q) ([Firefox bug 1274526](https://bugzil.la/1274526)). - The property {{cssxref("text-align-last")}} has been unprefixed ([Firefox bug 1039541](https://bugzil.la/1039541)). - Added support for {{cssxref("overflow-wrap")}}, replacing `word-wrap` that is still supported as an alternative name ([Firefox bug 955857](https://bugzil.la/955857)). -- Our experimental [CSS Grids](/en-US/docs/Web/CSS/CSS_Grid_Layout) implementation has been improved: +- Our experimental [CSS Grids](/en-US/docs/Web/CSS/CSS_grid_layout) implementation has been improved: - Implemented {{cssxref("<percentage>")}} for the `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties ([Firefox bug 1266268](https://bugzil.la/1266268)). - Implemented grid layout support for {{cssxref("align")}}, {{cssxref("justify-self")}}`:baseline` and `last-baseline` (aka "baseline self-alignment") ([Firefox bug 1221525](https://bugzil.la/1221525)). - Implemented grid item baseline content alignment ([Firefox bug 1256429](https://bugzil.la/1256429)). -- Our experimental [CSS Masks](/en-US/docs/Web/CSS/CSS_Masking) implementation has been improved: +- Our experimental [CSS Masks](/en-US/docs/Web/CSS/CSS_masking) implementation has been improved: - The {{cssxref("mask-origin")}} property now uses `border-box` instead of `padding-box` as initial value, to match the spec ([Firefox bug 1258286](https://bugzil.la/1258286)). - The {{cssxref("mask-repeat")}} property now supports the `space` and `round` values ([Firefox bug 1258626](https://bugzil.la/1258626)). diff --git a/files/en-us/mozilla/firefox/releases/5/index.md b/files/en-us/mozilla/firefox/releases/5/index.md index 43647ae078fcac4..62955134416ad05 100644 --- a/files/en-us/mozilla/firefox/releases/5/index.md +++ b/files/en-us/mozilla/firefox/releases/5/index.md @@ -36,7 +36,7 @@ Firefox 5, based on Gecko 5.0, was released on June 21, 2011. This article provi ### CSS -- [CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) - : Support for CSS animations has been added, using the `-moz-` prefix for now. ### DOM @@ -125,7 +125,7 @@ The following interfaces were implementation details that are no longer needed: ### Build system changes -- You can now build Firefox without a `mozconfig` file; the [`--enable-application` setting](/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options#choose_an_application) now defaults to "browser". After pulling or downloading the code, you can `configure && make` (or `make -f client.mk`) to build Firefox. +- You can now build Firefox without a `mozconfig` file; the [`--enable-application` setting](https://firefox-source-docs.mozilla.org/setup/configuring_build_options.html#choose_an_application) now defaults to "browser". After pulling or downloading the code, you can `configure && make` (or `make -f client.mk`) to build Firefox. ## See also diff --git a/files/en-us/mozilla/firefox/releases/51/index.md b/files/en-us/mozilla/firefox/releases/51/index.md index 22a614c47ccc1d4..db1e1353e482149 100644 --- a/files/en-us/mozilla/firefox/releases/51/index.md +++ b/files/en-us/mozilla/firefox/releases/51/index.md @@ -34,7 +34,7 @@ page-type: firefox-release-notes - Using {{jsxref("Statements/const", "const")}} in [`for...of`](/en-US/docs/Web/JavaScript/Reference/Statements/for...of) loops now has a fresh binding for each iteration and no longer throws a {{jsxref("SyntaxError")}} ([Firefox bug 1101653](https://bugzil.la/1101653)). - The deprecated [for each...in](/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in) loop now presents a [warning in the console](/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated) ([Firefox bug 1293205](https://bugzil.la/1293205)). Please migrate your code to use the standardized [`for...of`](/en-US/docs/Web/JavaScript/Reference/Statements/for...of) loop. - [Generator functions](/en-US/docs/Web/JavaScript/Reference/Statements/function*) can't have a [label](/en-US/docs/Web/JavaScript/Reference/Statements/label) anymore and "`let`" as a label name is disallowed now ([Firefox bug 1288459](https://bugzil.la/1288459)). -- Deprecated [legacy generator functions](/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function) will now throw when used in [method definitions](/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions) ([Firefox bug 1199296](https://bugzil.la/1199296)). +- Deprecated [legacy generator functions](/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features) will now throw when used in [method definitions](/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions) ([Firefox bug 1199296](https://bugzil.la/1199296)). - The `next()` method of the [iterator protocol](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterator_protocol) will now throw a {{jsxref("TypeError")}} if the returned value is not an object ([Firefox bug 1016936](https://bugzil.la/1016936)). - Child-indexed pseudo-class selectors should match without a parent ([Firefox bug 1300374](https://bugzil.la/1300374)). diff --git a/files/en-us/mozilla/firefox/releases/52/index.md b/files/en-us/mozilla/firefox/releases/52/index.md index 1932f02f7810dba..3d489258662cfde 100644 --- a/files/en-us/mozilla/firefox/releases/52/index.md +++ b/files/en-us/mozilla/firefox/releases/52/index.md @@ -39,7 +39,7 @@ Firefox 52 was released on March 7, 2017. This article lists key changes that ar - Implemented Flexbox layout for {{cssxref("align-self")}}|{{cssxref("justify-self")}}: \[ first | last ]? baseline ([Firefox bug 1221524](https://bugzil.la/1221524)). - The {{cssxref("touch-action")}} property is now enabled by default on all platforms. (For the full story, see [intent to ship mail #1](https://groups.google.com/forum/#!topic/mozilla.dev.platform/6CGjsm1XpD4) and [intent to ship mail #2](https://groups.google.com/forum/#!topic/mozilla.dev.platform/SYEzvXJKw9M).) - Flexbox {{cssxref("align-content")}} handling & single-line-sizing should depend on {{cssxref("flex-wrap")}}, not number of lines ([Firefox bug 1090031](https://bugzil.la/1090031)). -- [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations) can now be used to animate non-interpolated properties (see [Firefox bug 1064937](https://bugzil.la/1064937)). +- [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) can now be used to animate non-interpolated properties (see [Firefox bug 1064937](https://bugzil.la/1064937)). - Changed `baseline|last-baseline` to `[ first | last ]? baseline` ([Firefox bug 1313254](https://bugzil.la/1313254)). - The used value for `left`/`right` is `start` for the block-axis ([Firefox bug 1221565](https://bugzil.la/1221565)). - Stretching flexible tracks with an indefinite containing block length now respects the min/max size([Firefox bug 1309407](https://bugzil.la/1309407)). @@ -56,7 +56,7 @@ Firefox 52 was released on March 7, 2017. This article lists key changes that ar #### CSS Grids -- [CSS Grids](/en-US/docs/Web/CSS/CSS_Grid_Layout) are implemented. +- [CSS Grids](/en-US/docs/Web/CSS/CSS_grid_layout) are implemented. #### Changes and removals diff --git a/files/en-us/mozilla/firefox/releases/53/index.md b/files/en-us/mozilla/firefox/releases/53/index.md index 2487d041787a214..b06a79db594f950 100644 --- a/files/en-us/mozilla/firefox/releases/53/index.md +++ b/files/en-us/mozilla/firefox/releases/53/index.md @@ -21,7 +21,7 @@ Firefox 53 was released on April 19, 2017. This article lists key changes that a #### New features -- The `mask-*` longhand properties (see [CSS Masks](/en-US/docs/Web/CSS/CSS_Masking)) are all supported and available by default (see [Firefox bug 1251161](https://bugzil.la/1251161)). +- The `mask-*` longhand properties (see [CSS Masks](/en-US/docs/Web/CSS/CSS_masking)) are all supported and available by default (see [Firefox bug 1251161](https://bugzil.la/1251161)). - Added {{cssxref("caret-color")}} property ([Firefox bug 1063162](https://bugzil.la/1063162)). - Implemented the {{cssxref("place-items")}}/{{cssxref("place-self")}}/{{cssxref("place-content")}} shorthands ([Firefox bug 1319958](https://bugzil.la/1319958)). - Added `flow-root` value to {{cssxref("display")}} property ([Firefox bug 1322191](https://bugzil.la/1322191)). @@ -55,7 +55,7 @@ Firefox 53 was released on April 19, 2017. This article lists key changes that a - The {{domxref("CompositionEvent.CompositionEvent", "CompositionEvent")}} constructor has been implemented (see [Firefox bug 1002256](https://bugzil.la/1002256)). - The {{domxref("MouseEvent.x")}} and {{domxref("MouseEvent.y")}} aliases of {{domxref("MouseEvent.clientX")}}/{{domxref("MouseEvent.clientY")}} have been implemented (see [Firefox bug 424390](https://bugzil.la/424390)). - The {{domxref("Element/auxclick_event", "auxclick")}} event and corresponding event handler have been implemented (see [Firefox bug 1304044](https://bugzil.la/1304044)). -- The {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}} event is now fired after a [transition](/en-US/docs/Web/CSS/CSS_Transitions) is cancelled. +- The {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}} event is now fired after a [transition](/en-US/docs/Web/CSS/CSS_transitions) is cancelled. ### DOM diff --git a/files/en-us/mozilla/firefox/releases/54/index.md b/files/en-us/mozilla/firefox/releases/54/index.md index f22ddeae7bee7c5..de66157d83ac8e4 100644 --- a/files/en-us/mozilla/firefox/releases/54/index.md +++ b/files/en-us/mozilla/firefox/releases/54/index.md @@ -17,12 +17,12 @@ Firefox 54 was released on June 13, 2017. This article lists key changes that ar ### CSS -- {{cssxref("clip-path")}} now supports [basic shapes](/en-US/docs/Web/CSS/CSS_Shapes) ([Firefox bug 1247229](https://bugzil.la/1247229)). +- {{cssxref("clip-path")}} now supports [basic shapes](/en-US/docs/Web/CSS/CSS_shapes) ([Firefox bug 1247229](https://bugzil.la/1247229)). - Firefox's implementations of CSS Flexbox and CSS alignment now implement updated spec language for interactions between the properties {{cssxref("align-items")}} and {{cssxref("align-self")}} as well as between {{cssxref("justify-items")}} and {{cssxref("justify-self")}} ([Firefox bug 1340309](https://bugzil.la/1340309)). - {{htmlelement("input")}} elements of types `checkbox` and `radio` with {{cssxref("appearance", "-moz-appearance")}}`: none;` set on them are now non-replaced elements, for compatibility with other browsers ([Firefox bug 605985](https://bugzil.la/605985)). - Previously, an element styled with {{cssxref("display")}}: `inline-block` with a child element of type {{domxref("HTMLInputElement")}} styled with `display:block` had a wrong baseline ([Firefox bug 1330962](https://bugzil.la/1330962)). This is now fixed. - When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis or e10s project), support for styling {{HTMLElement("option")}} elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to `