$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

    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
    [email protected]
    msg systems ag
    Mergenthalerallee 73-75, 65760 Eschborn
    Deutschland
    www.msg.group

    View Slide