csswg-drafts/css-regions/region-styling.txt at 7dd11832ceed93cbd5ad1472d16ee24e496012f0 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
Markup cut from the draft

    <h3 id="region-styling">CSS Region names and styling</h3>

    <p>Content can be styled depending on
      the <span>CSS Region</span> it flows into.
      It is an extension
      of pseudo-element styling such as
      <a href="http://www.w3.org/TR/css3-selectors/#first-line">
        <code class="css">::first-line</code>
      </a>
      which applies a particular style
      to a fragment of content.
      With <span>CSS Region</span> styling,
      additional selectors may apply
      depending on the <span>CSS Region</span>
      into which content flows.</p>

    <p>In our example,
      the designer wants to make
      text flowing into #region1
      dark blue and bold.</p>

    <p>This design can be expressed as shown below.</p>

    <div class="example">
        <pre>
&lt;style&gt;
  #region1::region p {
    color: #0C3D5F;
    font-weight: bold;
  }
&lt;/style&gt;</pre>
    </div>

    <p>The <code class="css">::region</code> pseudo-element
      is followed by a <code class="css">p</code> relative selector in this example.
      The color and font-weight declarations will apply
      to any fragments of paragraphs that are
      displayed in <code class="css">#region1</code>.
      The following figure shows how
      the rendering changes
      if we apply this styling specific to <code>#region1</code>.
      Note how less text fits into this box
      now that the 'font-weight' is
      bold instead of normal.</p>

    <div class="figure">
        <img src="images/region-styling.png" width="450" alt=
        "Illustrate how changing region styling affects the flow of content.">

        <p class="caption">Different rendering with a different region
        styling</p>
    </div>

    <h3 id="the-region-pseudo-element">The ::region pseudo-element</h3>

    <p>A ::region pseudo-element represents a relationship between
      a selector that matches a <span>CSS Region</span>,
      and a relative selector that matches some named flow content.
      This allows style declarations to be applied
      to fragments of named flow content flowing
      into particular regions.</p>

        <pre>
&lt;region selector&gt;::region &lt;content selector&gt;  {
    ... CSS styling declarations ...
}
    </pre>

    <p>When the ::region pseudo-element is appended to a
    <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
    that matches one or more <span title="CSS Region">CSS Regions</span>,
    this creates a 'flow fragment' selector.
    The flow fragment selector specifies
    which range of elements in the flow
    can be matched by the relative selector.
    The relative selector can match elements
    in the range(s) (see [[!DOM]]) of the named flow
    that are displayed fully or partially
    in the selected region(s).</p>

    <p>Elements that are fully or partially
      in the flow fragment range may match the relative selector.
      However, the style declarations only apply
      to the fragment of the element
      that is displayed in the corresponding region(s).</p>

    <p>Only a limited list of properties apply to a ::region pseudo-element:</p>

    <ol>
        <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/colors.html">color property</a></li>
        <li><a href="http://www.w3.org/TR/css3-color/#transparency">opacity property</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#backgrounds">background property</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing">'word-spacing'</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">'letter-spacing'</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">'text-decoration'</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">'text-transform'</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a></li>
        <li><a href="http://www.w3.org/TR/css3-text/#justification">alignment and justification properties</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#borders">border properties</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner properties</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#border-images">border images properties</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/box.html#margin-properties">margin properties</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/box.html#padding-properties">padding properties</a></li>
        <li><a href="http://www.w3.org/TR/css3-text/#text-shadow">'text-shadow' property</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow' property</a></li>
        <li><a href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">'box-decoration-break' property</a></li>
        <li><a href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">'width' property</a></li>
    </ol>

    <div class="example" id="region-style-example">
        <p>In the following example, the <span>named flow</span> 'article-flow' flows
        into 'region-1' and 'region-2'.</p>
        <pre>
