@@ -10,7 +10,7 @@ ED: https://drafts.csswg.org/css-navigation-1/
1010Editor : L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
1111Editor : Noam Rosenthal, Google https://www.google.com/, w3cid 121539
1212Abstract : This module contains conditional CSS rules for styling conditioned on the current URL
13- or conditioned on the status of navigating between particular URLs.
13+ or conditioned on the status of navigating between particular URLs.
1414</pre>
1515
1616<pre class="link-defaults">
@@ -46,7 +46,7 @@ The syntax of the ''@route'' rule is:
4646
4747<pre class="prod def" nohighlight>
4848@route <<dashed-ident>> {
49- [ <<pattern-descriptors>> | <<init-descriptors>> ]
49+ [ <<pattern-descriptors>> | <<init-descriptors>> ]
5050}
5151</pre>
5252
@@ -57,7 +57,8 @@ based on the following definitions:
5757<dfn><<pattern-descriptor>></dfn> = pattern : <<url-pattern()>>
5858<dfn><<init-descriptors>></dfn> = ;* <<init-descriptor>> [ ;+ <<init-descriptor>> ]* ;*
5959<dfn><<init-descriptor>></dfn> = <<init-descriptor-name>> : <<string>>
60- <dfn><<init-descriptor-name>></dfn> = protocol | hostname | port | pathname | search | hash | base-url
60+ <dfn><<init-descriptor-name>></dfn> = protocol | hostname | port | pathname |
61+ search | hash | base-url
6162</pre>
6263
6364This associates an author-defined keyword with a URL pattern,
@@ -107,13 +108,13 @@ but it could also be added back later if we need it.
107108Either this rule:
108109<pre highlight=css>
109110@route --movie-list {
110- pattern: url-pattern("/movie-list");
111+ pattern: url-pattern("/movie-list");
111112}
112113</pre>
113114or this rule:
114115<pre highlight=css>
115116@route --movie-list {
116- pathname: "/movie-list";
117+ pathname: "/movie-list";
117118}
118119</pre>
119120define an ''@route'' rule that associates
@@ -162,8 +163,8 @@ to define styles that only affect a particular page:
162163
163164<pre highlight="css">
164165@navigation (at: url-pattern("/")) {
165- /* These styles only apply to the site's homepage
166- (including any URL with a search or hash). */
166+ /* These styles only apply to the site's homepage
167+ (including any URL with a search or hash). */
167168}
168169</pre>
169170
@@ -178,20 +179,20 @@ styles that cause [=view transitions=].
178179
179180<pre highlight="css">
180181@route --search-results-page {
181- pattern: url-pattern("/search-results");
182+ pattern: url-pattern("/search-results");
182183}
183184@route --product-page {
184- pattern: url-pattern("/product/:id");
185+ pattern: url-pattern("/product/:id");
185186}
186187
187188@navigation ((from: --search-results-page) and
188- (to: --product-page)) or
189- ((from: --product-page) and
190- (to: --search-results-page)) {
191- /* These styles apply when a navigation is in progress
192- between a search results page and a product page (as
193- defined by the @route rules above), in either
194- direction. */
189+ (to: --product-page)) or
190+ ((from: --product-page) and
191+ (to: --search-results-page)) {
192+ /* These styles apply when a navigation is in progress
193+ between a search results page and a product page (as
194+ defined by the @route rules above), in either
195+ direction. */
195196}
196197</pre>
197198
@@ -209,8 +210,8 @@ with <<navigation-condition>> defined as:
209210
210211<pre class="prod def" dfn-type="type" nohighlight>
211212<dfn><<navigation-condition>></dfn> = not <<navigation-in-parens>>
212- | <<navigation-in-parens>> [ and <<navigation-in-parens>> ]*
213- | <<navigation-in-parens>> [ or <<navigation-in-parens>> ]*
213+ | <<navigation-in-parens>> [ and <<navigation-in-parens>> ]*
214+ | <<navigation-in-parens>> [ or <<navigation-in-parens>> ]*
214215<dfn><<navigation-in-parens>></dfn> = ( <<navigation-condition>> ) | ( <<navigation-test>> ) | <<general-enclosed>>
215216<dfn><<navigation-test>></dfn> = <<navigation-location-test>> | <<navigation-type-test>>
216217
@@ -367,7 +368,7 @@ which matches any links that link to the site's homepage:
367368
368369<pre highlight=css>
369370:link-to(url-pattern("/")) {
370- font-weight: bold;
371+ font-weight: bold;
371372}
372373</pre>
373374
@@ -388,46 +389,46 @@ by matching the relevant parts of the navigation URL to the link URL.
388389
389390<pre highlight=css>
390391@view-transition {
391- /* allow cross-document view transitions */
392- navigation: auto;
392+ /* allow cross-document view transitions */
393+ navigation: auto;
393394}
394395
395396@route --movie-details {
396- /* match URLs like /en/movie/123 which is the English page
397- about a movie with ID 123 */
398- pattern: url-pattern("/:lang/movie/:id");
397+ /* match URLs like /en/movie/123 which is the English page
398+ about a movie with ID 123 */
399+ pattern: url-pattern("/:lang/movie/:id");
399400}
400401
401402/* capture the overall area representing the movie, and a
402- sub-area for its poster image */
403+ sub-area for its poster image */
403404
404405/* match an element with class movie-container with a child
405- link that links to a movie whose id is the same as the
406- movie we are currently navigating to or from. (lang can
407- be different, though.)
408-
409- Just :link-to(--movie-details) requires that the target
410- of the link match the URL pattern defined by the "@route
411- --movie-details" rule.
412-
413- The navigation-param(id) further requires that either the
414- from or the to URL of the current navigation also match
415- the URL pattern represented by the "@route
416- --movie-details" rule, and that that the 'id' named group
417- from that match be the same as the 'id' named group from
418- the match with the link's target.
419- */
406+ link that links to a movie whose id is the same as the
407+ movie we are currently navigating to or from. (lang can
408+ be different, though.)
409+
410+ Just :link-to(--movie-details) requires that the target
411+ of the link match the URL pattern defined by the "@route
412+ --movie-details" rule.
413+
414+ The navigation-param(id) further requires that either the
415+ from or the to URL of the current navigation also match
416+ the URL pattern represented by the "@route
417+ --movie-details" rule, and that that the 'id' named group
418+ from that match be the same as the 'id' named group from
419+ the match with the link's target.
420+ */
420421.movie-container:has(> .movie-title:link-to(
421- --movie-details with navigation-param(id))) {
422+ --movie-details with navigation-param(id))) {
422423
423- view-transition-name: movie-container;
424+ view-transition-name: movie-container;
424425
425- > .movie-poster {
426- view-transition-name: movie-poster;
427- }
426+ > .movie-poster {
427+ view-transition-name: movie-poster;
428+ }
428429
429- /* leave the default cross-fade animation for both image
430- captures */
430+ /* leave the default cross-fade animation for both image
431+ captures */
431432}
432433</pre>
433434
@@ -442,12 +443,12 @@ and the pseudo-class matches any element where:
442443<dfn><<link-condition>></dfn> = <<link-condition-base>> [ with <<navigation-param-expression>> ]?
443444<dfn><<link-condition-base>></dfn> = <<navigation-location>>
444445<dfn><<navigation-param-expression>></dfn> = ( <<navigation-param-and>> ) |
445- ( <<navigation-param-or>> ) |
446- <<navigation-param>>
446+ ( <<navigation-param-or>> ) |
447+ <<navigation-param>>
447448<dfn><<navigation-param-and>></dfn> = <<navigation-param-expression>>
448- [ "and" <<navigation-param-expression>> ]*
449+ [ "and" <<navigation-param-expression>> ]*
449450<dfn><<navigation-param-or>></dfn> = <<navigation-param-expression>>
450- [ "or" <<navigation-param-expression>> ]*
451+ [ "or" <<navigation-param-expression>> ]*
451452<dfn><<navigation-param>></dfn> = <<navigation-param-key-value>> | <<navigation-param-function>>
452453<dfn><<navigation-param-key-value>></dfn> = ( <<ident>> : <<string>> )
453454<dfn><<navigation-param-function>></dfn> = navigation-param( <<ident>> )
@@ -744,8 +745,8 @@ intentionally does not provide a serialization.
744745
745746<h2 class="no-num" id="privacy">Privacy Considerations</h2>
746747
747- No new privacy considerations have been reported on this specification .
748+ ISSUE: To be written .
748749
749750<h2 class="no-num" id="security">Security Considerations</h2>
750751
751- No new security considerations have been reported on this specification .
752+ ISSUE: To be written .
0 commit comments