Используйте target="_blank" в css

У меня есть внешние ссылки в верхнем меню моего сайта. Я хочу открыть эти ссылки в новой вкладке. Я мог бы добиться этого, используя "target=_blank" в HTML. Есть ли подобное свойство CSS или что-то еще?

Источник

6 ответов

Решение

К сожалению нет. В 2013 году нет способа сделать это с помощью чистого CSS.

Обновление: спасибо showdev за showdev на устаревшую спецификацию CSS3 Hyperlinks, и да, ни один браузер не реализовал ее. Таким образом, ответ остается в силе.

Источник

Как упоминалось в c69, нет способа сделать это с помощью чистого CSS.

но вы можете использовать вместо этого HTML:

использование

<head>
    <base target="_blank">
</head>

в вашем HTML <head> тег для создания ссылок на все страницы, которые не включают target атрибут, который будет открыт в новом пустом окне по умолчанию. в противном случае вы можете установить целевой атрибут для каждой ссылки следующим образом:

    <a href="/yourlink.html" target="_blank">test-link</a>

и это переопределит

<head>
    <base target="_blank">
</head>

тег, если он был определен ранее.

Источник

CSS может "нацеливать" навигацию несколькими способами. Это будет стилизовать внутренние и внешние ссылки, используя стили атрибутов, которые могут помочь посетителям понять, что будут делать ваши ссылки.

a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }

Вы также можете настроить таргетинг на традиционный встроенный HTML 'target=_blank'.

a[target=_blank] { font-weight: bold; }

Также: селектор цели для стилизации блока навигации и элементов цели.

nav { display: none; }
nav:target { display: block; }

CSS: поддерживается целевой селектор псевдокласса - caniuse, w3schools, MDN.

a[href="http"] { target: new; target-name: new; target-new: tab; }

CSS / CSS3 свойство target-new и т. Д., Не поддерживается ни одним из основных браузеров, август 2017 года, хотя оно является частью спецификации W3 с февраля 2004 года.

"Модальная" конструкция W3Schools, использует псевдокласс "target", который может содержать навигацию WP. Вы также можете добавить HTML rel = "noreferrer и noopener рядом с target =" _ blank ", чтобы улучшить производительность новой вкладки. CSS пока не будет открывать ссылки на вкладках, но на этой странице объясняется, как это сделать с jQuery (совместимость может зависеть от WP-кодеры). MDN имеет хороший обзор на Использование псевдокласса: target в селекторах.

Источник

Еще один способ использования target="_blank" является:

onclick="this.target='_blank'"

Пример:

<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>
Источник

Это на самом деле javascript, но связанный / релевантный, потому что.querySelectorAll предназначается для синтаксиса CSS:

var i_will_target_self = document.querySelectorAll("ul.menu li a#example")

этот пример использует css для нацеливания ссылок в меню с id = "example"

это создает переменную, которая представляет собой набор элементов, которые мы хотим изменить, но мы все еще должны изменить их, установив новую цель ("_blank"):

for (var i = 0; i < 5; i++) {
i_will_target_self[i].style.target = "_blank";
}

Этот код предполагает наличие 5 или менее элементов. Это можно легко изменить, изменив фразу "я < 5".

читайте больше здесь: http://xahlee.info/js/js_get_elements.html

Источник

В ожидании принятия таргетинга CSS3...

В ожидании принятия CSS3-таргетинга основными браузерами можно запустить следующее sed команда, как только (X)HTML был создан:

sed -i 's|href="http|target="_blank" href="http|g' index.html

Это добавит target="_blank" на все внешние гиперссылки. Вариации тоже возможны.

РЕДАКТИРОВАТЬ

Я использую это в конце makefile который генерирует каждую веб-страницу на моем сайте.

Источник
Другие вопросы по тегам