{"id":1880,"date":"2025-10-17T14:13:39","date_gmt":"2025-10-17T21:13:39","guid":{"rendered":"https:\/\/gptech.biz\/?page_id=1880"},"modified":"2025-10-17T14:16:40","modified_gmt":"2025-10-17T21:16:40","slug":"links-in-new-tab-demo","status":"publish","type":"page","link":"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/","title":{"rendered":"Links in New Tab Demo"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }<\/p>\n<p>        body {\n            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);\n            color: #333;\n            min-height: 100vh;\n            padding: 20px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }<\/p>\n<p>        .container {\n            max-width: 1000px;\n            width: 100%;\n            background: white;\n            border-radius: 15px;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n            padding: 30px;\n            margin: 20px 0;\n        }<\/p>\n<p>        h1 {\n            text-align: center;\n            color: #2575fc;\n            margin-bottom: 25px;\n            font-size: 2.5rem;\n        }<\/p>\n<p>        h2 {\n            color: #6a11cb;\n            margin: 25px 0 15px;\n            border-bottom: 2px solid #f0f0f0;\n            padding-bottom: 10px;\n        }<\/p>\n<p>        p {\n            line-height: 1.6;\n            margin-bottom: 15px;\n            font-size: 1.1rem;\n        }<\/p>\n<p>        .explanation {\n            background: #f9f9f9;\n            padding: 20px;\n            border-radius: 10px;\n            border-left: 4px solid #6a11cb;\n            margin: 20px 0;\n        }<\/p>\n<p>        .code-block {\n            background: #2d2d2d;\n            color: #f8f8f2;\n            padding: 15px;\n            border-radius: 8px;\n            overflow-x: auto;\n            margin: 20px 0;\n            font-family: 'Courier New', monospace;\n        }<\/p>\n<p>        \/* The key CSS rule to make all links open in new tabs *\/\n        a {\n            color: #2575fc;\n            text-decoration: none;\n            font-weight: 500;\n            transition: all 0.3s ease;\n            \/* This is the key attribute *\/\n            target-new: tab;\n        }<\/p>\n<p>        a:hover {\n            color: #6a11cb;\n            text-decoration: underline;\n        }<\/p>\n<p>        .link-demo {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 15px;\n            margin: 25px 0;\n        }<\/p>\n<p>        .link-button {\n            background: linear-gradient(to right, #2575fc, #6a11cb);\n            color: white;\n            padding: 12px 20px;\n            border-radius: 50px;\n            display: inline-block;\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n            text-align: center;\n        }<\/p>\n<p>        .link-button:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 5px 15px rgba(38, 117, 252, 0.4);\n            text-decoration: none;\n        }<\/p>\n<p>        .note {\n            background: #fff9c4;\n            padding: 15px;\n            border-radius: 8px;\n            border-left: 4px solid #ffd600;\n            margin: 20px 0;\n            font-size: 0.95rem;\n        }<\/p>\n<p>        .browser-support {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 15px;\n            margin: 20px 0;\n        }<\/p>\n<p>        .browser {\n            flex: 1;\n            min-width: 200px;\n            background: #f5f5f5;\n            padding: 15px;\n            border-radius: 8px;\n            text-align: center;\n        }<\/p>\n<p>        footer {\n            text-align: center;\n            margin-top: 30px;\n            color: white;\n            font-size: 0.9rem;\n        }<\/p>\n<p>        @media (max-width: 768px) {\n            .container {\n                padding: 20px;\n            }<\/p>\n<p>            h1 {\n                font-size: 2rem;\n            }<\/p>\n<p>            .link-demo {\n                flex-direction: column;\n            }\n        }\n    <\/style>\n<\/p>\n<div class=\"container\">\n<h1>CSS Links Opening in New Tabs<\/h1>\n<div class=\"explanation\">\n<p>This page demonstrates how to use CSS to make all <code>&lt;a&gt;<\/code> tags open in new tabs. While CSS alone cannot fully achieve this functionality, we can use the <code>target-new<\/code> property along with a JavaScript fallback.<\/p>\n<\/div>\n<h2>The CSS Solution<\/h2>\n<div class=\"code-block\">\n<pre><code>\/* CSS property to suggest new tabs (not widely supported yet) *\/\r\na {\r\n    target-new: tab;\r\n}\r\n\r\n\/* JavaScript fallback for full browser compatibility *\/\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const links = document.querySelectorAll('a');\r\n    links.forEach(link =&gt; {\r\n        link.setAttribute('target', '_blank');\r\n        link.setAttribute('rel', 'noopener noreferrer');\r\n    });\r\n});<\/code><\/pre>\n<\/div>\n<div class=\"note\">\n<p><strong>Note:<\/strong> The CSS <code>target-new: tab<\/code> property is not yet widely supported across browsers. For production websites, it&#8217;s recommended to use the JavaScript solution or add the <code>target=\"_blank\"<\/code> attribute directly to your HTML links.<\/p>\n<\/div>\n<h2>Link Demonstration<\/h2>\n<p>Click on any of the links below to test the functionality. They will open in new tabs.<\/p>\n<div class=\"link-demo\"><a class=\"link-button\" href=\"https:\/\/www.google.com\">Google Search<\/a> <a class=\"link-button\" href=\"https:\/\/www.wikipedia.org\">Wikipedia<\/a> <a class=\"link-button\" href=\"https:\/\/github.com\">GitHub<\/a> <a class=\"link-button\" href=\"https:\/\/stackoverflow.com\">Stack Overflow<\/a><\/div>\n<h2>Browser Support<\/h2>\n<p>The CSS <code>target-new<\/code> property has limited browser support:<\/p>\n<div class=\"browser-support\">\n<div class=\"browser\">\n<h3>Chrome<\/h3>\n<p>Not supported<\/p>\n<\/div>\n<div class=\"browser\">\n<h3>Firefox<\/h3>\n<p>Not supported<\/p>\n<\/div>\n<div class=\"browser\">\n<h3>Safari<\/h3>\n<p>Not supported<\/p>\n<\/div>\n<div class=\"browser\">\n<h3>Edge<\/h3>\n<p>Not supported<\/p>\n<\/div>\n<\/div>\n<div class=\"note\">\n<p>For this reason, we&#8217;ve included a JavaScript fallback in this demonstration that automatically adds <code>target=\"_blank\"<\/code> to all links on the page.<\/p>\n<\/div>\n<\/div>\n<footer>\n<p>Created as a demonstration for opening links in new tabs using CSS and JavaScript<\/p>\n<\/footer>\n<p><script>\n        \/\/ JavaScript fallback for browser compatibility\n        document.addEventListener('DOMContentLoaded', function() {\n            const links = document.querySelectorAll('a');\n            links.forEach(link => {\n                \/\/ Don't add target=\"_blank\" to links with same page anchors\n                if (link.hostname === window.location.hostname && link.pathname === window.location.pathname && link.hash) {\n                    return;\n                }\n                link.setAttribute('target', '_blank');\n                link.setAttribute('rel', 'noopener noreferrer');\n            });\n        });\n    <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; CSS Links Opening in New Tabs This page demonstrates how to use CSS to make all &lt;a&gt; tags open in new tabs. While CSS alone cannot fully achieve this functionality, we can use the target-new property along with a JavaScript fallback. The CSS Solution \/* CSS property to suggest new tabs (not widely [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1880","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Links in New Tab Demo - GPTech<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Links in New Tab Demo - GPTech\" \/>\n<meta property=\"og:description\" content=\"&nbsp; &nbsp; CSS Links Opening in New Tabs This page demonstrates how to use CSS to make all &lt;a&gt; tags open in new tabs. While CSS alone cannot fully achieve this functionality, we can use the target-new property along with a JavaScript fallback. The CSS Solution \/* CSS property to suggest new tabs (not widely [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"GPTech\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-17T21:16:40+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/\",\"url\":\"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/\",\"name\":\"Links in New Tab Demo - GPTech\",\"isPartOf\":{\"@id\":\"https:\/\/gptech.biz\/#website\"},\"datePublished\":\"2025-10-17T21:13:39+00:00\",\"dateModified\":\"2025-10-17T21:16:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/gptech.biz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Links in New Tab Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/gptech.biz\/#website\",\"url\":\"https:\/\/gptech.biz\/\",\"name\":\"GPTech\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/gptech.biz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/gptech.biz\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/gptech.biz\/#organization\",\"name\":\"GPTech\",\"url\":\"https:\/\/gptech.biz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/gptech.biz\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/gptech.irefuse2fail.com\/wp-content\/uploads\/2024\/07\/Logo23-1_30pct-e1721510123346.png\",\"contentUrl\":\"https:\/\/gptech.irefuse2fail.com\/wp-content\/uploads\/2024\/07\/Logo23-1_30pct-e1721510123346.png\",\"width\":63,\"height\":98,\"caption\":\"GPTech\"},\"image\":{\"@id\":\"https:\/\/gptech.biz\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Links in New Tab Demo - GPTech","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/","og_locale":"en_US","og_type":"article","og_title":"Links in New Tab Demo - GPTech","og_description":"&nbsp; &nbsp; CSS Links Opening in New Tabs This page demonstrates how to use CSS to make all &lt;a&gt; tags open in new tabs. While CSS alone cannot fully achieve this functionality, we can use the target-new property along with a JavaScript fallback. The CSS Solution \/* CSS property to suggest new tabs (not widely [&hellip;]","og_url":"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/","og_site_name":"GPTech","article_modified_time":"2025-10-17T21:16:40+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/","url":"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/","name":"Links in New Tab Demo - GPTech","isPartOf":{"@id":"https:\/\/gptech.biz\/#website"},"datePublished":"2025-10-17T21:13:39+00:00","dateModified":"2025-10-17T21:16:40+00:00","breadcrumb":{"@id":"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/gptech.biz\/index.php\/links-in-new-tab-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gptech.biz\/"},{"@type":"ListItem","position":2,"name":"Links in New Tab Demo"}]},{"@type":"WebSite","@id":"https:\/\/gptech.biz\/#website","url":"https:\/\/gptech.biz\/","name":"GPTech","description":"","publisher":{"@id":"https:\/\/gptech.biz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gptech.biz\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/gptech.biz\/#organization","name":"GPTech","url":"https:\/\/gptech.biz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/gptech.biz\/#\/schema\/logo\/image\/","url":"https:\/\/gptech.irefuse2fail.com\/wp-content\/uploads\/2024\/07\/Logo23-1_30pct-e1721510123346.png","contentUrl":"https:\/\/gptech.irefuse2fail.com\/wp-content\/uploads\/2024\/07\/Logo23-1_30pct-e1721510123346.png","width":63,"height":98,"caption":"GPTech"},"image":{"@id":"https:\/\/gptech.biz\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/gptech.biz\/index.php\/wp-json\/wp\/v2\/pages\/1880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gptech.biz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gptech.biz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gptech.biz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gptech.biz\/index.php\/wp-json\/wp\/v2\/comments?post=1880"}],"version-history":[{"count":3,"href":"https:\/\/gptech.biz\/index.php\/wp-json\/wp\/v2\/pages\/1880\/revisions"}],"predecessor-version":[{"id":1884,"href":"https:\/\/gptech.biz\/index.php\/wp-json\/wp\/v2\/pages\/1880\/revisions\/1884"}],"wp:attachment":[{"href":"https:\/\/gptech.biz\/index.php\/wp-json\/wp\/v2\/media?parent=1880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}