Problem
Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recognize phone numbers and do the linking for us, but not always.
...
We have a snippet for phone links on this site that’s been hanging around since 2011:
| Code Block | ||
|---|---|---|
| ||
<a href="tel:1-562-867-5309">1-562-867-5309</a> |
This also works on text links:<a
| Code Block | ||
|---|---|---|
| ||
<a href="tel:1-562-867-5309" |
...
>Click to Call!</ |
...
a> |
tel: is not so much a feature as it is a protocol, much in the same way thathttp: and mailto: are protocols for the <a> tag feature. The spec itself has nothing to say about it, though HMTL5 did provide support for custom protocol handlers, which allow such a protocol to be used.
You’re probably wondering why tel: can be considered default usage in the absence of an official spec on it. You can credit this to the fact that it was a proposed standard as far back as 2000 and later adopted by iOS, making it the de facto way to go by roughly 2007. There are other phone-based protocols (which we’ll get to later), but we’ll be focusing on tel: given its relative prominence.
Browser Support
...
We see tel: pop up as a protocol handler for links with no official documentation; and where there is no documentation, we often see differences in browser support and behavior. That’s not to say that browsers fail to recognize the<a> tag itself. Instead, browsers might make different decisions on what to do when that link is clicked. For example, a browser may assume another app needs to open and will trigger a dialog asking which app to use. In other cases, the link might be ignored altogether.
| Browser | Does it link? | When clicked it... |
|---|---|---|
| Android | Yes | Launches phone app |
| BlackBerry 9900 | Yes | Initiates phone call |
| Chrome | Yes | Triggers dialog confirming the use of another app |
| Edge | Yes | Triggers dialog confirming the use of another app |
| Internet Explorer 11 | Yes | Triggers dialog confirming the use of another app |
| Internet Explorer 11 Mobile | Yes | Initiates phone call |
| iOS | Yes | Triggers options to call, message, copy or add the number to the Contacts app |
| Opera (OSX) | Yes | Triggers dialog confirming the use of another app |
| Opera (Windows) | Yes | Triggers an error dialog that does not recognize the protocol |
| Safari | Yes | Launches FaceTime |
Styling Phone Links
...
Styling telephone numbers is like any other link. In fact, it will inherit the default styling for anchors:
| Code Block | ||
|---|---|---|
| ||
a { color: orange; text-decoration: none; } |
Let’s say we only styles to apply to telephone links. We can do that with a pseudo selector that searches out the tel: text in a given URL:
| Code Block | ||
|---|---|---|
| ||
a[href^="tel:"] {
color: orange;
text-decoration: none;
} |
Related articles
https://css-tricks.com/the-current-state-of-telephone-links/
...