&lt;style&gt;
  #div-1 {
    <strong>flow-into: article-flow;</strong>
  }

  #region-1, #region-2 {
    <strong>flow-from: article-flow;</strong>
  }

  /* region styling */
  <strong>#region-1::region p </strong> {
    margin-right: 5em;
  }
&lt;/style&gt;

&lt;body&gt;
  &lt;div id="div-1"&gt;
      &lt;p id="p-1"&gt;...&lt;/p&gt;
      &lt;p id="p-2"&gt;...&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="region-1"&gt;&lt;/div&gt;
  &lt;div id="region-2"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

        <div id="region_styling_illustration">
            <img id="region_styling_img_2" src="images/region-styling-2.png"
            alt=
            "Example showing how a named flow content fits into regions to illustrate region styling."
            name="region_styling_img_2">

            <ul class="swatch-list">
                <li><span class="swatch" style=
                "background:#1C75BC">&nbsp;</span>div div-1</li>

                <li><span class="swatch" style=
                "background:crimson">&nbsp;</span>paragraph p-1</li>

                <li><span class="swatch" style=
                "background:white">&nbsp;</span>paragraph p-2</li>

                <li><span class="swatch" style=
                "background:#E6E7E8">&nbsp;</span>range of flow that fits into
                region-1</li>

                <li><span class="swatch" style=
                "background:#BCBEC0">&nbsp;</span>range of flow that fits into
                region-2</li>
            </ul>
        </div>

        <p>The region styling applies
          to flow content that fits in 'region-1'.
          The relative selector matches 'p-1' and 'p-2'
          because these paragraphs
          flow into 'region-1'.
          Only the fragment of 'p-2'
          that flows into 'region-1'
          is styled with the pseudo-element.</p>
    </div>

    <p>All of the selectors
      in a ::region pseudo-element
      contribute to its <a href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>.
      So the specificity of the ::region pseudo-element
      in the example above would combine
      the id selector's specificity
      with the specificity of the type selector,
      resulting in a specificity of 101.</p>

    <p>Selectors that match a given element or element fragment (as described above),
    participate in the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS Cascading
    order</a> as defined in [[!CSS21]].</p>

    <div>
        Region styling does not apply to nested regions. For example, if a region
        'A' receives content from a flow that contains region 'B', the content that
        flows into 'B' does not receive the region styling specified for region 'A'.
    </div>

Removed from the Region interface

  <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> <a href="#dom-region-getComputedRegionStyle">getComputedRegionStyle</a>(Element elt);
  <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> <a href="#dom-region-getComputedRegionStyle">getComputedRegionStyle</a>(Element elt, DOMString pseudoElt);


        <p>The <dfn id="dom-region-getComputedRegionStyle">getComputedRegionStyle</dfn>
          methods on the Region interface work the same as the
          <a href="http://dev.w3.org/csswg/cssom/#extensions-to-the-window-interface"><code class="idl">getComputedStyle</code></a> [[!CSSOM]]
          methods on the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window"><code class="idl">Window</code></a>
          interface [[!HTML5]] with the following exceptions.
          For the <code class="idl">Region</code> interface
          the <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a>
          returned must include the result of
          <a href="#the-region-pseudo-element">region styling</a>.
          If the element is fragmented across region boundaries,
          the <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a>  returned must apply only
          to the fragment that flows through
          the <span>CSS Region</span>.
          The method returns null
          if the <span>region</span> object
          is not (or no longer) a region.</p>

        <div class="note"><span class="note-prefix">Note </span>
          <p>If the element is not contained
          in the <span>CSS Region</span> at all,
          the method returns
          the <a href="#the-region-pseudo-element">region styling</a>
          that would apply to the element
          if it were contained in the <span>CSS Region</span>
          (following how <a href="http://dev.w3.org/csswg/cssom/#extensions-to-the-window-interface"><code class="idl">getComputedStyle</code></a> works
          with elements not contained
          in the window's document).</p>
        </div>