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!

Transcript

1. .consulting .solutions .partnership
   Using :not() to mark all outgoing links of a site
   Alexander Schwartz, Principal IT Consultant
   

   View Slide

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
   

   View Slide

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
   JAMstack
   contact me via a direct
   message on twitter or via email
   href="https://twitter.com/intent/..." rel="noopener"
   class="button is-info">Tweet
   External Link, same window:
   add mark
   Button, external link:
   no mark
   Internal Link:
   no mark
   

   View Slide

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
   /* elements that are not in
   the class `.fancy` */
   p:not(.fancy) {
   color: green;
   }
   /* elements with an href matching
   "https://example.org" */
   a[href="https://example.org"] {
   color: green;
   }
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

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
   

   View Slide