From 79e3e7852e2d3877575b57d6ec56b27f06aaeb2f Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Wed, 20 Jul 2022 07:57:55 +0530
Subject: [PATCH 1/3] Comment out ellipsis in code blocks
---
.../primarylightdirection/index.md | 2 +-
.../primarylightintensity/index.md | 2 +-
.../sphericalharmonicscoefficients/index.md | 2 +-
.../xrprojectionlayer/fixedfoveation/index.md | 2 +-
files/en-us/web/api/xrreferencespace/index.md | 2 +-
.../web/api/xrrigidtransform/inverse/index.md | 4 +-
.../api/xrsystem/devicechange_event/index.md | 2 +-
.../createcylinderlayer/index.md | 2 +-
.../getdepthinformation/index.md | 4 +-
.../xsltprocessor/generating_html/index.md | 10 ++---
.../-webkit-device-pixel-ratio/index.md | 12 +++---
files/en-us/web/css/_colon_is/index.md | 9 +++--
files/en-us/web/css/_colon_not/index.md | 2 +-
files/en-us/web/css/_colon_where/index.md | 4 +-
.../web/css/_doublecolon_placeholder/index.md | 6 +--
.../web/css/alternative_style_sheets/index.md | 6 +--
files/en-us/web/css/border-radius/index.md | 4 +-
.../web/css/box-decoration-break/index.md | 33 +++++++--------
.../en-us/web/css/content-visibility/index.md | 18 ++++-----
.../using_multiple_backgrounds/index.md | 2 +-
.../index.md | 4 +-
files/en-us/web/css/cursor/index.md | 6 +--
.../css/general_sibling_combinator/index.md | 2 +-
files/en-us/web/css/line-height/index.md | 4 +-
files/en-us/web/css/margin-trim/index.md | 2 +-
.../testing_media_queries/index.md | 2 +-
.../using_media_queries/index.md | 40 +++++++++----------
files/en-us/web/css/order/index.md | 4 +-
files/en-us/web/css/ratio/index.md | 2 +-
files/en-us/web/css/resolution/index.md | 2 +-
files/en-us/web/css/text-transform/index.md | 16 ++++----
31 files changed, 108 insertions(+), 104 deletions(-)
diff --git a/files/en-us/web/api/xrlightestimate/primarylightdirection/index.md b/files/en-us/web/api/xrlightestimate/primarylightdirection/index.md
index 8f6fa49f104dc6f..a01e990d4db4200 100644
--- a/files/en-us/web/api/xrlightestimate/primarylightdirection/index.md
+++ b/files/en-us/web/api/xrlightestimate/primarylightdirection/index.md
@@ -34,7 +34,7 @@ const lightProbe = await xrSession.requestLightProbe();
function onXRFrame(time, xrFrame) {
let lightEstimate = xrFrame.getLightEstimate(lightProbe);
- // Render lights ...
+ // Render lights
// Available properties
lightEstimate.primaryLightDirection;
diff --git a/files/en-us/web/api/xrlightestimate/primarylightintensity/index.md b/files/en-us/web/api/xrlightestimate/primarylightintensity/index.md
index 0693993942e37f1..f84f9d779561d37 100644
--- a/files/en-us/web/api/xrlightestimate/primarylightintensity/index.md
+++ b/files/en-us/web/api/xrlightestimate/primarylightintensity/index.md
@@ -34,7 +34,7 @@ const lightProbe = await xrSession.requestLightProbe();
function onXRFrame(time, xrFrame) {
let lightEstimate = xrFrame.getLightEstimate(lightProbe);
- // Render lights ...
+ // Render lights
// Available properties
lightEstimate.primaryLightDirection;
diff --git a/files/en-us/web/api/xrlightestimate/sphericalharmonicscoefficients/index.md b/files/en-us/web/api/xrlightestimate/sphericalharmonicscoefficients/index.md
index 5f7d89c8728ea7f..3404dc8be45e633 100644
--- a/files/en-us/web/api/xrlightestimate/sphericalharmonicscoefficients/index.md
+++ b/files/en-us/web/api/xrlightestimate/sphericalharmonicscoefficients/index.md
@@ -37,7 +37,7 @@ const lightProbe = await xrSession.requestLightProbe();
function onXRFrame(time, xrFrame) {
let lightEstimate = xrFrame.getLightEstimate(lightProbe);
- // Render lights using lightEstimate.sphericalHarmonicsCoefficients ...
+ // Render lights using lightEstimate.sphericalHarmonicsCoefficients
}
```
diff --git a/files/en-us/web/api/xrprojectionlayer/fixedfoveation/index.md b/files/en-us/web/api/xrprojectionlayer/fixedfoveation/index.md
index 584708ce52c0385..2da94f83d80a544 100644
--- a/files/en-us/web/api/xrprojectionlayer/fixedfoveation/index.md
+++ b/files/en-us/web/api/xrprojectionlayer/fixedfoveation/index.md
@@ -44,7 +44,7 @@ Some devices don't support foveated rendering. In that case `fixedFoveation` is
The `fixedFoveation` property allows you to set the level of foveation at runtime and for each frame. To set the maximum foveation for a given {{domxref("XRProjectionLayer")}}, use a value of `1`.
```js
-let glProjectionLayer = glBinding.createProjectionLayer(/* ... */);
+let glProjectionLayer = glBinding.createProjectionLayer(/* … */);
glProjectionLayer.fixedFoveation = 1; // maximum foveation
```
diff --git a/files/en-us/web/api/xrreferencespace/index.md b/files/en-us/web/api/xrreferencespace/index.md
index 931aa17040e9e02..9cfb66052ad77fe 100644
--- a/files/en-us/web/api/xrreferencespace/index.md
+++ b/files/en-us/web/api/xrreferencespace/index.md
@@ -72,7 +72,7 @@ There are two situations in which you need to obtain an `XRReferenceSpace`. The
```js
xrSession.requestReferenceSpace("local").then((refSpace) => {
xrReferenceSpace = refSpace;
- /* ... */
+ // …
});
```
diff --git a/files/en-us/web/api/xrrigidtransform/inverse/index.md b/files/en-us/web/api/xrrigidtransform/inverse/index.md
index 9893ed5a70efb7c..618ee1b9e28ae50 100644
--- a/files/en-us/web/api/xrrigidtransform/inverse/index.md
+++ b/files/en-us/web/api/xrrigidtransform/inverse/index.md
@@ -52,13 +52,13 @@ for (let view of pose.view) {
let viewport = glLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
- /* ... */
+ // …
mat4.multiply(modelViewMatrix, view.transform.inverse.matrix, objectMatrix);
gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix,
false, modelViewMatrix);
- /* ... */
+ // …
}
```
diff --git a/files/en-us/web/api/xrsystem/devicechange_event/index.md b/files/en-us/web/api/xrsystem/devicechange_event/index.md
index ffc7569e45e20a1..c14dc18a8582de6 100644
--- a/files/en-us/web/api/xrsystem/devicechange_event/index.md
+++ b/files/en-us/web/api/xrsystem/devicechange_event/index.md
@@ -71,7 +71,7 @@ You can also use the `ondevicechange` event handler property to set a single han
```js
if (navigator.xr) {
navigator.xr.ondevicechange = event => {
- /* ... etc ... */
+ // …
};
}
```
diff --git a/files/en-us/web/api/xrwebglbinding/createcylinderlayer/index.md b/files/en-us/web/api/xrwebglbinding/createcylinderlayer/index.md
index 181746f8a4143fa..e9fafb130aaa551 100644
--- a/files/en-us/web/api/xrwebglbinding/createcylinderlayer/index.md
+++ b/files/en-us/web/api/xrwebglbinding/createcylinderlayer/index.md
@@ -115,7 +115,7 @@ function onXRSessionStarted(xrSession) {
centralAngle : 60 * Math.PI / 180,
aspectRatio : 2,
radius : 2,
- transform : new XRRigidTransform(/* ... */),
+ transform : new XRRigidTransform(/* … */),
});
xrSession.updateRenderState({
diff --git a/files/en-us/web/api/xrwebglbinding/getdepthinformation/index.md b/files/en-us/web/api/xrwebglbinding/getdepthinformation/index.md
index b271a76b9089c0b..f13fe0d65c25f29 100644
--- a/files/en-us/web/api/xrwebglbinding/getdepthinformation/index.md
+++ b/files/en-us/web/api/xrwebglbinding/getdepthinformation/index.md
@@ -59,7 +59,7 @@ const session = navigator.xr.requestSession("immersive-ar", {
const glBinding = new XRWebGLBinding(session, gl);
-// ...
+// …
// Obtain depth information in an active and animated frame
function rafCallback(time, frame) {
@@ -71,7 +71,7 @@ function rafCallback(time, frame) {
if (depthInformation) {
// Do something with the depth information
// gl.bindTexture(gl.TEXTURE_2D, depthInformation.texture);
- // ...
+ // …
}
}
}
diff --git a/files/en-us/web/api/xsltprocessor/generating_html/index.md b/files/en-us/web/api/xsltprocessor/generating_html/index.md
index d3e554571ced978..3f7764767c3ea6a 100644
--- a/files/en-us/web/api/xsltprocessor/generating_html/index.md
+++ b/files/en-us/web/api/xsltprocessor/generating_html/index.md
@@ -37,7 +37,7 @@ The XSL Stylesheet used will need to have two namespaces - one for the XSLT elem
xmlns:myNS="http://devedge.netscape.com/2002/de">
- ...
+ …
```
@@ -46,7 +46,7 @@ A template matching the root node of the XML document is created and used to cre
**Figure 4: Creating the basic HTML document**
```xml
-...
+…
@@ -80,7 +80,7 @@ A template matching the root node of the XML document is created and used to cre
-...
+…
```
Three more `xsl:template`'s are needed to complete the example. The first `xsl:template` is used for the author nodes, while the second one processes the body node. The third template has a general matching rule which will match any node and any attribute. It is needed in order to preserve the HTML elements in the XML document, since it matches all of them and copies them out into the HTML document the transformation creates.
@@ -88,7 +88,7 @@ Three more `xsl:template`'s are needed to complete the example. The first `xsl:t
**Figure 5: Final 3 Templates**
```xml
-...
+…
--
@@ -112,7 +112,7 @@ Three more `xsl:template`'s are needed to complete the example. The first `xsl:t
-...
+…
```
The final XSLT stylesheet looks as follows:
diff --git a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
index 5799895158441dc..c7c698eab455d90 100644
--- a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
+++ b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
@@ -29,14 +29,14 @@ The `-webkit-device-pixel-ratio` feature is specified as a {{cssxref("<number
```css
/* A unit of "dppx" is implied: */
-@media (-webkit-min-device-pixel-ratio: 2) { ... }
-/* ... is equivalent to: */
-@media (min-resolution: 2dppx) { ... }
+@media (-webkit-min-device-pixel-ratio: 2) { }
+/* It is equivalent to: */
+@media (min-resolution: 2dppx) { }
/* Similarly: */
-@media (-webkit-max-device-pixel-ratio: 2) { ... }
-/* ... is equivalent to: */
-@media (max-resolution: 2dppx) { ... }
+@media (-webkit-max-device-pixel-ratio: 2) { }
+/* It is equivalent to: */
+@media (max-resolution: 2dppx) { }
```
## Examples
diff --git a/files/en-us/web/css/_colon_is/index.md b/files/en-us/web/css/_colon_is/index.md
index af73a18dd0825f7..ced40c456c431e8 100644
--- a/files/en-us/web/css/_colon_is/index.md
+++ b/files/en-us/web/css/_colon_is/index.md
@@ -48,7 +48,7 @@ In CSS when using a selector list, if any of the selectors are invalid then the
```css
:is(:valid, :unsupported) {
- ...
+ /* … */
}
```
@@ -56,7 +56,7 @@ Will still parse correctly and match `:valid` even in browsers which don't suppo
```css
:valid, :unsupported {
- ...
+ /* … */
}
```
@@ -179,10 +179,12 @@ For example, without `:is()`, styling all the {{HTMLElement("h1")}} elements at
h1 {
font-size: 30px;
}
+
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
font-size: 25px;
}
+
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
@@ -190,8 +192,9 @@ aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
font-size: 20px;
}
+
/* Level 3 */
-/* ... don't even think about it! */
+/* don't even think about it! */
```
Using `:is()`, though, it's much easier:
diff --git a/files/en-us/web/css/_colon_not/index.md b/files/en-us/web/css/_colon_not/index.md
index 33e1161ce92fbc8..9b5bf8b7d2d7cef 100644
--- a/files/en-us/web/css/_colon_not/index.md
+++ b/files/en-us/web/css/_colon_not/index.md
@@ -37,7 +37,7 @@ The `:not()` pseudo-class requires a comma-separated list of one or more selecto
There are several unusual effects and outcomes when using `:not()` that you should keep in mind when using it:
-- The `:not` pseudo-class may not be nested, which means that `:not(:not(...))` is invalid.
+- The `:not` pseudo-class may not be nested, which means that `:not(:not( ))` is invalid.
- Useless selectors can be written using this pseudo-class. For example, `:not(*)` matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.
- This pseudo-class can increase the [specificity](/en-US/docs/Web/CSS/Specificity) of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors.
- The specificity of the `:not()` pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written [`:not(:is(argument))`](/en-US/docs/Web/CSS/:is).
diff --git a/files/en-us/web/css/_colon_where/index.md b/files/en-us/web/css/_colon_where/index.md
index 2a86398d3cbe87a..1f42f0b46f21cc8 100644
--- a/files/en-us/web/css/_colon_where/index.md
+++ b/files/en-us/web/css/_colon_where/index.md
@@ -45,7 +45,7 @@ In CSS when using a selector list, if any of the selectors are invalid then the
```css
:where(:valid, :unsupported) {
- ...
+ /* … */
}
```
@@ -53,7 +53,7 @@ Will still parse correctly and match `:valid` even in browsers which don't suppo
```css
:valid, :unsupported {
- ...
+ /* … */
}
```
diff --git a/files/en-us/web/css/_doublecolon_placeholder/index.md b/files/en-us/web/css/_doublecolon_placeholder/index.md
index 516d09a10ed9aa3..918d51671ab9dd4 100644
--- a/files/en-us/web/css/_doublecolon_placeholder/index.md
+++ b/files/en-us/web/css/_doublecolon_placeholder/index.md
@@ -79,7 +79,7 @@ This example shows some of the adjustments that you can make to the styles of pl
#### HTML
```html
-
+
```
#### CSS
@@ -103,8 +103,8 @@ Some browsers (such as Firefox) set the default {{cssxref("opacity")}} of placeh
#### HTML
```html
-
-
+
+
```
#### CSS
diff --git a/files/en-us/web/css/alternative_style_sheets/index.md b/files/en-us/web/css/alternative_style_sheets/index.md
index fde4e09e72e307f..c7913dc017a3f15 100644
--- a/files/en-us/web/css/alternative_style_sheets/index.md
+++ b/files/en-us/web/css/alternative_style_sheets/index.md
@@ -18,7 +18,7 @@ Firefox lets the user select the stylesheet using the _View > Page Style_ submen
## An example: specifying the alternative stylesheets
-The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with `rel="alternate stylesheet"` and `title="..."` attributes. For example:
+The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with `rel="alternate stylesheet"` and `title="…"` attributes. For example:
```html
@@ -41,8 +41,8 @@ No matter what style is selected, the rules from the reset.css stylesheet will a
Any stylesheet in a document falls into one of the following categories:
- **Persistent** (no `rel="alternate"`, no `title=""`): always applies to the document.
-- **Preferred** (no `rel="alternate"`, with `title="..."` specified): applied by default, but {{domxref("StyleSheet.disabled", "disabled", "", 1)}} if an alternate stylesheet is selected. **There can only be one preferred stylesheet**, so providing stylesheets with different title attributes will cause some of them to be ignored.
-- **Alternate** (`rel="alternate stylesheet"`, `title="..."` must be specified): disabled by default, can be selected.
+- **Preferred** (no `rel="alternate"`, with `title="…"` specified): applied by default, but {{domxref("StyleSheet.disabled", "disabled", "", 1)}} if an alternate stylesheet is selected. **There can only be one preferred stylesheet**, so providing stylesheets with different title attributes will cause some of them to be ignored.
+- **Alternate** (`rel="alternate stylesheet"`, `title="…"` must be specified): disabled by default, can be selected.
When style sheets are referenced with a `title` attribute on the {{HTMLElement("link", "<link rel=\"stylesheet\">")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same `title` are part of the same choice. Style sheets linked without a `title` attribute are always applied.
diff --git a/files/en-us/web/css/border-radius/index.md b/files/en-us/web/css/border-radius/index.md
index 77ef9bc717ddcaf..db18bf9d8c619f0 100644
--- a/files/en-us/web/css/border-radius/index.md
+++ b/files/en-us/web/css/border-radius/index.md
@@ -163,7 +163,7 @@ For example:
```css
border-radius: 1em/5em;
-/* ... is equivalent to: */
+/* It is equivalent to: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
@@ -173,7 +173,7 @@ border-bottom-left-radius: 1em 5em;
```css
border-radius: 4px 3px 6px / 2px 4px;
-/* ... is equivalent to: */
+/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
diff --git a/files/en-us/web/css/box-decoration-break/index.md b/files/en-us/web/css/box-decoration-break/index.md
index 072437115829383..4d31032af0ab37f 100644
--- a/files/en-us/web/css/box-decoration-break/index.md
+++ b/files/en-us/web/css/box-decoration-break/index.md
@@ -63,22 +63,23 @@ The `box-decoration-break` property is specified as one of the keyword values li
An inline element that contains line breaks styled with:
-```css
-.example {
- background: linear-gradient(to bottom right, yellow, green);
- box-shadow:
- 8px 8px 10px 0px deeppink,
- -5px -5px 5px 0px blue,
- 5px 5px 15px 0px yellow;
- padding: 0em 1em;
- border-radius: 16px;
- border-style: solid;
- margin-left: 10px;
- font: 24px sans-serif;
- line-height: 2;
-}
-
-...
+```html
+
+…
The quick orange fox
```
diff --git a/files/en-us/web/css/content-visibility/index.md b/files/en-us/web/css/content-visibility/index.md
index 7be1dee7af34a8d..bd6cac5178f57b8 100644
--- a/files/en-us/web/css/content-visibility/index.md
+++ b/files/en-us/web/css/content-visibility/index.md
@@ -65,11 +65,11 @@ section {
contain-intrinsic-size: 0 500px;
}
-...
-...
-...
-...
-...
+…
+…
+…
+…
+…
```
### Using hidden to manually manage visibility
@@ -89,10 +89,10 @@ The following example shows that it is possible to manage visibility in script.
contain: style layout paint;
}
-
...
-
...
-
...
-
...
+
…
+
…
+
…
+
…
```
## Specifications
diff --git a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index bf936a7fe2ee1ef..015e69ce78af45d 100644
--- a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -16,7 +16,7 @@ Specifying multiple backgrounds is easy:
```css
.myclass {
- background: background1, background2, ..., backgroundN;
+ background: background1, background2, /* … ,*/ backgroundN;
}
```
diff --git a/files/en-us/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/en-us/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
index 0f6eadfdf39d12d..949e61f2575a7d9 100644
--- a/files/en-us/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
+++ b/files/en-us/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
@@ -41,8 +41,8 @@ If the intent is to create a "blanket" style that will apply to all targeted ele
In the following example, there are five links that point to elements in the same document. Selecting the "First" link, for example, will cause `
` to become the target element. Note that the document may jump to a new scroll position, since target elements are placed on the top of the browser window if possible.
```html
-
……FirstSecond
diff --git a/files/en-us/web/css/cursor/index.md b/files/en-us/web/css/cursor/index.md
index 7049ef1d8e94a94..3fcd72eb33275cf 100644
--- a/files/en-us/web/css/cursor/index.md
+++ b/files/en-us/web/css/cursor/index.md
@@ -29,7 +29,7 @@ You can specify either the _type_ of cursor using a keyword, or load a specific
/* Keyword value */
cursor: auto;
cursor: pointer;
-...
+/* … */
cursor: zoom-out;
/* URL with mandatory keyword fallback */
@@ -40,7 +40,7 @@ cursor: url(cursor_1.png) 4 12, auto;
cursor: url(cursor_2.png) 2 2, pointer;
/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
-cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), ... , url(cursor_n.cur) 5 5, progress;
+cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5, progress;
/* Global values */
cursor: inherit;
@@ -59,7 +59,7 @@ Each `` may be optionally followed by a pair of space-separated numbers, wh
### Values
- `` {{optional_inline}}
- - : A `url(…)` or a comma separated list `url(…), url(…), …`, pointing to an image file.
+ - : A `url()` or a comma separated list `url(), url(), …`, pointing to an image file.
More than one {{cssxref("url", "url()")}} may be provided as fallbacks, in case some cursor image types are not supported.
A non-URL fallback (one or more of the keyword values) _must_ be at the end of the fallback list.
- `` `` {{optional_inline}}
diff --git a/files/en-us/web/css/general_sibling_combinator/index.md b/files/en-us/web/css/general_sibling_combinator/index.md
index c23807bee14ca16..03161b1385b1906 100644
--- a/files/en-us/web/css/general_sibling_combinator/index.md
+++ b/files/en-us/web/css/general_sibling_combinator/index.md
@@ -44,7 +44,7 @@ p ~ span {
Here is some code.And here is a red span!And this is a red span!
-More code...
+More code…
How are you?
Whatever it may be, keep smiling.
Dream big
diff --git a/files/en-us/web/css/line-height/index.md b/files/en-us/web/css/line-height/index.md
index 1cacd20da98e855..0ba7fc08a8513a4 100644
--- a/files/en-us/web/css/line-height/index.md
+++ b/files/en-us/web/css/line-height/index.md
@@ -102,12 +102,12 @@ This example shows why it is better to use {{cssxref("<number>")}} values
```html
Avoid unexpected results by using unitless line-height.
- length and percentage line-heights have poor inheritance behavior ...
+ Length and percentage line-heights have poor inheritance behavior.
Avoid unexpected results by using unitless line-height.
- length and percentage line-heights have poor inheritance behavior ...
+ Length and percentage line-heights have poor inheritance behavior
diff --git a/files/en-us/web/css/margin-trim/index.md b/files/en-us/web/css/margin-trim/index.md
index ac10dfef7bf6a34..5214447851444cf 100644
--- a/files/en-us/web/css/margin-trim/index.md
+++ b/files/en-us/web/css/margin-trim/index.md
@@ -91,7 +91,7 @@ It is a pain having to write another rule to achieve this, and it is also not ve
```css
article {
margin-trim: in-flow;
- ...
+ /* … */
}
```
diff --git a/files/en-us/web/css/media_queries/testing_media_queries/index.md b/files/en-us/web/css/media_queries/testing_media_queries/index.md
index b9f9985dca6a369..29386963c74fecf 100644
--- a/files/en-us/web/css/media_queries/testing_media_queries/index.md
+++ b/files/en-us/web/css/media_queries/testing_media_queries/index.md
@@ -50,7 +50,7 @@ const mediaQueryList = window.matchMedia("(orientation: portrait)");
// Define a callback function for the event listener.
function handleOrientationChange(mql) {
- // ...
+ // …
}
// Run the orientation change handler once.
diff --git a/files/en-us/web/css/media_queries/using_media_queries/index.md b/files/en-us/web/css/media_queries/using_media_queries/index.md
index b476bb3b8ef1bc4..9887939c1d4cc19 100644
--- a/files/en-us/web/css/media_queries/using_media_queries/index.md
+++ b/files/en-us/web/css/media_queries/using_media_queries/index.md
@@ -53,14 +53,14 @@ Although websites are commonly designed with screens in mind, you may want to cr
For example, this CSS targets printers:
```css
-@media print { ... }
+@media print { }
```
You can also target multiple devices.
For instance, this `@media` rule uses two media queries to target both screen and print devices:
```css
-@media screen, print { ... }
+@media screen, print { }
```
See [media type](/en-US/docs/Web/CSS/@media#media_types) for a list of all media types.
@@ -73,21 +73,21 @@ For instance, you can apply specific styles to widescreen monitors, computers th
This example applies styles when the user's _primary_ input mechanism (such as a mouse) can hover over elements:
```css
-@media (hover: hover) { ... }
+@media (hover: hover) { }
```
Many media features are _range features_, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints.
For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} width is equal to or narrower than 12450px:
```css
-@media (max-width: 12450px) { ... }
+@media (max-width: 12450px) { }
```
If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not zero (or `none`, in [Level 4](https://drafts.csswg.org/mediaqueries-4/)).
For example, this CSS will apply to any device with a color screen:
```css
-@media (color) { ... }
+@media (color) { }
```
If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.
@@ -112,13 +112,13 @@ The `and` keyword combines a media feature with a media type _or_ other media fe
This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:
```css
-@media (min-width: 30em) and (orientation: landscape) { ... }
+@media (min-width: 30em) and (orientation: landscape) { }
```
To limit the styles to devices with a screen, you can chain the media features to the `screen` media type:
```css
-@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+@media screen and (min-width: 30em) and (orientation: landscape) { }
```
### Testing for multiple queries
@@ -127,7 +127,7 @@ You can use a comma-separated list to apply styles when the user's device matche
For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px _or_ is a screen device in portrait mode:
```css
-@media (min-height: 680px), screen and (orientation: portrait) { ... }
+@media (min-height: 680px), screen and (orientation: portrait) { }
```
Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply.
@@ -141,31 +141,31 @@ The `not` keyword can't be used to negate an individual feature query, only an e
The `not` is evaluated last in the following query:
```css
-@media not all and (monochrome) { ... }
+@media not all and (monochrome) { }
```
This means that the above query is evaluated like this:
```css
-@media not (all and (monochrome)) { ... }
+@media not (all and (monochrome)) { }
```
It wouldn't be evaluated like this:
```css example-bad
-@media (not all) and (monochrome) { ... }
+@media (not all) and (monochrome) { }
```
As another example, the following media query:
```css
-@media not screen and (color), print and (color) { ... }
+@media not screen and (color), print and (color) { }
```
This means that the above query is evaluated like this:
```css
-@media (not (screen and (color))), print and (color) { ... }
+@media (not (screen and (color))), print and (color) { }
```
### Improving compatibility with older browsers
@@ -174,7 +174,7 @@ The `only` keyword prevents older browsers that do not support media queries wit
_It has no effect on modern browsers._
```css
-@media only screen and (color) { ... }
+@media only screen and (color) { }
```
## Syntax improvements in Level 4
@@ -186,25 +186,25 @@ Level 4 adds a _range context_ for writing such queries. For example, using the
> See the [`@media` browser compatibility table](/en-US/docs/Web/CSS/@media#browser_compatibility) for more details.
```css
-@media (max-width: 30em) { ... }
+@media (max-width: 30em) { }
```
In Media Queries Level 4 this can be written as:
```css
-@media (width <= 30em) { ... }
+@media (width <= 30em) { }
```
Using `min-` and `max-` we might test for a width between two values like so:
```css
-@media (min-width: 30em) and (max-width: 50em) { ... }
+@media (min-width: 30em) and (max-width: 50em) { }
```
This would convert to the Level 4 syntax as:
```css
-@media (30em <= width <= 50em ) { ... }
+@media (30em <= width <= 50em ) { }
```
Media Queries Level 4 also adds ways to combine media queries using full boolean algebra with **and**, **not**, and **or**.
@@ -214,7 +214,7 @@ Media Queries Level 4 also adds ways to combine media queries using full boolean
Using `not()` around a media feature negates that feature in the query. For example, `not(hover)` would match if the device had no hover capability:
```css
-@media (not(hover)) { ... }
+@media (not(hover)) { }
```
### Testing for multiple features with `or`
@@ -223,7 +223,7 @@ You can use `or` to test for a match among more than one feature, resolving to `
For example, the following query tests for devices that have a monochrome display or hover capability:
```css
-@media (not (color)) or (hover) { ... }
+@media (not (color)) or (hover) { }
```
## See also
diff --git a/files/en-us/web/css/order/index.md b/files/en-us/web/css/order/index.md
index b29b786a2190337..5b6534f6172186b 100644
--- a/files/en-us/web/css/order/index.md
+++ b/files/en-us/web/css/order/index.md
@@ -63,13 +63,13 @@ This example uses CSS to create a classic two-sidebar layout surrounding a conte
#### HTML
```html
-...
+…Article
-
+
```
#### CSS
diff --git a/files/en-us/web/css/ratio/index.md b/files/en-us/web/css/ratio/index.md
index 421fb3d36273985..1055da114182ad1 100644
--- a/files/en-us/web/css/ratio/index.md
+++ b/files/en-us/web/css/ratio/index.md
@@ -25,7 +25,7 @@ In Media Queries Level 4, the \ date type is updated to consist of a stri
### Use in a media query
```css
-@media screen and (min-aspect-ratio: 16/9) { ... }
+@media screen and (min-aspect-ratio: 16/9) { }
```
### Common aspect ratios
diff --git a/files/en-us/web/css/resolution/index.md b/files/en-us/web/css/resolution/index.md
index fdbab2a63a18395..699ff65e980f63a 100644
--- a/files/en-us/web/css/resolution/index.md
+++ b/files/en-us/web/css/resolution/index.md
@@ -38,7 +38,7 @@ The `` data type consists of a strictly positive {{cssxref("<numb
### Use in a media query
```css
-@media print and (min-resolution: 300dpi) { ... }
+@media print and (min-resolution: 300dpi) { }
```
### Valid resolutions
diff --git a/files/en-us/web/css/text-transform/index.md b/files/en-us/web/css/text-transform/index.md
index 6223fac68bc4120..2f2c91af5a602b6 100644
--- a/files/en-us/web/css/text-transform/index.md
+++ b/files/en-us/web/css/text-transform/index.md
@@ -88,10 +88,10 @@ Large sections of text set with a `text-transform` value of `uppercase` may be d
```html
Initial String
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit…
text-transform: none
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit…
```
@@ -110,10 +110,10 @@ This demonstrates no text transformation.
```html
Initial String
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit…
text-transform: capitalize
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit…
```
@@ -198,10 +198,10 @@ This demonstrates how the Dutch _ij_ digraph must be handled like one single let
```html
Initial String
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit…
text-transform: uppercase
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit…
```
@@ -242,10 +242,10 @@ This demonstrates how Greek vowels except disjunctive _eta_ should have no accen
```html
Initial String
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit…
text-transform: lowercase
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit…
```
From 6c2616e526ed307f77ef087e1a29939fdeba1df0 Mon Sep 17 00:00:00 2001
From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Wed, 20 Jul 2022 11:36:29 +0530
Subject: [PATCH 2/3] Apply suggestions from code review
Co-authored-by: Jean-Yves Perrier
---
.../-webkit-device-pixel-ratio/index.md | 4 +-
.../web/css/_doublecolon_placeholder/index.md | 6 +--
.../using_media_queries/index.md | 40 +++++++++----------
files/en-us/web/css/ratio/index.md | 2 +-
files/en-us/web/css/resolution/index.md | 2 +-
5 files changed, 27 insertions(+), 27 deletions(-)
diff --git a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
index c7c698eab455d90..a79c5380e8c305e 100644
--- a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
+++ b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
@@ -34,9 +34,9 @@ The `-webkit-device-pixel-ratio` feature is specified as a {{cssxref("<number
@media (min-resolution: 2dppx) { }
/* Similarly: */
-@media (-webkit-max-device-pixel-ratio: 2) { }
+@media (-webkit-max-device-pixel-ratio: 2) { /* … */ }
/* It is equivalent to: */
-@media (max-resolution: 2dppx) { }
+@media (max-resolution: 2dppx) { /* … */ }
```
## Examples
diff --git a/files/en-us/web/css/_doublecolon_placeholder/index.md b/files/en-us/web/css/_doublecolon_placeholder/index.md
index 918d51671ab9dd4..5426281b421b6e7 100644
--- a/files/en-us/web/css/_doublecolon_placeholder/index.md
+++ b/files/en-us/web/css/_doublecolon_placeholder/index.md
@@ -79,7 +79,7 @@ This example shows some of the adjustments that you can make to the styles of pl
#### HTML
```html
-
+
```
#### CSS
@@ -103,8 +103,8 @@ Some browsers (such as Firefox) set the default {{cssxref("opacity")}} of placeh
#### HTML
```html
-
-
+
+
```
#### CSS
diff --git a/files/en-us/web/css/media_queries/using_media_queries/index.md b/files/en-us/web/css/media_queries/using_media_queries/index.md
index 9887939c1d4cc19..9698e0a038784c1 100644
--- a/files/en-us/web/css/media_queries/using_media_queries/index.md
+++ b/files/en-us/web/css/media_queries/using_media_queries/index.md
@@ -53,14 +53,14 @@ Although websites are commonly designed with screens in mind, you may want to cr
For example, this CSS targets printers:
```css
-@media print { }
+@media print { /* … */ }
```
You can also target multiple devices.
For instance, this `@media` rule uses two media queries to target both screen and print devices:
```css
-@media screen, print { }
+@media screen, print { /* … */ }
```
See [media type](/en-US/docs/Web/CSS/@media#media_types) for a list of all media types.
@@ -73,21 +73,21 @@ For instance, you can apply specific styles to widescreen monitors, computers th
This example applies styles when the user's _primary_ input mechanism (such as a mouse) can hover over elements:
```css
-@media (hover: hover) { }
+@media (hover: hover) { /* … */ }
```
Many media features are _range features_, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints.
For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} width is equal to or narrower than 12450px:
```css
-@media (max-width: 12450px) { }
+@media (max-width: 12450px) { /* … */ }
```
If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not zero (or `none`, in [Level 4](https://drafts.csswg.org/mediaqueries-4/)).
For example, this CSS will apply to any device with a color screen:
```css
-@media (color) { }
+@media (color) { /* … */ }
```
If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.
@@ -112,13 +112,13 @@ The `and` keyword combines a media feature with a media type _or_ other media fe
This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:
```css
-@media (min-width: 30em) and (orientation: landscape) { }
+@media (min-width: 30em) and (orientation: landscape) { /* … */ }
```
To limit the styles to devices with a screen, you can chain the media features to the `screen` media type:
```css
-@media screen and (min-width: 30em) and (orientation: landscape) { }
+@media screen and (min-width: 30em) and (orientation: landscape) { /* … */ }
```
### Testing for multiple queries
@@ -127,7 +127,7 @@ You can use a comma-separated list to apply styles when the user's device matche
For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px _or_ is a screen device in portrait mode:
```css
-@media (min-height: 680px), screen and (orientation: portrait) { }
+@media (min-height: 680px), screen and (orientation: portrait) { /* … */ }
```
Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply.
@@ -141,31 +141,31 @@ The `not` keyword can't be used to negate an individual feature query, only an e
The `not` is evaluated last in the following query:
```css
-@media not all and (monochrome) { }
+@media not all and (monochrome) { /* … */ }
```
This means that the above query is evaluated like this:
```css
-@media not (all and (monochrome)) { }
+@media not (all and (monochrome)) { /* … */ }
```
It wouldn't be evaluated like this:
```css example-bad
-@media (not all) and (monochrome) { }
+@media (not all) and (monochrome) { /* … */ }
```
As another example, the following media query:
```css
-@media not screen and (color), print and (color) { }
+@media not screen and (color), print and (color) { /* … */ }
```
This means that the above query is evaluated like this:
```css
-@media (not (screen and (color))), print and (color) { }
+@media (not (screen and (color))), print and (color) { /* … */ }
```
### Improving compatibility with older browsers
@@ -174,7 +174,7 @@ The `only` keyword prevents older browsers that do not support media queries wit
_It has no effect on modern browsers._
```css
-@media only screen and (color) { }
+@media only screen and (color) { /* … */ }
```
## Syntax improvements in Level 4
@@ -186,25 +186,25 @@ Level 4 adds a _range context_ for writing such queries. For example, using the
> See the [`@media` browser compatibility table](/en-US/docs/Web/CSS/@media#browser_compatibility) for more details.
```css
-@media (max-width: 30em) { }
+@media (max-width: 30em) { /* … */ }
```
In Media Queries Level 4 this can be written as:
```css
-@media (width <= 30em) { }
+@media (width <= 30em) { /* … */ }
```
Using `min-` and `max-` we might test for a width between two values like so:
```css
-@media (min-width: 30em) and (max-width: 50em) { }
+@media (min-width: 30em) and (max-width: 50em) { /* … */ }
```
This would convert to the Level 4 syntax as:
```css
-@media (30em <= width <= 50em ) { }
+@media (30em <= width <= 50em ) { /* … */ }
```
Media Queries Level 4 also adds ways to combine media queries using full boolean algebra with **and**, **not**, and **or**.
@@ -214,7 +214,7 @@ Media Queries Level 4 also adds ways to combine media queries using full boolean
Using `not()` around a media feature negates that feature in the query. For example, `not(hover)` would match if the device had no hover capability:
```css
-@media (not(hover)) { }
+@media (not(hover)) { /* … */ }
```
### Testing for multiple features with `or`
@@ -223,7 +223,7 @@ You can use `or` to test for a match among more than one feature, resolving to `
For example, the following query tests for devices that have a monochrome display or hover capability:
```css
-@media (not (color)) or (hover) { }
+@media (not (color)) or (hover) { /* … */ }
```
## See also
diff --git a/files/en-us/web/css/ratio/index.md b/files/en-us/web/css/ratio/index.md
index 1055da114182ad1..75306ae70289dc6 100644
--- a/files/en-us/web/css/ratio/index.md
+++ b/files/en-us/web/css/ratio/index.md
@@ -25,7 +25,7 @@ In Media Queries Level 4, the \ date type is updated to consist of a stri
### Use in a media query
```css
-@media screen and (min-aspect-ratio: 16/9) { }
+@media screen and (min-aspect-ratio: 16/9) { /* … */ }
```
### Common aspect ratios
diff --git a/files/en-us/web/css/resolution/index.md b/files/en-us/web/css/resolution/index.md
index 699ff65e980f63a..d8eeb34f83dcda3 100644
--- a/files/en-us/web/css/resolution/index.md
+++ b/files/en-us/web/css/resolution/index.md
@@ -38,7 +38,7 @@ The `` data type consists of a strictly positive {{cssxref("<numb
### Use in a media query
```css
-@media print and (min-resolution: 300dpi) { }
+@media print and (min-resolution: 300dpi) { /* … */ }
```
### Valid resolutions
From b2082e7e4194d0d326a9c69573ccbf8801e88b83 Mon Sep 17 00:00:00 2001
From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Wed, 20 Jul 2022 11:36:55 +0530
Subject: [PATCH 3/3] Update
files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
Co-authored-by: Jean-Yves Perrier
---
.../en-us/web/css/@media/-webkit-device-pixel-ratio/index.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
index a79c5380e8c305e..d14257bcfcfa2b9 100644
--- a/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
+++ b/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
@@ -29,9 +29,9 @@ The `-webkit-device-pixel-ratio` feature is specified as a {{cssxref("<number
```css
/* A unit of "dppx" is implied: */
-@media (-webkit-min-device-pixel-ratio: 2) { }
+@media (-webkit-min-device-pixel-ratio: 2) { /* … */ }
/* It is equivalent to: */
-@media (min-resolution: 2dppx) { }
+@media (min-resolution: 2dppx) { /* … */ }
/* Similarly: */
@media (-webkit-max-device-pixel-ratio: 2) { /* … */ }