Target blank css: When to use target=»_blank» | CSS-Tricks

Я искал напрасно, и мне нужно получить какой-то связанный текст и добавить к нему target=_blank. Я не могу использовать js, так как это для информационного бюллетеня. Связанный текст может быть…

каждый день я добавляю около 50 ссылок + на страницу интрасети, есть ли простой способ добавить атрибут _blank-используя CSS вместо того, чтобы применять его к EVERY.SINGLE ссылке, которую я…

Страница имеет изображение с гиперссылкой, и эта гиперссылка имеет target=_blank, и каждый раз, когда я нажимаю это изображение, загружается новое firefox, и эта гиперссылка перенаправляется на этот.

Мне нужна помощь, чтобы создать сценарий jquery 🙂 У меня есть такая ссылка на моем HTML. <a href=http://google.com>Google</a> <a href=/>Home</a> <a…

Есть ли альтернатива target=_blank в CSS? я хочу target=_blank , используя CSS.. если это возможно, пожалуйста, помогите мне….

У меня есть переменная, которая содержит следующий текст в PhP: $description = Flash <a href=\http://www.aaa.com/\>this coupon</a> <br > <a href=http://www.ggg.com/>Visit…

Я слушаю url нагрузку от моего UIWebView. Есть ли способ проверить, имеет ли запрос цель _blank?: — (BOOL) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request.

Я обновляю некоторый код jQuery, и мне нужно добавить target=_blank к ссылкам в приведенном ниже коде. К сожалению, я не настолько увлекаюсь jQuery и сам не написал оригинальный код. Заранее спасибо…

Я надеюсь, что все делают отлично, мне нужна помощь, как я могу добавить целевой пробел к определенному коду это код: if( !empty($social_fb) ){ $result .= ‘<a…

Я пытаюсь добавить target _blank с сохранением заголовка ссылки? <a href=https://www.w3schools.com/html/ title=Go to W3Schools HTML section>Visit our HTML Tutorial</a>

Откуда у target=”_blank” нижнее подчеркивание | by Liudmila Mzhachikh

Задавались когда-нибудь вопросом, почему все атрибуты как атрибуты, а у атрибута ссылки target значение с нижним подчеркиванием? 🤔

<a href="#" target="_blank">Я откроюсь в новом окне<a/>

Согласно спеке, у атрибута target есть 5 возможных значений (да, не только _blank):

🔗_blank — загружает страницу в новое окно браузера

🔗_self — загружает страницу в текущее окно

🔗_parent — загружает страницу во фрейм-родитель

🔗_top — отменяет все фреймы и загружает страницу в полном окне браузера

🔗{framename} — открывает документ во фрейме по имени {framename}

Наверняка, вы никогда и не использовали ничего, кроме _blank, и это не удивительно.

Зачем же тогда все остальные?

Этот вопрос уходит корнями в историю. В незапамятные времена, когда ajax-а не было и в помине, страницы часто делили на множество окошек с помощью тега <frameset>. Например, одно окошко служило навигацией, а другое — контентом. Получалось некое подобие обновления без перезагрузки страницы.

И нужно было как-то указывать браузеру, в каком фрейме показывать ответ. За это и отвечал атрибут target.

А что происходит, когда мы пишем blank без нижнего подчеркивания? Почему ссылка все равно открывается в новом окне?

А происходит вот что. Браузер видит blank и думает, что это имя фрейма. Он пытается открыть документ во фрейме с name=blank, и, не находя такого, открывает его в новом окне и дает ему такое имя.

Поэтому если вы кликнете по такой ссылке второй раз, то новое окно не откроется. В отличие от _blank, который при каждом нажатии откроет новое окно.

Можно ли писать blank без нижнего подчеркивания? В целом, да, но это не по стандарту (соотвественно, поведение будет как для фрейма).

Будут ли обновлять стандарт, раз frameset-ы давно канули в лету?

Скорее всего нет, т.к. до сих пор существуют сайты с фреймами. Обновление стандарта без обратной совместимости поломает эти сайты.

Ссылки:

:target — CSS | MDN

:target {
  border: 2px solid black;
}

Для примера, следующий URL имеет фрагмент (обозначается знаком #), который указывает на элемент с именем section2:

http://www.example.com/index.html#section2

Следующий элемент будет выбран селектором :target, если текущий URL равен вышеуказанному:

<section>Example</section>

Таблица контента

Псевдокласс :target может использоваться для выделения части страницы, на которую была сделана ссылка из оглавления .

HTML

<h4>Table of Contents</h4>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h4>My Fun Article</h4>
<p>You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p>This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>
 

CSS

p:target {
  background-color: gold;
}


p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}


p:target i {
  color: red;
}

Результат

Pure-CSS lightbox

Вы можете использовать псевдокласс :target для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их  display на видимый.

HTML

<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

<div>
  <figure>
    <a href="#"></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
  </figure>
</div>

<div>
  <figure>
    <a href="#"></a>
    <figcaption>Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna. </figcaption>
  </figure>
</div>

CSS

.lightbox {
  display: none;
}


.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}


