Использовать target = "_ blank" в css

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

Ответ 1

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

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

Ответ 2

Как указано в 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>

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

Ответ 3

Есть несколько способов, которыми 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 в селекторах.

Ответ 4

Другой способ использования target="_blank":

onclick="this.target='_blank'"

Пример:

<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>

Ответ 5

Это на самом деле 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].target = "_blank";
}

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

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

Ответ 6

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

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

sed -i 's|href="#" onclick="location.href='http|target='; return false;"_blank" href="#" onclick="location.href='http|g' index.html

Он добавит target='; return false;"_blank" ко всем внешним гиперссылкам. Возможны также варианты.

ИЗМЕНИТЬ

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