$30 off During Our Annual Pro Sale. View Details »

Using :not() to mark all outgoing links of a site

Using :not() to mark all outgoing links of a site

Sometimes you have a pre-rendered HTML and you want CSS to show an indicator what links are internal and external to your site. Let's see how!

Alexander Schwartz

March 27, 2019
Tweet

More Decks by Alexander Schwartz

Other Decks in Technology

Transcript

  1. .consulting .solutions .partnership Using :not() to mark all outgoing links

    of a site Alexander Schwartz, Principal IT Consultant
  2. How do I add a small icon to outgoing links?

    © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 2 The Problem 1. https://www.ahus1.de/post/cdn-for-simplicity#summary External Link Internal Link
  3. HTML Samples HTML Samples for internal and outgoing links ©

    msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 3 <a href="https://jamstack.org/">JAMstack</a> <a href="/aboutme">contact me via a direct message on twitter or via email</a> <a itemprop="url" title="Twitter" target="_blank" href="https://twitter.com/intent/..." rel="noopener" class="button is-info">Tweet</span></a> External Link, same window: add mark Button, external link: no mark Internal Link: no mark
  4. CSS Solutions 1. https://developer.mozilla.org/en-US/docs/Web/CSS/:not 2. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors Using the :not() pseudo-class

    and attribute selectors © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 4 /* <p> elements that are not in the class `.fancy` */ p:not(.fancy) { color: green; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; }
  5. Can I use :not()? © msg | March 2019 |

    Using :not() to mark all outgoing links of a site | Alexander Schwartz 5 CSS Basis 1. https://caniuse.com/#feat=css-sel3
  6. CSS Solutions Opening in new tab or other domain ©

    msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 6 a[target="_blank"]:not( [title] )::after { // arrow upper right // alternative: \29C9 (two window) content: '\00A0\2197'; vertical-align: text-top; font-size: 75%; } a:not( [href*='ahus1.de'] ):not( [href^='#'] ):not( [href^='/'] ):not( [href^='mailto:'] ):not( [title] )::after { /* ... */ } :not() tends to attract more :not()s… you might end up with unmaintainable code soon. Be careful! (thanks to @mirjam_diala for pointing this out)
  7. Docs https://developer.mozilla.org/en-US/docs/Web/CSS/:not https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors Can I Use https://caniuse.com/#feat=css-sel3 Example Site https://www.ahus1.de/post/cdn-for-simplicity

    Performance of CSS Selectors Is Still Irrelevant https://meiert.com/en/blog/performance-of-css-selectors-2/ Links © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 7 @ahus1de
  8. .consulting .solutions .partnership Alexander Schwartz Principal IT Consultant +49 171

    5625767 alexander.schwartz@msg.group msg systems ag Mergenthalerallee 73-75, 65760 Eschborn Deutschland www.msg.group