.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}


.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}

Результат

BCD tables only load in the browser

Target в CSS.

Символ подчёркивания

Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank» , то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ и разместите на нем код следующей ссылки:

ltconsulting.co.uk

ltconsulting.co.uk/contact-us

Это связано со значением framename , которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “blank ” интерпретируется как значение типа framename . В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “blank ”.

Чтобы избежать этой проблемы, для ключевых слов значений было добавлено нижнее подчеркивание. Вот откуда взялось _blank .

Данная публикация представляет собой перевод статьи «TARGET=“_BLANK” AND THE TARGET VALUES OF THE » , подготовленной дружной командой проекта

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

Но для того, чтобы правильно создавать гиперссылки и вставлять их в код вебстраниц (например, своего сайта), необходимо изучить соответствующую область языка гипертекстовой разметки (), поскольку эти элементы образуются с помощью HTML-тега a, который имеет , позволяющие модернизировать ссылку до нужного вида.

Итак, сегодня мы разберем, из каких частей состоит гиперссылка, каким образом использование атрибута target blank дает возможность открывать страницу в новом окне (вкладке), как любую картинку делать ссылкой и много других важных подробностей. Кроме всего прочего, эта информация продвинет вас в изучении языка HTML.

Что такое гиперссылка и можно ли ее называть ссылкой?

Отвечая на вопрос, заданный в заголовке, скажу, что термин «ссылка» имеет более широкий смысловой спектр (ссылка в Сибирь, банковская для идентификации плательщика, текстовая в книге и т.д.), включая и значение, заложенное в понятие «гиперссылка», которое связано только с гипертекстом, дающим возможность нелинейного восприятия информации.

Таким образом, гиперссылка это частный случай ссылки , поэтому вполне возможно употреблять их в сегодняшней темы на равных основаниях. Этим я и воспользуюсь в своих «шкурных интересах» в ходе сегодняшней публикации, применяя оба этих термина, чтобы избежать излишнего спама ключевых слов.

Но существуют еще и невидимые служебные, создаваемые при помощи и находящиеся в пределах , в задачу которых входит подача многочисленных сигналов и команд браузерам для выполнения той или иной функции.

Например, с помощью служебных гиперссылок возможно отображение иконки . Их можно увидеть только в составе HTML-кода (для этого нажмите для любой открытой в браузере страницы):

Сейчас пока оставим в покое служебные линки и рассмотрим общую закономерность создания гиперссылок. Общее заключается в том, что все они имеют обязательный атрибут href , в качестве значения которого указывается адрес документа (). Ссылка HTML может вести как на внутреннюю страницу сайта, так и на внешний документ.

Еще одно важное замечание. Применение атрибута href делает гиперссылки кликабельными, то есть дает возможность пользователям в результате клика по ним автоматически переходить на соответствующую страницу веб-сайта.

