CSS-only browser detection proof of concept

Small demo

Hello there. I can see you are a Firefox webkitIE/ Edge User.
Theoretically I could find out more information about your browser and use that (with everything else I could somehow find out) to fingerprint you even with a spooved useragent and javascript disabled.
Try submitting the form below and check your URL.

How does it work?

It's rather simple, which is why I am almost certain that someone else has built this exact proof of concept before, but I did not check before doing it because it sounded like a fun project to complete in under an hour.
Web browsers will ignore any rule that contains a selector which they don't understand. All I did was hide three forms (and spans) that look almost identical. When used maliciously, the only difference between those would be the hidden input which contains information about your browser. Then I just had to make them visible again in a rule that also contains a selector that the other browsers won't understand.

Why is this bad?

For privacy reasons, many people try to obscure which browser they are using by changing their useragent. Those people will often disable javascript as well and think they are no longer fingerprintable. While it certainly is a lot harder to fingerprint those browsers, it is not impossible. Combined with information about the other methods used to enhance privacy, it might be possible to end up just as unique as everyone else.

Are you serious? You're only figuring out which kind of browser they are using. That's not private information.

While this is correct, please note that due to browsers constantly adding and removing features, it is possible to get a far more finely grated image of what browser someone is using by applying this method in a more refined way.
By using very specific rules it may be possible to find out which browser version someone is using. Combine this with everything else you can scrape together and you might just have a unique identifier.
Safari on iOS has had a static user agent for years now -to prevent websites from knowing which version it is. This means that there are people who absolutely care about not every website knowing which browser version they are using.
Adding a bunch of almost identical forms with slightly different css rules to display them won't increase a site's footprint by too much, considering the loads of NPM packages that most websites serve these days.
Also there is the more eloquent solution that does not even require the user to submit a form, done through loading background images via css. This, however, is an exercise left to the reader.
PRs are always welcome.