[selectors-4] Add CanIUse panels #1193 (#14120)

Enables Include Can I Use Panels metadata and adds caniuse=<feature>
attributes on 14 headings and dfns to render browser-support panels
next to each pseudo-class and selector documented in caniuse.com's
database.

Anchors covered: attribute-case, descendant-combinators, matches,
negation, relational, the-dir-pseudo, the-any-link-pseudo,
the-focus-within-pseudo, placeholder, the-default-pseudo,
indeterminate-pseudo, range-pseudos, optional-pseudo,
the-nth-child-pseudo.

Not covered: #first-line from the original 2017 issue. The
::first-line pseudo-element is now defined in css-pseudo-4, so its
CanIUse panel belongs there.

Author: castastrophe

selectors-4/Overview.bs

@@ -26,6 +26,7 @@ Abstract: Selectors Level 4 describes the selectors that already exist in [[!SEL
 At Risk: [=user action pseudo-classes=] applying to non-[=tree-abiding pseudo-elements=]
 Ignored Terms: function token, Document, DocumentFragment, math, h1, shadow tree, querySelector(), quirks mode, button, a, span, object, p, div, q, area, link, label, input, html, em, li, ol, pre, CSS Value Definition Syntax
 Ignored Vars: identifier, i
+Include Can I Use Panels: yes
 Ignore MDN Failure: #blank-pseudo
 Ignore MDN Failure: #the-column-combinator
 Ignore MDN Failure: #the-future-pseudo
@@ -1453,7 +1454,7 @@ Selector Lists</h3>
 	</div>
 
 
-<h3 id="matches">
+<h3 id="matches" caniuse="css-matches-pseudo">
 The Matches-Any Pseudo-class: '':is()''</h3>
 
 	<wpt>
@@ -1531,7 +1532,7 @@ The Matches-Any Pseudo-class: '':is()''</h3>
 	if needed for backwards-compatibility.
 
 
-<h3 id="negation">
+<h3 id="negation" caniuse="css-not-sel-list">
 The Negation (Matches-None) Pseudo-class: '':not()''</h3>
 
 	<wpt>
@@ -1643,7 +1644,7 @@ The Specificity-adjustment Pseudo-class: '':where()''</h3>
 	to explicitly set the specificity of that instance of the pseudo-class.
 
 
-<h3 id='relational'>
+<h3 id='relational' caniuse="css-has">
 The Relational Pseudo-class: '':has()''</h3>
 
 	<wpt>
@@ -2140,7 +2141,7 @@ Substring matching attribute selectors</h3>
 	</div>
 
 
-<h3 id="attribute-case">
+<h3 id="attribute-case" caniuse="css-case-insensitive">
 Case-sensitivity</h3>
 
 	<wpt>
@@ -2460,7 +2461,7 @@ ID selectors</h3>
 <h2 id="linguistic-pseudos">
 Linguistic Pseudo-classes</h2>
 
-<h3 id="the-dir-pseudo">
+<h3 id="the-dir-pseudo" caniuse="css-dir-pseudo">
 The Directionality Pseudo-class: '':dir()''</h3>
 
 	<wpt>
@@ -2738,7 +2739,7 @@ The Language Pseudo-class: '':lang()''</h3>
 <h2 id="location">
 Location Pseudo-classes</h2>
 
-<h3 id="the-any-link-pseudo">
+<h3 id="the-any-link-pseudo" caniuse="css-any-link">
 The Hyperlink Pseudo-class: '':any-link''</h3>
 
 	<wpt>
@@ -3182,7 +3183,7 @@ The Focus-Indicated Pseudo-class: '':focus-visible''</h3>
 	the default '':focus'' style.
 
 
-<h3 id="the-focus-within-pseudo">
+<h3 id="the-focus-within-pseudo" caniuse="css-focus-within">
 The Focus Container Pseudo-class: '':focus-within''</h3>
 
 	<wpt>
@@ -3461,7 +3462,7 @@ The Mutability Pseudo-classes: '':read-only'' and '':read-write''</h4>
 	For example, in [[HTML5]] a <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-read-only">non-disabled non-readonly <code>&lt;input></code> element</a> is '':read-write'',
 	as is any element with the <code>contenteditable</code> attribute set to the true state.
 
-<h4 id="placeholder">
+<h4 id="placeholder" caniuse="css-placeholder-shown">
 The Placeholder-shown Pseudo-class: '':placeholder-shown''</h4>
 
 	<wpt>
@@ -3496,7 +3497,7 @@ The Automatic Input Pseudo-class: '':autofill''</h4>
 	that have been automatically filled by the user agent,
 	and have not been subsequently altered by the user.
 
-<h4 id="the-default-pseudo">
+<h4 id="the-default-pseudo" caniuse="css-default-pseudo">
 The Default-option Pseudo-class: '':default''</h4>
 
 	The <dfn id='default-pseudo'>:default</dfn> pseudo-class applies to the one or more UI elements
@@ -3530,7 +3531,7 @@ The Selected-option Pseudo-classes: '':checked'', '':unchecked'', and '':indeter
 
 	If an element that <em>could</em> match '':checked'' or '':unchecked''
 	is neither "on" nor "off",
-	the <dfn id='indeterminate-pseudo'>:indeterminate</dfn> pseudo-class applies.
+	the <dfn id='indeterminate-pseudo' caniuse="css-indeterminate-pseudo">:indeterminate</dfn> pseudo-class applies.
 	'':indeterminate'' also matches elements which do not have a notion of being "checked",
 	but whose "value" is still in an indeterminate state,
 	such as a progress meter whose progress percentage is unknown.
@@ -3600,7 +3601,7 @@ The Validity Pseudo-classes: '':valid'' and '':invalid''</h4>
 	invalidation/media-loading-pseudo-classes-in-has.sub.html
 </wpt>
 
-<h4 id="range-pseudos">
+<h4 id="range-pseudos" caniuse="css-in-out-of-range">
 The Range Pseudo-classes: '':in-range'' and '':out-of-range''</h4>
 
 	The <dfn id="in-range-pseudo">:in-range</dfn> and
@@ -3626,7 +3627,7 @@ The Optionality Pseudo-classes: '':required'' and '':optional''</h4>
 	</wpt>
 
 	A form element is <dfn id="required-pseudo">:required</dfn> or
-	<dfn id="optional-pseudo">:optional</dfn>
+	<dfn id="optional-pseudo" caniuse="css-optional-pseudo">:optional</dfn>
 	if a value for it is, respectively, required or optional before the
 	form it belongs to can be validly submitted. Elements that are not
 	form elements are neither required nor optional.
@@ -3869,7 +3870,7 @@ Child-indexed Pseudo-classes</h3>
 	or with non-element parents,
 	they have been rephrased to refer to an element's relative index amongst its siblings.
 
-<h4 id="the-nth-child-pseudo">
+<h4 id="the-nth-child-pseudo" caniuse="css-nth-child-of">
 '':nth-child()'' pseudo-class</h4>
 
 	<wpt>
@@ -4229,7 +4230,7 @@ Typed Child-indexed Pseudo-classes</h3>
 <h2 id="combinators">
 Combinators</h2>
 
-<h3 id="descendant-combinators">
+<h3 id="descendant-combinators" caniuse="css-descendant-gtgt">
 Descendant combinator (<code> </code>)</h3>
 
 	<wpt>