@@ -10,301 +10,9 @@ Repository: WICG/declarative-route-matching
1010ED : https://wicg.github.io/declarative-partial-updates/css-route-matching/
1111Editor : L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
1212Editor : Noam Rosenthal, Google https://www.google.com/, w3cid 121539
13- Abstract : This module contains conditional CSS rules for styling based on routes
14- declared in HTML. This allows styles to be conditioned on the current URL
15- or conditioned on the status of navigating between particular URLs.
13+ No Abstract : true
14+ Boilerplate : references no, status no, conformance no
1615</pre>
17- <!-- for now using Org: w3c rather than Group: csswg because the latter forces an incorrect issue tracking link, overriding Repository -->
1816
19- <pre class="link-defaults">
20- spec:css-values-5; type:function; text:if()
21- </pre>
22-
23- <!-- FIXME: TEMPORARILY override non-exported definition -->
24- <pre class=anchors>
25- url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-navigationtransition-from
26- type: dfn; spec: html; text: from entry;
27- url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-navigation-api
28- type: dfn; spec: html; text: navigation API;
29- url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#ongoing-navigate-event
30- type: dfn; spec: html; text: ongoing navigate event;
31- url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-navigation-transition
32- type: dfn; spec: html; text: transition;
33- url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-activation
34- type: dfn; spec: html; text: activation;
35- url: https://html.spec.whatwg.org/multipage/browsing-the-web.html#has-been-revealed
36- type: dfn; spec: html; text: has been revealed;
37- </pre>
38-
39- <h2 id="condional-route-queries">Conditional rules for route queries</h2>
40-
41- <h3 id="at-route">Route queries: the ''@route'' rule</h3>
42-
43- The <dfn at-rule id="at-ruledef-route">@route</dfn> rule
44- is a conditional group rule
45- whose condition tests
46- characteristics of the current URL
47- or of the state of navigation between two URLs.
48- These queries are called <dfn export>route queries</dfn> .
49-
50- Authors can use it to:
51- * write style sheets that apply to multiple pages
52- but behave somewhat differently between those pages,
53- * write style sheets that apply to
54- single page applications
55- that change their URL over time,
56- so that style changes when the URL changes, and
57- * write style sheets that declaratively start view transitions
58- (or make other appropriate style changes)
59- in response to navigations.
60-
61- The syntax of the condition in the ''@route'' rule
62- is similar to that defined for
63- <<supports-condition>> in [[CSS-CONDITIONAL-3]] .
64- Negation, conjunction, and disjunction are all needed
65- so that authors can specify the interaction of multiple styles
66- in ways that are most intuitive and require the simplest code.
67-
68- The syntax of the ''@route'' rule is:
69-
70- <pre class="prod def" nohighlight>
71- @route <<route-condition>> {
72- <<rule-list>>
73- }
74- </pre>
75-
76- with <<route-condition>> defined as:
77-
78- <pre class="prod def" dfn-type="type" nohighlight>
79- <dfn><<route-condition>></dfn> = not <<route-in-parens>>
80- | <<route-in-parens>> [ and <<route-in-parens>> ]*
81- | <<route-in-parens>> [ or <<route-in-parens>> ]*
82- <dfn><<route-in-parens>></dfn> = ( <<route-condition>> ) | ( <<route-test>> ) | <<general-enclosed>>
83- <dfn><<route-test>></dfn> = <<route-location>> | <<route-keyword>> : <<route-location>>
84- <dfn><<route-keyword>></dfn> = at | from | to
85- <dfn><<route-location>></dfn> = <<urlpattern()>>
86- </pre>
87-
88- The above grammar is purposely very loose for forwards-compatibility reasons,
89- since the <<general-enclosed>> production
90- allows for substantial future extensibility.
91- Any ''@route'' rule that does not parse according to the grammar above
92- (that is, a rule that does not match this loose grammar
93- which includes the <<general-enclosed>> production)
94- is invalid.
95- Style sheets <strong> must not</strong> use such a rule and
96- processors <strong> must</strong> ignore such a rule (including all of its contents).
97-
98- Many of these grammar terms are associated with a boolean result,
99- as follows:
100-
101- : <<route-condition>>
102- :: : not <<route-in-parens>>
103- :: The result is the negation of the <<route-in-parens>> term.
104-
105- : <<route-in-parens>> [ and <<route-in-parens>> ] *
106- ::
107- The result is true if all of the <<route-in-parens>> child terms are true,
108- and false otherwise.
109-
110- : <<route-in-parens>> [ or <<route-in-parens>> ] *
111- ::
112- The result is false if all of the <<route-in-parens>> child terms are false,
113- and true otherwise.
114-
115- : <<route-in-parens>>
116- :: The result is the result of the child subexpression.
117-
118- : <<route-test>>
119- :: : <<route-location>>
120- : at: <<route-location>>
121- :: The result is true if
122- the document's [=Document/URL=] [=URL pattern/match|matches=]
123- the [=route location URL pattern=] of <<route-location>> .
124-
125- : from: <<route-location>>
126- :: The result is true if
127- the [=document's navigation API=] of the document
128- is non-null, and either:
129-
130- * its [=transition=] is non-null,
131- its [=from entry=] 's {{NavigationHistoryEntry/url}}
132- is non-null and
133- [=URL pattern/match|matches=]
134- the [=route location URL pattern=] of <<route-location>> .
135-
136- * its [=activation=] is non-null,
137- the document's [=has been revealed=] is false or
138- was false at the start of the current [=task=] ,
139- and the activation's {{NavigationActivation/from}} 's
140- {{NavigationHistoryEntry/url}} 's
141- is non-null and
142- [=URL pattern/match|matches=]
143- the [=route location URL pattern=] of <<route-location>> .
144-
145- : to: <<route-location>>
146- :: The result is true if
147- the [=document's navigation API=] of the document
148- is non-null, and either:
149-
150- * its [=ongoing navigate event=] is non-null,
151- and its {{NavigateEvent/destination}} 's
152- {{NavigationDestination/url}}
153- [=URL pattern/match|matches=]
154- the [=route location URL pattern=] of <<route-location>> .
155-
156- ISSUE: This assumes that the [=ongoing navigate event=]
157- and the [=transition=] have the same lifetime,
158- but this isn't really
159- true if the event is intercepted.
160- After
161- <a href="https://github.com/whatwg/html/issues/11690">whatwg/html#11690</a> /
162- <a href="https://github.com/whatwg/html/pull/11692">whatwg/html#11692</a> .
163- we could probably define this more like "from" above.
164- But which lifetime is the one we want?
165-
166- * its [=activation=] is non-null,
167- the document's [=has been revealed=] is false or
168- was false at the start of the current [=task=] ,
169- and the activation's {{NavigationActivation/entry}} 's
170- {{NavigationHistoryEntry/url}} 's
171- is non-null and
172- [=URL pattern/match|matches=]
173- the [=route location URL pattern=] of <<route-location>> .
174-
175- TODO: Update this definition to handle redirects better.
176- In particular, we'd like the ''to:'' URL to change
177- at only a single time,
178- from the original URL of the navigation to the final one.
179- There is already a well-defined definition and processing model
180- that we can depend on.
181-
182- ISSUE: The above definitions of from and to apparently don't work right
183- if you start a same-document navigation (e.g., with {{History/pushState}} )
184- in the middle of a cross-document navigation.
185-
186- ISSUE: Improve integration with [=has been revealed=] rather than monkeypatching it.
187-
188- : <<general-enclosed>>
189- ::
190- The result is false.
191-
192- Authors must not use <<general-enclosed>> in their stylesheets.
193- <span class='note'> It exists only for future-compatibility,
194- so that new syntax additions do not invalidate too much of a <<route-condition>> in older user agents.</span>
195-
196- The <dfn>route location URL pattern</dfn> of a <<route-location>>
197- depends on the type of <<route-location>> :
198-
199- : <<urlpattern()>>
200- :: The [=URL pattern=] represented by the function; see
201- [=create a URL pattern for urlpattern()=] .
202-
203- ISSUE: There is currently only one type of <<route-location>>
204- but we should consider adding another,
205- which would be just a name that references
206- a name defined in a routemap.
207- See the
208- <a href="https://github.com/WICG/declarative-partial-updates/blob/main/route-matching-explainer.md">route matching explainer</a>
209- for details.
210-
211- A <dfn>document's navigation API</dfn> is
212- the result of the following steps on <var> document</var> :
213-
214- 1. Let <var> window</var> be the {{Window}} whose [=associated Document=] is <var> document</var> , or null if there is no such {{Window}} .
215-
216- 1. If <var> window</var> is null, return null.
217-
218- 1. Return <var> window</var> 's [=navigation API=] .
219-
220- The condition of the ''@route'' rule
221- is the result of the <<route-condition>> in its prelude.
222-
223- <h3 id="route-when-function">The ''@when/route()'' function for ''@when''</h3>
224-
225- This specification defines an additional function for the ''@when'' rule:
226-
227- <pre class="prod">
228- <dfn for="@when" function>route()</dfn> = route( <<route-condition>> )
229- </pre>
230-
231- The ''@when/route()'' function is associated with the boolean result that
232- its contained condition is associated with.
233-
234- <h3 id="route-if-function">The ''if()/route()'' function for ''if()''</h3>
235-
236- This specification defines an additional function for the ''if()'' function's
237- <<if-test>> production:
238-
239- <pre class="prod">
240- <dfn for="if()" function>route()</dfn> = route( <<route-condition>> )
241- </pre>
242-
243- ISSUE: This should probably have a more formal definition of the function,
244- but I can't find the formal definitions of the existing ''if()'' functions
245- to model it after.
246-
247- <h2 id="link-route-pseudo-classes">Pseudo-classes for route-related links</h2>
248-
249- TODO: To be written.
250-
251- <h2 id="urlpattern-function">The ''urlpattern()'' function</h2>
252-
253- <!--
254-
255- NOTE: We may eventually want to move this to css-values.
256-
257- If we do, the definition of "style resource base URL" probably doesn't need to be
258- exported any more, since it was exported for this definition.
259-
260- -->
261-
262- The <dfn export function>urlpattern()</dfn> function represents a [=URL pattern=] ,
263- which can be used to match URLs.
264-
265- <pre class="prod def">
266- <<urlpattern()>> = urlpattern( <<string>> )
267- </pre>
268-
269- This function represents a [=URL pattern=] that can be created
270- using the steps of the <dfn>create a URL pattern for urlpattern()</dfn> algorithm:
271-
272- 1. Let <var> arg</var> be the <<string>> argument to the ''urlpattern()'' function.
273-
274- 1. Let <var> baseURL</var> be the [=style resource base URL=] of
275- the rule or declaration block containing the ''urlpattern()'' function.
276-
277- <div class="issue">
278- Do we want this to be the base URL all the time?
279- For use of ''urlpattern()'' in ''@route'' ,
280- it's likely more useful for the base URL
281- to be the document URL rather than the style sheet URL.
282- However, it would be very awkward for ''urlpattern()''
283- to be inconsistent with ''url()'' .
284-
285- Should we allow the base URL of ''urlpattern()''
286- to be defined by the consumer?
287- Should we introduce <code> document-urlpattern()</code> ?
288- Should we do something similar to
289- [[css-images-3#ambiguous-urls]]
290- (see <w3c/csswg-drafts#383> )?
291-
292- Also see other proposed uses of {{URLPattern}} in CSS
293- in <w3c/csswg-drafts#10975> ,
294- for '':local-link'' .
295- </div>
296-
297- 1. Return the result of [=URL pattern/create|create a URL pattern=] given
298- <var> arg</var> , <var> baseURL</var> , and an empty [=map=] .
299-
300- NOTE: This function requires that its argument is quoted.
301- This differs from the ''url()'' function,
302- which allows its argument to be quoted or unquoted.
303-
304- To <dfn export>serialize a ''urlpattern()'' function</dfn> <var> f</var> ,
305- [=serialize a function=] <var> f</var> ,
306- using [=serialize a string=] on the single argument
307- to serialize <var> f</var> 's contents.
308-
309- NOTE: This is defined this way because {{URLPattern}}
310- intentionally does not provide a serialization.
17+ This specification has moved to
18+ <a href="https://drafts.csswg.org/css-navigation-1/">https://drafts.csswg.org/css-navigation-1/</a> .
0 commit comments