Как сделать гиперссылку в HTML с помощью href

Итак, мы уже знаем, что для создания ссылки необходим в обязательном порядке тег a и атрибут href, параметрами которого могут быть URL различного вида. Поскольку a это , то между открывающим и закрывающим расположено содержание, которое и будет отображаться на web-странице.

Это содержимое называется анкором и может быть представлено в виде текста или изображения (о том, как сделать картинку ссылкой, поговорим подробнее ниже). Как я уже отмечал, анкор будет кликабельным. Рассмотрим пример гиперссылки с текстовым содержанием. Вот как будет выглядеть ее конструкция в HTML-коде:

немного об анкорах

Помимо HTTP может быть использован защищенный протокол HTTPS. Линк не обязательно должен вести на вебстраницу. Все зависит от значения href, в качестве которого может быть указан путь до какого нибудь файлика:

//сайт/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

скачать

На вебстранице данный линк примет такое обличье:

Браузер «понимает», что объект с расширением.zip может быть предназначен только для скачивания, что и предлагает сделать юзеру.

Кстати, путь до любого файла иногда указывается через ФТП (). Тогда в URL адресе, который применяется в качестве параметра атрибута href, следует просто заменить протокол HTTP (HTTPS) на FTP. Ссылка на файл будет выглядеть следующим образом:

скачать с сервера

Но и это не все. Подобным образом создается ссылка на электронную почту с использованием псевдо-протокола mailto для быстрого доступа к средству написания письма:

пишите письма

После нажатия на подобную ссылку должно появиться окно установленного по умолчанию почтового клиента, в котором можете составить текст сообщения и отправить его по уже указанному адресу, взятому, как вы, наверное, догадались, из href.

На практике гиперссылки на почту очень часто ранее использовались вебмастерами и владельцами крупных ресурсов для обеспечения удобства пользователей и клиентов, которые могут в один клик получить доступ к форме почтовой связи.

Но этот вид коммуникации на веб-ресурсах сейчас уже не столь популярен (тем более, что можно установить, например, ), потому как открытые таким образом почтовые адреса активно перехватывается с помощью софта и используются разного рода спамерами.

Я привел в пример только самые распространенные протоколы, входящие в состав URL, который, в свою очередь, является параметром атрибута href при формировании гиперссылки. Кроме HTTP (HTTPS), FTP и mailto существуют и другие для решения задач более узкого профиля. Возможно, мы их рассмотрим поподробнее в других публикациях.

Виды гиперссылок

А теперь попробуем классифицировать линки по тем или иным признакам.

По области их действия:

1. Внешние — ведут на страницы, располагающиеся вне сайта, на котором они проставлены;

2. Внутренние — связывают вебстраницы, находящиеся в пределах одного веб-ресурса.

По формату:

2. Графически е — в этом случае анкором гиперссылки является изображение (в том числе миниатюра), баннер, кнопка и т.п.

По типу URL, выступающего в качестве значения атрибута href:

1. Абсолютные , которые содержат явное указание протокола передачи данных (например, HTTP) и доменное имя сайта (в все о доменах).

Такие линки чаще используют, когда ссылаются на страницы внешних ресурсов. В этом случае значение href будет включать в себя полный путь до нужного файла либо вебстраницы. Вот пример абсолютной гиперссылки:

Контекст — что это такое

2. Относительные , одним из вариантов создания которых будет путь, указанный относительно корневой папки веб-сайта (отсюда и название этого вида гиперссылок). При этом из URL адреса будет изъят протокол (HTTP) и домен сайта:

Контекст — что это такое

Относительные гиперссылки на web-странице могут обеспечить переходы на внутренние странички. В таком виде они короче, что облегчает HTML-код. Конечно, все не так просто, и требует более широкого освещения, в чем вы сможете убедиться, ежели перейдете по предоставленной ссылке.

Атрибуты тега a

