Share
Ik ga deze snelle tip niet beginnen met de oude "tegenwoordig mensen je websites bekijken op een veelheid aan apparaten", maar het is is waar. Veel mobiele apparaten zullen goed werk doen door telefoonnummers in uw HTML te herkennen, waardoor ze klikbaar zijn, zodat u rechtstreeks dat nummer kunt bellen - maar niet altijd.
Wat gebeurt er als de mobiel van een gebruiker een telefoonnummer niet herkent als "opvraagbaar"? Misschien is bijvoorbeeld de manier waarop u het nummer hebt ingevoerd niet door het platform herkend. Gemiste kans!
(Bekijk de lijst met patronen van Mark Hammond die zijn herkend voor iOS en Android ...)
Deze is doodeenvoudig: verpak uw telefoonnummers in ankers, maar in plaats van de http * protocol (of wat je normaal ook in een anker zou doen) tel: of tel: //. Op deze manier weet het apparaat, ook als u een niet-herkend patroon hebt gebruikt, nog steeds wat te doen:
+44 (0) 111 - 222 333 44
Niet-ondersteunende browsers (bijvoorbeeld uw bureaublad) weten niet wat te doen met de tel: protocol nog niet - tenzij de gebruiker een soort extensie heeft ingeschakeld waarmee Skype telefoonnummers kan herkennen. Google Chrome negeert de klik graag, maar op dit moment beginnen andere grote browsers te huilen. Andere niet-telefoonapparaten (zoals de iPad) herkennen het nummer en vragen de gebruiker om een contact toe te voegen aan hun adresboek - dit zou ook een verstandige aanpak zijn voor desktop-browsers.
Laten we als extra optie het voor de gebruiker nog duidelijker maken dat ze naar een telefoonlink kijken door ze allemaal te stylen. We zullen hiervoor een attribuutwaardekiezer gebruiken, alleen gericht op de :voor pseudo-element van links die de string bevatten tel: binnen hun href attribuut:
a [href ^ = "tel:"]: vóór content: "\ 260E"; weergave: blok; margin-right: 0.5em;
De kleine karaat daar ^ geeft aan dat het zoekt naar elementen waarvan de href-kenmerken bekend zijn beginnen met de string die we specificeren. tel: en tel: // zullen daarom beide hier worden behandeld. We hebben een kleine unicode-telefoon ingevoerd \ 260E;, dus we hoeven zelfs geen webfont-pictogram te gebruiken. Leuk.
Leuke tint eh? 
Accentsconagua
kleur: tomaat geloof het of niet… We zijn hier klaar, in naam van toegankelijkheid, probeer het eens!
