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/.lintstagedrc.json b/.lintstagedrc.json index 8f677173ceaa7f0..eed2c4850059c76 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,5 +1,5 @@ { - "!*.md": "prettier --ignore-unknown --write", + "*": "prettier --ignore-unknown --write", "*.md": [ "markdownlint-cli2-fix", "node scripts/front-matter_linter.js --fix true" 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/.prettierignore b/.prettierignore index 4debf2a34778221..0bf23d58760f9b0 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,10 +5,6 @@ build/ /files/en-us/_githistory.json /tests/front-matter_test_files -# A full pass on all Markdown files is being performed. -# The following folders still need a full pass: -/files/en-us/mozilla/add-ons/webextensions/api/**/*.md - # XXX Ignored until https://github.com/prettier/prettier/issues/15032 is fixed /files/en-us/web/javascript/reference/operators/exponentiation/index.md /files/en-us/web/javascript/reference/operators/exponentiation_assignment/index.md 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/percent-encoding/index.md b/files/en-us/glossary/percent-encoding/index.md index fc112e2371b934e..2750a2913030b6b 100644 --- a/files/en-us/glossary/percent-encoding/index.md +++ b/files/en-us/glossary/percent-encoding/index.md @@ -39,3 +39,4 @@ Depending on the context, the character `' '` is translated to a `'+'` (like in - Definition of [percent-encoding](https://en.wikipedia.org/wiki/Percent-encoding) in Wikipedia. - {{RFC(3986)}}, section 2.1, where this encoding is defined. +- [`encodeURI()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) and [`encodeURIComponent()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) — functions to percent-encode URLs 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/quality_values/index.md b/files/en-us/glossary/quality_values/index.md index 4f8f613efd8ff9f..2afeff504922a5d 100644 --- a/files/en-us/glossary/quality_values/index.md +++ b/files/en-us/glossary/quality_values/index.md @@ -42,5 +42,5 @@ Some syntax, like the one of {{HTTPHeader("Accept")}}, allow additional specifie ## More information -- [HTTP headers](/en-US/docs/Web/HTTP/Headers) using q-values in their syntax: {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("TE")}}. +- [HTTP headers](/en-US/docs/Web/HTTP/Headers) using q-values in their syntax: {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Want-Digest")}}. - [Header field definitions.](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html) diff --git a/files/en-us/glossary/reflow/index.md b/files/en-us/glossary/reflow/index.md index 49a08efd2fb859a..6efc3f6aa8f45e5 100644 --- a/files/en-us/glossary/reflow/index.md +++ b/files/en-us/glossary/reflow/index.md @@ -6,8 +6,10 @@ page-type: glossary-definition {{GlossarySidebar}} -**Reflow** happens when a {{glossary("browser")}} must process and draw part or all of a webpage again, such as after an update on an interactive site. +**Reflow** happens when a {{glossary("browser")}} recalculates the position and geometry of certain parts of a webpage, such as after an update on an interactive site. This tends to be followed by repainting, which is when the browser redraws the webpage to show the resulting visual updates. ## See also -- [Google article "Minimizing browser reflow"](https://developers.google.com/speed/docs/insights/browser-reflow) +- [Repaint](/en-US/docs/Glossary/Repaint) +- [Minimizing browser reflow](https://developer.google.com/speed/docs/insights/browser-reflow) on developer.google.com +- [Understanding Reflow and Repaint in the browser](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg) on dev.to (2020) diff --git a/files/en-us/glossary/render_blocking/index.md b/files/en-us/glossary/render_blocking/index.md new file mode 100644 index 000000000000000..e9fa92a58bec1f3 --- /dev/null +++ b/files/en-us/glossary/render_blocking/index.md @@ -0,0 +1,17 @@ +--- +title: Render-blocking +slug: Glossary/Render_blocking +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Render-blocking** refers to any part of the process of loading a website when it blocks the rendering of the user interface. Render-blocking is bad for web performance because it increases the length of time until users can interact with the site — for example viewing content or interacting with controls. + +The most common causes of render-blocking are initially-loaded CSS or JavaScript files. + +## See also + +- [CSS performance optimization](/en-US/docs/Learn/Performance/CSS) +- [JavaScript performance optimization](/en-US/docs/Learn/Performance/JavaScript) +- [What Are Render-Blocking Resources & How to Fix Render Blocking Issues](https://speckyboy.com/render-blocking/) on Speckyboy (2018) diff --git a/files/en-us/glossary/repaint/index.md b/files/en-us/glossary/repaint/index.md new file mode 100644 index 000000000000000..e57eda3cfc8f119 --- /dev/null +++ b/files/en-us/glossary/repaint/index.md @@ -0,0 +1,14 @@ +--- +title: Repaint +slug: Glossary/Repaint +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Repaint** happens when a {{glossary("browser")}} redraws a web page to show the visual updates resulting from a UI change, such as after an update on an interactive site. This usually follows reflowing, which is when the browser recalculates the position and geometry of certain parts of a web page. + +## See also + +- [Reflow](/en-US/docs/Glossary/Reflow) +- [Understanding Reflow and Repaint in the browser](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg) on dev.to (2020) 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/shadow_tree/index.md b/files/en-us/glossary/shadow_tree/index.md index 1219ce2248ab4d6..511613c1a8e4609 100644 --- a/files/en-us/glossary/shadow_tree/index.md +++ b/files/en-us/glossary/shadow_tree/index.md @@ -16,3 +16,4 @@ Nodes within the shadow tree are not affected by anything applied outside the sh - {{domxref("Element.shadowRoot")}} and {{domxref("Element.attachShadow()")}} - {{domxref("ShadowRoot")}} - {{HTMLElement("slot")}} +- [CSS shadow parts](/en-US/docs/Web/CSS/CSS_shadow_parts) module 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/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/highlight_first_line/index.md b/files/en-us/learn/css/howto/highlight_first_line/index.md index 530683ae723c6dd..9ceca0c1e520e2d 100644 --- a/files/en-us/learn/css/howto/highlight_first_line/index.md +++ b/files/en-us/learn/css/howto/highlight_first_line/index.md @@ -24,10 +24,12 @@ In this case we need to use the {{cssxref("::first-line")}} pseudo-element. It s ## Combining pseudo-elements with other selectors -In the example above, the pseudo-element selects the first line of every paragraph. To select only the first line of the first paragraph, you can combine it with another selector. That could be a class, or in this case the {{cssxref(":first-child")}} {{cssxref("pseudo-classes", "pseudo-class")}}. This allows us to select the first line of the first-child of `.wrapper`. +In the example above, the pseudo-element selects the first line of every paragraph. To select only the first line of the first paragraph, you can combine it with another selector. In this case, we use the {{cssxref(":first-child")}} {{cssxref("pseudo-classes", "pseudo-class")}}. This allows us to select the first line of the first child of `.wrapper` if that first child is a paragraph. {{EmbedGHLiveSample("css-examples/howto/highlight_first_line2.html", '100%', 700)}} +> **Note:** When combining pseudo-elements with other selectors in a [complex](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector) or [compound](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector) selector, the pseudo-elements must appear after all the other components in the selector in which they appear. + ## See also - The {{cssxref("pseudo-elements", "pseudo-elements")}} reference page. diff --git a/files/en-us/learn/css/howto/highlight_para_after_h1/index.md b/files/en-us/learn/css/howto/highlight_para_after_h1/index.md index 503884ea48d2e3c..de94a4dcfe02d40 100644 --- a/files/en-us/learn/css/howto/highlight_para_after_h1/index.md +++ b/files/en-us/learn/css/howto/highlight_para_after_h1/index.md @@ -14,7 +14,7 @@ A common pattern is to style the first paragraph in an article differently to th ## The adjacent sibling combinator -CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_Selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `

` is an adjacent sibling of the `

` so we can select it with `h1 + p`. +CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `

` is an adjacent sibling of the `

` so we can select it with `h1 + p`. {{EmbedGHLiveSample("css-examples/howto/highlight_h1_plus_para.html", '100%', 800)}} 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/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/introduction_to_html/the_head_metadata_in_html/index.md b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md index 380853043e14e37..8d3cf15e08888d5 100644 --- a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +++ b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -212,22 +212,22 @@ There are lots of other icon types to consider these days as well. For example, ```html ` element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the values of our {{htmlelement("source")}} element's `src` attributes, and it works fine. +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 `

+ + + + + + + + + + +
Prerequisites: + Basic computer literacy, + basic software installed, and basic knowledge of + client-side web technologies. +
Objective: + To learn about the impact of CSS on website performance + and how to optimize your CSS to improve performance. +
+ +## To optimize or not to optimize + +The first question you should answer before starting to optimize your CSS is "what do I need to optimize?". Some of the tips and techniques discussed below are good practices that will benefit just about any web project, whereas some are only needed in certain situations. Trying to apply all these techniques everywhere is probably unnecessary, and may be a waste of your time. You should figure out what performance optimizations are actually needed in each project. + +To do this, you need to [measure the performance](/en-US/docs/Learn/Performance/Measuring_performance) of your site. As the previous link shows, there are several different ways to measure performance, some involving sophisticated [performance APIs](/en-US/docs/Web/API/Performance_API). The best way to get started however, is to learn how to use tools such as built-in browser [network](/en-US/docs/Learn/Performance/Measuring_performance#network_monitor_tools) and [performance](/en-US/docs/Learn/Performance/Measuring_performance#performance_monitor_tools) tools, to see what parts of the page load are taking a long time and need optimizing. + +## Optimizing rendering + +Browsers follow a specific rendering path — paint only occurs after layout, which occurs after the render tree is created, which in turn requires both the DOM and the CSSOM trees. + +Showing users an unstyled page and then repainting it after the CSS styles have been parsed would be a bad user experience. For this reason, CSS is render blocking until the browser determines that the CSS is required. The browser can paint the page after it has downloaded the CSS and built the [CSS object model (CSSOM)](/en-US/docs/Glossary/CSSOM). + +To optimize the CSSOM construction and improve page performance, you can do one or more of the following based on the current state of your CSS: + +- **Remove unnecessary styles**: This may sound obvious, but it is surprising how many developers forget to clean up unused CSS rules that were added to their stylesheets during development and ended up not being used. All styles get parsed, whether they are being used during layout and painting or not, so it can speed up page rendering to get rid of unused ones. As [How Do You Remove Unused CSS From a Site?](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/) (csstricks.com, 2019) summarizes, this is a difficult problem to solve for a large codebase, and there isn't a magic bullet to reliably find and remove unused CSS. You need to do the hard work of keeping your CSS modular and being careful and deliberate about what is added and removed. +- **Split CSS into separate modules**: Keeping CSS modular means that CSS not required at page load can be loaded later on, reducing initial CSS render-blocking and loading times. The simplest way to do this is by splitting up your CSS into separate files and loading only what is needed: + + ```html + + + + + + + + + ``` + + The above example provides three sets of styles — default styles that will always load, styles that will only be loaded when the document is being printed, and styles that will be loaded only by devices with narrow screens. By default, the browser assumes that each specified style sheet is render-blocking. You can tell the browser when a style sheet should be applied by adding a `media` attribute containing a [media query](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). When the browser sees a style sheet that it only needs to apply in a specific scenario, it still downloads the stylesheet, but doesn't render-block. By separating the CSS into multiple files, the main render-blocking file, in this case `styles.css`, is much smaller, reducing the time for which rendering is blocked. + +- **Minify and compress your CSS**: Minifying involves removing all the whitespace in the file that is only there for human readability, once the code is put into production. You can reduce loading times considerably by minifying your CSS. Minification is generally done as part of a build process (for example, most JavaScript frameworks will minify code when you build a project ready for deployment). In addition to minification, make sure that the server that your site is hosted on uses compression such as gzip on files before serving them. + +- **Simplify selectors**: People often write selectors that are more complex than needed for applying the required styles. This not only increases file sizes, but also the parsing time for those selectors. For example: + + ```css + /* Very specific selector */ + body div#main-content article.post h2.headline { + font-size: 24px; + } + + /* You probably only need this */ + .headline { + font-size: 24px; + } + ``` + + Making your selectors less complex and specific is also good for maintenance. It is easy to understand what simple selectors are doing, and it is easy to override styles when needed later on if the selectors are less [specific](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity_2). + +- **Don't apply styles to more elements than needed**: A common mistake is to apply styles to all elements using the [universal selector](/en-US/docs/Web/CSS/Universal_selectors), or at least, to more elements than needed. This kind of styling can impact performance neagtively, especially on larger sites. + + ```css + /* Selects every element inside the */ + body * { + font-size: 14px; + display: flex; + } + ``` + + Remember that many properties (such as {{cssxref("font-size")}}) inherit their values from their parents, so you don't need to apply them everywhere. And powerful tools such as [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) need to be used sparingly. Using them everywhere can cause all kinds of unexpected behavior. + +- **Cut down on image HTTP requests with CSS sprites**: [CSS sprites](https://css-tricks.com/css-sprites/) is a technique that places several small images (such as icons) that you want to use on your site into a single image file, and then uses different {{cssxref("background-position")}} values to display the chunk of image that you want to show in each different place. This can dramatically cut down on the number of HTTP requests needed to fetch the images. + +- **Preload important assets**: You can use [`rel="preload"`](/en-US/docs/Web/HTML/Attributes/rel/preload) to turn {{htmlelement("link")}} elements into preloaders for critical assets. This includes CSS files, fonts, and images: + + ```html + + + + + + ``` + + With `preload`, the browser will fetch the referenced resources as soon as possible and make them available in the browser cache so that they will be ready for use sooner when they are referenced in subsequent code. It is useful to preload high-priority resources that the user will encounter early on in a page so that the experience is as smooth as possible. Note how you can also use `media` attributes to create responsive preloaders. + + See also [Preload critical assets to improve loading speed](https://web.dev/preload-critical-assets/) on web.dev (2020) + +## Handling animations + +Animations can improve perceived performance, making interfaces feel snappier and making users feel like progress is being made when they are waiting for a page to load (loading spinners, for example). However, larger animations and a higher number of animations will naturally require more processing power to handle, which can degrade performance. + +The simplest advice is to cut down on all unnecessary animations. You could also provide users with a control/site preference to turn off animations if they are using a low-powered device or a mobile device with limited battery power. You could also use JavaScript to control whether or not animation is applied to the page in the first place. There is also a media query called [`prefers-reduced-motion`](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) that can be used to selectively serve animation styles or not based on a user's OS-level preferences for animation. + +For essential DOM animations, you are advised to use [CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) where possible, rather than JavaScript animations (the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) provides a way to directly hook into CSS animations using JavaScript). + +### Choosing properties to animate + +Next, animation performance relies heavily on what properties you are animating. Certain properties, when animated, trigger a [reflow](/en-US/docs/Glossary/Reflow) (and therefore also a [repaint](/en-US/docs/Glossary/Repaint)) and should be avoided. These include properties that: + +- Alter an element's dimensions, such as [`width`](/en-US/docs/Web/CSS/width), [`height`](/en-US/docs/Web/CSS/height), [`border`](/en-US/docs/Web/CSS/border), and [`padding`](/en-US/docs/Web/CSS/padding). +- Reposition an element, such as [`margin`](/en-US/docs/Web/CSS/margin), [`top`](/en-US/docs/Web/CSS/top), [`bottom`](/en-US/docs/Web/CSS/bottom), [`left`](/en-US/docs/Web/CSS/left), and [`right`](/en-US/docs/Web/CSS/right). +- Change an element's layout, such as [`align-content`](/en-US/docs/Web/CSS/align-content), [`align-items`](/en-US/docs/Web/CSS/align-items), and [`flex`](/en-US/docs/Web/CSS/flex). +- Add visual effects that change the element geometry, such as [`box-shadow`](/en-US/docs/Web/CSS/box-shadow). + +Modern browsers are smart enough to repaint only the changed area of the document, rather than the entire page. As a result, larger animations are more costly. + +If at all possible, it is better to animate properties that do not cause reflow/repaint. This includes: + +- [Transforms](/en-US/docs/Web/CSS/CSS_transforms) +- [`opacity`](/en-US/docs/Web/CSS/opacity) +- [`filter`](/en-US/docs/Web/CSS/filter) + +### Animating on the GPU + +To further improve performance, you should consider moving animation work off the main thread and onto the device's GPU (also referred to as compositing). This is done by choosing specific types of animations that the browser will automatically send to the GPU to handle; these include: + +- 3D transform animations such as [`transform: translateZ()`](/en-US/docs/Web/CSS/transform) and [`rotate3d()`](/en-US/docs/Web/CSS/transform-function/rotate3d). +- Elements with certain other properties animated such as [`position: fixed`](/en-US/docs/Web/CSS/position). +- Elements with [`will-change`](/en-US/docs/Web/CSS/will-change) applied (see the section below). +- Certain elements that are rendered in their own layer, including [`