Теперь посмотрим, какие еще атрибуты, кроме обязательного href, существуют, и как они могут повлиять на создание гиперссылки. Наиболее полные данные в этом отношении, так сказать, «из первых рук» вы можете найти на официальном сайте Международного Консорциума W3C, на котором актуальная информация появляется быстрее всего.

Они являются полностью идентичными и инициируют открытие веб-страницы в текущей вкладке. Если же вы хотите, чтобы странички открывались в новой вкладке при переходе по ссылкам, то следует добавить при формировании линка атрибут target с параметром blank :

Контекст — что это такое

Хотя некоторые вебмастера и сеошники считают, что лучше, если посетителю дать возможность выбора (то есть не прописывать target blank), ведь при необходимости в новой вкладке страницу можно открыть и с помощью контекстного меню (подвести курсор к линку, щелкнуть правой кнопкой мышки и нажать на соответствующий пункт):

Причем, как видите, в этом случае у юзера преимущество в том, что есть возможность открыть вебстраницу не только в новой вкладке, но и в новом окне (такой вариант нельзя реализовать посредством HTML, только с помощью скриптов).

Но я считаю, что не все начинающие пользователи в полной мере знакомы с возможностями и настройками популярных браузеров (). Вполне вероятна ситуация, когда читатель, перейдя по внешней гиперссылке и, потеряв из виду страницу-источник (вместо нее появится документ-реципиент), в сердцах просто закроет вкладку.

Таким образом владелец веб-ресурса вполне может не только потерять перспективного посетителя, но и получить в придачу ухудшение поведенческих факторов (), что повлечет за собой потерю позиций страницы при ранжировании.

Кроме этого, открытие страницы в соседней вкладке очень удобно с точки зрения юзабилити (). Юзер перебирается по гиперссылке на вебстраничку, получает дополнительную информацию и, как ни в чем не бывало, продолжает изучение основного материала.

Для создания объективной картины следует добавить, что применение «target=»_blank»» к любым внешним ссылкам, оказывается, таит в себе некоторую угрозу безопасности. Если кому интересно, то можете почитать , где даны рекомендации по устранению проблем при использовании target blank, а также представлены альтернативные варианты реализации задачи по открытию вебстраницы в новой вкладке.

Вроде бы отметил все плюсы и минусы применения значения blank для открытия гиперссылки в новой вкладке. Ежели вы читаете статьи на моем блоге, то, наверное, уже догадались о моем отношении к этому параметру атрибута target.

На данный момент для меня его плюсы перевешивают минусы, и я являюсь его безусловным сторонником. На основании приведенных фактов у вас может сформироваться свое мнение по этому вопросу. Хотя…с учетом появления новых обстоятельств и оно может измениться.

Как создать хеш-ссылки, якоря и зачем они нужны?

Далее акцентирую ваше внимание на еще одной разновидности гиперлинков, которые могут быть полезны, если материал, расположенный на веб-странице, довольно объемный, и его следует структурировать для улучшения навигации.

За примером далеко ходить не надо, просто взгляните на оглавление данной публикации в самом начале. Видите, там присутствует список разделов статьи? Гиперлинки на эти разделы как раз и являются хеш-ссылками. После нажатия на любую из них браузер прокрутит страницу до того места, где начинается соответствующая часть.

Оформляются подобные линки довольно просто. Для начала нужно создать якорь (anchor) , проставив в необходимом месте страницы соответствующую метку в виде идентификатора ID, являющегося одним из глобальных атрибутов, применяемых к любому HTML-тегу.

Благодаря универсализму ID подобные метки-якоря можно установить практически в любом месте вебстраницы. Поскольку обычно текст разделяется на абзацы, то их можно применить и к . Я в основном проставляю якоря , которыми статьи разделены на логические части:

Атрибут target blank: что это и для чего используется

В этой статье разберем вопрос: что это такое target blank? Таргет бланк — это специальный атрибут HTML-тега <a>, который открывает ссылку, обозначенную этим тегом в новом окне. 

Как вы помните, тегом <а> в HTML обозначаются ссылки. Данный тег используется в разных случаях:

