Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/layout/docs/css-gap-decorations/   (Browser von der Mozilla Stiftung Version 136.0.1©)  Datei vom 10.2.2025 mit Größe 274 kB image not shown  

Quellcode-Bibliothek Overview.html   Sprache: HTML

 
 products/Sources/formale Sprachen/C/Firefox/layout/docs/css-gap-decorations/Overview.html


<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Gap Decorations</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This is a proposal to extend https://drafts.csswg.org/css-align">CSS Box Alignment to support gap decorations." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet" type="text/css">
  <meta content="Bikeshed version dfbc2b297, updated Thu Nov 11 15:52:32 2021 -0800" name="generator">
  <link href="https://matspalmgren.github.io/css-gap-decorations/Overview.html" rel="canonical">
  <link href="https://drafts.csswg.org/csslogo.ico" rel="icon">
  <meta content="0978a49f760a6618d883efc621c36673a0720e2a" name="document-revision">
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: var(--a-normal-text);
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-colors */

/* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */
:root {
    color-scheme: light dark;

    --text: black;
    --bg: white;

    --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark);

    --logo-bg: #1a5e9a;
    --logo-active-bg: #c00;
    --logo-text: white;

    --tocnav-normal-text: #707070;
    --tocnav-normal-bg: var(--bg);
    --tocnav-hover-text: var(--tocnav-normal-text);
    --tocnav-hover-bg: #f8f8f8;
    --tocnav-active-text: #c00;
    --tocnav-active-bg: var(--tocnav-normal-bg);

    --tocsidebar-text: var(--text);
    --tocsidebar-bg: #f7f8f9;
    --tocsidebar-shadow: rgba(0,0,0,.1);
    --tocsidebar-heading-text: hsla(203,20%,40%,.7);

    --toclink-text: var(--text);
    --toclink-underline: #3980b5;
    --toclink-visited-text: var(--toclink-text);
    --toclink-visited-underline: #054572;

    --heading-text: #005a9c;

    --hr-text: var(--text);

    --algo-border: #def;

    --del-text: red;
    --del-bg: transparent;
    --ins-text: #080;
    --ins-bg: transparent;

    --a-normal-text: #034575;
    --a-normal-underline: #bbb;
    --a-visited-text: var(--a-normal-text);
    --a-visited-underline: #707070;
    --a-hover-bg: rgba(75%, 75%, 75%, .25);
    --a-active-text: #c00;
    --a-active-underline: #c00;

    --blockquote-border: silver;
    --blockquote-bg: transparent;
    --blockquote-text: currentcolor;

    --issue-border: #e05252;
    --issue-bg: #fbe9e9;
    --issue-text: var(--text);
    --issueheading-text: #831616;

    --example-border: #e0cb52;
    --example-bg: #fcfaee;
    --example-text: var(--text);
    --exampleheading-text: #574b0f;

    --note-border: #52e052;
    --note-bg: #e9fbe9;
    --note-text: var(--text);
    --noteheading-text: hsl(120, 70%, 30%);
    --notesummary-underline: silver;

    --assertion-border: #aaa;
    --assertion-bg: #eee;
    --assertion-text: black;

    --advisement-border: orange;
    --advisement-bg: #fec;
    --advisement-text: var(--text);
    --advisementheading-text: #b35f00;

    --warning-border: red;
    --warning-bg: hsla(40,100%,50%,0.95);
    --warning-text: var(--text);

    --amendment-border: #330099;
    --amendment-bg: #F5F0FF;
    --amendment-text: var(--text);
    --amendmentheading-text: #220066;

    --def-border: #8ccbf2;
    --def-bg: #def;
    --def-text: var(--text);
    --defrow-border: #bbd7e9;

    --datacell-border: silver;

    --indexinfo-text: #707070;

    --indextable-hover-text: black;
    --indextable-hover-bg: #f7f8f9;

    --outdatedspec-bg: rgba(0, 0, 0, .5);
    --outdatedspec-text: black;
    --outdated-bg: maroon;
    --outdated-text: white;
    --outdated-shadow: red;

    --editedrec-bg: darkorange;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

:root {
    --dfnpanel-bg: #ddd;
    --dfnpanel-text: var(--text);
}
.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: var(--dfnpanel-bg);
    color: var(--dfnpanel-text);
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: var(--dfnpanel-text); }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-issues */

a[href].issue-return {
    float: right;
    float: inline-end;
    color: var(--issueheading-text);
    font-weight: bold;
    text-decoration: none;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

:root {
    --selflink-text: white;
    --selflink-bg: gray;
    --selflink-hover-text: black;
}
.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: var(--selflink-bg);
    color: var(--selflink-text);
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: var(--selflink-hover-text);
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }
</style>
<style>/* style-syntax-highlighting */

