Skip to content

Commit 4acdbd8

Browse files
authored
[css-pseudo] clarify paired cascade (#6386 + #6779 + #6774 + #7837) (#6665)
1 parent d82b2c9 commit 4acdbd8

File tree

2 files changed

+71
-18
lines changed

2 files changed

+71
-18
lines changed

css-highlight-api-1/Overview.bs

+6-3
Original file line numberDiff line numberDiff line change
@@ -319,9 +319,12 @@ Applicable Properties</h4>
319319
<h4 id=default-styles>
320320
Default Styles</h4>
321321

322-
UAs must not define any styles for [=custom highlight pseudo-elements=] in the default UA
323-
stylesheet. A [=custom highlight pseudo-element=] inherits the styles of its
324-
[=originating element=].
322+
UAs must not define any default UA stylesheet rules
323+
or <a spec=css-pseudo>default highlight colors</a>
324+
for any [=custom highlight pseudo-elements=].
325+
In other words,
326+
when some content is highlighted by an unstyled custom highlight,
327+
its presentation must not change.
325328

326329
<h4 id=c-and-h>
327330
Cascading and Inheritance</h4>

css-pseudo-4/Overview.bs

+65-15
Original file line numberDiff line numberDiff line change
@@ -696,7 +696,8 @@ Styling Highlights</h3>
696696

697697
Issue: Are there any other properties that should be included here?
698698

699-
The 'color' property specifies the color of both the text
699+
Note: The 'color' property sets the color of
700+
both the text
700701
and all line decorations (underline, overline, line-through)
701702
and emphasis marks ('text-emphasis')
702703
applied to the text
@@ -724,16 +725,68 @@ Default UA Styles</h3>
724725
/* Represent default spelling/grammar error styling in an adjustable way */
725726
:root::spelling-error { text-decoration-line: spelling-error; }
726727
:root::grammar-error { text-decoration-line: grammar-error; }
727-
/* Highlight targeted text */
728-
:root::target-text { color: MarkText; background: Mark; }
729728
</pre>
730729

730+
Some [=highlight pseudo-elements=]
731+
should have <dfn>paired default highlight colors</dfn>--
732+
a default 'color' and 'background-color'
733+
provided by the UA
734+
that are either used or overridden together,
735+
see [[#paired-defaults]].
736+
For ''::selection'' they should correspond to
737+
''HighlightText'' and ''Highlight'',
738+
while for ''::target-text'' they should correspond to
739+
''MarkText'' and ''Mark''.
740+
731741
UAs may apply additional effects to enhance the presentation
732742
of highlighted content,
733743
for example dimming content other than the highlighted text
734744
or transitioning out a highlight style based on user interactions or timing.
735745
These are not controlled by CSS.
736746

747+
ISSUE: UA tweaks to the presentation of highlights
748+
in ways that <em>are</em> controlled by CSS
749+
are currently under discussion
750+
in <a href='https://github.com/w3c/csswg-drafts/issues/6853'>Issue 6853</a>.
751+
752+
<h4 id="paired-defaults">
753+
Paired Defaults</h4>
754+
755+
For compatibility reasons,
756+
[=paired default highlight colors=]
757+
must only be [=used value|used=]
758+
when neither 'color' nor 'background-color'
759+
yield a [=cascaded value=]
760+
from the [=author origin=]
761+
(or inherit their value from the author origin).
762+
When a highlight color is ''revert'' or ''revert-layer'',
763+
the origin <em>after</em> rolling back the cascade
764+
determines the [=cascaded value=]’s [=cascade origin|origin=].
765+
766+
Note: Because this rule is for compatibility reasons,
767+
it does not apply to other similar properties
768+
like 'fill-color' or 'stroke-color'.
769+
770+
<div class="example">
771+
For example,
772+
given the following markup:
773+
<pre class="lang-markup">
774+
&lt;p>Highlight this &lt;em>and this&lt;/em>.&lt;/p>
775+
</pre>
776+
Any of the following rules
777+
would suppress the default 'background-color'
778+
for ''::selection''
779+
in the <code>&lt;em></code> element
780+
if given by the author:
781+
<pre class="lang-css">
782+
em::selection { color: initial; }
783+
em::selection { color: inherit; }
784+
em::selection { color: unset; }
785+
em::selection { color: green; }
786+
p::selection { color: green; }
787+
</pre>
788+
</div>
789+
737790
<h3 id=highlight-bounds>
738791
Area of a Highlight</h3>
739792

@@ -788,13 +841,21 @@ Cascading and Per-Element Highlight Styles</h3>
788841
for which that element is the <a>originating element</a>.
789842
When multiple styles conflict,
790843
the winning style is determined by the cascade.
844+
791845
When any supported property is not given a value by the cascade,
792-
its value is determined by inheritance from
846+
or given a value of ''inherit'' or ''unset'',
847+
its [=specified value=] is determined by inheritance from
793848
the corresponding <a>highlight pseudo-element</a>
794849
of its <a>originating element</a>'s parent element.
795850
This occurs regardless of whether that property is an <a>inherited property</a>,
796851
including [=registered custom properties=] where the [=inherits descriptor=] is false.
797852

853+
Additionally,
854+
for [=highlight pseudo-elements=] originating from the root element,
855+
the [=inherited value=] of 'color'
856+
is ''currentColor'',
857+
not the [=initial value=].
858+
798859
<wpt>
799860
css/css-pseudo/active-selection-051.html
800861
css/css-pseudo/active-selection-052.html
@@ -857,17 +918,6 @@ Cascading and Per-Element Highlight Styles</h3>
857918
css/css-pseudo/cascade-highlight-002.html
858919
</wpt>
859920

860-
861-
The UA must use its own highlight colors for ''::selection'' only
862-
when neither 'color' nor 'background-color' has been specified by the author.
863-
864-
Note: This paired-cascading behavior
865-
does not allow using the normal cascade
866-
(e.g. '':root::selection'' rules in the <a>UA style sheet</a>)
867-
to represent the OS default selection colors.
868-
However it has been interoperably implemented in browsers
869-
and is thus probably a Web-compatibility requirement.
870-
871921
<h3 id="highlight-painting">
872922
Painting the Highlight</h3>
873923

0 commit comments

Comments
 (0)