drafts: diff css-pseudo-4/Overview.bs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="icon" href="/drafts/static/hgicon.png" type="image/png" /> <meta name="robots" content="index, nofollow"/> <link rel="stylesheet" href="/drafts/static/style-monoblue.css" type="text/css" /> <script type="text/javascript" src="/drafts/static/mercurial.js"></script> <title>drafts: diff css-pseudo-4/Overview.bs</title> <link rel="alternate" type="application/atom+xml" href="/drafts/atom-log" title="Atom feed for drafts"/> <link rel="alternate" type="application/rss+xml" href="/drafts/rss-log" title="RSS feed for drafts"/> </head> <body> <div id="container"> <div class="page-header"> <h1 class="breadcrumb"><a href="/">Mercurial</a> > <a href="/drafts">drafts</a> / file diff</h1> <form action="/drafts/log"> <dl class="search"> <dt><label>Search: </label></dt> <dd><input type="text" name="rev" /></dd> </dl> </form> <ul class="page-nav"> <li><a href="/drafts/summary">summary</a></li> <li><a href="/drafts/shortlog">shortlog</a></li> <li><a href="/drafts/log">changelog</a></li> <li><a href="/drafts/graph/2844a22822c5">graph</a></li> <li><a href="/drafts/tags">tags</a></li> <li><a href="/drafts/bookmarks">bookmarks</a></li> <li><a href="/drafts/branches">branches</a></li> <li><a href="/drafts/file/2844a22822c5">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li><a href="/drafts/file/2844a22822c5/css-pseudo-4/Overview.bs">file</a></li> <li><a href="/drafts/log/2844a22822c5/css-pseudo-4/Overview.bs">revisions</a></li> <li><a href="/drafts/annotate/2844a22822c5/css-pseudo-4/Overview.bs">annotate</a></li> <li class="current">diff</li> <li><a href="/drafts/comparison/2844a22822c5/css-pseudo-4/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-diff/2844a22822c5/css-pseudo-4/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">diff: css-pseudo-4/Overview.bs</h2> <h3 class="changeset">css-pseudo-4/Overview.bs</h3> <dl class="overview"> <dt>changeset 28913</dt> <dd><a href="/drafts/rev/2844a22822c5">2844a22822c5</a></dd> <dt>parent 28465</dt> <dd><a href="/drafts/diff/fb918feb1510/css-pseudo-4/Overview.bs">fb918feb1510</a></dd> <dt>child 28922</dt> <dd><a href="/drafts/diff/5045f6e33b51/css-pseudo-4/Overview.bs">5045f6e33b51</a></dd> </dl> <div class="diff"> <pre><a class="linenr" href="#l1.1" id="l1.1"> 1.1</a> --- a/css-pseudo-4/Overview.bs Thu Oct 06 11:27:23 2022 -0400 <a class="linenr" href="#l1.2" id="l1.2"> 1.2</a> +++ b/css-pseudo-4/Overview.bs Fri Oct 07 02:13:33 2022 +0800 <a class="linenr" href="#l1.3" id="l1.3"> 1.3</a> @@ -696,7 +696,8 @@ <a class="linenr" href="#l1.4" id="l1.4"> 1.4</a> <a class="linenr" href="#l1.5" id="l1.5"> 1.5</a> Issue: Are there any other properties that should be included here? <a class="linenr" href="#l1.6" id="l1.6"> 1.6</a> <a class="linenr" href="#l1.7" id="l1.7"> 1.7</a> - The 'color' property specifies the color of both the text <a class="linenr" href="#l1.8" id="l1.8"> 1.8</a> + Note: The 'color' property sets the color of <a class="linenr" href="#l1.9" id="l1.9"> 1.9</a> + both the text <a class="linenr" href="#l1.10" id="l1.10"> 1.10</a> and all line decorations (underline, overline, line-through) <a class="linenr" href="#l1.11" id="l1.11"> 1.11</a> and emphasis marks ('text-emphasis') <a class="linenr" href="#l1.12" id="l1.12"> 1.12</a> applied to the text <a class="linenr" href="#l1.13" id="l1.13"> 1.13</a> @@ -724,16 +725,68 @@ <a class="linenr" href="#l1.14" id="l1.14"> 1.14</a> /* Represent default spelling/grammar error styling in an adjustable way */ <a class="linenr" href="#l1.15" id="l1.15"> 1.15</a> :root::spelling-error { text-decoration-line: spelling-error; } <a class="linenr" href="#l1.16" id="l1.16"> 1.16</a> :root::grammar-error { text-decoration-line: grammar-error; } <a class="linenr" href="#l1.17" id="l1.17"> 1.17</a> - /* Highlight targeted text */ <a class="linenr" href="#l1.18" id="l1.18"> 1.18</a> - :root::target-text { color: MarkText; background: Mark; } <a class="linenr" href="#l1.19" id="l1.19"> 1.19</a> </pre> <a class="linenr" href="#l1.20" id="l1.20"> 1.20</a> <a class="linenr" href="#l1.21" id="l1.21"> 1.21</a> + Some [=highlight pseudo-elements=] <a class="linenr" href="#l1.22" id="l1.22"> 1.22</a> + should have <dfn>paired default highlight colors</dfn>-- <a class="linenr" href="#l1.23" id="l1.23"> 1.23</a> + a default 'color' and 'background-color' <a class="linenr" href="#l1.24" id="l1.24"> 1.24</a> + provided by the UA <a class="linenr" href="#l1.25" id="l1.25"> 1.25</a> + that are either used or overridden together, <a class="linenr" href="#l1.26" id="l1.26"> 1.26</a> + see [[#paired-defaults]]. <a class="linenr" href="#l1.27" id="l1.27"> 1.27</a> + For ''::selection'' they should correspond to <a class="linenr" href="#l1.28" id="l1.28"> 1.28</a> + ''HighlightText'' and ''Highlight'', <a class="linenr" href="#l1.29" id="l1.29"> 1.29</a> + while for ''::target-text'' they should correspond to <a class="linenr" href="#l1.30" id="l1.30"> 1.30</a> + ''MarkText'' and ''Mark''. <a class="linenr" href="#l1.31" id="l1.31"> 1.31</a> + <a class="linenr" href="#l1.32" id="l1.32"> 1.32</a> UAs may apply additional effects to enhance the presentation <a class="linenr" href="#l1.33" id="l1.33"> 1.33</a> of highlighted content, <a class="linenr" href="#l1.34" id="l1.34"> 1.34</a> for example dimming content other than the highlighted text <a class="linenr" href="#l1.35" id="l1.35"> 1.35</a> or transitioning out a highlight style based on user interactions or timing. <a class="linenr" href="#l1.36" id="l1.36"> 1.36</a> These are not controlled by CSS. <a class="linenr" href="#l1.37" id="l1.37"> 1.37</a> <a class="linenr" href="#l1.38" id="l1.38"> 1.38</a> + ISSUE: UA tweaks to the presentation of highlights <a class="linenr" href="#l1.39" id="l1.39"> 1.39</a> + in ways that are controlled by CSS <a class="linenr" href="#l1.40" id="l1.40"> 1.40</a> + are currently under discussion <a class="linenr" href="#l1.41" id="l1.41"> 1.41</a> + in <a href='https://github.com/w3c/csswg-drafts/issues/6853'>Issue 6853</a>. <a class="linenr" href="#l1.42" id="l1.42"> 1.42</a> + <a class="linenr" href="#l1.43" id="l1.43"> 1.43</a> +<h4 id="paired-defaults"> <a class="linenr" href="#l1.44" id="l1.44"> 1.44</a> +Paired Defaults</h4> <a class="linenr" href="#l1.45" id="l1.45"> 1.45</a> + <a class="linenr" href="#l1.46" id="l1.46"> 1.46</a> + For compatibility reasons, <a class="linenr" href="#l1.47" id="l1.47"> 1.47</a> + [=paired default highlight colors=] <a class="linenr" href="#l1.48" id="l1.48"> 1.48</a> + must only be [=used value|used=] <a class="linenr" href="#l1.49" id="l1.49"> 1.49</a> + when neither 'color' nor 'background-color' <a class="linenr" href="#l1.50" id="l1.50"> 1.50</a> + yield a [=cascaded value=] <a class="linenr" href="#l1.51" id="l1.51"> 1.51</a> + from the [=author origin=] <a class="linenr" href="#l1.52" id="l1.52"> 1.52</a> + (or inherit their value from the author origin). <a class="linenr" href="#l1.53" id="l1.53"> 1.53</a> + When a highlight color is ''revert'' or ''revert-layer'', <a class="linenr" href="#l1.54" id="l1.54"> 1.54</a> + the origin after rolling back the cascade <a class="linenr" href="#l1.55" id="l1.55"> 1.55</a> + determines the [=cascaded value=]鈥檚 [=cascade origin|origin=]. <a class="linenr" href="#l1.56" id="l1.56"> 1.56</a> + <a class="linenr" href="#l1.57" id="l1.57"> 1.57</a> + Note: Because this rule is for compatibility reasons, <a class="linenr" href="#l1.58" id="l1.58"> 1.58</a> + it does not apply to other similar properties <a class="linenr" href="#l1.59" id="l1.59"> 1.59</a> + like 'fill-color' or 'stroke-color'. <a class="linenr" href="#l1.60" id="l1.60"> 1.60</a> + <a class="linenr" href="#l1.61" id="l1.61"> 1.61</a> + <div class="example"> <a class="linenr" href="#l1.62" id="l1.62"> 1.62</a> + For example, <a class="linenr" href="#l1.63" id="l1.63"> 1.63</a> + given the following markup: <a class="linenr" href="#l1.64" id="l1.64"> 1.64</a> + <pre class="lang-markup"> <a class="linenr" href="#l1.65" id="l1.65"> 1.65</a> + &lt;p>Highlight this &lt;em>and this&lt;/em>.&lt;/p> <a class="linenr" href="#l1.66" id="l1.66"> 1.66</a> + </pre> <a class="linenr" href="#l1.67" id="l1.67"> 1.67</a> + Any of the following rules <a class="linenr" href="#l1.68" id="l1.68"> 1.68</a> + would suppress the default 'background-color' <a class="linenr" href="#l1.69" id="l1.69"> 1.69</a> + for ''::selection'' <a class="linenr" href="#l1.70" id="l1.70"> 1.70</a> + in the <code>&lt;em></code> element <a class="linenr" href="#l1.71" id="l1.71"> 1.71</a> + if given by the author: <a class="linenr" href="#l1.72" id="l1.72"> 1.72</a> + <pre class="lang-css"> <a class="linenr" href="#l1.73" id="l1.73"> 1.73</a> + em::selection { color: initial; } <a class="linenr" href="#l1.74" id="l1.74"> 1.74</a> + em::selection { color: inherit; } <a class="linenr" href="#l1.75" id="l1.75"> 1.75</a> + em::selection { color: unset; } <a class="linenr" href="#l1.76" id="l1.76"> 1.76</a> + em::selection { color: green; } <a class="linenr" href="#l1.77" id="l1.77"> 1.77</a> + p::selection { color: green; } <a class="linenr" href="#l1.78" id="l1.78"> 1.78</a> + </pre> <a class="linenr" href="#l1.79" id="l1.79"> 1.79</a> + </div> <a class="linenr" href="#l1.80" id="l1.80"> 1.80</a> + <a class="linenr" href="#l1.81" id="l1.81"> 1.81</a> <h3 id=highlight-bounds> <a class="linenr" href="#l1.82" id="l1.82"> 1.82</a> Area of a Highlight</h3> <a class="linenr" href="#l1.83" id="l1.83"> 1.83</a> <a class="linenr" href="#l1.84" id="l1.84"> 1.84</a> @@ -788,13 +841,21 @@ <a class="linenr" href="#l1.85" id="l1.85"> 1.85</a> for which that element is the <a>originating element</a>. <a class="linenr" href="#l1.86" id="l1.86"> 1.86</a> When multiple styles conflict, <a class="linenr" href="#l1.87" id="l1.87"> 1.87</a> the winning style is determined by the cascade. <a class="linenr" href="#l1.88" id="l1.88"> 1.88</a> + <a class="linenr" href="#l1.89" id="l1.89"> 1.89</a> When any supported property is not given a value by the cascade, <a class="linenr" href="#l1.90" id="l1.90"> 1.90</a> - its value is determined by inheritance from <a class="linenr" href="#l1.91" id="l1.91"> 1.91</a> + or given a value of ''inherit'' or ''unset'', <a class="linenr" href="#l1.92" id="l1.92"> 1.92</a> + its [=specified value=] is determined by inheritance from <a class="linenr" href="#l1.93" id="l1.93"> 1.93</a> the corresponding <a>highlight pseudo-element</a> <a class="linenr" href="#l1.94" id="l1.94"> 1.94</a> of its <a>originating element</a>'s parent element. <a class="linenr" href="#l1.95" id="l1.95"> 1.95</a> This occurs regardless of whether that property is an <a>inherited property</a>, <a class="linenr" href="#l1.96" id="l1.96"> 1.96</a> including [=registered custom properties=] where the [=inherits descriptor=] is false. <a class="linenr" href="#l1.97" id="l1.97"> 1.97</a> <a class="linenr" href="#l1.98" id="l1.98"> 1.98</a> + Additionally, <a class="linenr" href="#l1.99" id="l1.99"> 1.99</a> + for [=highlight pseudo-elements=] originating from the root element, <a class="linenr" href="#l1.100" id="l1.100"> 1.100</a> + the [=inherited value=] of 'color' <a class="linenr" href="#l1.101" id="l1.101"> 1.101</a> + is ''currentColor'', <a class="linenr" href="#l1.102" id="l1.102"> 1.102</a> + not the [=initial value=]. <a class="linenr" href="#l1.103" id="l1.103"> 1.103</a> + <a class="linenr" href="#l1.104" id="l1.104"> 1.104</a> <wpt> <a class="linenr" href="#l1.105" id="l1.105"> 1.105</a> css/css-pseudo/active-selection-051.html <a class="linenr" href="#l1.106" id="l1.106"> 1.106</a> css/css-pseudo/active-selection-052.html <a class="linenr" href="#l1.107" id="l1.107"> 1.107</a> @@ -857,17 +918,6 @@ <a class="linenr" href="#l1.108" id="l1.108"> 1.108</a> css/css-pseudo/cascade-highlight-002.html <a class="linenr" href="#l1.109" id="l1.109"> 1.109</a> </wpt> <a class="linenr" href="#l1.110" id="l1.110"> 1.110</a> <a class="linenr" href="#l1.111" id="l1.111"> 1.111</a> - <a class="linenr" href="#l1.112" id="l1.112"> 1.112</a> - The UA must use its own highlight colors for ''::selection'' only <a class="linenr" href="#l1.113" id="l1.113"> 1.113</a> - when neither 'color' nor 'background-color' has been specified by the author. <a class="linenr" href="#l1.114" id="l1.114"> 1.114</a> - <a class="linenr" href="#l1.115" id="l1.115"> 1.115</a> - Note: This paired-cascading behavior <a class="linenr" href="#l1.116" id="l1.116"> 1.116</a> - does not allow using the normal cascade <a class="linenr" href="#l1.117" id="l1.117"> 1.117</a> - (e.g. '':root::selection'' rules in the <a>UA style sheet</a>) <a class="linenr" href="#l1.118" id="l1.118"> 1.118</a> - to represent the OS default selection colors. <a class="linenr" href="#l1.119" id="l1.119"> 1.119</a> - However it has been interoperably implemented in browsers <a class="linenr" href="#l1.120" id="l1.120"> 1.120</a> - and is thus probably a Web-compatibility requirement. <a class="linenr" href="#l1.121" id="l1.121"> 1.121</a> - <a class="linenr" href="#l1.122" id="l1.122"> 1.122</a> <h3 id="highlight-painting"> <a class="linenr" href="#l1.123" id="l1.123"> 1.123</a> Painting the Highlight</h3> <a class="linenr" href="#l1.124" id="l1.124"> 1.124</a> </pre> </div> <script type="text/javascript">process_dates()</script> <div class="page-footer"> Mercurial Repository: drafts <ul class="rss-logo"> <li><a href="/drafts/rss-log">RSS</a></li> <li><a href="/drafts/atom-log">Atom</a></li> </ul> </div> <div id="powered-by"> <a href="http://mercurial.selenic.com/" title="Mercurial"><img src="/drafts/static/hglogo.png" width=75 height=90 border=0 alt="mercurial"></a> </div> <div id="corner-top-left"></div> <div id="corner-top-right"></div> <div id="corner-bottom-left"></div> <div id="corner-bottom-right"></div> </div> </body> </html>

CINXE.COM

drafts: diff css-pseudo-4/Overview.bs