• Список. Например, это может быть список книг и сразу ссылки на их скачивание;

• Меню. Для меню есть собственный тег в HTML, но раньше часто использовался именно тег <а>, да и до сих пор «старые» верстальщики верстают меню при помощи этого тега;

• Кнопки. У кнопок тоже есть собственный тег в HTML, однако в ряде случаев используется именно тег <а>.

Как вы понимаете, иногда важно определить, как будет открываться та или иная ссылка. И в том случае, когда нужно, чтобы ссылка открывалась в новом окне, используют таргет бланк.

«Таргет бланк» и другие значения атрибута target

Если не указывать атрибут «target» в теге <а>, тогда ссылка, указанная тегом, будет открываться на той же странице. Чтобы это сделать как-то по-другому, ввели данный атрибут.

Атрибут «таргет» может принимать следующие значения:

1. _self. Это самое редко используемое значение, которое заставляет открываться ссылку в том же окне. Но такое же свойство у ссылок задано по умолчанию, поэтому данное значение и используется очень редко. Но бывают ситуации, когда для всех ссылок на странице установлено другое значение «по умолчанию», допустим, тот же таргет бланк. А вам на конкретной ссылке нужно, чтобы она открывалась в том же окне.

2. _blank. Как мы уже говорили, данное значение атрибута target в html открывает ссылки в новом окне или новую вкладку в браузере. Оно не предназначено для всплывающих блоков, когда при нажатии на ссылку всплывает рекламный блок на весь/половину/часть экрана. Этим занимаются скрипты JavaScript или свойства CSS. Часто атрибут target _blank используют, когда нужно оставлять ссылки на другие сайты или страницы скачивания файлов. В таком исполнении у пользователя всегда остается открытым ваш сайт в отдельной вкладке, несмотря на то, что он с вашего сайта перешел на другой ресурс по ссылке. И пользователю не придется искать ваш сайт в «истории» переходов.

3. _parent. Это уже устаревшее значение, которое использовалось при открытии ссылок в теге фреймов <frame> или <frameset>, но данные теги не поддерживаются в современной версии HTML. Однако встретить это значение по-прежнему можно — оно открывает ссылку фрейма в родительском фрейме.

4. _top. Данное значение тоже в основном используется во фреймах. Оно загружает фрейм в новой вкладке браузера.

Польза или вред таргет бланк в HTML

Основная польза использования target blank в HTML — это то, что нам только таким образом удастся сохранить своего пользователя. Так как если его не установить, то ссылка, указанная на вашем сайте, откроется в той же вкладке. А представим, что она ведет на интернет-магазин, где пользователь «залипнет» на товарах и просмотрит их несколько десятков. Как вы думаете, найдет ли он потом ваш сайт? Очень низкая вероятность.

В то же время, если у вас на странице много ссылок, где указан таргет бланк, то есть вероятность, что их будет много открыто в разных вкладках браузера. Во-первых, это очень спорный момент, потому что есть мнение, что это снижает юзабилити сайта и очень нервирует пользователей. Поэтому, скорее всего, использование таргет бланк должно быть осмысленное, а не просто накидать это свойство по всем товарам вашего интернет-магазина.

Есть еще один «нехороший» момент этого свойства, касается он безопасности и производительности. Допустим, на вашем сайте размещена ссылка на другой ресурс с атрибутом «таргет бланк». Это приведет к тому, что ваш и еще сторонний ресурс будут открыты одновременно. При этом специфика работы браузера будет такая:

1. Открытая новая вкладка/страница влияет на работоспособность страницы-родителя. Из этого получается, что если открытая страница будет «подвисать», то «подвиснет» и ваш ресурс.

2. Открытая страница приобретает небольшой контроль над страницей родителя. А это угрожает защищенности ваших пользователей.

Чтобы разорвать связь открытой страницы и вашей страницы родителя, нужно использовать еще один атрибут: rel= «noopener», можно в дополнении со свойством «nofollow», которое не передаст «вес» вашего сайта стороннему ресурсу.