code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }

.highlight:not(.idl) { background: rgba(0, 0, 0, .03); }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
<style>/* style-wpt */

:root {
    --wpt-border: hsl(0, 0%, 60%);
    --wpt-bg: hsl(0, 0%, 95%);
    --wpt-text: var(--text);
    --wptheading-text: hsl(0, 0%, 30%);
}
@media (prefers-color-scheme: dark) {
    :root {
        --wpt-border: hsl(0, 0%, 30%);
        --wpt-bg: var(--borderedblock-bg);
        --wpt-text: var(--text);
        --wptheading-text: hsl(0, 0%, 60%);
    }
}
.wpt-tests-block {
    list-style: none;
    border-left: .5em solid var(--wpt-border);
    background: var(--wpt-bg);
    color: var(--wpt-text);
    margin: 1em auto;
    padding: .5em;
}
.wpt-tests-block summary {
    color: var(--wptheading-text);
    font-weight: normal;
    text-transform: uppercase;
}
.wpt-tests-block summary::marker{
    color: var(--wpt-border);
}
.wpt-tests-block summary:hover::marker{
    color: var(--wpt-text);
}
/*
   The only content  of a wpt test block in its closed state is the <summary>,
   which contains the word TESTS,
   and that is absolutely positioned.
   In that closed state, wpt test blocks are styled
   to have a top margin whose height is exactly equal
   to the height of the absolutely positioned <summary>,
   and no other background/padding/margin/border.
   The wpt test block elements will therefore allow the maring
   of the previous/next block elements
   to collapse through them;
   if this combined margin would be larger than its own top margin,
   it stays as is,
   and therefore the pre-existing vertical rhythm of the document is undisturbed.
   If that combined margin would be smaller, it is grown to that size.
   This means that the wpt test block ensures
   that there's always enough vertical space to insert the summary,
   without adding more than is needed.
*/
.wpt-tests-block:not([open]){
    padding: 0;
    border: none;
    background: none;
    font-size: 0.75em;
    line-height: 1;
    position: relative;
    margin: 1em 0 0;
}
.wpt-tests-block:not([open]) summary {
    position: absolute;
    right: 0;
    bottom: 0;
}
/*
   It is possible that both the last child of a block element
   and the block element itself
   would be annotated with a <wpt> block each.
   If the block element has a padding or a border,
   that's fine, but otherwise
   the bottom margin of the block and of its last child would collapse
   and both <wpt> elements would overlap, being both placed there.
   To avoid that, add 1px of padding to the <wpt> element annotating the last child
   to prevent the bottom margin of the block and of its last child from collapsing
   (and as much negative margin,
   as wel only want to prevent margin collapsing,
   but are not trying to actually take more space).
*/
.wpt-tests-block:not([open]):last-child {
    padding-bottom: 1px;
    margin-bottom: -1px;
}
/*
   Exception to the previous rule:
   don't do that in non-last list items,
   because it's not necessary,
   and would therefore consume more space than strictly needed.
   Lists must have list items as children, not <wpt> elements,
   so a <wpt> element cannot be a sibling of a list item,
   and the collision that the previous rule avoids cannot happen.
*/
li:not(:last-child) > .wpt-tests-block:not([open]):last-child,
dd:not(:last-child) > .wpt-tests-block:not([open]):last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}
.wpt-tests-block:not([open]):not(:hover){
    opacity: 0.5;
}
.wpt-tests-list {
    list-style: none;
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr max-content auto auto;
    grid-column-gap: .5em;
}
.wpt-tests-block hr:last-child {
    display: none;
}
.wpt-test {
    display: contents;
}
.wpt-test > a {
    text-decoration: underline;
    border: none;
}
.wpt-test > .wpt-name { grid-column: 1; }
.wpt-test > .wpt-results { grid-column: 2; }
.wpt-test > .wpt-live { grid-column: 3; }
.wpt-test > .wpt-source { grid-column: 4; }

.wpt-test > .wpt-results {
    display: flex;
    gap: .1em;
}
.wpt-test .wpt-result {
    display: inline-block;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    position: relative;
}
</style>
<style>/* style-darkmode */

