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:

css3test/index.html

Lines 43 to 63 in a4892e1

	<option value="" title="All specifications including experimental ones but without CSS 2.2">All except CSS 2.2</option>
	<option value="all" title="All specifications including experimental ones">All</option>
	<option value="stable" title="All specifications listed in the latest CSS snapshot, their predecessors and others that won't change much anymore">Stable</option>
	<option value="experimental" title="All specifications not listed in the latest CSS snapshot">Experimental</option>
	<optgroup label="Standardization groups">
	<option value="csswg" title="All specifications managed by the CSS Working Group (CSSWG) except CSS Houdini">CSS</option>
	<option value="houdini" title="All specifications related to CSS Houdini managed by the CSS Working Group (CSSWG)">CSS Houdini</option>
	<option value="svgwg" title="All specifications managed by the SVG Working Group (SVGWG)">SVG</option>
	<option value="whatwg" title="All specifications managed by the Web Hypertext Application Technology Working Group (WHATWG)">WHATWG</option>
	<option value="others" title="All specifications managed by other standardization groups">Others</option>
	</optgroup>
	<optgroup label="CSS snapshots">
	<option value="1998" title="Everything included in CSS 2.2">CSS 2.2</option>
	<option value="2007" title="All specifications marked as official part of the CSS 2007 snapshot">CSS 2007</option>
	<option value="2010" title="All specifications marked as official part of the CSS 2010 snapshot">CSS 2010</option>
	<option value="2015" title="All specifications marked as official part of the CSS 2015 snapshot">CSS 2015</option>
	<option value="2017" title="All specifications marked as official part of the CSS 2017 snapshot">CSS 2017</option>
	<option value="2018" title="All specifications marked as official part of the CSS 2018 snapshot">CSS 2018</option>
	<option value="2020" title="All specifications marked as official part of the CSS 2020 snapshot">CSS 2020</option>
	<option value="2021" title="All specifications marked as official part of the CSS 2021 snapshot">CSS 2021</option>
	<option value="2022" title="All specifications marked as official part of the CSS 2022 snapshot">CSS 2022</option>

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.