В общем, любое свойство, в том числе и таргет бланк, требует обдуманного применения, чтобы соблюсти баланс между практичностью, юзабилити и безопасностью. Только так получится создать идеальный веб-ресурс.

Когда использовать target = «_ blank» | CSS-уловки

Якорные ссылки ¹ может иметь атрибут target , который определяет, что происходит при нажатии на эту ссылку. Одно из возможных значений этого атрибута — _blank , что указывает браузеру открывать новое окно (или вкладку, если это предпочтение пользователя) при нажатии этой ссылки.

Раньше это было «недействительным» в HTML (может быть, только XHTML?), Но люди все равно использовали его, поскольку он работал. Теперь это прекрасно работает в HTML5.Но есть ли для этого веские причины?

Плохая причина: потому что тебе это нравится.

Нравится вам это или нет, target = "_ blank" — это изменение поведения по умолчанию. Ссылки, открывающиеся на одной странице, являются поведением по умолчанию (как если бы на ссылке было target = "_ self" ).

Возможно, у вас появился личный вкус открывать все ссылки в новых окнах / вкладках. Это замечательно для вас, но можно с уверенностью предположить, что большинству пользователей больше всего подходит поведение по умолчанию.И поэтому менее комфортно с вашим принуждением к другому поведению.

Если это внутренний инструмент только для вас, делайте все, что хотите. Если другие люди используют сайт, оставьте его.

Также стоит отметить, что пользователи могут принудительно открыть ссылку в новом окне / вкладке, щелкнув ссылку [Meta Key]. Это означает, что для ссылок им доступны оба поведения. Это также означает, что если вам, , нравится открывать новые вкладки, то вам, , можно, и вам не нужно передавать это поведение кому-либо еще.

При использовании target = "_ blank" доступно только такое поведение.

Плохая причина: просто потому, что вы хотите, чтобы пользователи никогда не покидали вашу страницу.

Брендинг, брендинг, брендинг! Глазные яблоки младенца. Метрики. ПОМОЛВКА.

Другие сайты должны иметь ссылки в обычном стиле, но наш сайт особенный. Наш сайт важнее, и его нельзя оставлять позади.

Плохая причина: «Внутренние» ссылки и «Внешние» ссылки отличаются.

У нас будут «внутренние» ссылки (ссылки, которые указывают на наш собственный сайт) будут вести себя нормально, но «внешние» ссылки (ссылки, которые указывают на другие сайты) открываются в новом окне / вкладке.

Это связано с двумя вышеупомянутыми причинами, только, возможно, хуже. Вы понимаете, что ссылки обычного стиля идеальны, но если это означает, что пользователь покидает ваш сайт, вы готовы нарушить этот идеал.

Я слышал от многих, людей, что это «конвенция». Как и в так и должно быть . Это не.

Плохая причина: ссылка на PDF-файл

Или любой другой тип не веб-ресурса. Почему это должно быть так иначе? Вы все еще можете использовать кнопку «Назад», чтобы вернуться из нее.Если вы хотите помочь пользователям загрузить его, не открывая его, это достойная цель UX, но к ней можно подойти по-другому. Для начала, с помощью атрибута загрузить .

Плохая причина: мой клиент этого хочет

Я получаю сообщение «Я не хочу начинать этот бой», так как у нас мало энергии. Но странно, что это вообще должна быть драка. Если они не доверяют вам это, в чем они вам доверяют?

Я мог бы подойти к нему так:

По умолчанию ссылки открываются нормально.Есть несколько причин, по которым мы можем захотеть избавиться от этого поведения, и мы можем перейти к ним, но для большинства ссылок мы этого не делаем. Мы не хотим навязывать свои желания пользователям и потенциально расстраивать их из-за такой мелочи. Мы хотим, чтобы наши пользователи были довольны нами.

И, надеюсь, ваш спокойный и образованный подход поможет вашему клиенту чувствовать себя хорошо по поводу и .

