Slack icon incorrectly showing for URLs on Make

[desrosj]

I noticed while ​reading a recent post on the Community Make blog that all anchor tags with .slack.com show the Slack icon to the left of the link, regardless of where that string matches within the href attribute.

In this case, the link is a Google Calendar link that includes a link to a Slack channel. This is because the attr*=value ​substring matching selector is being used, which matches elements that contain the value anywhere within the specified attribute.

Changing the CSS selector to use the attr^=val value selector will only add the icon to elements that start with a Slack URL. I think the original intent was probably to always show the icon no matter which Slack instance is being linked to, but adding a rule for each officially endorsed Slack instance seems fine as there won't be many (if there's even others today).

[desrosj]

When looking to make a patch, it seems other areas of the CSS have adopted a[href*="//wordpress.slack.com"]. This still uses *= matching, but makes it specific only to the wordpress.slack.com instance while allowing for both http and https links. The bug described here would still occur.

A ​Google search shows that there are no indexed instances of http://wordpress.slack.com on make.wordpress.org.

I think it's safe to change the rule to a[href^="https://wordpress.slack.com"].

[dd32]

I agree, I think we can limit this to https://wordpress.slack.com/ links.

[dd32]

In 12665:

Make: Use more specific CSS for matching slack URLS.

Props desrosj.
Fixes #6877.