Les Liaisons Dangereuses Or The Wrong Love For Proxy Detections

The temptation is high. The desire for shortcuts is permanent. But the story is often full of painful moments without any winners. "Les liaisons dangereuses" of detecting browsers and devices are common.

ce n’est pas à l’illusion d’un moment à régler le choix de notre vie. — Les liaisons dangereuses. Choderlos de Laclos. 1782

which can be translated as "it is not for the illusion of a moment to govern the choice of a lifetime."

window.installTrigger

Firefox (Gecko) had the property window.installTrigger to signal that a web extension could be installed. This was a Firefox-only property. Soon enough, obviously, people started to use it as a signal that the browser accessing the website was Firefox.

if ("installTrigger" in window) {
    // do something for Firefox
} else {
    // do something for others
}

When the property was retired, because it was not standard and used for things which were completely different from its initial purpose, websites started to break. It had to be shimmed. Gecko had to imitate the property so that some websites would continue to work.

Another example -webkit-touch-callout

-webkit-touch-callout was implemented in 2013 in WebKit to give the possibility for Web developers to opt out of the contextual menu given on iPhone during a long press. The long press on a link makes it possible to also get a preview of the page behind the link.

-webkit-touch-callout: none permits web developers to cancel this behavior when, for example, developing a web app they need to be able to long-press user gestures such as a drag and drop.

But I discovered today that this was used as a proxy detection for iPhone in CSS. This is bad. Some CSS stylesheets contain a combination of @support and -webkit-touch-callout: none to have a specific behavior in their CSS.

@supports (-webkit-touch-callout: none) {
    body {
        /* DON'T DO THAT! */
    }
}

This has many implications for the future. Here are some examples of how it can become very sour.

• One day, the CSS WG may decide to standardize touch-callout so that web developers can opt out of other browsers having contextual menus. Given the spread and the legacy of -webkit-touch-callout, some browsers might have to alias the -webkit version so it is working for websites not updated. Suddenly, the CSS targeting iPhone applies to all browsers.
• Or the opposite story of this where because the term is so misused and it will break so much stuff that a new term needs to be coined, leaving plenty of CSS on the Web with a useless term which is not working exactly like the initial idea. It also means that it forces WebKit to maintain the code for the old property or to shim it like Firefox did with the risk to have confusion in between the place where it was used rightly and where it was wrong.

These are only a few examples of the complexity…

• fullscreen clickable with orb
• Looking for the same feature on Android
• To prevent text/image selection or this one
• To prevent the orb for drag'n drop and another one
• People complaining about framework disabling the menu

Do Not Misuse Terms

There are plenty of other examples of this type, such as the abuse of maxTouchPoints (this one will be (not) "funny" if touch screens on desktop computers become more prevalent) or window.standalone which created plenty of issues when web apps for desktop computers became a thing.

We all know the benefits of feature detection, we made a lot of progress as a community to go away as much as possible from User Agent detection. It's not perfect. There are always difficult trade-offs.

L’humanité n’est parfaite dans aucun genre, pas plus dans le mal que dans le bien. Le scélérat a ses vertus, comme l’honnête homme a ses faiblesses. — Les liaisons dangereuses. Choderlos de Laclos. 1782

Something along "Humanity is not perfect in any fashion; no more in the case of evil than in that of good. The criminal has his virtues, just as the honest man has his weaknesses."

Stay away from proxy detections, aka using a feature of the Web platform which seems a solution, at a point in time, to detect a specific browser or device. It clutters the Web platform. It makes it very hard to have a better Web without plenty of hacks here and there.

Use feature detections for what they are, detecting the feature to affect the behavior of this specific feature.

See Also

• Detecting touch: it's the 'why', not the 'how' by Patrick H. Lauke and Robert Nyman. 2013.

Otsukare!