diff --git a/.github/workflows/pr-check_markdownlint.yml b/.github/workflows/pr-check_markdownlint.yml index 1ed91a06776a080..abdbff3e6766866 100644 --- a/.github/workflows/pr-check_markdownlint.yml +++ b/.github/workflows/pr-check_markdownlint.yml @@ -48,8 +48,3 @@ jobs: yarn markdownlint-cli2 ${files_to_lint} echo "Linting front-matter" node scripts/front-matter_linter.js ${files_to_lint} - - - name: Prettier markdown files - run: | - files_to_lint="${{ env.DIFF_DOCUMENTS }}" - yarn prettier -c ${files_to_lint} diff --git a/.markdownlint-cli2.jsonc b/.markdownlint-cli2.jsonc index c863b6131d3fff2..5e27b0f11bf9fb5 100644 --- a/.markdownlint-cli2.jsonc +++ b/.markdownlint-cli2.jsonc @@ -211,5 +211,5 @@ } }, "customRules": ["markdownlint-rule-search-replace"], - "ignores": ["node_modules", ".github", "tests"] + "ignores": ["node_modules", ".git", ".github", "tests"] } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fb3e7d0ae8a40ce..edbc6b53478b3f8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -147,9 +147,9 @@ To fork and clone the repository: The previous sections describe how to get started using the GitHub UI to make small changes to a single file and how to create a fork and clone the repository to prepare for making larger changes. This section describes how to build the project locally and how to prepare your changes for submission. -### Installing and running the project +### Preparing the project -To set up the site locally, you need to have [Node.js](https://nodejs.org/) and [Yarn](https://yarnpkg.com/) installed. +To serve the site locally, you need to have [Node.js](https://nodejs.org/) and [Yarn 1 (Classic)](https://classic.yarnpkg.com/) installed. You can check if these are installed by running the following commands: ```bash @@ -157,12 +157,19 @@ node -v yarn -v ``` -After you have installed Node.js and Yarn, you can install the dependencies using `yarn` and start the local preview: +After you have installed Node.js and Yarn, you can install the dependencies using `yarn`: ```bash # Assuming your fork is in ~/repos/content cd ~/repos/content yarn +``` + +### Running the project + +After you have installed all dependencies, you can start the local preview using `yarn start`: + +```bash yarn start ``` @@ -184,9 +191,7 @@ To edit files and track your changes, you should use feature branches. Feature branches are created from the `main` branch and should be named after the feature you're working on. This will make it easier to submit a pull request for your changes. -> **Note** -> Open a discussion if your changes will contain large, complex or structural changes. -> Ask for feedback before embarking on large tasks. +> **Note:** Open a discussion if your changes will contain large, complex or structural changes. Ask for feedback before embarking on large tasks. 1. When the server is running, make the changes you would like to make to one or more `index.md` files. @@ -212,6 +217,14 @@ This will make it easier to submit a pull request for your changes. # or "git push --set-upstream origin fix-typo" if you haven't pushed this branch before ``` +#### Linting edited files + +To ensure that all MDN documents follow the same formatting, we use both [Prettier](https://www.prettier.io) and [Markdownlint](https://github.com/DavidAnson/markdownlint) to format and lint Markdown files. This helps us enforce uniform styling across all documents with minimal reviewer intervention. + +If you have a [local checkout](#forking-and-cloning-the-repository) of the repository and have [installed the dependencies](#preparing-the-project), or you are using [github.dev](https://github.dev), a pre-commit hook will be installed which automatically runs while making a commit. To save some headache and improve your work flow while authoring, you may wish to [configure your editor to automatically run Prettier](https://prettier.io/docs/en/editors.html). Alternatively, you may run `yarn fix:md` in the command line to manually format all Markdown files. + +> **Note:** Automatically formatting changes does not work for pull requests opened using the GitHub Web UI as described in the ["Simple changes" section](#simple-changes). This may result in failed status checks on pull requests. If you're not sure about how to fix this, [get in touch with us](https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels) for help. + ### Adding a new document Adding a new document is relatively straightforward, especially if you can start by copying the `index.md` of a similar document. diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index c4cb2dde453e697..d0c6215cd0f6cd8 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -9616,7 +9616,7 @@ /en-US/docs/Web/API/Screen.unlockOrientation /en-US/docs/Web/API/Screen/unlockOrientation /en-US/docs/Web/API/Screen.width /en-US/docs/Web/API/Screen/width /en-US/docs/Web/API/Screen/onorientationchange /en-US/docs/Web/API/Screen/orientationchange_event -/en-US/docs/Web/API/ScreenOrientation/onchange /en-US/docs/Web/API/ScreenOrientation +/en-US/docs/Web/API/ScreenOrientation/onchange /en-US/docs/Web/API/ScreenOrientation/change_event /en-US/docs/Web/API/ScriptProcessorNode.bufferSize /en-US/docs/Web/API/ScriptProcessorNode/bufferSize /en-US/docs/Web/API/ScriptProcessorNode.onaudioprocess /en-US/docs/Web/API/ScriptProcessorNode/audioprocess_event /en-US/docs/Web/API/ScriptProcessorNode/audioprocess /en-US/docs/Web/API/ScriptProcessorNode/audioprocess_event diff --git a/files/en-us/glossary/dns/index.md b/files/en-us/glossary/dns/index.md index 756151abbe6e11f..c18279070f14ea3 100644 --- a/files/en-us/glossary/dns/index.md +++ b/files/en-us/glossary/dns/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition **DNS** (Domain Name System) is a hierarchical and decentralized naming system for Internet connected resources. DNS maintains a list of {{Glossary("domain name","domain names")}} along with the resources, such as IP addresses, that are associated with them. -The most prominent function of DNS is the translation of human-friendly domain names (such as mozilla.org) to a numeric {{Glossary("IP address")}} (such as 151.106.5.172); this process of mapping a domain name to the appropriate IP address is known as a **DNS lookup**. By contrast, a **reverse DNS lookup** (rDNS) is used to determine the domain name associated with an IP address. +The most prominent function of DNS is the translation of human-friendly domain names (such as mozilla.org) to a numeric {{Glossary("IP address")}} (such as 192.0.2.172); this process of mapping a domain name to the appropriate IP address is known as a **DNS lookup**. By contrast, a **reverse DNS lookup** (rDNS) is used to determine the domain name associated with an IP address. ## See also diff --git a/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md index 5df6c0db1f6145a..55b5cd7da14f251 100644 --- a/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md @@ -81,7 +81,7 @@ So we are connected to the telephone infrastructure. The next step is to send th ### Finding computers -If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for _Internet Protocol_). It's an address made of a series of four numbers separated by dots, for example: `192.168.2.10`. +If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for _Internet Protocol_). It's an address made of a series of four numbers separated by dots, for example: `192.0.2.172`. That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human-readable name called a _domain name_. For example (at the time of writing; IP addresses can change) `google.com` is the domain name used on top of the IP address `142.250.190.78`. So using the domain name is the easiest way for us to reach a computer over the Internet. diff --git a/files/en-us/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/en-us/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md index dbd251238728d0d..6534850279519dc 100644 --- a/files/en-us/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md @@ -34,7 +34,7 @@ page-type: learn-faq Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet. -Any Internet-connected computer can be reached through a public {{Glossary("IP Address")}}, either an IPv4 address (e.g. `173.194.121.32`) or an IPv6 address (e.g., `2027:0da8:8b73:0000:0000:8a2e:0370:1337`). +Any Internet-connected computer can be reached through a public {{Glossary("IP Address")}}, either an IPv4 address (e.g. `192.0.2.172`) or an IPv6 address (e.g., `2001:db8:8b73:0000:0000:8a2e:0370:1337`). Computers can handle such addresses easily, but people have a hard time finding out who is running the server or what service the website offers. IP addresses are hard to remember and might change over time. diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md index fbda4b6344e46a0..169bedb02e4b7a8 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md @@ -120,7 +120,7 @@ The required styles are those necessary to handle the three states of our contro ```css .select { /* This will create a positioning context for the list of options; - adding this to .select{{cssxref(':focus-within')}} will be a better option when fully supported + adding this to `.select:focus-within` will be a better option when fully supported */ position: relative; @@ -136,7 +136,7 @@ We need an extra class `active` to define the look and feel of our control when .select:focus { outline: none; - /* This {{cssxref('box-shadow')}} property is not exactly required, however it's imperative to ensure + /* This box-shadow property is not exactly required, however it's imperative to ensure active state is visible, especially to keyboard users, that we use it as a default value. */ box-shadow: 0 0 3px 1px #227755; } @@ -176,7 +176,7 @@ So now that we have the basic functionality in place, the fun can start. The fol ```css .select { /* The computations are made assuming 1em equals 16px which is the default value in most browsers. - If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */ + If you are lost with px to em conversion, try https://nekocalc.com/px-to-em-converter */ font-size: 0.625em; /* this (10px) is the new font size context for em value in this context */ font-family: Verdana, Arial, sans-serif; @@ -661,7 +661,7 @@ Before starting, it's important to remember **JavaScript in the browser is an un - The script did not load: This is one of the most common cases, especially in the mobile world where the network is not very reliable. - The script is buggy: You should always consider this possibility. - The script conflicts with a third-party script: This can happen with tracking scripts or any bookmarklets the user uses. -- The script conflicts with, or is affected by, a browser extension (such as Firefox's [NoScript](https://addons.mozilla.org/fr/firefox/addon/noscript/) extension) or Chrome's [ScriptBlock](https://chrome.google.com/webstore/detail/scriptblock/hcdjknjpbnhdoabbngpmfekaecnpajba). +- The script conflicts with, or is affected by, a browser extension (such as Firefox's [NoScript](https://addons.mozilla.org/fr/firefox/addon/noscript/) extension or Chrome's [ScriptBlock](https://chrome.google.com/webstore/detail/scriptblock/hcdjknjpbnhdoabbngpmfekaecnpajba) extension). - The user is using a legacy browser, and one of the features you require is not supported: This will happen frequently when you make use of cutting-edge APIs. - The user is interacting with the content before the JavaScript has been fully downloaded, parsed, and executed. @@ -704,7 +704,7 @@ Second, we need two new classes to let us hide the unneeded element: we visually .widget select, .no-widget .select { /* This CSS selector basically says: - - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element + - either we have set the body class to "widget" and thus we hide the actual ``` +The JavaScript is as follows: + ```js +// Detect feature support via OTPCredential availability if ("OTPCredential" in window) { window.addEventListener("DOMContentLoaded", (e) => { const input = document.querySelector('input[autocomplete="one-time-code"]'); if (!input) return; + // Set up an AbortController to use with the OTP request const ac = new AbortController(); const form = input.closest("form"); if (form) { + // Abort the OTP request if the user attempts to submit the form manually form.addEventListener("submit", (e) => { ac.abort(); }); } + // Request the OTP via get() navigator.credentials .get({ otp: { transport: ["sms"] }, signal: ac.signal, }) .then((otp) => { + // When the OTP is received by the app client, enter it into the form + // input and submit the form automatically input.value = otp.code; if (form) form.submit(); }) @@ -58,11 +156,22 @@ if ("OTPCredential" in window) { } ``` +Another good use for the {{domxref("AbortController")}} is to cancel the `get()` request after a certain amount of time: + +```js +setTimeout(() => { + // abort after 30 seconds + ac.abort(); +}, 30 * 1000); +``` + +If the user becomes distracted or navigates somewhere else, it is good to cancel the request so that they don't get presented with a permission prompt that is no longer relevant to them. + ## Specifications {{Specifications}} ## See also -- [Verify phone numbers on the web with WebOTP](https://web.dev/web-otp/) +- [Verify phone numbers on the web with WebOTP](https://developer.chrome.com/articles/web-otp/) on developer.chrome.com (2023) - [Fill OTP forms within cross-origin iframes with WebOTP API](https://web.dev/web-otp-iframe/) diff --git a/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_java/index.md index 14ca787f77a5c80..a38285b5cd53842 100644 --- a/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_java/index.md +++ b/files/en-us/web/api/websockets_api/writing_a_websocket_server_in_java/index.md @@ -115,7 +115,7 @@ After a successful handshake, client can send messages to the server, but now th If we send "abcdef", we get these bytes: -``` +```plain 129 134 167 225 225 210 198 131 130 182 194 135 ``` diff --git a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md index 5e3e51a791932f6..0cbb3c30b37f145 100644 --- a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md +++ b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md @@ -167,7 +167,7 @@ After a successful handshake, the client will send encoded messages to the serve If we send "MDN", we get these bytes: -``` +```plain 129 131 61 84 35 6 112 16 109 ``` diff --git a/files/en-us/web/api/websockets_api/writing_websocket_servers/index.md b/files/en-us/web/api/websockets_api/writing_websocket_servers/index.md index 967ac645ed7836e..679ae7509695094 100644 --- a/files/en-us/web/api/websockets_api/writing_websocket_servers/index.md +++ b/files/en-us/web/api/websockets_api/writing_websocket_servers/index.md @@ -139,7 +139,7 @@ The FIN and opcode fields work together to send a message split up into separate Recall that the opcode tells what a frame is meant to do. If it's `0x1`, the payload is text. If it's `0x2`, the payload is binary data. However, if it's `0x0,` the frame is a continuation frame; this means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client: -``` +```plain Client: FIN=1, opcode=0x1, msg="hello" Server: (process complete message immediately) Hi. Client: FIN=0, opcode=0x1, msg="and a" diff --git a/files/en-us/web/api/webtransport/createbidirectionalstream/index.md b/files/en-us/web/api/webtransport/createbidirectionalstream/index.md index 7be6694d66a77d2..7db6c3dde24ef0b 100644 --- a/files/en-us/web/api/webtransport/createbidirectionalstream/index.md +++ b/files/en-us/web/api/webtransport/createbidirectionalstream/index.md @@ -70,7 +70,7 @@ async function setUpBidirectional() { // stream.writable is a WritableStream const writable = stream.writable; - ... + // ... } ``` diff --git a/files/en-us/web/api/webxr_device_api/rendering/index.md b/files/en-us/web/api/webxr_device_api/rendering/index.md index 20b3a7264ab3c49..f055004375b03ef 100644 --- a/files/en-us/web/api/webxr_device_api/rendering/index.md +++ b/files/en-us/web/api/webxr_device_api/rendering/index.md @@ -128,7 +128,7 @@ Ideally, you want this code to be fast enough that it can maintain a 60 FPS fram In this version of the WebXR rendering callback, we use a very straightforward approach that works great for relatively simple projects. This pseudocode outlines that process: -``` +```plain for each view in the pose's views list: get the WebXR GL layer's viewport set the WebGL viewport to match @@ -225,7 +225,7 @@ An advantage of WebXR's approach of using a single WebGL framebuffer to contain The resulting pseudocode looks like this: -``` +```plain for each object in the scene bindProgram() bindUniforms() diff --git a/files/en-us/web/api/window/orientationchange_event/index.md b/files/en-us/web/api/window/orientationchange_event/index.md index 39306d20e4d11cd..aef642cbec15548 100644 --- a/files/en-us/web/api/window/orientationchange_event/index.md +++ b/files/en-us/web/api/window/orientationchange_event/index.md @@ -14,7 +14,7 @@ The `orientationchange` event is fired when the orientation of the device has ch This event is not cancelable and does not bubble. -This event is deprecated. Listen for the {{domxref("ScreenOrientation/onchange", "ScreenOrientation.onchange")}} event instead. +This event is deprecated. Listen for the {{domxref("ScreenOrientation.change_event", "change")}} event of the {{domxref("ScreenOrientation")}} interface instead. ## Syntax diff --git a/files/en-us/web/api/workerglobalscope/location/index.md b/files/en-us/web/api/workerglobalscope/location/index.md index 06b346f7fabe454..9b3af10af3db27c 100644 --- a/files/en-us/web/api/workerglobalscope/location/index.md +++ b/files/en-us/web/api/workerglobalscope/location/index.md @@ -24,7 +24,7 @@ console.log(location); inside a worker (which would basically be the equivalent of `self.console.log(self.location);`, as these are being called on the worker scope, which can be referenced with {{domxref("WorkerGlobalScope.self")}}), you will get a {{domxref("WorkerLocation")}} object written to the console — something like the following: -``` +```plain WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} hash: "" host: "localhost:8000" diff --git a/files/en-us/web/api/workerglobalscope/navigator/index.md b/files/en-us/web/api/workerglobalscope/navigator/index.md index e685c1ced9223c9..1f5a6482099c414 100644 --- a/files/en-us/web/api/workerglobalscope/navigator/index.md +++ b/files/en-us/web/api/workerglobalscope/navigator/index.md @@ -24,7 +24,7 @@ console.log(navigator); inside a worker (which would basically be the equivalent of `self.console.log(self.navigator);`, as these are being called on the worker scope, which can be referenced with {{domxref("WorkerGlobalScope.self")}}), you will get a {{domxref("WorkerNavigator")}} object written to the console — something like the following: -``` +```plain Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…} appCodeName: "Mozilla" appName: "Netscape" diff --git a/files/en-us/web/api/workerglobalscope/self/index.md b/files/en-us/web/api/workerglobalscope/self/index.md index ccb41457b5aae43..2dfbc94e4712abd 100644 --- a/files/en-us/web/api/workerglobalscope/self/index.md +++ b/files/en-us/web/api/workerglobalscope/self/index.md @@ -24,7 +24,7 @@ console.log(self); inside a worker, you will get a worker global scope of the same type as that worker object written to the console — something like the following: -``` +```plain DedicatedWorkerGlobalScope { undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…} Infinity: Infinity diff --git a/files/en-us/web/api/workernavigator/useragent/index.md b/files/en-us/web/api/workernavigator/useragent/index.md index 6a37fdb7f039c41..60bd5ee116ef7fc 100644 --- a/files/en-us/web/api/workernavigator/useragent/index.md +++ b/files/en-us/web/api/workernavigator/useragent/index.md @@ -42,7 +42,7 @@ several pieces of info. Each of these pieces of info comes from other navigator properties which are also settable by the user. Gecko-based browsers comply with the following general structure: -``` +```plain userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; Localization; rv: revision-version-number) product/productSub Application-Name Application-Name-version diff --git a/files/en-us/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md b/files/en-us/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md index 84c89aca4729b02..a6960a8d99525d9 100644 --- a/files/en-us/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md +++ b/files/en-us/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md @@ -181,7 +181,7 @@ One of the few cases in which a synchronous request does not usually block execu **`myFile.txt`** (the target of the synchronous {{domxref('XMLHttpRequest')}} invocation): -``` +```plain Hello World!! ``` diff --git a/files/en-us/web/api/xsltprocessor/basic_example/index.md b/files/en-us/web/api/xsltprocessor/basic_example/index.md index 7eb9ef22941acfe..bd9521a1550927d 100644 --- a/files/en-us/web/api/xsltprocessor/basic_example/index.md +++ b/files/en-us/web/api/xsltprocessor/basic_example/index.md @@ -62,7 +62,7 @@ To try out the example: 3. Open **example.xml** from the browser. 4. The browser output is then as shown below: - ``` + ```plain Browser Output : Article - My Article diff --git a/files/en-us/web/css/-webkit-border-before/index.md b/files/en-us/web/css/-webkit-border-before/index.md index 6c09f09eb0273bf..c99fda49b2f3bc2 100644 --- a/files/en-us/web/css/-webkit-border-before/index.md +++ b/files/en-us/web/css/-webkit-border-before/index.md @@ -11,6 +11,16 @@ browser-compat: css.properties.-webkit-border-before The **`-webkit-border-before`** [CSS](/en-US/docs/Web/CSS) property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet. +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{cssxref("-webkit-border-before-color")}} +- {{cssxref("-webkit-border-before-style")}} +- {{cssxref("-webkit-border-before-width")}} + +## Syntax + ```css /* Border values */ -webkit-border-before: 1px; @@ -25,14 +35,6 @@ The **`-webkit-border-before`** [CSS](/en-US/docs/Web/CSS) property is a shortha -webkit-border-before: unset; ``` -`-webkit-border-before` can be used to set the values for one or more of: {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, and {{cssxref("-webkit-border-before-color")}}. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, or {{cssxref("border-left")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}. - -It relates to {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, and {{cssxref("-webkit-border-end")}}, which define the other borders of the element. - -This property is on the standard track as {{cssxref("border-block-start")}}. - -## Syntax - ### Values One or more of the following, in any order: @@ -44,6 +46,14 @@ One or more of the following, in any order: - `<'color'>` - : See {{cssxref("color")}} +## Description + +The `-webkit-border-before` property maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, or {{cssxref("border-left")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}. + +It relates to {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, and {{cssxref("-webkit-border-end")}}, which define the other borders of the element. + +The standard-track equivalent of this property is {{cssxref("border-block-start")}}. + ## Formal definition {{CSSInfo}} diff --git a/files/en-us/web/css/-webkit-mask-box-image/index.md b/files/en-us/web/css/-webkit-mask-box-image/index.md index 41ad849a9295578..d199521cfe67f08 100644 --- a/files/en-us/web/css/-webkit-mask-box-image/index.md +++ b/files/en-us/web/css/-webkit-mask-box-image/index.md @@ -84,7 +84,7 @@ Border repeat styles, when included, are interpreted in the order of ` ## Formal syntax -``` +```plain -webkit-mask-box-image: [{4} {1,2} ] Where: diff --git a/files/en-us/web/css/@charset/index.md b/files/en-us/web/css/@charset/index.md index 6add216c4e6ccac..bbb30a95b9c0e7b 100644 --- a/files/en-us/web/css/@charset/index.md +++ b/files/en-us/web/css/@charset/index.md @@ -32,7 +32,7 @@ As there are several ways to define the character encoding of a style sheet, the ### Formal syntax -``` +```plain @charset ""; ``` diff --git a/files/en-us/web/css/@counter-style/system/index.md b/files/en-us/web/css/@counter-style/system/index.md index 31e6503c73b7698..264e402b35eacbc 100644 --- a/files/en-us/web/css/@counter-style/system/index.md +++ b/files/en-us/web/css/@counter-style/system/index.md @@ -79,7 +79,7 @@ This may take one of three forms: If your browser supports it, this example will render a list like this: -``` +```plain ◉ One ◉ Two ◉ Three @@ -115,7 +115,7 @@ ul { If your browser supports it, this example will render a list like this: -``` +```plain ➀ One ➁ Two ➂ Three @@ -155,7 +155,7 @@ ul { If your browser supports it, this example will render a list like this: -``` +```plain a. One b. Two c. Three @@ -201,7 +201,7 @@ ul { If your browser supports it, this example will render a list like this: -``` +```plain a. One b. Two c. Three @@ -247,7 +247,7 @@ ul { If your browser supports it, this example will render a list like this: -``` +```plain b. One c. Two ba. Three diff --git a/files/en-us/web/css/@document/index.md b/files/en-us/web/css/@document/index.md index 4a4497733948ab1..c76fe6f6247650a 100644 --- a/files/en-us/web/css/@document/index.md +++ b/files/en-us/web/css/@document/index.md @@ -46,7 +46,7 @@ Escaped values provided to the `regexp()` function must additionally be escaped ## Formal syntax -``` +```plain @document [ | url-prefix() | domain() | diff --git a/files/en-us/web/css/@page/index.md b/files/en-us/web/css/@page/index.md index 55a5029ae861ecf..4ad1b7815c4b039 100644 --- a/files/en-us/web/css/@page/index.md +++ b/files/en-us/web/css/@page/index.md @@ -164,7 +164,7 @@ The margin at-rules are used inside of the `@page` at-rule. They each target a d Other margin-at rules include: -``` +```plain @top-left-corner { } diff --git a/files/en-us/web/css/_colon_current/index.md b/files/en-us/web/css/_colon_current/index.md index ef823acafa1e135..21947dacd2bf3bd 100644 --- a/files/en-us/web/css/_colon_current/index.md +++ b/files/en-us/web/css/_colon_current/index.md @@ -55,7 +55,7 @@ The **`:current`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS ### WebVTT -``` +```plain WEBVTT FILE 1 diff --git a/files/en-us/web/css/_colon_future/index.md b/files/en-us/web/css/_colon_future/index.md index 5724ca394167f19..0026ff8523fb335 100644 --- a/files/en-us/web/css/_colon_future/index.md +++ b/files/en-us/web/css/_colon_future/index.md @@ -52,7 +52,7 @@ The **`:future`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/ ### WebVTT -``` +```plain WEBVTT FILE 1 diff --git a/files/en-us/web/css/_colon_past/index.md b/files/en-us/web/css/_colon_past/index.md index f2d522eb64e40a1..1a290df57bd57e0 100644 --- a/files/en-us/web/css/_colon_past/index.md +++ b/files/en-us/web/css/_colon_past/index.md @@ -52,7 +52,7 @@ The **`:past`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Ps ### WebVTT -``` +```plain WEBVTT FILE 1 diff --git a/files/en-us/web/css/_colon_target/index.md b/files/en-us/web/css/_colon_target/index.md index ad1b23342cf2311..706239adf993430 100644 --- a/files/en-us/web/css/_colon_target/index.md +++ b/files/en-us/web/css/_colon_target/index.md @@ -18,7 +18,7 @@ The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/ For example, the following URL has a fragment (denoted by the _#_ sign) that points to an element called `section2`: -``` +```url http://www.example.com/index.html#section2 ``` diff --git a/files/en-us/web/css/_doublecolon_highlight/index.md b/files/en-us/web/css/_doublecolon_highlight/index.md index 0443968efee3b81..4e519fcdb130905 100644 --- a/files/en-us/web/css/_doublecolon_highlight/index.md +++ b/files/en-us/web/css/_doublecolon_highlight/index.md @@ -27,7 +27,7 @@ In particular, {{CSSxRef("background-image")}} is ignored. ## Syntax -``` +```css-nolint ::highlight(custom-highlight-name) ``` diff --git a/files/en-us/web/css/all/index.md b/files/en-us/web/css/all/index.md index 10fe4252a835017..3432422f0d086d9 100644 --- a/files/en-us/web/css/all/index.md +++ b/files/en-us/web/css/all/index.md @@ -11,6 +11,10 @@ The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US {{EmbedInteractiveExample("pages/css/all.html")}} +## Constituent properties + +This property is a shorthand for all CSS properties except for {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). + ## Syntax ```css diff --git a/files/en-us/web/css/background-position/index.md b/files/en-us/web/css/background-position/index.md index 65f7b7539b7e412..d8bc773c872e56b 100644 --- a/files/en-us/web/css/background-position/index.md +++ b/files/en-us/web/css/background-position/index.md @@ -87,20 +87,20 @@ The percentage offset of the given background image's position is relative to th Essentially what happens is the background image dimension is _subtracted_ from the corresponding container dimension, and then a percentage of the resulting value is used as the direct offset from the left (or top) edge. -``` +```plain (container width - image width) * (position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value) ``` Using the X axis for an example, let's say we have an image that is 300px wide and we are using it in a container that is 100px wide, with background-size set to auto: -``` +```plain 100px - 300px = -200px (container & image difference) ``` So that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values: -``` +```plain -200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 33d51859df8de00..ff922fcb3f15bf8 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -23,7 +23,7 @@ When interpolating `` values, the interpolation color space defaults to O The `` specifies whether interpolation should use a rectangular color space or a polar color space with an optional hue interpolation method: -``` +```plain in // or in [ ] diff --git a/files/en-us/web/css/column-rule/index.md b/files/en-us/web/css/column-rule/index.md index f70e3d583bcbd46..f3063f7e2ab1786 100644 --- a/files/en-us/web/css/column-rule/index.md +++ b/files/en-us/web/css/column-rule/index.md @@ -11,9 +11,13 @@ The **`column-rule`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS {{EmbedInteractiveExample("pages/css/column-rule.html")}} -It is a [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) that sets the individual `column-rule-*` properties in a single, convenient declaration: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, and {{Cssxref("column-rule-color")}}. +## Constituent properties -> **Note:** As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). +This property is a shorthand for the following CSS properties: + +- {{Cssxref("column-rule-color")}} +- {{Cssxref("column-rule-style")}} +- {{Cssxref("column-rule-width")}} ## Syntax diff --git a/files/en-us/web/css/container/index.md b/files/en-us/web/css/container/index.md index 90cab448b2b71b4..3e9852ddd54a757 100644 --- a/files/en-us/web/css/container/index.md +++ b/files/en-us/web/css/container/index.md @@ -9,6 +9,13 @@ browser-compat: css.properties.container The **container** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property establishes the element as a query container and specifies the name or name for the [containment context](/en-US/docs/Web/CSS/CSS_container_queries#naming_containment_contexts) used in a [container query](/en-US/docs/Web/CSS/CSS_container_queries). +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{Cssxref("container-name")}} +- {{Cssxref("container-type")}} + ## Syntax ```css diff --git a/files/en-us/web/css/css_counter_styles/using_css_counters/index.md b/files/en-us/web/css/css_counter_styles/using_css_counters/index.md index 7268278b6e8d8c7..a5ab08ebe5b7c01 100644 --- a/files/en-us/web/css/css_counter_styles/using_css_counters/index.md +++ b/files/en-us/web/css/css_counter_styles/using_css_counters/index.md @@ -71,7 +71,7 @@ h3::before { The {{cssxref("counter", "counter()")}} function is used when the numbering of nesting levels does not include the context of parent levels. For example, here each nested level restarts from one: -``` +```plain 1 One 1 Nested one 2 Nested two @@ -85,7 +85,7 @@ For example, here each nested level restarts from one: The {{cssxref("counters", "counters()")}} function is used when the count for nested levels must include the count from parent levels. For example, you might use this to lay out sections as shown: -``` +```plain 1 One 1.1 Nested one 1.2 Nested two diff --git a/files/en-us/web/css/hex-color/index.md b/files/en-us/web/css/hex-color/index.md index a1aacd6fcd75bda..8ab4c10fc8fc2b1 100644 --- a/files/en-us/web/css/hex-color/index.md +++ b/files/en-us/web/css/hex-color/index.md @@ -13,7 +13,7 @@ A `` value can be used everywhere where a [``](/en-US/docs/Web ## Syntax -``` +```plain #RGB // The three-value syntax #RGBA // The four-value syntax #RRGGBB // The six-value syntax diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 6de8a86018de41e..92fda8ac87683e7 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -25,7 +25,7 @@ When interpolating `` values, the hue interpolation algorithm defaults to [ A `` value consists of the name of a hue interpolation algorithm followed by a literal token `hue`: -``` +```plain shorter hue longer hue increasing hue diff --git a/files/en-us/web/css/inset/index.md b/files/en-us/web/css/inset/index.md index f8d5d5b1993c0ab..39ce7169501c70c 100644 --- a/files/en-us/web/css/inset/index.md +++ b/files/en-us/web/css/inset/index.md @@ -13,6 +13,15 @@ The **`inset`** [CSS](/en-US/docs/Web/CSS) property is a shorthand that correspo While part of the _CSS Logical Properties_ specification, it does not define _logical_ offsets. It defines _physical_ offsets, regardless of the element's writing mode, directionality, and text orientation. +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- {{Cssxref("top")}} +- {{Cssxref("right")}} +- {{Cssxref("bottom")}} +- {{Cssxref("left")}} + ## Syntax ```css diff --git a/files/en-us/web/css/overscroll-behavior/index.md b/files/en-us/web/css/overscroll-behavior/index.md index 02b2e8a8fadeeef..be071d6b297c10c 100644 --- a/files/en-us/web/css/overscroll-behavior/index.md +++ b/files/en-us/web/css/overscroll-behavior/index.md @@ -7,15 +7,16 @@ browser-compat: css.properties.overscroll-behavior {{CSSRef}} -The **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}}. +The **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area. {{EmbedInteractiveExample("pages/css/overscroll-behavior.html")}} -By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called **scroll chaining**. +## Constituent properties -In some cases these behaviors are not desirable. You can use `overscroll-behavior` to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior. +This property is a shorthand for the following CSS properties: -Note that this property only applies to {{Glossary("Scroll_container", "scroll containers")}}. In particular, since an [`