Skip to content

[css-navigation-1] Add :link-to() pseudo-class (with navigation-param() function #13134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 23, 2025
Merged

[css-navigation-1] Add :link-to() pseudo-class (with navigation-param() function #13134

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 119 additions & 14 deletions css-navigation-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,11 @@ as follows:
: <<navigation-test>>
:: : <<navigation-location>>
: at: <<navigation-location>>
:: The result is true if
the document's [=Document/URL=] [=URL pattern/match|matches=]
the [=navigation location URL pattern=] of <<navigation-location>>.
:: The result is whether the result of
[=URL pattern/match|match a URL pattern=] is non-null
given <var>urlPattern</var> as
the [=navigation location URL pattern=] of <<navigation-location>>,
<var>input</var> as the document's [=Document/URL=].

: from: <<navigation-location>>
:: The result is true if
Expand All @@ -127,19 +129,26 @@ as follows:
* its [=transition=] is non-null,
its [=from entry=]'s {{NavigationHistoryEntry/url}}
is non-null and
[=URL pattern/match|matches=]
the [=navigation location URL pattern=] of <<navigation-location>>.
[=URL pattern/match|match a URL pattern=] is non-null when
given <var>urlPattern</var> as
the [=navigation location URL pattern=] of <<navigation-location>>,
<var>input</var> as that
[=from entry=]'s {{NavigationHistoryEntry/url}}.

NOTE: This part handles <code>from:</code> when it matches in the old page.

* its [=activation=] is non-null,
the document's [=has been revealed=] is false or
was false at the start of the current [=task=],
and the activation's {{NavigationActivation/from}}'s
{{NavigationHistoryEntry/url}}'s
{{NavigationHistoryEntry/url}}
is non-null and
[=URL pattern/match|matches=]
the [=navigation location URL pattern=] of <<navigation-location>>.
[=URL pattern/match|match a URL pattern=] is non-null when
given <var>urlPattern</var> as
the [=navigation location URL pattern=] of <<navigation-location>>,
<var>input</var> as that
activation's {{NavigationActivation/from}}'s
{{NavigationHistoryEntry/url}}.

NOTE: This part handles <code>from:</code> when it matches in the new page.

Expand All @@ -149,9 +158,10 @@ as follows:
is non-null, and either:

* its [=ongoing navigate event=] is non-null,
and the [=current to url=]
[=URL pattern/match|matches=]
[=URL pattern/match|match a URL pattern=] is non-null
given <var>urlPattern</var> as
the [=navigation location URL pattern=] of <<navigation-location>>,
<var>input</var> as the [=current to url=],
where the <dfn>current to url</dfn> is defined as:

* if the {{pageswap}} event has fired since that navigation began,
Expand Down Expand Up @@ -188,10 +198,14 @@ as follows:
the document's [=has been revealed=] is false or
was false at the start of the current [=task=],
and the activation's {{NavigationActivation/entry}}'s
{{NavigationHistoryEntry/url}}'s
{{NavigationHistoryEntry/url}}
is non-null and
[=URL pattern/match|matches=]
the [=navigation location URL pattern=] of <<navigation-location>>.
[=URL pattern/match|match a URL pattern=] is non-null
given <var>urlPattern</var> as
the [=navigation location URL pattern=] of <<navigation-location>>,
<var>input</var> as that
activation's {{NavigationActivation/entry}}'s
{{NavigationHistoryEntry/url}}.

NOTE: This part handles <code>to:</code> when it matches in the new page.

Expand Down Expand Up @@ -266,7 +280,98 @@ to model it after.

<h2 id="link-navigation-pseudo-classes">Pseudo-classes for navigation-related links</h2>

TODO: To be written.
This specification defines a new '':link-to()'' functional pseudo-class
that matches link elements that link to a certain URL.

The '':link-to()'' pseudo-class takes a single argument, a <<link-condition>>,
and the pseudo-class matches any element where:
* the element matches '':any-link''
* the target of link matches the <<link-condition>>, as defined below.

<pre class="prod def" dfn-type="type" nohighlight>
<dfn><<link-condition>></dfn> = <<link-condition-base>> [ with <<navigation-param-expression>> ]?
<dfn><<link-condition-base>></dfn> = <<url-pattern()>>
<dfn><<navigation-param-expression>></dfn> = ( [ <<navigation-param-and>> |
<<navigation-param-or>> |
<<navigation-param>> ] )
<dfn><<navigation-param-and>></dfn> = <<navigation-param-expression>>
[ "and" <<navigation-param-expression>> ]*
<dfn><<navigation-param-or>></dfn> = <<navigation-param-expression>>
[ "or" <<navigation-param-expression>> ]*
<dfn><<navigation-param>></dfn> = <<navigation-param-key-value>> | <<navigation-param-function>>
Copy link
Collaborator

@noamr noamr Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean that the syntax is :link-to(route-name with navigation-param(movie-id)) / :link-to(route-name with movie-id: 123) or some such?

Copy link
Member Author

@dbaron dbaron Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it currently requires one more set of () for whatever is after the with, but otherwise yes. (This is changeable, though!)

<dfn><<navigation-param-key-value>></dfn> = <<ident>> : <<string>>
<dfn><<navigation-param-function>></dfn> = navigation-param( <<ident>> )
</pre>

A <<link-condition>> matches the target of the link when both:
* the <<link-condition-base>> matches the target of the link, and
* the <<navigation-param-expression>> matches the target of the link,
with the [=URL pattern=] represented by the <<link-condition-base>> as context

A <<link-condition-base>> represents a [=URL pattern=].
If the <<link-condition-base>> is a <<url-pattern()>>,
then it represents the URL pattern
represented by the <<url-pattern()>> function
(see [=create a URL pattern for url-pattern()=]).

A <<link-condition-base>> matches a URL
when [=URL pattern/match|match a URL pattern=] is non-null
given <var>urlPattern</var> as
the [=URL pattern=] that it represents and
<var>input</var> as the given URL.

A <<navigation-param-expression>> matches a URL
(with a [=URL Pattern=] as context)
based on standard boolean logic for <code>and</code> and <code>or</code>,
and based on whether each <<navigation-param>> matches the URL
(with the URL Pattern as context).

A <<navigation-param>> matches the URL <var>input</var> (with a URL Pattern <var>urlPattern</var> as context)
if the following steps return true:
1. Let <var>matchResult</var> be the result of
[=URL pattern/match|match a URL pattern=]
given <var>urlPattern</var> and <var>input</var>.
the [=URL pattern=]
represented by the <<url-pattern()>> function in the <<link-condition-base>>
(see [=create a URL pattern for url-pattern()=])
1. If <var>matchResult</var> is null, return false.

NOTE: This doesn't really matter because
in this case the <<link-condition-base>> also doesn't match.
1. For each property <var>prop</var> of <var>matchResult</var> (a {{URLPatternResult}})
that is a {{URLPatternComponentResult}}:
1. For each [=map/entry=] <var>entry</var> in its {{URLPatternComponentResult/groups}},
then:
1. If <<navigation-param>> is a <<navigation-param-key-value>>,
return true if
<var>entry</var>'s [=map/key=] is the <<ident>>
and <var>entry</var>'s [=map/value=] is the <<string>>.
1. If <<navigation-param>> is a <<navigation-param-function>>,
and <var>entry</var>'s [=map/key=] is the function's <<ident>>,
then for each <var>navigationUrl</var> of the
current to URL
and current from URL
<span class="issue">extract "current to URL" and
"current from URL" from ''@navigation''
definitions above and link to them</span>:
1. Let <var>navigationMatchResult</var> be the result of
[=URL pattern/match|match a URL pattern=]
given <var>urlPattern</var> and <var>navigationUrl</var>.
1. If <var>navigationMatchResult</var> is null, [=continue=].
1. Return true if <var>navigationMatchResult</var>'s
property <var>prop</var>
has an [=map/entry=]
whose [=map/key=] is the same as <var>entry</var>'s key
and whose [=map/value=] is the same as <var>entry</var>'s value.

NOTE: This step makes the ''navigation-param()'' function
perform what is essentially a three-way match,
between the target of the link,
the provided URL pattern,
and the from or to URL of the current navigation.

ISSUE: A <<link-condition>> should also be able to be a named route
once those are added back to the spec.

<h2 id="url-pattern-function">The ''url-pattern()'' function</h2>

Expand Down