CSS Links Opening in New Tabs

This page demonstrates how to use CSS to make all <a> 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 supported yet) */
a {
    target-new: tab;
}

/* JavaScript fallback for full browser compatibility */
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a');
    links.forEach(link => {
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener noreferrer');
    });
});

Note: The CSS target-new: tab property is not yet widely supported across browsers. For production websites, it’s recommended to use the JavaScript solution or add the target="_blank" attribute directly to your HTML links.

Link Demonstration

Click on any of the links below to test the functionality. They will open in new tabs.

Google Search Wikipedia GitHub Stack Overflow

Browser Support

The CSS target-new property has limited browser support:

Chrome

Not supported

Firefox

Not supported

Safari

Not supported

Edge

Not supported

For this reason, we’ve included a JavaScript fallback in this demonstration that automatically adds target="_blank" to all links on the page.