I like the idea of being able to declaratively alter my references to
figures and sections based on where they end up.
Håkon Wium Lie:
> But it's stretching the declarative model. JavaScript seems to offer
> the required escape hatch for these cases. Or, how would you spec this
> output in CSS:
>
> The figure is on this page.
> The figure is on the next page.
> The figure is on the previous page.
> The figure is on page 6.
>
>>From this HTML code:
>
> The figure is <a href=#figure>here</a>.
.figure {
float: snap;
}
a:target-matches(attr(href, url), .figure)
:target-counter(attr(href, url), page, same) {
content: "on this page";
}
a:target-matches(attr(href, url), .figure)
:target-counter(attr(href, url), page, next) {
content: "on next page";
}
a:target-matches(attr(href, url), .figure)
:target-counter(attr(href, url), page, previous) {
content: "on previous page";
}
a:target-matches(attr(href, url), .figure) {
content: "on page " target-counter(attr(href, url), page);
}
Being able to tell whether the figure was floated in the end or not
would also be useful.
a:target-matches(attr(href, url), .figure:not(:floating)) {
content: "below";
}
That does invite you to wonder what
:floating { float: none; }
and
a:target-counter(attr(href, url), page, same) {
counter-reset: page;
}
might mean, though.