Taming the automatic telephone number thing in the windows 10 edge browser
Windows 10's edge browser seems to detect phone numbers even if there's no phone app installed on the system.
It formats the phone number in blue with an underline even if it's just in the plain text somewhere (ugly on some backgrounds), moreover it detects e.g. VAT numbers as if they were phone numbers.
So how do we control it as webmasters to:
how it renders the detected stuff (I suppose MSFT invented their very own CSS selector for this stuff?)
how do we turn the detection off
Preferably with something just targeting that browser and not risk messing up things for others or adding non-standard things to otherwise valid code.
EDIT:
The suggested way to turn detection off based on the way it is done in IE11 for windows phones does not work in all of my tests. The meta tag fails and the non-standard html attribute does seem to work.
I've looked at the inspect thing in edge and it seems to me the computed CSS for those detected items is what one would expect to see there if it were not detected (i.e. the computed CSS is the normal color and no underline), suggesting little chance of controlling how it's rendered.
EDIT:
test case 1: meta tag (fails)
Test case 2: non-standard html attribute (works)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p x-ms-format-detection="none">text VAT BE 0123.456.789 text </p>
<p>text +32 11 222 333 text</p>
</body>
</html>Answer
Apparently phone number detection was introduced in Internet Explorer 11, but not on desktops.
Here are ways to control it, taken from this MS article: Phone number format recognition
- To disable the behavior for an element (and its child elements), set the
x-ms-format-detectionattribute to "none". - To disable the behavior for a webpage, use the meta element:
<meta name="format-detection" content="telephone=no"/>
To enable the behavior for an element (and its child elements), set the
x-ms-format-detectionattribute to "phone" or "all".To selectively control the behavior using JavaScript, use
setAttributeto change the value of thex-ms-format-detectionattribute of the associate element or its parent. (Note that this needs to be done before the element or the parent is rendered in the DOM; dynamic changes are not supported.)
If I understand the article correctly, if phone detection is disabled at the browser level, the x-ms-format-detection attribute (or the meta tag) will be ignored.