@media (prefers-color-scheme: dark) {
    :root {
        --text: #ddd;
        --bg: black;

        --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E");

        --logo-bg: #1a5e9a;
        --logo-active-bg: #c00;
        --logo-text: white;

        --tocnav-normal-text: #999;
        --tocnav-normal-bg: var(--bg);
        --tocnav-hover-text: var(--tocnav-normal-text);
        --tocnav-hover-bg: #080808;
        --tocnav-active-text: #f44;
        --tocnav-active-bg: var(--tocnav-normal-bg);

        --tocsidebar-text: var(--text);
        --tocsidebar-bg: #080808;
        --tocsidebar-shadow: rgba(255,255,255,.1);
        --tocsidebar-heading-text: hsla(203,20%,40%,.7);

        --toclink-text: var(--text);
        --toclink-underline: #6af;
        --toclink-visited-text: var(--toclink-text);
        --toclink-visited-underline: #054572;

        --heading-text: #8af;

        --hr-text: var(--text);

        --algo-border: #456;

        --del-text: #f44;
        --del-bg: transparent;
        --ins-text: #4a4;
        --ins-bg: transparent;

        --a-normal-text: #6af;
        --a-normal-underline: #555;
        --a-visited-text: var(--a-normal-text);
        --a-visited-underline: var(--a-normal-underline);
        --a-hover-bg: rgba(25%, 25%, 25%, .2);
        --a-active-text: #f44;
        --a-active-underline: var(--a-active-text);

        --borderedblock-bg: rgba(255, 255, 255, .05);

        --blockquote-border: silver;
        --blockquote-bg: var(--borderedblock-bg);
        --blockquote-text: currentcolor;

        --issue-border: #e05252;
        --issue-bg: var(--borderedblock-bg);
        --issue-text: var(--text);
        --issueheading-text: hsl(0deg, 70%, 70%);

        --example-border: hsl(50deg, 90%, 60%);
        --example-bg: var(--borderedblock-bg);
        --example-text: var(--text);
        --exampleheading-text: hsl(50deg, 70%, 70%);

        --note-border: hsl(120deg, 100%, 35%);
        --note-bg: var(--borderedblock-bg);
        --note-text: var(--text);
        --noteheading-text: hsl(120, 70%, 70%);
        --notesummary-underline: silver;

        --assertion-border: #444;
        --assertion-bg: var(--borderedblock-bg);
        --assertion-text: var(--text);

        --advisement-border: orange;
        --advisement-bg: #222218;
        --advisement-text: var(--text);
        --advisementheading-text: #f84;

        --warning-border: red;
        --warning-bg: hsla(40,100%,20%,0.95);
        --warning-text: var(--text);

        --amendment-border: #330099;
        --amendment-bg: #080010;
        --amendment-text: var(--text);
        --amendmentheading-text: #cc00ff;

        --def-border: #8ccbf2;
        --def-bg: #080818;
        --def-text: var(--text);
        --defrow-border: #136;

        --datacell-border: silver;

        --indexinfo-text: #aaa;

        --indextable-hover-text: var(--text);
        --indextable-hover-bg: #181818;

        --outdatedspec-bg: rgba(255, 255, 255, .5);
        --outdatedspec-text: black;
        --outdated-bg: maroon;
        --outdated-text: white;
        --outdated-shadow: red;

        --editedrec-bg: darkorange;
    }
    /* In case a transparent-bg image doesn't expect to be on a dark bg,
       which is quite common in practice... */
    img { background: white; }
}
@media (prefers-color-scheme: dark) {
    :root {
        --selflink-text: black;
        --selflink-bg: silver;
        --selflink-hover-text: white;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --dfnpanel-bg: #222;
        --dfnpanel-text: var(--text);
    }
}
@media (prefers-color-scheme: dark) {
    .highlight:not(.idl) { background: rgba(255, 255, 255, .05); }

    c-[a] { color: #d33682 } /* Keyword.Declaration */
    c-[b] { color: #d33682 } /* Keyword.Type */
    c-[c] { color: #2aa198 } /* Comment */
    c-[d] { color: #2aa198 } /* Comment.Multiline */
    c-[e] { color: #268bd2 } /* Name.Attribute */
    c-[f] { color: #b58900 } /* Name.Tag */
    c-[g] { color: #cb4b16 } /* Name.Variable */
    c-[k] { color: #d33682 } /* Keyword */
    c-[l] { color: #657b83 } /* Literal */
    c-[m] { color: #657b83 } /* Literal.Number */
    c-[n] { color: #268bd2 } /* Name */
    c-[o] { color: #657b83 } /* Operator */
    c-[p] { color: #657b83 } /* Punctuation */
    c-[s] { color: #6c71c4 } /* Literal.String */
    c-[t] { color: #6c71c4 } /* Literal.String.Single */
    c-[u] { color: #6c71c4 } /* Literal.String.Double */
    c-[ch] { color: #2aa198 } /* Comment.Hashbang */
    c-[cp] { color: #2aa198 } /* Comment.Preproc */
    c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */
    c-[c1] { color: #2aa198 } /* Comment.Single */
    c-[cs] { color: #2aa198 } /* Comment.Special */
    c-[kc] { color: #d33682 } /* Keyword.Constant */
    c-[kn] { color: #d33682 } /* Keyword.Namespace */
    c-[kp] { color: #d33682 } /* Keyword.Pseudo */
    c-[kr] { color: #d33682 } /* Keyword.Reserved */
    c-[ld] { color: #657b83 } /* Literal.Date */
    c-[nc] { color: #268bd2 } /* Name.Class */
    c-[no] { color: #268bd2 } /* Name.Constant */
    c-[nd] { color: #268bd2 } /* Name.Decorator */
    c-[ni] { color: #268bd2 } /* Name.Entity */
    c-[ne] { color: #268bd2 } /* Name.Exception */
    c-[nf] { color: #268bd2 } /* Name.Function */
    c-[nl] { color: #268bd2 } /* Name.Label */
    c-[nn] { color: #268bd2 } /* Name.Namespace */
    c-[py] { color: #268bd2 } /* Name.Property */
    c-[ow] { color: #657b83 } /* Operator.Word */
    c-[mb] { color: #657b83 } /* Literal.Number.Bin */
    c-[mf] { color: #657b83 } /* Literal.Number.Float */
    c-[mh] { color: #657b83 } /* Literal.Number.Hex */
    c-[mi] { color: #657b83 } /* Literal.Number.Integer */
    c-[mo] { color: #657b83 } /* Literal.Number.Oct */
    c-[sa] { color: #6c71c4 } /* Literal.String.Affix */
    c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */
    c-[sc] { color: #6c71c4 } /* Literal.String.Char */
    c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */
    c-[sd] { color: #6c71c4 } /* Literal.String.Doc */
    c-[se] { color: #6c71c4 } /* Literal.String.Escape */
    c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */
    c-[si] { color: #6c71c4 } /* Literal.String.Interpol */
    c-[sx] { color: #6c71c4 } /* Literal.String.Other */
    c-[sr] { color: #6c71c4 } /* Literal.String.Regex */
    c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */
    c-[fm] { color: #268bd2 } /* Name.Function.Magic */
    c-[vc] { color: #cb4b16 } /* Name.Variable.Class */
    c-[vg] { color: #cb4b16 } /* Name.Variable.Global */
    c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */
    c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */
    c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */
}
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Gap Decorations</h1>
   <p id="w3c-state"><a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2021-12-18">18 December 2021</time></p>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://matspalmgren.github.io/css-gap-decorations/Overview.html">https://matspalmgren.github.io/css-gap-decorations/Overview.html</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-gap-decorations-1">CSSWG Issues Repository</a>
      <dd><a href="https://github.com/w3c/csswg-drafts/issues/6748">CSSWG github issue #6748</a>
      <dd><a href="#issues-index">Inline In Spec</a>
      <dt class="editor">Editor:
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:mats@mozilla.com">Mats Palmgren</a> (<a class="p-org org" href="http://mozilla.com">Mozilla Corporation</a>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-gap-decorations-1/Overview.bs">GitHub Editor</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2021 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
 It is provided for discussion only and may change at any moment.
 Its publication here does not imply endorsement of its contents by W3C.
 Don’t cite this document other than as work in progress. </p>
   <p>Please send feedback
 by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred),
 including the spec code “css-gap-decorations” in the title, like this:
 “[css-gap-decorations] <i>…summary of comment…</i>”.
 All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>.
 Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-gap-decorations%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. </p>
   <p>This document is governed by the <a href="https://www.w3.org/2021/Process-20211102/" id="w3c_process_revision">2 November 2021 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#overview"><span class="secno">1.1</span> <span class="content">Overview</span></a>
      <li><a href="#placement"><span class="secno">1.2</span> <span class="content">Module Interactions</span></a>
      <li><a href="#definitions"><span class="secno">1.3</span> <span class="content">Definitions</span></a>
     </ol>
    <li>
     <a href="#rule-image"><span class="secno">2</span> <span class="content">Rule Images and Gradients</span></a>
     <ol class="toc">
      <li><a href="#column-rule-image-source"><span class="secno">2.1</span> <span class="content">The <span class="property">column-rule-image-source</span> and <span class="property">row-rule-image-source</span> Properties</span></a>
      <li><a href="#column-rule-image-slice"><span class="secno">2.2</span> <span class="content">The <span class="property">column-rule-image-slice</span> and <span class="property">row-rule-image-slice</span> Properties</span></a>
      <li><a href="#column-rule-image-repeat"><span class="secno">2.3</span> <span class="content">The <span class="property">column-rule-image-repeat</span> and <span class="property">row-rule-image-repeat</span> Properties</span></a>
      <li><a href="#column-rule-image"><span class="secno">2.4</span> <span class="content">The <span class="property">column-rule-image</span> and <span class="property">row-rule-image</span> Shorthands</span></a>
     </ol>
    <li>
     <a href="#size"><span class="secno">3</span> <span class="content">Rule Positioning and Sizing</span></a>
     <ol class="toc">
      <li><a href="#column-rule-width"><span class="secno">3.1</span> <span class="content">The <span class="property">column-rule-width</span> and <span class="property">row-rule-width</span> Properties</span></a>
      <li><a href="#column-rule-length"><span class="secno">3.2</span> <span class="content">The <span class="property">column-rule-length</span> and <span class="property">row-rule-length</span> Properties</span></a>
      <li><a href="#column-rule-lateral-inset-start"><span class="secno">3.3</span> <span class="content">The Rule Lateral Inset Properties</span></a>
      <li><a href="#resolving-position-and-size-algo"><span class="secno">3.4</span> <span class="content">Resolving a rule’s position and size</span></a>
      <li><a href="#column-rule-lateral-inset"><span class="secno">3.5</span> <span class="content">The <span class="property">column-rule-lateral-inset</span> and <span class="property">row-rule-lateral-inset</span> Shorthands</span></a>
      <li><a href="#column-rule-longitudinal-inset-start"><span class="secno">3.6</span> <span class="content">The Rule Longitudinal Inset Properties</span></a>
      <li><a href="#column-rule-longitudinal-inset"><span class="secno">3.7</span> <span class="content">The <span class="property">column-rule-longitudinal-inset</span> and <span class="property">row-rule-longitudinal-inset</span> Shorthands</span></a>
      <li><a href="#column-rule-longitudinal-edge-inset-start"><span class="secno">3.8</span> <span class="content">The Rule Longitudinal Edge Inset Properties</span></a>
      <li><a href="#column-rule-longitudinal-edge-inset"><span class="secno">3.9</span> <span class="content">The <span class="property">column-rule-longitudinal-edge-inset</span> and <span class="property">row-rule-longitudinal-edge-inset</span> Shorthands</span></a>
     </ol>
    <li>
     <a href="#row-rule-props"><span class="secno">4</span> <span class="content">Row Rule Style and Color</span></a>
     <ol class="toc">
      <li><a href="#row-rule-style"><span class="secno">4.1</span> <span class="content">The <span class="property">row-rule-style</span> and <span class="property">row-rule-color</span> Properties</span></a>
      <li><a href="#row-rule"><span class="secno">4.2</span> <span class="content">The <span class="property">row-rule</span> Shorthand</span></a>
     </ol>
    <li>
     <a href="#rule-align"><span class="secno">5</span> <span class="content">Rule Alignment</span></a>
     <ol class="toc">
      <li><a href="#column-rule-align"><span class="secno">5.1</span> <span class="content">The <span class="property">column-rule-align</span> and <span class="property">row-rule-align</span> Properties</span></a>
      <li><a href="#column-rule-edge-align"><span class="secno">5.2</span> <span class="content">The <span class="property">column-rule-edge-align</span> and <span class="property">row-rule-edge-align</span> Properties</span></a>
     </ol>
    <li>
     <a href="#rule-extent"><span class="secno">6</span> <span class="content">Rule Extent</span></a>
     <ol class="toc">
      <li>
       <a href="#column-rule-extent"><span class="secno">6.1</span> <span class="content">The <span class="property">column-rule-extent</span> and <span class="property">row-rule-extent</span> Properties</span></a>
       <ol class="toc">
        <li>
         <a href="#rule-extent-grid"><span class="secno">6.1.1</span> <span class="content">Grid Containers</span></a>
         <ol class="toc">
          <li><a href="#rule-extent-subgrid"><span class="secno">6.1.1.1</span> <span class="content">Subgrid</span></a>
          <li><a href="#rule-extent-masonry"><span class="secno">6.1.1.2</span> <span class="content">Masonry</span></a>
         </ol>
        <li><a href="#rule-extent-flexbox"><span class="secno">6.1.2</span> <span class="content">Flex Containers</span></a>
        <li><a href="#rule-extent-table"><span class="secno">6.1.3</span> <span class="content">Table Containers</span></a>
        <li><a href="#rule-extent-table-row-group"><span class="secno">6.1.4</span> <span class="content">Table Row Group Containers</span></a>
        <li><a href="#rule-extent-multicol"><span class="secno">6.1.5</span> <span class="content">Multi-Column Containers</span></a>
       </ol>
     </ol>
    <li><a href="#rule-containing-rectangle"><span class="secno">7</span> <span class="content">The Rule Containing Rectangle</span></a>
    <li><a href="#rule-painting-order"><span class="secno">8</span> <span class="content">Rule Painting Order</span></a>
    <li><a href="#rule-overflow"><span class="secno">9</span> <span class="content">Rule Overflow</span></a>
    <li>
     <a href="#w3c-conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#w3c-conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#w3c-partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#w3c-conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#w3c-testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is not normative.</em></p>
   <h3 class="heading settled" data-level="1.1" id="overview"><span class="secno">1.1. </span><span class="content">Overview</span><a class="self-link" href="#overview"></a></h3>
   <p>This is a proposal to add CSS features for decorating <a href="https://drafts.csswg.org/css-align#gaps">gaps</a>.
    (Some use cases and background discussion can be found in <a href="https://github.com/w3c/csswg-drafts/issues/2748">issue #2748</a>.)
    We propose to extend the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width">column-rule-width</a> property with new values.
    Add properties to support images and gradients.
    Add properties for aligning the rule to specific anchor points,
    specifying its extent area, and to control its position and length within that area.
    We add support for row rules by adding the corresponding <a class="property" data-link-type="propdesc">row-*</a> properties.
    We also widen the scope of these properties so that they can be used in <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group">table-row-group</a> containers,
    as well as <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column containers</a>.</p>
   <h3 class="heading settled" data-level="1.2" id="placement"><span class="secno">1.2. </span><span class="content">Module Interactions</span><a class="self-link" href="#placement"></a></h3>
   <p>This module extends the definition of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width①">column-rule-width</a> property,
    adding <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> and <span class="css">auto</span> values.
    We also generalize the existing <span class="css">column-rule-*</span> properties to apply to other
    types of containers.
    Accordingly, we propose to move the existing <span class="css">column-rule</span> properties from
    the <a href="https://drafts.csswg.org/css-multicol">Multi-column</a> spec to
    the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec.
    Additionally, all new properties and shorthands in this proposal are intended
    as additions to the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec.</p>
   <h3 class="heading settled" data-level="1.3" id="definitions"><span class="secno">1.3. </span><span class="content">Definitions</span><a class="self-link" href="#definitions"></a></h3>
   <p>In this specification, we will use the term <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="lateral-axis">lateral axis</dfn> to refer to
    the axis in which the rule’s thickness grows (i.e. the axis <span class="css">column-rule-width</span> use).  The other axis is the rule’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="longitudinal-axis">longitudinal axis</dfn> and
    its size in this axis is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="rule-length">rule length</dfn>.
    These definitions are relative to the rule itself and does not depend on if
    the rule is a row or column rule, or what the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> is.</p>
   <h2 class="heading settled" data-level="2" id="rule-image"><span class="secno">2. </span><span class="content">Rule Images and Gradients</span><a class="self-link" href="#rule-image"></a></h2>
   <p>Authors may specify an image or gradient to be used in place of the <span class="css">column-rule-style</span>.
    These properties are loosely modeled after the corresponding <a href="https://drafts.csswg.org/css-backgrounds/#border-images"><a class="property" data-link-type="propdesc">border-image-*</a></a> properties.
    Rules are one-dimensional though, as opposed to borders which have four sides around an area.
    A rule is like a border with just one side rendered with the other sides having <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style: none</a>.</p>
   <h3 class="heading settled" data-level="2.1" id="column-rule-image-source"><span class="secno">2.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source">column-rule-image-source</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-source" id="ref-for-propdef-row-rule-image-source">row-rule-image-source</a> Properties</span><a class="self-link" href="#column-rule-image-source"></a></h3>
   <table class="def propdef" data-link-for-hint="column-rule-image-source">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-source">column-rule-image-source</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-source">row-rule-image-source</dfn>
     <tr class="value">
      <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a> 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①">table-row-group</a> containers 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
      <td>the keyword <span class="css">none</span> or the computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①"><image></a> 
     <tr>
      <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
      <td>per grammar 
     <tr>
      <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>These properties specify an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image②"><image></a> to use in place of the rendering specified
    by the <span class="css">column-rule-style</span>/<span class="css">row-rule-style</span> properties.</p>
   <p>As for borders, a rule image is not rendered when the corresponding <span class="css">column-rule-style</span>/<span class="css">row-rule-style</span> is <span class="css">none</span>.</p>
   <h3 class="heading settled" data-level="2.2" id="column-rule-image-slice"><span class="secno">2.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice">column-rule-image-slice</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-slice" id="ref-for-propdef-row-rule-image-slice">row-rule-image-slice</a> Properties</span><a class="self-link" href="#column-rule-image-slice"></a></h3>
   <table class="def propdef" data-link-for-hint="column-rule-image-slice">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-slice">column-rule-image-slice</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-slice">row-rule-image-slice</dfn>
     <tr class="value">
      <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
      <td class="prod">[<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value"><number [0,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage [0,∞]></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a> 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container②">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container②">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table②">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group②">table-row-group</a> containers 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
      <td>refer to image size in the rule’s longitudinal axis 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
      <td>one or two values, each either a number or percentage 
     <tr>
      <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
      <td>per grammar 
     <tr>
      <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p><a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice①">column-rule-image-slice</a> specify inward offsets from the start and end edges
    of the image in the rule’s longitudinal axis, dividing it into three regions:
    two edge areas and one middle area.</p>
   <p>When two values are specified, they set the offsets on the start and end sides in
    that order. If the end value is missing, it is the same as the start value.</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="column-rule-image-slice" data-dfn-type="value" data-export id="valdef-column-rule-image-slice-percentage-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②"><percentage [0,∞]></a><a class="self-link" href="#valdef-column-rule-image-slice-percentage-0"></a></dfn> 
    <dd>Percentages are relative to the image size in the rule’s longitudinal axis 
    <dt><dfn class="css" data-dfn-for="column-rule-image-slice" data-dfn-type="value" data-export id="valdef-column-rule-image-slice-number-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①"><number [0,∞]></a><a class="self-link" href="#valdef-column-rule-image-slice-number-0"></a></dfn> 
    <dd>Numbers represent pixels in the image (if the image is a raster
        image) or vector coordinates (if the image is a vector image). 
   </dl>
   <p>Negative values are not allowed.
    Computed values larger than the size of the image are interpreted as <span class="css">100%</span>.</p>
   <p>If the image must be sized to determine the slices
    (for example, for SVG images with no intrinsic size),
    then it is sized using the <a href="https://www.w3.org/TR/css-images-3/#default-sizing"><cite>CSS Images 3</cite> § 4.3.1 Default Sizing Algorithm</a> with no <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#specified-size" id="ref-for-specified-size">specified size</a> and the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①">rule containing rectangle</a> as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#default-object-size" id="ref-for-default-object-size">default object size</a>.</p>
   <p>The regions given by the <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice②">column-rule-image-slice</a> values may overlap.
    However if the sum of the start and end values is equal to or greater than
    the size of the image, the middle part becomes empty.</p>
   <h3 class="heading settled" data-level="2.3" id="column-rule-image-repeat"><span class="secno">2.3. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat">column-rule-image-repeat</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-repeat" id="ref-for-propdef-row-rule-image-repeat">row-rule-image-repeat</a> Properties</span><a class="self-link" href="#column-rule-image-repeat"></a></h3>
   <table class="def propdef" data-link-for-hint="column-rule-image-repeat">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-repeat">column-rule-image-repeat</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-repeat">row-rule-image-repeat</dfn>
     <tr class="value">
      <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
      <td class="prod">stretch <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> repeat <span id="ref-for-comb-one③">|</span> round <span id="ref-for-comb-one④">|</span> space 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
      <td>stretch 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container③">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container③">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container③">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table③">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group③">table-row-group</a> containers 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
      <td>the specified keyword 
     <tr>
      <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
      <td>per grammar 
     <tr>
      <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>These properties specify how the middle part of a sliced rule image is scaled and tiled.
    Values have the following meanings:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-stretch">stretch<a class="self-link" href="#valdef-column-rule-image-repeat-stretch"></a></dfn>
    <dd>The image is stretched to fill the area. 
    <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-repeat">repeat<a class="self-link" href="#valdef-column-rule-image-repeat-repeat"></a></dfn>
    <dd>The image is tiled (repeated) to fill the area. 
    <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-round">round<a class="self-link" href="#valdef-column-rule-image-repeat-round"></a></dfn>
    <dd>The image is tiled (repeated) to fill the area. If it does not
        fill the area with a whole number of tiles, the image is rescaled
        so that it does. 
    <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-space">space<a class="self-link" href="#valdef-column-rule-image-repeat-space"></a></dfn>
    <dd>The image is tiled (repeated) to fill the area. If it does not
        fill the area with a whole number of tiles, the extra space is
        distributed around the tiles. 
   </dl>
   <p>The exact process for scaling and tiling the image parts is defined by drawing the equivalent <span class="css">border-image</span> with the top and bottom <span class="css">border-image-slice</span> values set from the corresponding <span class="css">column-rule-image-slice</span> values, and the <span class="css">border-image-slice</span> left value set to <span class="css">100%</span> and
    the right value set to <span class="css">0</span>. The <span class="css">border-image-width</span> top value set to the <span class="css">column-rule-image-slice</span> top value.  The <span class="css">border-image-width</span> top value set to the <span class="css">column-rule-image-slice</span> bottom value. The <span class="css">border-image-width</span> top value set to zero.</p>
   <h3 class="heading settled" data-level="2.4" id="column-rule-image"><span class="secno">2.4. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image" id="ref-for-propdef-column-rule-image">column-rule-image</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image" id="ref-for-propdef-row-rule-image">row-rule-image</a> Shorthands</span><a class="self-link" href="#column-rule-image"></a></h3>
   <table class="def propdef" data-link-for-hint="column-rule-image">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image">column-rule-image</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image">row-rule-image</dfn>
     <tr class="value">
      <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source①"><'column-rule-image-source'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice③"><'column-rule-image-slice'></a> <span id="ref-for-comb-any①">||</span> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat①"><'column-rule-image-repeat'></a> 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container④">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container④">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container④">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table④">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group④">table-row-group</a> containers 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
      <td>per grammar 
   </table>
   <aside class="example" id="example-c9ee9e2e">
    <a class="self-link" href="#example-c9ee9e2e"></a> This <a href="examples/grid-image-001.html">example</a> demonstrates the new
        rule image properties presented above in a grid layout with spanning elements. 
    <figure>
      <img height="488" src="media/grid-image-001.png" width="608"> 
     <figcaption> Example of image rules. </figcaption>
    </figure>
   </aside>
   <aside class="example" id="example-0518370f">
    <a class="self-link" href="#example-0518370f"></a> Here’s a <a href="examples/grid-image-002.html">variation</a> of the example above
        that animates the container’s size and stretch the middle part of the images. 
    <figure>
     <video autoplay loop src="media/grid-image-002.webm"></video>
     <figcaption> Example of stretching image rules when the container is resized. </figcaption>
    </figure>
   </aside>
   <aside class="example" id="example-746571da">
    <a class="self-link" href="#example-746571da"></a> This is a similar <a href="examples/grid-gradient-001.html">example</a> using gradients. 
    <figure>
      <img height="489" src="media/grid-gradient-001.png" width="608"> 
     <figcaption> Example of gradient rules. </figcaption>
    </figure>
   </aside>
   <aside class="example" id="example-4f51bab9">
    <a class="self-link" href="#example-4f51bab9"></a> Here’s an <a href="examples/flexbox-coupon-rule.html">example</a> demonstrating
        support for a use case mentioned in <a href="https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621983931">issue #2748</a>.
        It’s a coupon with a perforation rendered by a semi-transparent rule image between two flex items. 
    <figure>
      <img height="108" src="media/flexbox-coupon-rule.png" width="253"> 
     <figcaption> An example of a semi-transparent column rule image. </figcaption>
    </figure>
   </aside>
   <h2 class="heading settled" data-level="3" id="size"><span class="secno">3. </span><span class="content">Rule Positioning and Sizing</span><a class="self-link" href="#size"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="column-rule-width"><span class="secno">3.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width②">column-rule-width</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-width" id="ref-for-propdef-row-rule-width">row-rule-width</a> Properties</span><a class="self-link" href="#column-rule-width"></a></h3>
   <table class="def propdef partial" data-link-for-hint="column-rule-width">
    <tbody>
     <tr>
      <th>Name:
      <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width③">column-rule-width</a>
     <tr class="value">
      <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> auto 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
      <td>medium 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑤">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑤">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑤">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑤">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑤">table-row-group</a> containers 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
      <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis">lateral axis</a> 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
      <td>absolute length if the specified value is <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width" title="Expands to: medium | thick | thin"><line-width></a>; <span class="css">0px</span> if the column rule style is <span class="css">none</span> or <span class="css">hidden</span>. Otherwise, the specified value. 
     <tr>
      <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <table class="def propdef" data-link-for-hint="row-rule-width">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-width">row-rule-width</dfn>
     <tr class="value">
      <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width①" title="Expands to: medium | thick | thin"><line-width></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value④"><percentage></a> <span id="ref-for-comb-one⑦">|</span> auto 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
      <td>medium 
     <tr>
      <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑥">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑥">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑥">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑥">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑥">table-row-group</a> containers 
     <tr>
--> --------------------

--> maximum size reached

--> --------------------

100%


¤ Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.0.38Bemerkung:  (vorverarbeitet)  ¤

*Bot Zugriff




Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung ist noch experimentell.