Skip to content

Fix consecutive dd elements in CSS #6352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 27, 2021
Merged

Fix consecutive dd elements in CSS #6352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fab4c1
Fix consecutive dd elements in CSS
wbamberg Jun 26, 2021
cd35248
Better formatting
wbamberg Jun 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions files/en-us/web/css/_colon_nth-child/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,12 @@ <h3 id="Functional_notation">Functional notation</h3>
<dl>
<dt><code>&lt;An+B&gt;</code></dt>
<dd>Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by <code>An+B</code>, where:<br>
<code>A</code> is an integer step size,<br>
<code>B</code> is an integer offset,<br>
<code>n</code> is all nonnegative integers, starting from 0.</dd>
<dd>It can be read as the <em>An+B</em>th element of a list.</dd>
<ul>
<li><code>A</code> is an integer step size,</li>
<li><code>B</code> is an integer offset,</li>
<li><code>n</code> is all nonnegative integers, starting from 0.</li>
</ul>
It can be read as the <em>An+B</em>th element of a list.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>
Expand Down
12 changes: 6 additions & 6 deletions files/en-us/web/css/align-content/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,12 @@ <h3 id="Values">Values</h3>
<dd>The items are packed flush to each other in the center of the alignment container along the cross axis.</dd>
<dt><code>normal</code></dt>
<dd>The items are packed in their default position as if no <code>align-content</code> value was set.</dd>
<dt><code>baseline<br>
first baseline</code><br>
<code>last baseline</code></dt>
<dd><img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="410px-typography_line_terms.svg.png"></dd>
<dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
<dt><code>baseline</code>, <code>first baseline</code>, <code>last baseline</code></dt>
<dd>
<p>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.</p>
<img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="410px-typography_line_terms.svg.png">
<p>The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</p>
</dd>
<dt><code>space-between</code></dt>
<dd>The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.</dd>
<dt><code>space-around</code></dt>
Expand Down
6 changes: 3 additions & 3 deletions files/en-us/web/css/animation-delay/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@ <h3 id="Values">Values</h3>

<dl>
<dt><code>{{cssxref("&lt;time&gt;")}}</code></dt>
<dd>The time offset, from the moment at which the animation is applied to the element, at which the animation should begin. This may be specified in either seconds (<code>s</code>) or milliseconds (<code>ms</code>). The unit is required.</dd>
<dd>A positive value indicates that the animation should begin after the specified amount of time has elapsed. A value of <code>0s</code>, which is the default, indicates that the animation should begin as soon as it's applied.</dd>
<dd>
<p>A negative value causes the animation to begin immediately, but partway through its cycle. For example, if you specify <code>-1s</code> as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence. If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.</p>
<p>The time offset, from the moment at which the animation is applied to the element, at which the animation should begin. This may be specified in either seconds (<code>s</code>) or milliseconds (<code>ms</code>). The unit is required.</p>
<p>A positive value indicates that the animation should begin after the specified amount of time has elapsed. A value of <code>0s</code>, which is the default, indicates that the animation should begin as soon as it's applied.</p>
<p>A negative value causes the animation to begin immediately, but partway through its cycle. For example, if you specify <code>-1s</code> as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence. If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.</p>
</dd>
</dl>

Expand Down
75 changes: 37 additions & 38 deletions files/en-us/web/css/background-position/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,48 +54,49 @@ <h3 id="Values">Values</h3>

<dl>
<dt><code>&lt;position&gt;</code></dt>
<dd>A {{cssxref("&lt;position&gt;")}}. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be <code>center</code>. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s).</dd>
<dd>
<p><strong>1-value syntax:</strong> the value may be:</p>
<p>A {{cssxref("&lt;position&gt;")}}. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be <code>center</code>. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s).</p>
<p><strong>1-value syntax:</strong> the value may be:</p>

<ul>
<li>The keyword value <code>center</code>, which centers the image.</li>
<li>One of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.</li>
<li>A {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}}. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.</li>
</ul>
<ul>
<li>The keyword value <code>center</code>, which centers the image.</li>
<li>One of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.</li>
<li>A {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}}. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.</li>
</ul>

<p><strong>2-value syntax:</strong> one value defines X and the other defines Y. Each value may be:</p>
<p><strong>2-value syntax:</strong> one value defines X and the other defines Y. Each value may be:</p>

<ul>
<li>One of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. If <code>left</code> or <code>right</code> are given here, then this defines X and the other given value defines Y. If <code>top</code> or <code>bottom</code> are given, then this defines Y and the other value defines X.</li>
<li>A {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}}. If the other value is <code>left</code> or <code>right</code>, then this value defines Y, relative to the top edge. If the other value is <code>top</code> or <code>bottom</code>, then this value defines X, relative to the left edge. If both values are <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code> values, then the first defines X and the second Y.</li>
<li>Note that: If one value is <code>top</code> or <code>bottom</code>, then the other value may not be <code>top</code> or <code>bottom</code>. If one value is <code>left</code> or <code>right</code>, then the other value may not be <code>left</code> or <code>right</code>. This means, e.g., that <code>top top</code> and <code>left right</code> are not valid.</li>
<li>The default value is <code>top left</code> or <code>0% 0%</code>.</li>
</ul>
</dd>
<dd>
<p><strong>3-value syntax:</strong> Two values are keyword values, and the third is the offset for the preceding value:</p>
<ul>
<li>One of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. If <code>left</code> or <code>right</code> are given here, then this defines X and the other given value defines Y. If <code>top</code> or <code>bottom</code> are given, then this defines Y and the other value defines X.</li>
<li>A {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}}. If the other value is <code>left</code> or <code>right</code>, then this value defines Y, relative to the top edge. If the other value is <code>top</code> or <code>bottom</code>, then this value defines X, relative to the left edge. If both values are <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code> values, then the first defines X and the second Y.</li>
<li>Note that: If one value is <code>top</code> or <code>bottom</code>, then the other value may not be <code>top</code> or <code>bottom</code>. If one value is <code>left</code> or <code>right</code>, then the other value may not be <code>left</code> or <code>right</code>. This means, e.g., that <code>top top</code> and <code>left right</code> are not valid.</li>
<li>The default value is <code>top left</code> or <code>0% 0%</code>.</li>
</ul>

