diff --git a/files/en-us/learn/forms/basic_native_form_controls/index.md b/files/en-us/learn/forms/basic_native_form_controls/index.md index 103592d983c6753..1918247b1c75292 100644 --- a/files/en-us/learn/forms/basic_native_form_controls/index.md +++ b/files/en-us/learn/forms/basic_native_form_controls/index.md @@ -272,7 +272,7 @@ There is one last `` type that came to us in early HTML: the file input t To create a [file picker widget](/en-US/docs/Web/HTML/Element/input/file), you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to `file`. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute. -#### Example +### Example In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case. diff --git a/files/en-us/mdn/writing_guidelines/howto/markdown_in_mdn/index.md b/files/en-us/mdn/writing_guidelines/howto/markdown_in_mdn/index.md index 88df54f93813c6f..311c51e390852fc 100644 --- a/files/en-us/mdn/writing_guidelines/howto/markdown_in_mdn/index.md +++ b/files/en-us/mdn/writing_guidelines/howto/markdown_in_mdn/index.md @@ -160,9 +160,9 @@ The blockquote can contain code blocks or other block elements. Because the text "Note:" or "Warning:" also appears in the rendered output, it has to be sensitive to translations. In practice this means that every locale supported by MDN must supply its own translation of these strings, and the platform must recognize them as indicating that the construct needs special treatment. -#### Examples +### Examples -##### Note +#### Note ```plain > **Note:** This is how you write a note. @@ -185,7 +185,7 @@ This HTML will be rendered as a highlighted box, like: > > It can have multiple lines. -##### Warnings +#### Warnings ```plain > **Warning:** This is how you write a warning. @@ -208,7 +208,7 @@ This HTML will be rendered as a highlighted box, like: > > It can have multiple paragraphs. -##### Callouts +#### Callouts ```plain > **Callout:** **This is how you write a callout.** @@ -233,7 +233,7 @@ This HTML will be rendered as a highlighted box, like: > > It can have multiple paragraphs. -##### Translated warning +#### Translated warning For example, if we want to use "Warnung" for "Warning" in German, then in German pages we would write: @@ -249,7 +249,7 @@ And this will produce: ``` -##### Note containing a code block +#### Note containing a code block This example contains a code block. diff --git a/files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md b/files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md index 73421dfc388b806..dd9529e925b3d0a 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md @@ -488,10 +488,10 @@ You can also specify the desired API as the first argument to the macro as shown The macro calls generate the following tables (and corresponding set of notes): -#### Compatibility table example +### Compatibility table example {{Compat}} -#### Specifications table examples +### Specifications table examples {{Specifications}} diff --git a/files/en-us/mdn/writing_guidelines/page_structures/macros/commonly_used_macros/index.md b/files/en-us/mdn/writing_guidelines/page_structures/macros/commonly_used_macros/index.md index d5a15213921a517..11591f1ae2f351c 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/macros/commonly_used_macros/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/macros/commonly_used_macros/index.md @@ -272,14 +272,14 @@ They can also be used to mark up a section on a page. The [`AvailableInWorkers`](https://github.com/mdn/yari/blob/main/kumascript/macros/AvailableInWorkers.ejs) macro inserts a localized note box indicating that a feature is available in a [Web worker](/en-US/docs/Web/API/Web_Workers_API) context. You can use the argument `notservice` to indicate that a feature works in web workers except for service workers. -##### Syntax +#### Syntax ```plain \{{AvailableInWorkers}} \{{AvailableInWorkers("notservice")}} ``` -##### Examples +#### Examples {{AvailableInWorkers}} {{AvailableInWorkers("notservice")}} diff --git a/files/en-us/mozilla/firefox/releases/101/index.md b/files/en-us/mozilla/firefox/releases/101/index.md index c82425b1acb7fbb..2dd6c8434ebd505 100644 --- a/files/en-us/mozilla/firefox/releases/101/index.md +++ b/files/en-us/mozilla/firefox/releases/101/index.md @@ -85,7 +85,7 @@ For more information, see the [full bug list](https://bugzilla.mozilla.org/bugli - The `content` object (that offered `content.fetch`, `content.XMLHttpRequest`, and `content.WebSocket`) is removed from the content script execution environment. - Addition of the {{WebExtAPIRef("storage.StorageArea.onChanged")}} event that enables you to listen for changes in content in the `local` and `sync` storage areas ({{bug(1758475)}}). -#### Removals +### Removals ### Other diff --git a/files/en-us/mozilla/firefox/releases/103/index.md b/files/en-us/mozilla/firefox/releases/103/index.md index ca6e65491a5c6d2..483a7d38fa89904 100644 --- a/files/en-us/mozilla/firefox/releases/103/index.md +++ b/files/en-us/mozilla/firefox/releases/103/index.md @@ -86,7 +86,7 @@ This article provides information about the changes in Firefox 103 that will aff ## Changes for add-on developers -#### Removals +### Removals - Removed the ServiceWorker API in WebExtensions (`'serviceWorker' in navigator` now returns false when run inside an extension). ({{bug(1593931)}}) diff --git a/files/en-us/mozilla/firefox/releases/104/index.md b/files/en-us/mozilla/firefox/releases/104/index.md index aa29f255ff2bca0..daecaef1283babd 100644 --- a/files/en-us/mozilla/firefox/releases/104/index.md +++ b/files/en-us/mozilla/firefox/releases/104/index.md @@ -82,7 +82,7 @@ No notable changes. ## Changes for add-on developers -#### Removals +### Removals ### Other diff --git a/files/en-us/mozilla/firefox/releases/105/index.md b/files/en-us/mozilla/firefox/releases/105/index.md index ca65fb4cc6e24ff..d1d848934978848 100644 --- a/files/en-us/mozilla/firefox/releases/105/index.md +++ b/files/en-us/mozilla/firefox/releases/105/index.md @@ -55,7 +55,7 @@ This article provides information about the changes in Firefox 105 that will aff - Support for defining persistent scripts using {{WebExtAPIRef("scripting")}} has been added. A script is identified as persistent using the `persistAcrossSessions` property in {{WebExtAPIRef("scripting.RegisteredContentScript")}} ({{bug("1751436")}}). -#### Removals +### Removals ### Other diff --git a/files/en-us/mozilla/firefox/releases/106/index.md b/files/en-us/mozilla/firefox/releases/106/index.md index 11128ce0eb973ce..5acdf807412e502 100644 --- a/files/en-us/mozilla/firefox/releases/106/index.md +++ b/files/en-us/mozilla/firefox/releases/106/index.md @@ -53,7 +53,7 @@ This article provides information about the changes in Firefox 106 that will aff ## Changes for add-on developers -#### Removals +### Removals ### Other diff --git a/files/en-us/web/accessibility/aria/roles/checkbox_role/index.md b/files/en-us/web/accessibility/aria/roles/checkbox_role/index.md index adc12c4bf346133..ef0dcd142811a7f 100644 --- a/files/en-us/web/accessibility/aria/roles/checkbox_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/checkbox_role/index.md @@ -90,7 +90,7 @@ From the assistive technology user's perspective, the heading does not exist sin The following example creates an otherwise non-semantic checkbox element using CSS and JavaScript to handle the checked or unchecked status of the element. -#### HTML +### HTML ```html Remember my preferences ``` -#### CSS +### CSS ```css [role="checkbox"] { @@ -118,7 +118,7 @@ The following example creates an otherwise non-semantic checkbox element using C } ``` -#### JavaScript +### JavaScript ```js function changeCheckbox(keyCode) { diff --git a/files/en-us/web/accessibility/aria/roles/dialog_role/index.md b/files/en-us/web/accessibility/aria/roles/dialog_role/index.md index 4b57de1d9e83e94..7d61491f3d37ef3 100644 --- a/files/en-us/web/accessibility/aria/roles/dialog_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/dialog_role/index.md @@ -33,7 +33,7 @@ Marking up a dialog element with the `dialog` role helps assistive technology id The sections below describe how these two requirements can be met. -#### Labeling +### Labeling Even though it is not required for the dialog itself to be able to receive focus, it still needs to be labeled. The label given to the dialog will provide contextual information for the interactive controls inside the dialog. In other words, the dialog's label acts like a grouping label for the controls inside it (similar to how a `` element provides a grouping label for the controls inside a `
` element). @@ -81,7 +81,7 @@ When the dialog is correctly labeled and focus is moved to an element (often an ## Examples -#### A dialog containing a form +### A dialog containing a form ```html
diff --git a/files/en-us/web/accessibility/aria/roles/listbox_role/index.md b/files/en-us/web/accessibility/aria/roles/listbox_role/index.md index 81aa7db642d2620..dddfae0c4ae9a33 100644 --- a/files/en-us/web/accessibility/aria/roles/listbox_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/listbox_role/index.md @@ -159,7 +159,7 @@ When the user clicks on an option, hits Space when focused on an opti ## Examples -#### Example 1: A single select listbox that uses [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) +### Example 1: A single select listbox that uses [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) The snippet below shows how the listbox role is added directly into the HTML source code. @@ -193,7 +193,7 @@ This could have more easily been handled with the native HTML {{HTMLElement('sel ``` -#### More examples +### More examples - [Scrollable Listbox Example](https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html): Single-select listbox that scrolls to reveal more options, similar to HTML {{HTMLElement('select')}} with `size` attribute greater than one. - [Collapsible Dropdown Listbox Example](https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html): Single-select collapsible listbox that expands when activated, similar to HTML {{HTMLElement('select')}} with the attribute `size="1"`. diff --git a/files/en-us/web/accessibility/seizure_disorders/index.md b/files/en-us/web/accessibility/seizure_disorders/index.md index b6742fa5a3962d4..ed39f7cb68fd5d3 100644 --- a/files/en-us/web/accessibility/seizure_disorders/index.md +++ b/files/en-us/web/accessibility/seizure_disorders/index.md @@ -525,11 +525,11 @@ The `update` media feature is used to query the ability of the output device to ## Developmental & Experimental Features -#### MDN Navigator.doNotTrack +### MDN Navigator.doNotTrack [From the documentation](/en-US/docs/Web/API/Navigator/doNotTrack): _"Returns the user's do-not-track setting. This is "1" if the user has requested not to be tracked by web sites, content, or advertising"_. -#### Media Queries Level 5 +### Media Queries Level 5 EnvironmentMQ (Planned in Media Queries Level 5) @@ -538,7 +538,7 @@ EnvironmentMQ (Planned in Media Queries Level 5) - `environment-blending` - : From W3C's Draft document, Media Queries Level 5: _"The [`environment-blending`](https://drafts.csswg.org/mediaqueries-5/#descdef-media-environment-blending) media feature is used to query the characteristics of the user's display so the author can adjust the style of the document. An author might choose to adjust the visuals and/or layout of the page depending on the display technology to increase the appeal or improve legibility."_ -##### User Preference Media Features (Planned in Media Queries Level 5) +#### User Preference Media Features (Planned in Media Queries Level 5) [User Preference Media Features](https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences) in [W3C Editor's Draft Media Queries Level 5](https://drafts.csswg.org/mediaqueries-5/) are especially promising in providing user control over media. Here are some highlights: @@ -569,7 +569,7 @@ The Web Animations model is intended to provide the features necessary for expre ## See also -#### MDN +### MDN - [Accessibility: What users can do to browse more safely](/en-US/docs/Web/Accessibility/Accessibility:_What_users_can_to_to_browse_safely) - [Accessibility: Understanding color and luminance](/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance) @@ -584,46 +584,46 @@ The Web Animations model is intended to provide the features necessary for expre - [WebGL: 2D and 3D graphics for the web](/en-US/docs/Web/API/WebGL_API) - [WebVR API](/en-US/docs/Web/API/WebVR_API) -#### Color +### Color - [Color Tutorial: describing color](https://colortutorial.design/) Tom Jewett - [Formula to Determine Brightness of RGB color](https://stackoverflow.com/questions/596216/formula-to-determine-perceived-brightness-of-rgb-color) Stack Exchange Discussion Thread - [How the Color Red Influences Our Behavior](https://www.scientificamerican.com/article/how-the-color-red-influences-our-behavior/) Scientific American By Susana Martinez-Conde, Stephen L. Macknik on November 1, 2014 -#### Discussions +### Discussions - [Problems with WCAG 2.0 Flash Definition #553](https://github.com/w3c/wcag/issues/553) - [WCAG 2.1 Understanding 2.3.1 - missing/vague dimension definitions #585](https://github.com/w3c/wcag/issues/585) -#### Epilepsy and Seizures +### Epilepsy and Seizures - [Shedding Light on Photosensitivity, One of Epilepsy's Most Complex Conditions](https://www.epilepsy.com/stories/shedding-light-photosensitivity-one-epilepsys-most-complex-conditions-0) Epilepsy Foundation: _"Certain individuals are born with special sensitivity to flashing lights or contrasting visual patterns, such as stripes, grids and checkerboards. Because of this condition, their brain will produce seizure-like discharges when exposed to this type of visual stimulation."_ - [Gamma oscillations and photosensitive epilepsy](https://www.sciencedirect.com/science/article/pii/S0960982217304062?via%3Dihub) Current Biology [Volume 27, Issue 9](https://www.sciencedirect.com/journal/current-biology/vol/27/issue/9), 8 May 2017, Pages R336-R338: _"Certain [visual images](https://www.sciencedirect.com/topics/biochemistry-genetics-and-molecular-biology/retina-image), even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy."_ - [Photosensitive Seizures. Cedars-Sinai](https://www.cedars-sinai.org/health-library/diseases-and-conditions/p/photosensitive-seizures.html) "_Photosensitive seizures are triggered by flashing or flickering lights. These seizures can also be triggered by certain patterns such as stripes._" - [Photic-and pattern-induced seizures: expert consensus of the Epilepsy Foundation of America Working Group](https://pubmed.ncbi.nlm.nih.gov/16146438/) Eplepsia 2005 Sept, 46(9):1423-5 PubMed.gov NCBI [Harding G](https://pubmed.ncbi.nlm.nih.gov/?term=Harding%20G%5BAuthor%5D&cauthor=true&cauthor_uid=16146438), [Wilkins AJ](https://pubmed.ncbi.nlm.nih.gov/?term=Wilkins%20AJ%5BAuthor%5D&cauthor=true&cauthor_uid=16146438), [Erba G](https://pubmed.ncbi.nlm.nih.gov/?term=Erba%20G%5BAuthor%5D&cauthor=true&cauthor_uid=16146438), [Barkley GL](https://pubmed.ncbi.nlm.nih.gov/?term=Barkley%20GL%5BAuthor%5D&cauthor=true&cauthor_uid=16146438), [Fisher RS](https://pubmed.ncbi.nlm.nih.gov/?term=Fisher%20RS%5BAuthor%5D&cauthor=true&cauthor_uid=16146438); [Epilepsy Foundation of America Working Group](https://pubmed.ncbi.nlm.nih.gov/?term=Epilepsy%20Foundation%20of%20America%20Working%20Group%5BCorporate%20Author%5D). -#### GPII +### GPII - [Accessibility Master List](https://ds.gpii.net/learn/accessibility-masterlist) Gregg Vanderheiden Ph.D. Editor -#### Harding +### Harding Along with the PEAT tool, is generally recognized to be one of the two "gold standards" for analyzing flashes. - [Harding Flash and Pattern Analyzer](https://www.hardingfpa.com) -#### ISO +### ISO - [IEC 61966-2-2:2003(en)](https://www.iso.org/obp/ui/#iso:std:iec:61966:-2-2:ed-1:v1:en) Multimedia systems and equipment — Colour measurement and management — Part 2-2: Colour management — Extended RGB color space — scRGB -#### Photosensitive Epilepsy Analysis Tool +### Photosensitive Epilepsy Analysis Tool Along with the Harding tool, is generally recognized to be one of the two "gold standards" for analyzing flashes. - [Trace Research and Development Center](https://trace.umd.edu/peat/) - [Using PEAT To Create Seizureless Web Animations](https://www.useragentman.com/blog/2017/04/02/using-peat-to-create-seizureless-web-animations/) -#### W3C +### W3C - [CSS Color Module Level 3](https://www.w3.org/TR/css-color-3/) - [Personalization Semantics Explainer 1.0](https://www.w3.org/TR/personalization-semantics-1.0/). Working Draft diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md index 9cff5b838c6ecc1..b84366b32c90a27 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md @@ -417,7 +417,7 @@ Within the W3 AGWG there is active discussion and investigation regarding the WC ## Additional Resources -#### MDN +### MDN - [Accessibility](/en-US/docs/Web/Accessibility) - [Accessibility learning path](/en-US/docs/Learn/Accessibility) @@ -425,7 +425,7 @@ Within the W3 AGWG there is active discussion and investigation regarding the WC - [``](/en-US/docs/Web/CSS/color_value) - [Web accessibility for seizures and physical reactions](/en-US/docs/Web/Accessibility/Seizure_disorders) -#### W3C Issues and Discussions +### W3C Issues and Discussions - [The Visual Contrast Research Group](https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup) for WCAG 3. - [Light and dark text](https://github.com/w3c/silver/issues/261) & WCAG 3.0 contrast (Silver thread #261) @@ -433,7 +433,7 @@ Within the W3 AGWG there is active discussion and investigation regarding the WC - [Luminance / Luma confusion](https://github.com/w3c/wcag/issues/236) thread #236 - [Non-sRGB color spaces](https://github.com/w3c/wcag/issues/360), outdated sRGB threshold thread #360 -#### W3C Standards and Guidelines +### W3C Standards and Guidelines - [The latest draft of the new WCAG 3 standards](https://www.w3.org/TR/wcag-3.0/) - [Ensuring that a contrast ratio of 3:1 is provided for icons](https://www.w3.org/WAI/WCAG21/Techniques/general/G207) @@ -441,6 +441,6 @@ Within the W3 AGWG there is active discussion and investigation regarding the WC - [CSS Color Module Level 3](https://www.w3.org/TR/css-color-3/) - [CSS Color Module Level 4](https://drafts.csswg.org/css-color-4/) -### Page Source +## Page Source This page is based largely on the white paper on color and contrast by Andrew Somers, which is being developed for the W3 and Accessibility Guidelines Working Group, used herein by permission. Andrew Somers is an invited expert of the W3 and the AGWG, the author of the WCAG 3 Visual Contrast specifications, and the inventor of the APCA. diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fontkerning/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fontkerning/index.md index 1d94f87bb8b67b7..c59be79195a8ef9 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/fontkerning/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/fontkerning/index.md @@ -37,13 +37,13 @@ Allowed values are: In this example we display the text "AVA Ta We" using each of the supported values of the `textRendering` property. -#### HTML +### HTML ```html ``` -#### JavaScript +### JavaScript ```js const canvas = document.getElementById('canvas'); @@ -62,7 +62,7 @@ ctx.fontKerning = 'none'; ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 110); ``` -#### Result +### Result Note that the the last string has font kerning disabled, so adjacent characters are evenly spread. diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md index e3191e52d918d2b..1fa5a36d154f0c1 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md @@ -29,13 +29,13 @@ The property can be used to get or set the font stretch value. In this example we display the text "Hello World" using each of the supported values of the `fontStretch` property. The stretch value is also displayed for each case by reading the property. -#### HTML +### HTML ```html ``` -#### JavaScript +### JavaScript ```js const canvas = document.getElementById('canvas'); @@ -82,7 +82,7 @@ ctx.fontStretch = 'ultra-expanded'; ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 290); ``` -#### Result +### Result {{ EmbedLiveSample('Examples', 700, 300) }} diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md index 843216a3a9d98ce..ece05f705c8fe71 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/fontvariantcaps/index.md @@ -49,13 +49,13 @@ Note that there are accessibility concerns with some of these, which are outline In this example we display the text "Hello World" using each of the supported values of the `fontVariantCaps` property. The value is also displayed for each case by reading the property. -#### HTML +### HTML ```html ``` -#### JavaScript +### JavaScript ```js const canvas = document.getElementById('canvas'); @@ -90,7 +90,7 @@ ctx.fontVariantCaps = 'titling-caps'; ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 200); ``` -#### Result +### Result {{ EmbedLiveSample('Examples', 700, 230) }} diff --git a/files/en-us/web/api/canvasrenderingcontext2d/gettransform/index.md b/files/en-us/web/api/canvasrenderingcontext2d/gettransform/index.md index 6aeddd2ccf6cf71..b159ee26e701328 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/gettransform/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/gettransform/index.md @@ -60,14 +60,14 @@ We then apply the retrieved matrix directly to the second canvas context by pass `DOMMatrix` object directly to `setTransform()`, and draw a circle on it. -#### HTML +### HTML ```html ``` -#### CSS +### CSS ```css canvas { @@ -75,7 +75,7 @@ canvas { } ``` -#### JavaScript +### JavaScript ```js const canvases = document.querySelectorAll('canvas'); @@ -94,7 +94,7 @@ ctx2.arc(50, 50, 50, 0, 2 * Math.PI); ctx2.fill(); ``` -#### Result +### Result {{ EmbedLiveSample('Examples', "100%", 180) }} diff --git a/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md b/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md index 2bb77c0c2a8985f..6afedf796b196a0 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/letterspacing/index.md @@ -30,13 +30,13 @@ The property value will remain unchanged if set to an invalid/unparsable value. In this example we display the text "Hello World" three times, using the `letterSpacing` property to modify the letter spacing in each case. The spacing is also displayed for each case, using the value of the property. -#### HTML +### HTML ```html ``` -#### JavaScript +### JavaScript ```js const canvas = document.getElementById('canvas'); @@ -56,7 +56,7 @@ ctx.letterSpacing = '20px'; ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 140); ``` -#### Result +### Result {{ EmbedLiveSample('Examples', 700, 180) }} diff --git a/files/en-us/web/api/canvasrenderingcontext2d/textrendering/index.md b/files/en-us/web/api/canvasrenderingcontext2d/textrendering/index.md index ee24ce103126e73..5a3ab07b7a40c1f 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/textrendering/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/textrendering/index.md @@ -43,13 +43,13 @@ The property can be used to get or set the value. In this example we display the text "Hello World" using each of the supported values of the `textRendering` property. The value is also displayed for each case by reading the property. -#### HTML +### HTML ```html ``` -#### JavaScript +### JavaScript ```js const canvas = document.getElementById('canvas'); @@ -72,7 +72,7 @@ ctx.textRendering = 'geometricPrecision'; ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 110); ``` -#### Result +### Result {{ EmbedLiveSample('Examples', 700, 230) }} diff --git a/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md b/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md index 8f9994987e3947a..795d5e805b0e54a 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/wordspacing/index.md @@ -30,13 +30,13 @@ The property value will remain unchanged if set to an invalid/unparsable value. In this example we display the text "Hello World" three times, using the `wordSpacing` property to modify the spacing in each case. The spacing is also displayed for each case, using the value of the property. -#### HTML +### HTML ```html ``` -#### JavaScript +### JavaScript ```js const canvas = document.getElementById('canvas'); @@ -56,7 +56,7 @@ ctx.wordSpacing = '30px'; ctx.fillText(`Hello world (${ctx.wordSpacing})`, 10, 140); ``` -#### Result +### Result {{ EmbedLiveSample('Examples', 700, 180) }} diff --git a/files/en-us/web/api/datatransferitemlist/clear/index.md b/files/en-us/web/api/datatransferitemlist/clear/index.md index cc3cc25ebf4d55a..613cbf2f20e72c9 100644 --- a/files/en-us/web/api/datatransferitemlist/clear/index.md +++ b/files/en-us/web/api/datatransferitemlist/clear/index.md @@ -41,7 +41,7 @@ None ({{jsxref("undefined")}}). This example shows the use of the `clear()` method. -#### HTML +### HTML ```html
@@ -51,7 +51,7 @@ This example shows the use of the `clear()` method.
Drop Zone
``` -#### CSS +### CSS ```css div { @@ -67,7 +67,7 @@ This example shows the use of the `clear()` method. } ``` -#### JavaScript +### JavaScript ```js function dragstartHandler(ev) { @@ -121,7 +121,7 @@ function dragendHandler(ev) { } ``` -#### Result +### Result {{EmbedLiveSample('Examples', 400, 300)}} diff --git a/files/en-us/web/api/directoryentrysync/index.md b/files/en-us/web/api/directoryentrysync/index.md index 50271f7cd41c8cb..dc6d00c2676774f 100644 --- a/files/en-us/web/api/directoryentrysync/index.md +++ b/files/en-us/web/api/directoryentrysync/index.md @@ -24,7 +24,7 @@ The `DirectoryEntrySync` interface represents a directory in a file system. It i If you want to create subdirectories, you have to create each child directory in sequence. If you try to create a directory using a full path that includes parent directories that do not exist yet, you get an error. So create the hierarchy by recursively adding a new path after creating the parent directory. -#### Example +### Example The `getFile()` method returns a `FileEntrySync`, which represents a file in the file system. The following creates an empty file called `logs.txt` in the root directory. diff --git a/files/en-us/web/api/directoryreadersync/index.md b/files/en-us/web/api/directoryreadersync/index.md index 287c8b78fb7c9c7..2abf87467bccdc6 100644 --- a/files/en-us/web/api/directoryreadersync/index.md +++ b/files/en-us/web/api/directoryreadersync/index.md @@ -20,7 +20,7 @@ The `DirectoryReaderSync` interface lets you read the entries in a directory. Before you call the only method in this interface, [`readEntries()`](#readentries), create the [`DirectoryEntrySync`](/en-US/docs/Web/API/DirectoryEntrySync) object. But DirectoryEntrySync (as well as [`FileEntrySync`](/en-US/docs/Web/API/FileEntrySync)) is not a data type that you can pass between a calling app and Web Worker thread. It's not a big deal, because you don't really need to have the main app and the worker thread see the same JavaScript object; you just need them to access the same files. You can do that by passing a list of `filesystem:` URLs—which are just strings—instead of a list of entries. You can also use the `filesystem:` URL to look up the entry with `resolveLocalFileSystemURL()`. That gets you back to a DirectoryEntrySync (as well as FileEntrySync) object. -#### Example +### Example In the following code snippet from [HTML5Rocks (web.dev)](https://web.dev/filesystem-sync/), we create Web Workers and pass data from it to the main app. @@ -95,10 +95,6 @@ self.onmessage = (e) => { }; ``` -## Method overview - -- readEntries() - ## Method ### readEntries() diff --git a/files/en-us/web/api/document/cookie/index.md b/files/en-us/web/api/document/cookie/index.md index 7967b7129ce84a7..55119fe9eedc2eb 100644 --- a/files/en-us/web/api/document/cookie/index.md +++ b/files/en-us/web/api/document/cookie/index.md @@ -379,7 +379,7 @@ The reason for the [syntax](#syntax) of the `document.cookie` accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, [localStorage](/en-US/docs/Web/API/Web_Storage_API)): -#### The server tells the client to store a cookie +### The server tells the client to store a cookie ```bash HTTP/1.0 200 OK @@ -390,7 +390,7 @@ Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT [content of the page here] ``` -#### The client sends back to the server its cookies previously stored +### The client sends back to the server its cookies previously stored ```bash GET /sample_page.html HTTP/1.1 diff --git a/files/en-us/web/api/element/mouseenter_event/index.md b/files/en-us/web/api/element/mouseenter_event/index.md index 3ba518bff67423e..eebf573a445d5ed 100644 --- a/files/en-us/web/api/element/mouseenter_event/index.md +++ b/files/en-us/web/api/element/mouseenter_event/index.md @@ -95,12 +95,12 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}} Though similar to {{domxref("Element/mouseover_event", "mouseover")}}, `mouseenter` differs in that it doesn't [bubble](/en-US/docs/Web/API/Event/bubbles) and it isn't sent to any descendants when the pointer is moved from one of its descendants' physical space to its own physical space. -#### Behavior of `mouseenter` events: +### Behavior of `mouseenter` events: ![](mouseenter.png) One `mouseenter` event is sent to each element of the hierarchy when entering them. Here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text. -#### Behavior of `mouseover` events: +### Behavior of `mouseover` events: ![](mouseover.png) A single `mouseover` event is sent to the deepest element of the DOM tree, then it bubbles up the hierarchy until it is canceled by a handler or reaches the root. diff --git a/files/en-us/web/api/element/mouseleave_event/index.md b/files/en-us/web/api/element/mouseleave_event/index.md index 3cfcf69794157be..158afb333a84d6e 100644 --- a/files/en-us/web/api/element/mouseleave_event/index.md +++ b/files/en-us/web/api/element/mouseleave_event/index.md @@ -91,13 +91,13 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}} - {{domxref("MouseEvent.y")}} {{ReadOnlyInline}} - : Alias for {{domxref("MouseEvent.clientY")}} -#### Behavior of `mouseleave` events: +### Behavior of `mouseleave` events: ![](mouseleave.png) One `mouseleave` event is sent to each element of the hierarchy when leaving them. Here four events are sent to the four elements of the hierarchy when the pointer moves from the text to an area outside of the most outer div represented here. -#### Behavior of `mouseout` events: +### Behavior of `mouseout` events: ![](mouseout.png) diff --git a/files/en-us/web/api/fileentrysync/index.md b/files/en-us/web/api/fileentrysync/index.md index 007b1e942d7e496..298dbf57a89362c 100644 --- a/files/en-us/web/api/fileentrysync/index.md +++ b/files/en-us/web/api/fileentrysync/index.md @@ -77,15 +77,15 @@ Returns a File that represents the current state of the file that this `FileEntr void file (); ``` -##### Parameter +#### Parameter None. -##### Returns +#### Returns A `File` object. -##### Exceptions +#### Exceptions This method can raise a [DOMException](/en-US/docs/Web/API/DOMException) with the following codes: diff --git a/files/en-us/web/api/formdata/set/index.md b/files/en-us/web/api/formdata/set/index.md index f746fadb75c5ecc..34b5b8de1904d01 100644 --- a/files/en-us/web/api/formdata/set/index.md +++ b/files/en-us/web/api/formdata/set/index.md @@ -25,7 +25,7 @@ set(name, value) set(name, value, filename) ``` -#### Parameters +### Parameters - `name` - : The name of the field whose data is contained in `value`. diff --git a/files/en-us/web/api/html_dom_api/index.md b/files/en-us/web/api/html_dom_api/index.md index ffd678266a029b0..b9f59ade4385657 100644 --- a/files/en-us/web/api/html_dom_api/index.md +++ b/files/en-us/web/api/html_dom_api/index.md @@ -311,7 +311,7 @@ The {{domxref("EventSource")}} interface represents the source which sent or is In this example, an {{HTMLElement("input")}} element's {{domxref("HTMLElement/input_event", "input")}} event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value. -#### JavaScript +### JavaScript ```js const nameField = document.getElementById("userName"); @@ -341,7 +341,7 @@ Then {{domxref("EventTarget.addEventListener", "addEventListener()")}} is called With this in place, the "Send" button is always enabled whenever the user name input field has a value, and disabled when it's empty. -#### HTML +### HTML The HTML for the form looks like this: @@ -360,7 +360,7 @@ The HTML for the form looks like this: ``` -#### Result +### Result {{EmbedLiveSample("Examples", 640, 300)}} diff --git a/files/en-us/web/api/htmlimageelement/align/index.md b/files/en-us/web/api/htmlimageelement/align/index.md index a9f1baeb04fb573..7b9c3816c8e94a1 100644 --- a/files/en-us/web/api/htmlimageelement/align/index.md +++ b/files/en-us/web/api/htmlimageelement/align/index.md @@ -36,7 +36,7 @@ content attribute. A string specifying one of the following strings which set the alignment mode for the image. -#### Baseline alignment +### Baseline alignment These three values specify the alignment of the element relative to the text baseline. These should be replaced by using the CSS {{cssxref("vertical-align")}} property. @@ -52,7 +52,7 @@ These should be replaced by using the CSS {{cssxref("vertical-align")}} property It may be worth noting that {{cssxref("vertical-align")}} offers several additional options for its value; you may wish to consider these when changing your code to use it. -#### Floating images horizontally +### Floating images horizontally The `left` and `right` properties don't affect the baseline-relative alignment. Instead, they cause the image to "float" to the left or diff --git a/files/en-us/web/api/htmlimageelement/sizes/index.md b/files/en-us/web/api/htmlimageelement/sizes/index.md index 36b17c429f27705..f606b4ff83bbcd2 100644 --- a/files/en-us/web/api/htmlimageelement/sizes/index.md +++ b/files/en-us/web/api/htmlimageelement/sizes/index.md @@ -36,7 +36,7 @@ comprised of a media condition, then at least one whitespace character, then the **source size value** to use for the image when the media condition evaluates to `true`. -#### Media conditions +### Media conditions Each source size descriptor consists of a media condition as defined by the media queries standard. Because a source size descriptor is used to specify the width to use @@ -45,7 +45,7 @@ necessarily) based entirely on width information. See {{SectionOnPage("/en-US/docs/Web/CSS/Media_Queries/Using_media_queries", "Syntax")}} for details on how to construct a media condition. -#### Source size values +### Source size values The source size value is a [CSS length](/en-US/docs/Web/CSS/length). It may be specified using font-relative units (such as `em` or `ex`), diff --git a/files/en-us/web/api/keyboardevent/metakey/index.md b/files/en-us/web/api/keyboardevent/metakey/index.md index 1be8856d3a6ab66..71d07f2a6e2f2fd 100644 --- a/files/en-us/web/api/keyboardevent/metakey/index.md +++ b/files/en-us/web/api/keyboardevent/metakey/index.md @@ -42,7 +42,7 @@ function ismetaKey(e) { } ``` -#### Result +### Result {{ EmbedLiveSample('Examples', 400, 90) }} diff --git a/files/en-us/web/api/media_capture_and_streams_api/constraints/index.md b/files/en-us/web/api/media_capture_and_streams_api/constraints/index.md index 698b3dd0880ab1f..42b186a8652ee4a 100644 --- a/files/en-us/web/api/media_capture_and_streams_api/constraints/index.md +++ b/files/en-us/web/api/media_capture_and_streams_api/constraints/index.md @@ -303,7 +303,7 @@ h3 { } ``` -#### Defaults and variables +### Defaults and variables First we have the default constraint sets, as strings. These strings are presented in editable {{HTMLElement("textarea")}}s, but this is the initial configuration of the stream. @@ -360,7 +360,7 @@ videoConstraintEditor.value = videoDefaultConstraintString; audioConstraintEditor.value = audioDefaultConstraintString; ``` -#### Updating the settings display +### Updating the settings display To the right of each of the constraint set editors is a second text box which we use to display the current configuration of the track's configurable properties. This display is updated by the function `getCurrentSettings()`, which gets the current settings for the audio and video tracks and inserts the corresponding code into the tracks' settings display boxes by setting their {{htmlattrxref("value", "textarea")}}. @@ -378,7 +378,7 @@ function getCurrentSettings() { This gets called after the stream first starts up, as well as any time we've applied updated constraints, as you'll see below. -#### Building the track constraint set objects +### Building the track constraint set objects The `buildConstraints()` function builds the {{domxref("MediaTrackConstraints")}} objects for the audio and video tracks using the code in the two tracks' constraint set edit boxes. @@ -395,7 +395,7 @@ function buildConstraints() { This uses {{jsxref("JSON.parse()")}} to parse the code in each editor into an object. If either call to JSON.parse() throws an exception, `handleError()` is called to output the error message to the log. -#### Configuring and starting the stream +### Configuring and starting the stream The `startVideo()` method handles setting up and starting the video stream. @@ -453,7 +453,7 @@ document.getElementById("startButton").addEventListener( ); ``` -#### Applying constraint set updates +### Applying constraint set updates Next, we set up an event listener for the "Apply Constraints" button. If it's clicked and there's not already media in use, we call `startVideo()`, and let that function handle starting the stream with the specified settings in place. Otherwise, we follow these steps to apply the updated constraints to the already-active stream: @@ -496,7 +496,7 @@ document.getElementById("applyButton").addEventListener( ); ``` -#### Handling the stop button +### Handling the stop button Then we set up the handler for the stop button. @@ -517,7 +517,7 @@ document.getElementById("stopButton").addEventListener("click", () => { This stops the active tracks, sets the `videoTrack` and `audioTrack` variables to `null` so we know they're gone, and removes the stream from the {{HTMLElement("video")}} element by setting {{domxref("HTMLMediaElement.srcObject")}} to `null`. -#### Simple tab support in the editor +### Simple tab support in the editor This code adds simple support for tabs to the {{HTMLElement("textarea")}} elements by making the tab key insert two space characters when either constraint edit box is focused. @@ -541,7 +541,7 @@ videoConstraintEditor.addEventListener("keydown", keyDownHandler, false); audioConstraintEditor.addEventListener("keydown", keyDownHandler, false); ``` -#### Show constrainable properties the browser supports +### Show constrainable properties the browser supports The last significant piece of the puzzle: code that displays, for the user's reference, a list of the constrainable properties which their browser supports. Each property is a link to its documentation on MDN for the user's convenience. See the {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getSupportedConstraints", "Example")}} for details on how this code works. @@ -559,7 +559,7 @@ for (const constraint in supportedConstraints) { } ``` -#### Error handling +### Error handling We also have some simple error handling code; `handleError()` is called to handle promises which fail, and the `log()` function appends the error message to a special logging {{HTMLElement("div")}} box under the video. diff --git a/files/en-us/web/api/mediadevices/devicechange_event/index.md b/files/en-us/web/api/mediadevices/devicechange_event/index.md index fd3b19d44eeb34a..652e87c4db94b0d 100644 --- a/files/en-us/web/api/mediadevices/devicechange_event/index.md +++ b/files/en-us/web/api/mediadevices/devicechange_event/index.md @@ -156,7 +156,7 @@ const audioList = document.getElementById("audioList"); const videoList = document.getElementById("videoList"); ``` -#### Getting and drawing the device list +### Getting and drawing the device list Now let's take a look at `updateDeviceList()` itself. This method is called any time we want to fetch the current list of media devices and then update the @@ -212,7 +212,7 @@ parentheses, it's appended to the appropriate list by calling {{domxref("Node.appendChild", "appendChild()")}} on either `audioList` or `videoList`, as appropriate based on the device type. -#### Handling device list changes +### Handling device list changes We call `updateDeviceList()` in two places. The first is in the {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} promise's fulfillment diff --git a/files/en-us/web/api/mediaerror/code/index.md b/files/en-us/web/api/mediaerror/code/index.md index e91ac04aa22e06f..173c0a118e1cf72 100644 --- a/files/en-us/web/api/mediaerror/code/index.md +++ b/files/en-us/web/api/mediaerror/code/index.md @@ -27,7 +27,7 @@ string with specific diagnostic information, see {{domxref("MediaError.message") A numeric value indicating the general type of error which occurred. The possible values are described below, in [Media error code constants](#media_error_code_constants). -#### Media error code constants +### Media error code constants diff --git a/files/en-us/web/api/request/mode/index.md b/files/en-us/web/api/request/mode/index.md index bd1c384d7cbde65..f73cd17dbae415e 100644 --- a/files/en-us/web/api/request/mode/index.md +++ b/files/en-us/web/api/request/mode/index.md @@ -47,7 +47,7 @@ to determine if cross-origin requests lead to valid responses, and which propert - `websocket` - : A special mode used only when establishing a [WebSocket](/en-US/docs/Web/API/WebSockets_API) connection. -#### Default mode +### Default mode Requests can be initiated in a variety of ways, and the mode for a request depends on the particular means by which it was initiated. diff --git a/files/en-us/web/api/rtcicecandidate/usernamefragment/index.md b/files/en-us/web/api/rtcicecandidate/usernamefragment/index.md index bc1e48a4d5ffe92..df233732ee25367 100644 --- a/files/en-us/web/api/rtcicecandidate/usernamefragment/index.md +++ b/files/en-us/web/api/rtcicecandidate/usernamefragment/index.md @@ -35,7 +35,7 @@ uniquely identifies a single ongoing ICE interaction, including for any communic with the {{Glossary("STUN")}} server. The string may be up to 256 characters long, and has no default value. -#### Randomization +### Randomization At least 24 bits of the text in the `ufrag` are required to be randomly selected by the ICE layer at the beginning of the ICE session. The specifics for which diff --git a/files/en-us/web/api/svgstyleelement/index.md b/files/en-us/web/api/svgstyleelement/index.md index 087c7424f57e4e9..06aeb3ea1c5f263 100644 --- a/files/en-us/web/api/svgstyleelement/index.md +++ b/files/en-us/web/api/svgstyleelement/index.md @@ -117,7 +117,7 @@ const style = document.querySelector("#circle_style_id"); This example demonstrates how to get and set the properties of a style element, which in this case was specified in an SVG definition. -#### HTML +### HTML The HTML contains an SVG definition for a [``](/en-US/docs/Web/SVG/Element/circle) with a [`