Menu icon Foundation
iOS blue links styles

In my app.css file, I place the following:

 

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

 

This does a fantastic job of eliminating unwanted blue links in iOS. Problem is, I find that the styles don't make it into the generated/distribution email HTML file. Is there a way to make sure those styles get pushed out into the final HTML — short of pasting it in after the fact?

_bryan

 

 

emailiosblue linkcss

In my app.css file, I place the following:

 

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

 

This does a fantastic job of eliminating unwanted blue links in iOS. Problem is, I find that the styles don't make it into the generated/distribution email HTML file. Is there a way to make sure those styles get pushed out into the final HTML — short of pasting it in after the fact?

_bryan

 

 

Ant James about 3 years ago

Just to add a +1, as it'd be very useful to pull together a bulletproof solution to this issue. At present we've just had to accept that in some cases iOS wrestles control.

Evan Wiegand about 3 years ago

This is the snippet I use that works great. Putting the stuff inside of a media query allows it to carry over into the final version (assuming you have "preserveMediaQueries" set to true in your gulpfile).

@media screen and (min-device-width: 1px) {

a[href^=tel],
a[href^="x-apple-data-detectors:"]
{ 
    color:inherit !important; 
    text-decoration:none !important;
}


}

Ant James about 3 years ago

Interesting. I did already have something very similar in a media query but perhaps the range wasn't wide enough. I'll give that a test.

Bryan about 3 years ago

Thanks, Evan. I'll have to check my gulpfile. Maybe that's where my problem lies …

Ant James about 3 years ago

Evan's method does indeed seem to have remedied the issue. I'll be rolling this out across all of our templates now!

Bryan about 3 years ago

Yes, this worked for me, too. Thanks a ton, Evan!

Bryan over 2 years ago

Very strange. I thought this was working, but I now find that this code is being stripped out. It's not the media query itself: I can substitute some other rule and it appears in the rendered email. But the x-apple-data-detectors code gets purged.

How come?