<ul>
<li>The first value is one of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, or <code>center</code>. If <code>left</code> or <code>right</code> are given here, then this defines X. If <code>top</code> or <code>bottom</code> are given, then this defines Y and the other keyword value defines X.</li>
<li>The {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} value, if it is the second value, is the offset for the first value. If it is the third value, it is the offset for the second value.</li>
<li>The single length or percentage value is an offset for the keyword value that precedes it. The combination of one keyword with two {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} values is not valid.</li>
</ul>
</dd>
<dd>
<p><strong>4-value syntax:</strong> The first and third values are keyword value defining X and Y. The second and fourth values are offsets for the preceding X and Y keyword values:</p>
<p><strong>3-value syntax:</strong> Two values are keyword values, and the third is the offset for the preceding value:</p>

<ul>
<li>The first value is one of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, or <code>center</code>. If <code>left</code> or <code>right</code> are given here, then this defines X. If <code>top</code> or <code>bottom</code> are given, then this defines Y and the other keyword value defines X.</li>
<li>The {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} value, if it is the second value, is the offset for the first value. If it is the third value, it is the offset for the second value.</li>
<li>The single length or percentage value is an offset for the keyword value that precedes it. The combination of one keyword with two {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} values is not valid.</li>
</ul>

<p><strong>4-value syntax:</strong> The first and third values are keyword value defining X and Y. The second and fourth values are offsets for the preceding X and Y keyword values:</p>

<ul>
<li>The first value and third values one of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. If <code>left</code> or <code>right</code> are given here, then this defines X. If <code>top</code> or <code>bottom</code> are given, then this defines Y and the other keyword value defines X.</li>
<li>The second and fourth values are {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} values. The second value is the offset for the first keyword. The fourth value is the offset for the second keyword.</li>
</ul>

</dd>
</dl>


<h3>Regarding Percentages:</h3>

<p>The percentage offset of the given background image's position is relative to the container. A value of 0% means that the left (or top) edge of the background image is aligned with the corresponding left (or top) edge of the container, or the 0% mark of the image will be on the 0% mark of the container. A value of 100% means that the <em>right</em> (or <em>bottom</em>) edge of the background image is aligned with the <em>right</em> (or <em>bottom</em>) edge of the container, or the 100% mark of the image will be on the 100% mark of the container. Thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container. Similarly, <code>background-position: 25% 75%</code> means the spot on the image that is 25% from the left and 75% from the top will be placed at the spot of the container that is 25% from the container's left and 75% from the container's top.</p>
<p>Essentially what happens is the background image dimension is <em>subtracted</em> 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.</p>

<ul>
<li>The first value and third values one of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. If <code>left</code> or <code>right</code> are given here, then this defines X. If <code>top</code> or <code>bottom</code> are given, then this defines Y and the other keyword value defines X.</li>
<li>The second and fourth values are {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} values. The second value is the offset for the first keyword. The fourth value is the offset for the second keyword.</li>
</ul>
</dd>
<dd>
<p><strong>Regarding Percentages:</strong></p>
</dd>
<dd>The percentage offset of the given background image's position is relative to the container. A value of 0% means that the left (or top) edge of the background image is aligned with the corresponding left (or top) edge of the container, or the 0% mark of the image will be on the 0% mark of the container. A value of 100% means that the <em>right</em> (or <em>bottom</em>) edge of the background image is aligned with the <em>right</em> (or <em>bottom</em>) edge of the container, or the 100% mark of the image will be on the 100% mark of the container. Thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container. Similarly, <code>background-position: 25% 75%</code> means the spot on the image that is 25% from the left and 75% from the top will be placed at the spot of the container that is 25% from the container's left and 75% from the container's top.</dd>
<dd>Essentially what happens is the background image dimension is <em>subtracted</em> 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.</dd>
<dd>
<p><code>(container width - image width) * (position x%) = (x offset value)<br>
(container height - image height) * (position y%) = (y offset value)</code></p>

Expand All @@ -122,8 +123,6 @@ <h3 id="Values">Values</h3>
</ul>

<p>It's worth mentioning that if your background-size is equal to the container size for a given axis, then a <em>percentage</em> position for that axis will have no effect because the "container-image difference" will be zero. You will need to offset using absolute values.</p>
</dd>
</dl>

<h2 id="Formal_definition">Formal definition</h2>

Expand Down
Loading