Allow to filter by anchor

[SebastianZ]

We should allow filtering the specs using a URL anchor. Doing so, users can save and share those filtered tests.

An example URL to filter by CSS 2.2 could then look like https://css3test.com/#filters-1998.

Sebastian

[LeaVerou]

If we can have hackable URLs that can be understood by being read, that's better. In this case, I don't understand how CSS 2.2 becomes filters-1998, nor would I understand that filters-1998 filters by CSS 2.2.

[SebastianZ]

I obviously chose the best example. 😄 1998 is the name CSS 2.2 has in the filters:

https://github.com/LeaVerou/css3test/blob/a4892e1d575d4c3e5e650ba97131719851eeae8d/index.html#L43-L63

Those the release year of the snapshots specs was chosen to be able to compare them. We might create some mapping between the names and the release years, first, so we can take the actual spec. names for the anchors.

Aside from that, the idea is to create and append the anchor when you choose a filter from the drop-down. So users wouldn't have to create them manually but could simply copy them from the address bar.

And I chose the filters- prefix to distinguish them from the spec. anchors like https://css3test.com/#css-backgrounds-4.

Sebastian

[LeaVerou]

I obviously chose the best example. 😄 1998 is the name CSS 2.2 has in the filters:

I'm confused: I don't see a 1998 in the HTML below?

Aside from that, the idea is to create and append the anchor when you choose a filter from the drop-down. So users wouldn't have to create them manually but could simply copy them from the address bar.

+1 (good use case for the newish Navigation API? ) Though we should be careful not to pollute the history — maybe by using replace rather than push thoughtfully.

And I chose the filters- prefix to distinguish them from the spec. anchors like css3test.com/#css-backgrounds-4.

+1

[SebastianZ]

I obviously chose the best example. 😄 1998 is the name CSS 2.2 has in the filters:

I'm confused: I don't see a 1998 in the HTML below?

You need to scroll. It's called <option value="1998" title="Everything included in CSS 2.2">CSS 2.2</option>.

Aside from that, the idea is to create and append the anchor when you choose a filter from the drop-down. So users wouldn't have to create them manually but could simply copy them from the address bar.

+1 (good use case for the newish Navigation API? ) Though we should be careful not to pollute the history — maybe by using replace rather than push thoughtfully.

I had that API in mind, yes. Though it's obviously just supported in Chromium browsers at this point, so the History API needs to be used as fallback.

Sebastian

[LeaVerou]

I see. Yes, #filter-${ value } seems fine for the URLs, but we'd need to use more understandable values there (e.g. for this I'd expect something like css2.2 or css22 rather than 1998 the link of which to CSS 2.2 is pretty esoteric.