Skip to content

Commit 9a28ab4

Browse files
tabatkinstabatkins
committed
[css-regions][shadow-styling] INitial commit at integrating Region Styling into Scoped Styles Spec.
--HG-- rename : css-regions/images/region-styling-2.png => shadow-styling/images/region-styling-2.png rename : css-regions/images/region-styling.png => shadow-styling/images/region-styling.png
1 parent 17b7700 commit 9a28ab4

4 files changed

Lines changed: 434 additions & 2 deletions

File tree

‎shadow-styling/Overview.bs‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -538,3 +538,213 @@ Inheritance</h4>
538538

539539
The elements in a <a>distribution list</a> inherit from the parent of the <a element>content</a> element they are ultimately distributed to,
540540
rather than from their normal parent.
541+
542+
543+
<h2 id="fragment-scoping">
544+
Fragmented Styling</h2>
545+
546+
Fragmented content can be styled differently
547+
based on which line, column, page, region, etc.
548+
it appears in.
549+
This is done by using an appropriate <dfn export>fragment pseudo-element</dfn>,
550+
which allows targetting individual fragments of an element
551+
rather than the entire element.
552+
553+
<div class="example">
554+
In our example,
555+
the designer wants to make
556+
text flowing into #region1
557+
dark blue and bold.
558+
This design can be expressed as shown below.
559+
560+
<pre>
561+
#region1::region p {
562+
color: #0C3D5F;
563+
font-weight: bold;
564+
}
565+
</pre>
566+
567+
The ''::region'' pseudo-element
568+
is followed by a ''p'' relative selector in this example.
569+
The color and font-weight declarations will apply
570+
to any fragments of paragraphs that are
571+
displayed in ''#region1''.
572+
The following figure shows how
573+
the rendering changes
574+
if we apply this styling specific to ''#region1''.
575+
Note how less text fits into this box
576+
now that the 'font-weight' is
577+
bold instead of normal.</p>
578+
579+
<figure>
580+
<img src="images/region-styling.png" width="450" alt= "Illustrate how changing region styling affects the flow of content.">
581+
582+
<figcaption>Different rendering with a different region styling</figcaption>
583+
</figure>
584+
</div>
585+
586+
Note: This feature is an extension of ''::first-line'' styling.
587+
588+
<h3 id="the-region-pseudo-element">
589+
Region-based Styling: the ''::region'' pseudo-element</h3>
590+
591+
<div class="issue">
592+
Extend this to specify:
593+
<ul>
594+
<li>''&lt;region-element-selector>::region''
595+
<li>''&lt;paginated-element-selector>::page(&lt;page-selector>)''
596+
<li>''&lt;multicol-element>::column(&lt;AnB>)''
597+
<li>''&lt;fragmented-element-selector>::nth-fragment(&lt;AnB>)''
598+
<li>''::first-line''
599+
</ul>
600+
</div>
601+
602+
<p>A ::region pseudo-element represents a relationship between
603+
a selector that matches a <span>CSS Region</span>,
604+
and a relative selector that matches some named flow content.
605+
This allows style declarations to be applied
606+
to fragments of named flow content flowing
607+
into particular regions.</p>
608+
609+
<pre>
610+
&lt;region selector&gt;::region &lt;content selector&gt; {
611+
... CSS styling declarations ...
612+
}
613+
</pre>
614+
615+
<p>When the ::region pseudo-element is appended to a
616+
<a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
617+
that matches one or more <span title="CSS Region">CSS Regions</span>,
618+
this creates a 'flow fragment' selector.
619+
The flow fragment selector specifies
620+
which range of elements in the flow
621+
can be matched by the relative selector.
622+
The relative selector can match elements
623+
in the range(s) (see [[!DOM]]) of the named flow
624+
that are displayed fully or partially
625+
in the selected region(s).</p>
626+
627+
<p>Elements that are fully or partially
628+
in the flow fragment range may match the relative selector.
629+
However, the style declarations only apply
630+
to the fragment of the element
631+
that is displayed in the corresponding region(s).</p>
632+
633+
<p>Only a limited list of properties apply to a ::region pseudo-element:</p>
634+
635+
<p class='issue'>
636+
Either this list should be all functionally inheritable properties,
637+
or all properties.
638+
Why is it a seemingly-arbitrary subset of all properties, including box properties?
639+
640+
<ol>
641+
<li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li>
642+
<li><a href="http://www.w3.org/TR/CSS2/colors.html">color property</a></li>
643+
<li><a href="http://www.w3.org/TR/css3-color/#transparency">opacity property</a></li>
644+
<li><a href="http://www.w3.org/TR/css3-background/#backgrounds">background property</a></li>
645+
<li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing">'word-spacing'</a></li>
646+
<li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">'letter-spacing'</a></li>
647+
<li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">'text-decoration'</a></li>
648+
<li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">'text-transform'</a></li>
649+
<li><a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a></li>
650+
<li><a href="http://www.w3.org/TR/css3-text/#justification">alignment and justification properties</a></li>
651+
<li><a href="http://www.w3.org/TR/css3-background/#borders">border properties</a></li>
652+
<li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner properties</a></li>
653+
<li><a href="http://www.w3.org/TR/css3-background/#border-images">border images properties</a></li>
654+
<li><a href="http://www.w3.org/TR/CSS2/box.html#margin-properties">margin properties</a></li>
655+
<li><a href="http://www.w3.org/TR/CSS2/box.html#padding-properties">padding properties</a></li>
656+
<li><a href="http://www.w3.org/TR/css3-text/#text-shadow">'text-shadow' property</a></li>
657+
<li><a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow' property</a></li>
658+
<li><a href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">'box-decoration-break' property</a></li>
659+
<li><a href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">'width' property</a></li>
660+
</ol>
661+
662+
<div class="example" id="region-style-example">
663+
<p>In the following example, the <span>named flow</span> “article-flow” flows
664+
into “region-1” and “region-2”.</p>
665+
<pre>
666+
&lt;style&gt;
667+
#div-1 {
668+
<strong>flow-into: article-flow;</strong>
669+
}
670+
671+
#region-1, #region-2 {
672+
<strong>flow-from: article-flow;</strong>
673+
}
674+
675+
/* region styling */
676+
<strong>#region-1::region p </strong> {
677+
margin-right: 5em;
678+
}
679+
&lt;/style&gt;
680+
681+
&lt;body&gt;
682+
&lt;div id="div-1"&gt;
683+
&lt;p id="p-1"&gt;...&lt;/p&gt;
684+
&lt;p id="p-2"&gt;...&lt;/p&gt;
685+
&lt;/div&gt;
686+
&lt;div id="region-1"&gt;&lt;/div&gt;
687+
&lt;div id="region-2"&gt;&lt;/div&gt;
688+
&lt;/body&gt;
689+
</pre>
690+
691+
<div id="region_styling_illustration">
692+
<img id="region_styling_img_2" src="images/region-styling-2.png"
693+
alt=
694+
"Example showing how a named flow content fits into regions to illustrate region styling."
695+
name="region_styling_img_2">
696+
697+
<ul class="swatch-list">
698+
<li><span class="swatch" style=
699+
"background:#1C75BC">&nbsp;</span>div div-1</li>
700+
701+
<li><span class="swatch" style=
702+
"background:crimson">&nbsp;</span>paragraph p-1</li>
703+
704+
<li><span class="swatch" style=
705+
"background:white">&nbsp;</span>paragraph p-2</li>
706+
707+
<li><span class="swatch" style=
708+
"background:#E6E7E8">&nbsp;</span>range of flow that fits into
709+
region-1</li>
710+
711+
<li><span class="swatch" style=
712+
"background:#BCBEC0">&nbsp;</span>range of flow that fits into
713+
region-2</li>
714+
</ul>
715+
</div>
716+
717+
<p>The region styling applies
718+
to flow content that fits in ''region-1''.
719+
The relative selector matches ''p-1'' and ''p-2''
720+
because these paragraphs
721+
flow into ''region-1''.
722+
Only the fragment of ''p-2''
723+
that flows into ''region-1''
724+
is styled with the pseudo-element.</p>
725+
</div>
726+
727+
<p>All of the selectors
728+
in a ::region pseudo-element
729+
contribute to its <a href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>.
730+
So the specificity of the ::region pseudo-element
731+
in the example above would combine
732+
the id selector's specificity
733+
with the specificity of the type selector,
734+
resulting in a specificity of 101.</p>
735+
736+
<p>Selectors that match a given element or element fragment (as described above),
737+
participate in the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS Cascading
738+
order</a> as defined in [[!CSS21]].</p>
739+
740+
<div>
741+
Region styling does not apply to nested regions. For example, if a region
742+
''A'' receives content from a flow that contains region ''B'', the content that
743+
flows into ''B'' does not receive the region styling specified for region ''A''.
744+
</div>
745+
746+
<p class='issue'>
747+
We'll need some way to query the styles of a fragment in a particular region.
748+
<code>getComputedStyle()</code> isn't enough,
749+
because an element can exist in multiple regions, for example,
750+
with each fragment receiving different styles.

0 commit comments

Comments
 (0)