Плохая причина: это страница с бесконечной прокруткой.

Бесконечная прокрутка — это сложно. Это может быть хороший UX в одном смысле, потому что он может доставлять контент без перебоев.Это может быть плохим UX, если с ним не справиться. Возвращение к странице с бесконечной прокруткой в ​​большинстве случаев должно привести вас к тому месту, где вы остановились. Решение этой сложной проблемы — ваша работа. Просто заставить ссылки открываться в новых вкладках, чтобы проблема никогда не возникала, — значит уклоняться от работы.

Хорошая причина: проигрывание медиафайлов инициировано пользователем.

Например: музыка, видео, подкаст…

Это пользователь запустил. Перемещение страниц остановит это. На этом этапе либо открывайте ссылки на новых вкладках, либо спросите их, уверены ли они, что хотят покинуть страницу.В этот момент вы пытаетесь поступить с ними правильно и не дать им покинуть свое место.

Мы уже обсуждали эту идею здесь. Если медиа воспроизводится, обрабатывайте ссылки особым образом. Когда медиа не воспроизводится, ссылки находятся в обычном состоянии.

Хотя, когда я это говорю, я проверяю YouTube, и они вас не пугают ² при смене видео.

Хорошая причина: пользователь работает над чем-то на странице, что может быть потеряно, если текущая страница изменится.

Возможно, пользователь что-то пишет. Или что-то устроить. Выполняю любую работу. Нажатие на ссылку и смена страниц могут быть душераздирающим и ужасным моментом в сети. Я просто потерял все, что делал?

Даже если вы сделаете что-то, чтобы они не потеряли эту работу, можно также избежать паники.

Я думаю о CodePen, где пользователи часто пишут код. Мы делаем несколько вещей, чтобы помочь:

• Ссылки, ведущие на другие страницы, явно являющиеся ссылками в стиле «узнать больше» (например,грамм. [?]), который вы видите только при взаимодействии с редактором, откройте в новой вкладке.
• Обычные ссылки (например, ссылки в нижнем колонтитуле) работают нормально, но мы определяем, есть ли у вас несохраненные изменения в редакторе, и предлагаем вам сохранить их перед выходом.
• Если вы перейдете на другой сайт (или у вас произойдет сбой в работе браузера), мы сохраним состояние редакторов в localStorage, чтобы вы не потеряли работу.

Касса — еще один случай. Конечно, вы не хотите терять клиентов во время оформления заказа.Ссылка на что-то вроде «информации о доставке» должна быть открыта, чтобы они не теряли свое место при оформлении заказа.

«Чтение статьи», на мой взгляд, здесь не подходит. Поскольку (как правило) так легко вернуться обратно (большинство браузеров даже прокручивают страницу вниз до того места, где вы были), нет никакого риска реальных потерь, и читатели в любом случае действительно скиммеры.

Хорошая причина: какой-то технологически непонятный момент

Я создаю электронное письмо, в котором люди в Outlook Kangaroo 2009 Enterprise Edition должны его открыть, но ссылки должны иметь target = "blank" , в противном случае они открываются на боковой панели просмотра и…

Отлично.

Техника

В случае необходимости…

Заставляет пользователя подтвердить, что он хочет покинуть страницу:

  window.onbeforeunload = function () {
  return "Под этим сообщением будут две кнопки, спрашивающие, хочет ли пользователь остаться на этой странице или уйти.";
}  

Правильный HTML

Если вы собираетесь это сделать, вам понадобится не только атрибут target для функциональности, но и атрибут rel для безопасности.

   Ссылка открывается в новой вкладке   

Подробнее о проблеме безопасности.

Драма

Я понимаю, что был здесь довольно самоуверенным. Это одна из тех тем, о которых у всех есть свое мнение. Не стесняйтесь делиться этим мнением, конечно, но давайте оставим все в покое и сосредоточимся на ситуациях, решениях и данных, если сможем.

¹