Search code examples
htmlcsshrefjekyll

Is there pure HTML5 or CSS3 to make all external links leave website, as in target=_blank?


Getting external links set to target="_blank" is well-documented using client or server code:

It's 2015 and HTML and CSS has grown up since these questions. Is there a pure CSS3 or HTML5 solution to make external links leave the website, as in target=_blank but for all links?

Also tagging Jekyll since that's the platform I'm in, and a Jekyll flag, which would let Ruby do it server side, would be useful for me.


Solution

  • To suggest that a link be opened in a new browsing context (typically, a new tab or a new window), which is apparently what you mean by “leave the website”, you can use the target=_blank attribute. To set that the default for all links (and all form submissions), you can use the tag <base target=_blank>; this might be feasible if you want to handle most links that way and override the setting with target=_self as needed. Other than that, HTML has no tools for the purpose, and no concept of “external” vs. “internal” links. So you need to generate the attributes when generating the page, using whatever definition you have for “external”.

    In CSS, there is in practice nothing that would help. Years ago, there was a proposed target-name property, in CSS3 Hyperlink Presentation Module WD in 2004. But it was never implemented, and work on the topic has been discontinued, as briefly described in CSS3 Hyperlink Presentation Module WG Note in 2014.