Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Outlook webmail autolinking #11

Closed
M-J-Robbins opened this issue Apr 3, 2023 · 3 comments
Closed

Outlook webmail autolinking #11

M-J-Robbins opened this issue Apr 3, 2023 · 3 comments

Comments

@M-J-Robbins
Copy link

Outlook webmail is adding
<span data-markjs="true" class="HQEo7" tabindex="0" role="link">

This isn't rendered as a link as such so we cant target it with an a{} but they do add a class, so we can remove all the styles by using

[class="HQEo7"]{
  border:none !important;
  cursor: auto !important;
  padding:0 !important;
}

Note that this is using an attribute selector as Outlook will prefix all class selectors with x_
@husseinalhammad
Copy link

.HQEo7 seems to be an automatically generated class name. If so, this is likely to change on future updates.

I think relying on [role=link] is a more futureproof approach. This is probably not unique enough though. So if we want to ensure these styles don't unintentionally apply to other email clients, we can rely on Outlook's x_ class prefix:

<body class="body">
  <!-- your email -->
</body>
[class=x_body] [role=link] {
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
}

The cursor property doesn't seem to be supported on Outlook web, but color: inherit is.

@M-J-Robbins
Copy link
Author

Ah yes I had both colour and cursor in my original version, then saw that cursor isn't supported and deleted it.
But I removed color instead 🤦‍♂️

Also good ideas about [class=x_body] [role=link] 👍

@JayOram
Copy link
Owner

JayOram commented May 2, 2023

Will use this to update the CSS links reset md file:

Outlook Webmail

The below needs the <body> element to have the class="body" to ensure the CSS only targets Outlook webmail, this is done by prefixing the class with x_ - this doesn't affect attribute selectors.

[class=x_body] [role=link] {
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
}

Thanks to Mark Robbins and Hussein Al Hammad for finding and working on a solution.

@JayOram JayOram closed this as completed May 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@M-J-Robbins @husseinalhammad @JayOram