flex-direction: row
+
+
+
+
+
+
+
+
+
+ flex-direction: column
+
+
+
+
+
+
+
+
+
+ + +
+``` + +```html hidden live-sample___caps ++ + +
+``` + +```html hidden live-sample___percents ++ + +
+``` + +```css hidden live-sample___caps live-sample___percents +ul { + display: grid; + grid-template-columns: repeat(6, auto); + list-style-type: none; + gap: 20px; + column-rule: 10px solid olive; + row-rule: 10px solid palegoldenrod; + rule-overlap: column-over-row; + rule-visibility-items: normal; + rule-break: intersection; + column-rule-inset-cap-start: 16px; + + border: 1px solid; +} +ul { + place-items: center; + width: 95vw; + padding: 0; +} +li { + text-align: center; + font-family: sans-serif; + background-color: #ededed; + padding: 1em; + width: 100%; + box-sizing: border-box; +} +li:nth-of-type(n + 9) { + grid-row: 3 / 4; +} +li:nth-of-type(n + 12) { + grid-row: 4 / 5; +} +li:nth-of-type(10) { + grid-column: 5/6; +} +li:nth-of-type(11) { + grid-column: 6/7; +} + +@layer no-support { + @supports not (column-rule-inset-cap-start: 16px) { + body::before { + content: "Your browser doesn't support the column-rule-inset-cap-start property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```css hidden live-sample___percents +ul { + column-rule-inset-cap-start: 100%; +} +``` + +```js hidden live-sample___caps live-sample___percents +const inset = document.getElementById("inset"); +const visibility = document.getElementById("visibility"); +const ul = document.getElementById("ul"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + output.innerText = + ul.style.columnRuleInsetCapStart = `${inset.value}${inset.dataset["unit"]}`; +}); +``` + +```js hidden live-sample___caps live-sample___percents +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; + if (visibility.value == "between") { + ul.style.columnRuleStyle = "solid, repeat(2, double)"; + } else { + ul.style.columnRuleStyle = "solid"; + } +}); +``` + +{{EmbedLiveSample("caps", "", "400")}} + +Change the inset. If `0px` is set, the start of the column rules will align with the start of the container. This is the default. Setting `-32px` outsets the segments by `32px`, with the lines being drawn `32px` past the start edge of the container. As column rules don't impact the box model, these lines have no impact on the layout of the container or the rest of the content. + +Select `between` as the `rule-visibility-items` value. This value paints rules in a gap segment only if the two adjacent areas are occupied by items. Change the value of the inset while observing the three column rules with a double line style: in addition to having a cap endpoint at the start edge of the container, these rules have an additional cap endpoint. They each have column rule segments that start at interior gaps where no row rule segments are present, so these column segments are also cap segment endpoints, and are affected by the `column-rule-inset-cap-start` property. + +Selecting `around` as the `rule-visibility-items` value paints rules in a gap segment as long as one adjacent area is occupied by an item. In these cases, there is a row rule segment at the top end of the endpoint segments of the interior gaps. The starts of these segments are junction (not cap) segment endpoints and are not affected by the `column-rule-inset-cap-start` property. The inset of these column segments that start at an interior gap junction can be controlled by the {{cssxref("column-rule-inset-junction-start")}} property. + +### Understanding percentage values + +The length a percentage value is relative to depends on the endpoint location. Interior endpoint percentage values are relative to the width of the gap at the cap endpoint, so relative to the {{cssxref("row-gap")}} if abutting a rule gap, and `0` at the top edge of the container. + +This example isn't broken; all the cap segments start at the container's edge, so all the insets are `0` by default. + +{{EmbedLiveSample("percents", "", "400")}} + +If you select `around` as the `rule-visibility-items` value, again, none of the segments will be inset. Percentage inset values for the column segments that start at container edge all resolve to `0`. The start edge of column segments that start at interior gaps don't and have a segment drawn above start at intersections where row rule segments are present; they don't start with a cap segment endpoint, so their insets are defined by the `column-rule-inset-junction-start` property instead. + +Select `between` as the `rule-visibility-items` value. The column rules that have two cap start segments have their line-style set to `double`. As before, each has a column rule segment that starts at interior gaps where no other rule segments are present. For these, the percentage offset is relative to the size of the {{cssxref("row-gap")}} width, which in this case is `20px`. + +Setting `100%` insets the start of the cap segments by `20px`. Setting `-200%` will outset these segments by `40px`, with the lines being drawn through the `20px` gap, with `20px` protruding into the row above the items. If the negative value was larger than the combined heights of the first row and the row gap, the rule would protrude above the container's start edge. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic usage + +This example demonstrates setting `column-rule-inset-cap-start` to inset the start edge of cap segments on flex containers. + +#### HTML + +```html ++ + +
+``` + +#### CSS + +We use the {{cssxref("display")}} property to turn the `.flexbox` elements into flex containers. We balance the items into three flex lines using {{cssxref("flex-wrap")}} and {{cssxref("flex-line-count")}}. We define a light blue {{cssxref("rule")}} to be painted in both row and column gaps, then overwrite the {{cssxref("column-rule-color")}}, setting darker `blue` column gap decorations. Finally, we set the `column-rule-inset-cap-start` to `16px`. + +```css +.flexbox { + display: flex; + flex-wrap: balance; + flex-line-count: 3; + gap: 20px; + rule: 5px solid lightblue; + column-rule-color: blue; + + column-rule-inset-cap-start: 16px; +} +``` + +We then set the {{cssxref("flex-direction")}} on the `.column` container to make its items flow in columns rather than rows. + +```css +.column { + flex-direction: column; +} +``` + +The rest of the CSS is hidden for brevity. + +```css hidden +body { + font-family: sans-serif; + text-align: center; +} +h1 { + font-size: 1.25em; +} +h2 { + font-size: 1em; +} +article { + display: flex; + gap: 5vw; + rule: 1px solid black; + width: 100vw; +} +section { + flex-basis: 45vw; +} +.flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + height: 30px; +} +output { + display: inline-block; + width: 2em; +} +p { + margin-top: 2.5em; +} +@layer no-support { + @supports not (column-rule-inset-cap-start: 16px) { + body::before { + content: "Your browser doesn't support the column-rule-inset-cap-start property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```js hidden live-sample___basic +const inset = document.getElementById("inset"); +const containers = document.querySelectorAll(".flexbox"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + const val = `${inset.value}px`; + containers[0].style.columnRuleInsetCapStart = val; + containers[1].style.columnRuleInsetCapStart = val; + output.innerText = val; +}); +``` + +#### Result + +{{EmbedLiveSample("Basic usage", "", "330")}} + +Change the size of the inset. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("row-rule-inset-cap-start")}} +- {{cssxref("column-rule-inset-cap-end")}} +- {{cssxref("column-rule-inset-junction-start")}} +- {{cssxref("column-rule-inset-start")}} shorthand +- {{cssxref("column-rule-inset-cap")}} shorthand +- {{cssxref("column-rule-inset")}} shorthand +- {{cssxref("rule-inset-start")}} shorthand +- {{cssxref("rule-inset-cap")}} +- {{cssxref("rule-inset")}} shorthand +- {{cssxref("column-rule-break")}} +- {{cssxref("rule-break")}} shorthand +- {{cssxref("rule-overlap")}} +- {{cssxref("rule-visibility-items")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/column-rule-inset-cap/index.md b/files/en-us/web/css/reference/properties/column-rule-inset-cap/index.md new file mode 100644 index 000000000000000..36a800a66e8cc36 --- /dev/null +++ b/files/en-us/web/css/reference/properties/column-rule-inset-cap/index.md @@ -0,0 +1,505 @@ +--- +title: "`column-rule-inset-cap` CSS property" +short-title: column-rule-inset-cap +slug: Web/CSS/Reference/Properties/column-rule-inset-cap +page-type: css-property +status: + - experimental +browser-compat: css.properties.column-rule-inset-cap +sidebar: cssref +--- + +{{SeeCompatTable}} + +The **`column-rule-inset-cap`** [shorthand](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property can be used to offset the column rule segment [cap endpoints](#understanding_cap_endpoints) at the container's start and end edges, and endpoints where the segments don't intersect other row or column segments. + +{{InteractiveExample("CSS Demo: rule")}} + +```css interactive-example-choice +column-rule-inset-cap: -20px; +``` + +```css interactive-example-choice +column-rule-inset-cap: 0; +``` + +```css interactive-example-choice +column-rule-inset-cap: 1em; +``` + +```css interactive-example-choice +column-rule-inset-cap: 100%; +``` + +```css interactive-example-choice +column-rule-inset-cap: overlap-join; +``` + +```html interactive-example ++ +
+``` + +```html hidden live-sample___caps ++ + +
+``` + +```html hidden live-sample___percents ++ + +
+``` + +```css hidden live-sample___caps live-sample___percents +ul { + display: grid; + grid-template-columns: repeat(6, auto); + list-style-type: none; + gap: 20px; + column-rule: 10px solid olive; + row-rule: 10px solid palegoldenrod; + rule-overlap: column-over-row; + rule-visibility-items: normal; + rule-break: intersection; + column-rule-inset-cap: 16px; + + border: 1px solid; +} +ul { + place-items: center; + width: 95vw; + padding: 0; +} +li { + text-align: center; + font-family: sans-serif; + background-color: #ededed; + padding: 1em; + width: 100%; + box-sizing: border-box; +} +@layer no-support { + @supports not (column-rule-inset-cap: 16px) { + body::before { + content: "Your browser doesn't support the column-rule-inset-cap property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```css hidden live-sample___percents +ul { + column-rule-inset-cap: 100%; + column-rule-style: inset; +} +``` + +```js hidden live-sample___caps live-sample___percents +const inset = document.getElementById("inset"); +const visibility = document.getElementById("visibility"); +const ul = document.getElementById("ul"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + o.innerText = + ul.style.columnRuleInsetCap = `${inset.value}${inset.dataset["unit"]}`; +}); +``` + +```js hidden live-sample___caps +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; + if (visibility.value == "between") { + ul.style.columnRuleStyle = "repeat(2, solid), double"; + } else if (visibility.value == "around") { + ul.style.columnRuleStyle = "repeat(3, solid), repeat(2, double)"; + } else { + ul.style.columnRuleStyle = "solid"; + } +}); +``` + +```js hidden live-sample___percents +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; + if (visibility.value == "between") { + ul.style.columnRuleStyle = "repeat(2, inset), double, repeat(2, solid)"; + } else if (visibility.value == "around") { + ul.style.columnRuleStyle = "repeat(3, inset), repeat(2, double)"; + } else { + ul.style.columnRuleStyle = "solid"; + } +}); +``` + +{{EmbedLiveSample("caps", "", "300")}} + +Change the inset. When `0px` is set, the ends of the column rules align with the top and bottom edges of the container. This is the default. Setting `-32px` outsets the segments by `32px`, with the lines being drawn `32px` past the edge of the container. As column rules don't impact the box model, these lines have no impact on the layout of the container or the rest of the content. + +Select `around` as the `rule-visibility-items` value. This value paints rules in a gap segment if at least one of the two adjacent areas is occupied by an item. The start end of the top-most segments are still cap segment endpoints. The bottom-most segments of the double line-style column rules, which appear when the `rule-visibility-items` property is set to `around` do not end in cap endpoints. Rather, the bottom segment of the last two column rules end at _junctions_: interior gaps where row rule segments are present. Therefore, the `column-rule-inset-cap` property does not affect those segment endpoints. + +Select `between` as the `rule-visibility-items` value. This value only paints rules in gap segments if both adjacent areas are occupied by an item. In this example, the bottom row rule ends at the third column gap, with the last row segment being between `9` and `16`. The bottom of the third column rule, shown as a double line, ends at an interior gap. As a row rule segment is present, the column segment does not end in a cap segment endpoint, so it is not affected by the `column-rule-inset-cap` property. The last two column rules, however, end at interior gaps where no other rule segments are present, so these column segments are cap segment endpoints and therefore are affected by the `column-rule-inset-cap` property. + +### Understanding percentage values + +What a percentage value is relative to depends on the endpoint's location. Interior endpoint percentage values are relative to the width of the gap the cap endpoint touches, so generally relative to the {{cssxref("row-gap")}}, plus any additional spacing added due to {{cssxref("align-content")}} values. Percentages at container-edge endpoints are relative to `0`. For example, `column-rule-inset-cap: 50%` resolves to half the gap junction size at an interior cap and `0` at the container edges. + +This example is not broken. When `rule-visibility-items` is set to `normal`, every column cap endpoint abuts the top or bottom edge of the container, so any percentage value set will be relative to `0`. + +{{EmbedLiveSample("percents", "", "300")}} + +Select `around` as the `rule-visibility-items` value. The first three columns end at the container edge, so any percentage value will resolve to `0`. The last two column rules, with the double lines, end at interior gaps where row rule segments are present, so these column segments are not cap segment endpoints. + +Select `between` as the `rule-visibility-items` value. The first two column rules, with the light and dark lines, end at the container edge, so they have a `0` inset. The third column rule, with the double line, ends at an interior gap where a row rule segment is present, so this column segment is not a cap segment endpoint. The last two column rules, with the solid lines, end at interior gaps where no other rule segments are present, so the percentage offset is relative to the size of the {{cssxref("row-gap")}} width, which in this case is `20px`. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic usage + +This example demonstrates setting `column-rule-inset-cap` to inset the column rule cap segment endpoints on flex containers. + +#### HTML + +```html ++ + +
+``` + +#### CSS + +We use the {{cssxref("display")}} property to turn the `.flexbox` elements into flex containers. We balance the items into three flex lines using {{cssxref("flex-wrap")}} and {{cssxref("flex-line-count")}}. We define a `lightblue` {{cssxref("rule")}} to paint both row and column gaps, then overwrite the {{cssxref("column-rule-color")}}, setting darker `blue` column gap decorations. Finally, we set the `column-rule-inset-cap` to `16px`. + +```css +.flexbox { + display: flex; + flex-wrap: balance; + flex-line-count: 3; + gap: 20px; + rule: 5px solid lightblue; + column-rule-color: blue; + + column-rule-inset-cap: 16px; +} +``` + +We also set the {{cssxref("flex-direction")}} on the `.column` container, to change the main axis of the flex container, and make the items flow in columns rather than rows. + +```css +.column { + flex-direction: column; +} +``` + +The rest of the CSS is hidden for brevity. + +```css hidden +body { + font-family: sans-serif; + text-align: center; +} +h1 { + font-size: 1.25em; +} +h2 { + font-size: 1em; +} +article { + display: flex; + gap: 5vw; + rule: 1px solid black; + width: 100vw; +} +section { + flex-basis: 45vw; +} +.flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + height: 30px; +} +output { + display: inline-block; + width: 2em; +} +p { + margin-top: 2.5em; +} +@layer no-support { + @supports not (column-rule-inset-cap: 16px) { + body::before { + content: "Your browser doesn't support the column-rule-inset-cap property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```js hidden live-sample___basic +const inset = document.getElementById("inset"); +const containers = document.querySelectorAll(".flexbox"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + const val = `${inset.value}px`; + containers[0].style.columnRuleInsetCap = val; + containers[1].style.columnRuleInsetCap = val; + output.innerText = val; +}); +``` + +#### Result + +{{EmbedLiveSample("Basic usage", "", "330")}} + +Change the size of the inset. Note how the column segments grow and shrink only at their segment cap ends — the ends that don't intersect other column or row segments. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("column-rule-inset-cap-end")}} +- {{cssxref("column-rule-inset-cap-start")}} +- {{cssxref("column-rule-inset")}} shorthand +- {{cssxref("row-rule-inset-cap")}} shorthand +- {{cssxref("rule-inset")}} shorthand +- {{cssxref("column-rule-break")}} +- {{cssxref("rule-break")}} shorthand +- {{cssxref("rule-overlap")}} +- {{cssxref("rule-visibility-items")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/row-rule-inset-cap-end/index.md b/files/en-us/web/css/reference/properties/row-rule-inset-cap-end/index.md new file mode 100644 index 000000000000000..4d8136bce56efd0 --- /dev/null +++ b/files/en-us/web/css/reference/properties/row-rule-inset-cap-end/index.md @@ -0,0 +1,515 @@ +--- +title: "`row-rule-inset-cap-end` CSS property" +short-title: row-rule-inset-cap-end +slug: Web/CSS/Reference/Properties/row-rule-inset-cap-end +page-type: css-property +status: + - experimental +browser-compat: css.properties.row-rule-inset-cap-end +sidebar: cssref +--- + +{{SeeCompatTable}} + +The **`row-rule-inset-cap-end`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the end of row rule segment [cap endpoints](#understanding_cap_end). + +{{InteractiveExample("CSS Demo: rule")}} + +```css interactive-example-choice +row-rule-inset-cap-end: -20px; +``` + +```css interactive-example-choice +row-rule-inset-cap-end: 1.25em; +``` + +```css interactive-example-choice +row-rule-inset-cap-end: 0; +``` + +```css interactive-example-choice +row-rule-inset-cap-end: 100%; +``` + +```css interactive-example-choice +row-rule-inset-cap-end: overlap-join; +``` + +```html interactive-example ++ +
+``` + +```html hidden live-sample___caps ++ + +
+``` + +```html hidden live-sample___percents ++ + +
+``` + +```css hidden live-sample___caps live-sample___percents +ul { + display: grid; + grid-template-columns: repeat(6, auto); + list-style-type: none; + gap: 20px; + row-rule: 10px solid olive; + column-rule: 10px solid palegoldenrod; + rule-overlap: row-over-column; + rule-visibility-items: normal; + rule-break: intersection; + row-rule-inset-cap-end: -32px; + + border: 1px solid; +} +ul { + place-items: center; + width: 95vw; + padding: 0; +} +li { + text-align: center; + font-family: sans-serif; + background-color: #ededed; + padding: 1em; + width: 100%; + box-sizing: border-box; +} +.a { + grid-column: 5 / 6; + grid-row: 3 / 4; +} +.b { + grid-column: 3 / 4; + grid-row: 4 / 5; +} +.c { + grid-column: 5 / 6; + grid-row: 4 / 5; +} +@layer no-support { + @supports not (row-rule-inset-cap-end: 16px) { + body::before { + content: "Your browser doesn't support the row-rule-inset-cap-end property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```css hidden live-sample___percents +ul { + row-rule-inset-cap-end: 100%; + row-rule-style: inset; +} +``` + +```js hidden live-sample___caps live-sample___percents +const inset = document.getElementById("inset"); +const visibility = document.getElementById("visibility"); +const ul = document.getElementById("ul"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + output.innerText = + ul.style.rowRuleInsetCapEnd = `${inset.value}${inset.dataset["unit"]}`; +}); +``` + +```js hidden live-sample___caps +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; + if (visibility.value == "between") { + ul.style.rowRuleStyle = "repeat(2, solid), double"; + } else if (visibility.value == "around") { + ul.style.rowRuleStyle = "repeat(3, solid), repeat(2, double)"; + } else { + ul.style.rowRuleStyle = "solid"; + } +}); +``` + +```js hidden live-sample___percents +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; + if (visibility.value == "between") { + ul.style.rowRuleStyle = "repeat(2, inset), double, repeat(2, solid)"; + } else if (visibility.value == "around") { + ul.style.rowRuleStyle = "repeat(3, inset), repeat(2, double)"; + } else { + ul.style.rowRuleStyle = "solid"; + } +}); +``` + +{{EmbedLiveSample("caps", "", "400")}} + +Setting `-32px` outsets the end of all the row rules by `32px`: the lines are drawn `32px` past the right edge of the container. As row rules don't impact the box model, these lines have no impact on the layout of the container or the rest of the content. If `0px` is set, the end of the row rules will align with the edge of the container. This is the default. + +The double line-style row rule segments, which appear when the `rule-visibility-items` property is set to `between`, add a cap endpoint. The `between` value only paints rules in gap segments between two adjacent areas occupied by an item. Because the row rule segment above item `24` ends at an intersection with no other row or column rule segments present, this is a cap endpoint, and therefore is affected by the `row-rule-inset-cap-end` property. The segment above item `22` ends at a gap junction where a rule segment is present, so it is not a cap endpoint. There are fewer segments abutting the right edge of the container, but the remaining segment, between `6` and `12`, remains a cap endpoint. + +Rule segments abutting the end edge of the container are always row-rule cap end segments affected by the value of the `row-rule-inset-cap-end` property. + +### Understanding percentage values + +The length a percentage value is relative to depends on the endpoint location. Interior endpoint percentage values are relative to the width of the gap at the cap endpoint, so relative to the {{cssxref("column-gap")}} if abutting a rule gap, and `0` at the top edge of the container. + +This example isn't broken; all the cap segments end at the container's edge, so all the insets are `0` by default. + +{{EmbedLiveSample("percents", "", "400")}} + +If you select `around` as the `rule-visibility-items` value, the only cap segment endpoints are at the edge of the container, so percentage value insets continue to resolve to `0`. + +Select `between` as the `rule-visibility-items` value. We now have a row rule end cap affected by the inset — see the segment between grid items `18` and `24`! This segment ends at an interior gap where no other rule segments are present, so the percentage inset is relative to the size of the {{cssxref("column-gap")}} width, which in this case is `20px`. Setting `100%` insets the end by `20px`. Setting `-200%` will outset the segment by `40px`, with the lines drawn through the `20px` gap into the next column. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic usage + +This example demonstrates setting `row-rule-inset-cap-end` to inset the end edge of cap segments on flex containers. + +#### HTML + +```html ++ + +
+``` + +#### CSS + +We use the {{cssxref("display")}} property to turn the `.flexbox` elements into flex containers. We balance the items into three flex lines using with {{cssxref("flex-wrap")}} and {{cssxref("flex-line-count")}}. We define a light blue {{cssxref("rule")}} to be painted in both column and row gaps, then overwrite the {{cssxref("row-rule-color")}}, setting darker `blue` vertical gap decorations. Finally, we set the `row-rule-inset-cap-end` to `16px`. + +```css +.flexbox { + display: flex; + flex-wrap: balance; + flex-line-count: 3; + gap: 20px; + rule: 5px solid lightblue; + row-rule-color: blue; + + row-rule-inset-cap-end: 16px; +} +``` + +We also set the {{cssxref("flex-direction")}} on the `.column` container, to change the main axis of the flex container, and make the items flow in columns rather than rows. The rest of the CSS is hidden for brevity. + +```css +.column { + flex-direction: column; +} +``` + +```css hidden +body { + font-family: sans-serif; + text-align: center; +} +h1 { + font-size: 1.25em; +} +h2 { + font-size: 1em; +} +article { + display: flex; + gap: 5vw; + rule: 1px solid black; + width: 100vw; +} +section { + flex-basis: 45vw; +} +.flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + height: 30px; +} +output { + display: inline-block; + width: 2em; +} +p { + margin-top: 2.5em; +} +@layer no-support { + @supports not (row-rule-inset-cap-end: 16px) { + body::before { + content: "Your browser doesn't support the row-rule-inset-cap-end property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```js hidden live-sample___basic +const inset = document.getElementById("inset"); +const containers = document.querySelectorAll(".flexbox"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + const val = `${inset.value}px`; + containers[0].style.rowRuleInsetCapEnd = val; + containers[1].style.rowRuleInsetCapEnd = val; + output.innerText = val; +}); +``` + +#### Result + +{{EmbedLiveSample("Basic usage", "", "320")}} + +Change the size of the inset. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("row-rule-inset")}} shorthand +- {{cssxref("rule-inset")}} shorthand +- {{cssxref("row-rule-break")}} +- {{cssxref("rule-break")}} shorthand +- {{cssxref("rule-overlap")}} +- {{cssxref("rule-visibility-items")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/row-rule-inset-cap-start/index.md b/files/en-us/web/css/reference/properties/row-rule-inset-cap-start/index.md new file mode 100644 index 000000000000000..b476649e19c5a72 --- /dev/null +++ b/files/en-us/web/css/reference/properties/row-rule-inset-cap-start/index.md @@ -0,0 +1,505 @@ +--- +title: "`row-rule-inset-cap-start` CSS property" +short-title: row-rule-inset-cap-start +slug: Web/CSS/Reference/Properties/row-rule-inset-cap-start +page-type: css-property +status: + - experimental +browser-compat: css.properties.row-rule-inset-cap-start +sidebar: cssref +--- + +{{SeeCompatTable}} + +The **`row-rule-inset-cap-start`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the start of row rule segment [cap endpoints](#understanding_cap_end). + +{{InteractiveExample("CSS Demo: rule")}} + + + +```css interactive-example-choice +row-rule-inset-cap-start: -20px; +``` + +```css interactive-example-choice +row-rule-inset-cap-start: 0; +``` + +```css interactive-example-choice +row-rule-inset-cap-start: 1em; +``` + +```css interactive-example-choice +row-rule-inset-cap-start: 100%; +``` + +```css interactive-example-choice +row-rule-inset-cap-start: overlap-join; +``` + +```html interactive-example ++ +
+``` + +```html hidden live-sample___caps ++ + +
+``` + +```html hidden live-sample___percents ++ + +
+``` + +```css hidden live-sample___caps live-sample___percents +ul { + display: grid; + margin: 0 20px; + grid-template-columns: repeat(6, auto); + list-style-type: none; + gap: 20px; + row-rule: 10px solid olive; + column-rule: 10px solid palegoldenrod; + rule-overlap: column-over-row; + rule-visibility-items: normal; + rule-break: intersection; + row-rule-inset-cap-start: -32px; + + border: 1px solid; + margin: auto 40px; +} +ul { + place-items: center; + padding: 0; +} +li { + text-align: center; + font-family: sans-serif; + background-color: #ededed; + padding: 1em; + width: 100%; + box-sizing: border-box; +} +li:nth-of-type(n + 9) { + grid-row: 3 / 4; +} +li:nth-of-type(n + 13) { + grid-row: 4 / 5; +} +li:nth-of-type(12), +li:nth-of-type(16) { + grid-column: 5/6; +} +li:nth-of-type(17) { + grid-column: 6/7; +} + +@layer no-support { + @supports not (row-rule-inset-cap-start: 16px) { + body::before { + content: "Your browser doesn't support the row-rule-inset-cap-start property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```css hidden live-sample___percents +ul { + row-rule-inset-cap-start: 100%; +} +``` + +```js hidden live-sample___caps live-sample___percents +const inset = document.getElementById("inset"); +const visibility = document.getElementById("visibility"); +const ul = document.getElementById("ul"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + output.innerText = + ul.style.rowRuleInsetCapStart = `${inset.value}${inset.dataset["unit"]}`; +}); +``` + +```js hidden live-sample___caps live-sample___percents +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; + if (visibility.value == "between") { + ul.style.rowRuleStyle = "repeat(2, solid), double"; + } else { + ul.style.rowRuleStyle = "solid"; + } +}); +``` + +{{EmbedLiveSample("caps", "", "350")}} + +Change the inset. Setting `0px` aligns the start of the row rules with the start of the container. This is the default. + +Select `between` as the `rule-visibility-items` value. This value paints rules in a gap segment only if the two adjacent areas are occupied by items. Again, we have row rule cap endpoints at the start edge of the container. The third row rule, denoted with a double line style, has an additional cap endpoint segment: the left side of the segment between items `12` and `16`. This does not meet any other rule segments and is therefore affected by the `row-rule-inset-cap-start` property. + +In this case, the `around` value of the `rule-visibility-items` property, which paints rules in a gap segment as long as one adjacent area is occupied by an item, did not create additional cap segment endpoints. The rule start of the segment between `12` and `16` intersects with the column rule segments in the column-gap to the left of those items, creating junction, not cap, segment endpoints. Junction endpoints are inset using the {{cssxref("row-rule-inset-junction-start")}} property instead. + +### Understanding percentage values + +The length a percentage value is relative to depends on the endpoint location. Interior endpoint percentage values are relative to the width of the gap at the cap endpoint, so relative to the {{cssxref("column-gap")}} if abutting a rule gap, and `0` at the edge of the container. + +This example isn't broken; all the cap segments start at the container's edge, so all the insets are `0` by default. + +{{EmbedLiveSample("percents", "", "350")}} + +The slider only has an effect when the `rule-visibility-items` value is set to `between`, and then only on the single inner cap endpoint segment that this value creates — the segment between `12` and `16`. For this segment only, the percentage offset is relative to the size of the {{cssxref("column-gap")}} width, which in this case is `20px`. Setting `100%` insets the start of the cap segment by `20px`. Setting `-200%` outsets the segment by `40px`, with the rule segment drawn through the `20px` gap and into the previous column. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic usage + +This example demonstrates setting `row-rule-inset-cap-start` to inset the start edge of cap segments on flex containers. + +#### HTML + +```html ++ + +
+``` + +#### CSS + +We use the {{cssxref("display")}} property to turn the `.flexbox` elements into flex containers. We balance the items into three flex lines using with {{cssxref("flex-wrap")}} and {{cssxref("flex-line-count")}}. We define a light blue {{cssxref("rule")}} to be painted in both column and row gaps, then overwrite the {{cssxref("row-rule-color")}}, setting darker `blue` row gap decorations. Finally, we set the `row-rule-inset-cap-start` to `16px`. + +```css +.flexbox { + display: flex; + flex-wrap: balance; + flex-line-count: 3; + gap: 20px; + rule: 5px solid lightblue; + row-rule-color: blue; + + row-rule-inset-cap-start: 16px; +} +``` + +We also set the {{cssxref("flex-direction")}} on the `.column` container, to change the main axis of the flex container, and make the items flow in columns rather than rows. + +```css +.column { + flex-direction: column; +} +``` + +The rest of the CSS is hidden for brevity. + +```css hidden +body { + font-family: sans-serif; + text-align: center; +} +h1 { + font-size: 1.25em; +} +h2 { + font-size: 1em; +} +article { + display: flex; + gap: 42px; + rule: 1px solid black; + width: 100vw; + padding: 0 50px; + box-sizing: border-box; +} +section { + flex-basis: 45vw; +} +.flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + height: 30px; +} +output { + display: inline-block; + width: 2em; +} +p { + margin-top: 2.5em; +} +@layer no-support { + @supports not (row-rule-inset-cap-start: 16px) { + body::before { + content: "Your browser doesn't support the row-rule-inset-cap-start property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```js hidden live-sample___basic +const inset = document.getElementById("inset"); +const containers = document.querySelectorAll(".flexbox"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + const val = `${inset.value}px`; + containers[0].style.rowRuleInsetCapStart = val; + containers[1].style.rowRuleInsetCapStart = val; + output.innerText = val; +}); +``` + +#### Result + +{{EmbedLiveSample("Basic usage", "", "320")}} + +Change the size of the inset. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("column-rule-inset-cap-start")}} +- {{cssxref("row-rule-inset-cap-end")}} +- {{cssxref("row-rule-inset-junction-start")}} +- {{cssxref("row-rule-inset-start")}} shorthand +- {{cssxref("row-rule-inset-cap")}} shorthand +- {{cssxref("row-rule-inset")}} shorthand +- {{cssxref("rule-inset-start")}} shorthand +- {{cssxref("rule-inset-cap")}} +- {{cssxref("rule-inset")}} shorthand +- {{cssxref("row-rule-break")}} +- {{cssxref("rule-break")}} shorthand +- {{cssxref("rule-overlap")}} +- {{cssxref("rule-visibility-items")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/row-rule-inset-cap/index.md b/files/en-us/web/css/reference/properties/row-rule-inset-cap/index.md new file mode 100644 index 000000000000000..aee57473814419a --- /dev/null +++ b/files/en-us/web/css/reference/properties/row-rule-inset-cap/index.md @@ -0,0 +1,525 @@ +--- +title: "`row-rule-inset-cap` CSS property" +short-title: row-rule-inset-cap +slug: Web/CSS/Reference/Properties/row-rule-inset-cap +page-type: css-property +status: + - experimental +browser-compat: css.properties.row-rule-inset-cap +sidebar: cssref +--- + +{{SeeCompatTable}} + +The **`row-rule-inset-cap`** [shorthand](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property can be used to offset the row rule segment [cap endpoints](#understanding_cap_endpoints) at the container's left and right edges, and endpoints where the segments don't intersect other column or row segments. + +{{InteractiveExample("CSS Demo: rule")}} + +```css interactive-example-choice +row-rule-inset-cap: -20px; +``` + +```css interactive-example-choice +row-rule-inset-cap: 0; +``` + +```css interactive-example-choice +row-rule-inset-cap: 1em; +``` + +```css interactive-example-choice +row-rule-inset-cap: 100%; +``` + +```css interactive-example-choice +row-rule-inset-cap: overlap-join; +``` + +```html interactive-example ++ +
+``` + +```html hidden live-sample___caps ++ + +
+``` + +```html hidden live-sample___percents ++ + +
+``` + +```css hidden live-sample___caps live-sample___percents +ul { + display: grid; + margin: 0 20px; + grid-template-columns: repeat(6, auto); + list-style-type: none; + gap: 20px; + row-rule: 10px solid olive; + column-rule: 10px solid palegoldenrod; + rule-overlap: column-over-row; + rule-visibility-items: normal; + rule-break: intersection; + row-rule-inset-cap: -32px; + + border: 1px solid; + margin: auto 40px; +} +ul { + place-items: center; + padding: 0; +} +li { + text-align: center; + font-family: sans-serif; + background-color: #ededed; + padding: 1em; + width: 100%; + box-sizing: border-box; +} +li:nth-of-type(n + 9) { + grid-row: 3 / 4; +} +li:nth-of-type(n + 13) { + grid-row: 4 / 5; +} +li:nth-of-type(12), +li:nth-of-type(16) { + grid-column: 5/6; +} +li:nth-of-type(17) { + grid-column: 6/7; +} +@layer no-support { + @supports not (row-rule-inset-cap: 16px) { + body::before { + content: "Your browser doesn't support the row-rule-inset-cap property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```css hidden live-sample___percents +ul { + row-rule-inset-cap: 100%; +} +``` + +```js hidden live-sample___caps live-sample___percents +const inset = document.getElementById("inset"); +const visibility = document.getElementById("visibility"); +const ul = document.getElementById("ul"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + o.innerText = + ul.style.rowRuleInsetCap = `${inset.value}${inset.dataset["unit"]}`; +}); +``` + +```js hidden live-sample___caps +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; + if (visibility.value == "between") { + ul.style.rowRuleStyle = "repeat(2, solid), double"; + } else if (visibility.value == "around") { + ul.style.rowRuleStyle = "repeat(3, solid), repeat(2, double)"; + } else { + ul.style.rowRuleStyle = "solid"; + } +}); +``` + +```js hidden live-sample___percents +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; + if (visibility.value == "between") { + ul.style.rowRuleStyle = "repeat(2, inset), double, repeat(2, solid)"; + } else if (visibility.value == "around") { + ul.style.rowRuleStyle = "repeat(3, inset), repeat(2, double)"; + } else { + ul.style.rowRuleStyle = "solid"; + } +}); +``` + +{{EmbedLiveSample("caps", "", "380")}} + +Setting `0px` aligns the row rule ends with the left and right container edges. This is the default. + +Select `between` as the `rule-visibility-items` value. This value paints rules in gap segments only if the two adjacent areas are occupied by items. Again, we have row rule cap endpoints at the start edge of the container, but now we have none at the end edge. The third row rule, denoted with a double-line style, has two additional cap endpoints: the end-side of the segment between `11` and `15` and the start-side of the segment between `12` and `16`. These do not meet any other rule segments; therefore, they are affected by the `row-rule-inset-cap-start` property. + +In this case, the `around` value of the `rule-visibility-items` property, which paints rules in a gap segment as long as one adjacent area is occupied by an item, did not create additional cap segment endpoints. All the interior segment endpoints end in junctions where there are column segments, thus creating junction, not cap, segment endpoints. Junction endpoints can be inset using the {{cssxref("row-rule-inset-junction")}} shorthand property. + +### Understanding percentage values + +The length a percentage value is relative to depends on the endpoint location. Interior endpoint percentage values are relative to the width of the gap at the cap endpoint, so relative to the {{cssxref("column-gap")}} if abutting a rule gap, plus any additional spacing added due to {{cssxref("justify-content")}} settings, and `0` at the edge of the container. For example, `row-rule-inset-cap: 50%` resolves to half the gap junction size at an interior cap (half the size of the `column-gap` value), and `0` at the container edges. + +This example is not broken. When `rule-visibility-items` is set to `normal`, every row cap endpoint abuts the left or right edge of the container, so any percentage value set will be relative to `0`. + +{{EmbedLiveSample("percents", "", "380")}} + +Select `around` as the `rule-visibility-items` value. The first three rows start and the first and last row end at the container edge. Any percentage values for these row cap segment endpoints will resolve to `0`. All the other segments end at interior gaps where column rule segments are present, so these row segments are not cap segment endpoints. + +Select `between` as the `rule-visibility-items` value. As in the previous demonstration, this value creates two interior cap segment endpoints: the right side of the segment between items `11` and `15` and the left side of segment between items `12` and `16` again do not meet any other rule segments. For these two cap endpoints, the percentage offset is relative to the size of the {{cssxref("column-gap")}} width, which in this case is `20px`. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic usage + +This example demonstrates setting `row-rule-inset-cap` to inset the row rule cap segment endpoints on flex containers. + +#### HTML + +```html ++ + +
+``` + +#### CSS + +We use the {{cssxref("display")}} property to turn the `.flexbox` elements into flex containers. We balance the items into three flex lines using {{cssxref("flex-wrap")}} and {{cssxref("flex-line-count")}}. We define a `lightblue` {{cssxref("rule")}} to paint both column and row gaps, then overwrite the {{cssxref("row-rule-color")}}, setting darker `blue` row gap decorations. Finally, we set the `row-rule-inset-cap` to `16px`. + +```css +.flexbox { + display: flex; + flex-wrap: balance; + flex-line-count: 3; + gap: 20px; + rule: 5px solid lightblue; + row-rule-color: blue; + + row-rule-inset-cap: 16px; +} +``` + +We also set the {{cssxref("flex-direction")}} on the `.column` container, to change the main axis of the flex container, and make the items flow in columns rather than rows. + +```css +.column { + flex-direction: column; +} +``` + +The rest of the CSS is hidden for brevity. + +```css hidden +body { + font-family: sans-serif; + text-align: center; +} +h1 { + font-size: 1.25em; +} +h2 { + font-size: 1em; +} +article { + display: flex; + gap: 5vw; + rule: 1px solid black; + width: 100vw; +} +section { + flex-basis: 45vw; +} +.flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + height: 30px; +} +output { + display: inline-block; + width: 2em; +} +p { + margin-top: 2.5em; +} +@layer no-support { + @supports not (row-rule-inset-cap: 16px) { + body::before { + content: "Your browser doesn't support the row-rule-inset-cap property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```js hidden live-sample___basic +const inset = document.getElementById("inset"); +const containers = document.querySelectorAll(".flexbox"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + const val = `${inset.value}px`; + containers[0].style.rowRuleInsetCap = val; + containers[1].style.rowRuleInsetCap = val; + output.innerText = val; +}); +``` + +#### Result + +{{EmbedLiveSample("Basic usage", "", "330")}} + +Change the size of the inset. Note how the row segments grow and shrink only at segment cap ends, either their left side, their right side, or both directions — the ends that don't intersect other row or column segments. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("row-rule-inset-cap-end")}} +- {{cssxref("row-rule-inset-cap-start")}} +- {{cssxref("row-rule-inset")}} shorthand +- {{cssxref("column-rule-inset-cap")}} shorthand +- {{cssxref("rule-inset")}} shorthand +- {{cssxref("row-rule-break")}} +- {{cssxref("rule-break")}} shorthand +- {{cssxref("rule-overlap")}} +- {{cssxref("rule-visibility-items")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/rule-inset-cap/index.md b/files/en-us/web/css/reference/properties/rule-inset-cap/index.md new file mode 100644 index 000000000000000..334f2153ee35321 --- /dev/null +++ b/files/en-us/web/css/reference/properties/rule-inset-cap/index.md @@ -0,0 +1,454 @@ +--- +title: "`rule-inset-cap` CSS property" +short-title: rule-inset-cap +slug: Web/CSS/Reference/Properties/rule-inset-cap +page-type: css-property +status: + - experimental +browser-compat: css.properties.rule-inset-cap +sidebar: cssref +--- + +{{SeeCompatTable}} + +The **`rule-inset-cap`** [CSS](/en-US/docs/Web/CSS) [shorthand](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) property can be used to offset the start and end of column and row rule segment [cap endpoints](#understanding_cap_end). + +{{InteractiveExample("CSS Demo: rule")}} + + + +```css interactive-example-choice +rule-inset-cap: -20px; +``` + +```css interactive-example-choice +rule-inset-cap: 0; +``` + +```css interactive-example-choice +rule-inset-cap: 1em; +``` + +```css interactive-example-choice +rule-inset-cap: 100%; +``` + +```css interactive-example-choice +rule-inset-cap: overlap-join; +``` + +```html interactive-example ++ + +
+``` + +#### CSS + +We use the {{cssxref("display")}} property to turn the `.flexbox` elements into flex containers. We balance the items into three flex lines using {{cssxref("flex-wrap")}} and {{cssxref("flex-line-count")}}. We define a light blue {{cssxref("rule")}} to paint in both row and column gaps, then override the {{cssxref("column-rule-color")}}, setting darker `blue` vertical gap decorations. Finally, we set the `rule-inset-cap` to `16px`. + +```css +.flexbox { + display: flex; + flex-wrap: balance; + flex-line-count: 3; + gap: 20px; + rule: 5px solid lightblue; + column-rule-color: blue; + + rule-inset-cap: 16px; +} +``` + +We also set the {{cssxref("flex-direction")}} on the `.column` container to make its items flow in columns rather than rows. We've hidden the other CSS styles, and the code that make the form interactive, for brevity. + +```css +.column { + flex-direction: column; +} +``` + +```css hidden +body { + font-family: sans-serif; + text-align: center; +} +h1 { + font-size: 1.25em; +} +h2 { + font-size: 1em; +} +article { + display: flex; + gap: 5vw; + rule: 1px solid black; + width: 90vw; + margin: auto; +} +section { + flex-basis: 45vw; +} +.flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + height: 30px; +} +output { + display: inline-block; + width: 2em; +} +p { + margin-top: 2.5em; +} +@layer no-support { + @supports not (rule-inset-cap: 16px) { + body::before { + content: "Your browser doesn't support the rule-inset-cap property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```js hidden +const inset = document.getElementById("inset"); +const containers = document.querySelectorAll(".flexbox"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + const val = `${inset.value}px`; + containers[0].style.ruleInsetCap = val; + containers[1].style.ruleInsetCap = val; + output.innerText = val; +}); +``` + +#### Result + +{{EmbedLiveSample("Basic usage", "", "300")}} + +Change the size of the inset. + +### Inner cap segments + +This example shows how to set `rule-inset-cap` to inset the endpoints of cap segments on a grid container, and how the {{cssxref("rule-visibility-items")}} property can turn inner endpoints into cap segment endpoints. + +#### HTML + +We include an unordered list ({{htmlelement("ul")}}) as our container for several list items ({{htmlelement("li")}}). + +We also include a {{htmlelement("select")}} element with an {{htmlelement("option")}} for each `rule-visibility-items` keyword, and an {{htmlelement("input")}} of type {{HTMLElement("input/range", "range")}}. + +```html live-sample___caps ++ +
+ ++ + +
+``` + +#### CSS + +We create a grid container by setting the {{cssxref("display")}} to grid, creating 6 columns with {{cssxref("grid-template-columns")}}, and adding a `20px` {{cssxref("gap")}}. We use the {{cssxref("rule")}} property to define our rules, overriding the row rule color with the {{cssxref("row-rule-color")}} property. We set the {{cssxref("rule-break")}} property to break the rules at each intersection, making each rule segment distinct. We explicitly set {{cssxref("rule-visibility-items")}} to the default value of `normal`. We then use the `rule-inset-cap` property to inset all the cap segment endpoints by `16px`. + +```css +ul { + display: grid; + grid-template-columns: repeat(6, auto); + gap: 20px; + rule: 10px solid olive; + row-rule-color: palegoldenrod; + rule-break: intersection; + rule-visibility-items: normal; + + rule-inset-cap: 16px; +} +``` + +We've hidden the other CSS styles, and the code that make the form interactive, for brevity. + +```css hidden +ul { + place-items: center; + padding: 0; + list-style-type: none; + border: 1px solid; + margin: 40px; +} +li { + text-align: center; + font-family: sans-serif; + background-color: #ededed; + padding: 1em; + width: 100%; + box-sizing: border-box; +} +li:nth-of-type(n + 9) { + grid-row: 3 / 4; +} +li:nth-of-type(n + 12) { + grid-row: 4 / 5; +} +li:nth-of-type(10) { + grid-column: 5/6; +} +li:nth-of-type(11) { + grid-column: 6/7; +} + +li:nth-of-type(15) { + grid-area: 4 / 5 / 5 / 6; +} +li:nth-of-type(16) { + grid-area: 4 / 6 / 5 / 7; +} +li:nth-of-type(17) { + display: none; + grid-area: 5 / 6 / 6 / 7; +} +@layer no-support { + @supports not (rule-inset-cap: 16px) { + body::before { + content: "Your browser doesn't support the rule-inset-cap property"; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; + } + } +} +``` + +```js hidden +const inset = document.getElementById("inset"); +const visibility = document.getElementById("visibility"); +const ul = document.getElementById("ul"); +const output = document.getElementById("o"); + +inset.addEventListener("input", () => { + output.innerText = + ul.style.ruleInsetCap = `${inset.value}${inset.dataset["unit"]}`; +}); + +visibility.addEventListener("change", () => { + ul.style.ruleVisibilityItems = `${visibility.value}`; +}); +``` + +#### Result + +{{EmbedLiveSample("Inner cap segments", "", "400")}} + +Select `between` from the dropdown to only paint rule segments when both adjacent grid areas contain a grid item, thereby creating interior cap segments. Then change the inset value. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("column-rule-inset-cap")}} shorthand +- {{cssxref("row-rule-inset-cap")}} shorthand +- {{cssxref("column-rule-inset")}} shorthand +- {{cssxref("row-rule-inset")}} shorthand +- {{cssxref("rule-inset-start")}} shorthand +- {{cssxref("rule-inset")}} shorthand +- {{cssxref("rule-break")}} shorthand\ +- {{cssxref("rule-overlap")}} +- {{cssxref("rule-visibility-items")}} +- {{cssxref("rule")}} shorthand +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module diff --git a/files/en-us/web/css/reference/properties/text-decoration-inset/index.md b/files/en-us/web/css/reference/properties/text-decoration-inset/index.md index 5d2a8295148d24f..1d35c6f64bd2edb 100644 --- a/files/en-us/web/css/reference/properties/text-decoration-inset/index.md +++ b/files/en-us/web/css/reference/properties/text-decoration-inset/index.md @@ -57,11 +57,13 @@ text-decoration-inset: auto; /* One