css - Taming the automatic telephone number thing in the windows 10 edge browser -


windows 10's edge browser seems detect phone numbers if there's no phone app installed on system.

it formats phone number in blue underline if it's in plain text somewhere (ugly on backgrounds), detects e.g. vat numbers if phone numbers.

so how control webmasters to:

  • how renders detected stuff (i suppose msft invented own css selector stuff?)

  • how turn detection off

preferably targeting browser , not risk messing things others or adding non-standard things otherwise valid code.

edit:

  • the suggested way turn detection off based on way done in ie11 windows phones not work in of tests. meta tag fails , non-standard html attribute seem work.

  • i've looked @ inspect thing in edge , seems me computed css detected items 1 expect see there if not detected (i.e. computed css normal color , no underline), suggesting little chance of controlling how it's rendered.

edit:

test case 1: meta tag (fails)

<!doctype html>  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>      <meta charset="utf-8" />      <!-- test -->      <meta name="format-detection" content="telephone=no" />    </head>    <body>      <p>text vat 0123.456.789 text </p>      <p>text +32 11 222 333 text</p>    </body>  </html>

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 0123.456.789 text </p>      <p>text +32 11 222 333 text</p>    </body>  </html>

apparently phone number detection introduced in internet explorer 11, not on desktops.

here ways control it, taken ms article: phone number format recognition

  • to disable behavior element (and child elements), set x-ms-format-detection attribute "none".
  • to disable behavior webpage, use meta element:

<meta name="format-detection" content="telephone=no"/>

  • to enable behavior element (and child elements), set x-ms-format-detection attribute "phone" or "all".

  • to selectively control behavior using javascript, use setattribute change value of x-ms-format-detection attribute of associate element or parent. (note needs done before element or parent rendered in dom; dynamic changes not supported.)

if understand article correctly, if phone detection disabled @ browser level, x-ms-format-detection attribute (or meta tag) ignored.


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -