Открываем ссылки в новой вкладке браузера. Чем плох?
Довольно часто встречается такая практика, когда при клике на ссылку переход на целевую страницу осуществляется в новой вкладке браузера. Таким приемом очень часто пользуются при указании разработчика веб-ресурса или ответа на запрос в поисковой системе. Этот прием осуществляется благодаря использованию атрибута target тега a. Ниже представлен пример кода:
a href="#" target="_blank">Ссылка, открывающаяся в новой вкладкеa> В сложившемся понимании современной грамотной верстки и взаимодействия пользователя с функционалом ресурса принято считать, что посетитель должен сам определять для себя, каким именно способом он будет переходить по ссылке. Этого же мнения поддерживаются опытные и известные веб-разработчики. Также использование данного атрибута нарушает работу кнопки браузера «Назад» — это тоже считается негативным эффектом атрибута. Перечисленные факторы могут вызвать негодования посетителя сайта.
Некоторые поясняют использование атрибута target тем, что при его использовании, даже если пользователь нашел то, что искал на другом ресурсе (на который отправляла ссылка), после закрытия новооткрытой вкладки он опять вернется на предыдущий сайт. Это, якобы, повышает вероятность конвертации случайного посетителя в постоянного пользователя. Это утверждение ошибочно! Завоевать постоянное внимание пользователя можно только интересным и качественным контентом. Зря информация считается одним из наиболее ценных ресурсов.
Кроме всего прочего, согласно спецификации XHTML 1.0 Strict, использование атрибута target является недопустимым. В противном случае код не будет считаться валидным. А сам валидатор выдаст вот такое сообщение
Открытие ссылки в новой вкладке через JavaScript
Как было упомянуто ранее, использование атрибута target для перехода по ссылке в новом окне браузера не соответствует спецификациям и не считается валидным решением задачи. Однако это не единственный способ решения поставленной задачи. Аналогичный эффект можно получить при использовании js-кода.
Принцип организации такого процесса основывается на событии onclick. В значении этого события будет написана функция для открытия новой вкладки браузера — window.open(), а также блокиратор, который отменит переход на нужный адрес в текущем окне — return false. В коде все эти действия будут выглядеть следующим образом:
a href="#" onclick="window.open(this.href); return false">Ссылка, открывающаяся в новой вкладке a> Чтобы удостовериться в эффективности работы предложенного метода, можете кликнуть на эту ссылку, она откроется в новом окне.
После того, как убедились в действенности метода, проводим проверку валидность кода. Валидатор выдает зеленое сообщение, что говорит о безупречности нашего кода.
На первый взгляд мы добились рационального решения поставленной задачи, однако при детальной проверке работы метода выяснилось, что если в браузере установлена блокировка всплывающих окон, то метод перестанет работать. Вместо перехода по ссылке появится сообщение о блокировке всплывающего окна.
Модификация js-кода для удачного перехода при любых условиях
Вышеупомянутая функция предназначена для избавления пользователя от излишков рекламы в сети Интернет. Все современные браузеры в своем арсенале имеют такую способность, кроме того некоторые из них могут осуществлять блокировку на разных уровнях. К примеру, все версии Opera, начиная с 9-ой, имеют возможность блокировать только отмеченные окна или все подряд.
Хоть пользователей, устанавливающих блокировку всплывающих окон в своем браузере, наверняка, очень мало, но они все же есть. А мы должны учитывать все возможные варианты для нормального функционирования сайта. Напоминаю, при наличии блока ссылка на нашем js-коде перестанет работать.
Тогда какой же выбор делать: либо не валидный код, либо не всегда рабочие ссылки? И тот, и тот вариант нам не подходит. Альтернативное решение пришло при тестировании ссылки с атрибутом target и включенной блокировкой всплывающих окон. В заданных условиях ссылка открылась, но только в своем окне. Значит нам нужно модифицировать наш js-код таким образом, чтобы при блокировке ссылка работала в текущем окне. Реализуется это следующим образом:
a href="#" onclick="return !window.open(this.href)"> Ссылка, открывающаяся в новой вкладке a> Принцип работы метода практически не изменился, поменялась форма трактовки действий. В новом коде функция window.open() отрабатывает значение true, если блокировка не установлена, если же она присутствует, то функция отрабатывает значение false. Говоря на русском языке, при установке соответствующих настроек в браузере ссылка будет открываться в текущей сессии, в противном случае — в новой вкладке.
Проверка модифицированного решения для ссылки на главную блога.
Выводы
Исходя из представленной выше информации можно сделать вывод, что наиболее рациональный способ для принудительного открытия ссылок в новых вкладках является использование последнего метода, основывающегося на коде JavaScript.
Однако в тоже время следует применять подобные вещи оккуратно, так как это навязывает определенные действия пользователю и ограничивает его свободу принятия решений. Это считается дурным тоном.
Атрибуты ссылок
Атрибут download позволяет скачать файл по ссылке вместо его открытия в браузере. Это иногда полезно для типовых файлов браузера — изображений, текстовых файлов, HTML-документов, PDF. В примере 1 показаны две ссылки на одно и то же изображение. При этом обычная ссылка просто открывает картинку в браузере, а вторая, с атрибутом download , выводит окно для сохранения файла на жёстком диске компьютера.
Пример 1. Использование download
Результат данного примера при щелчке по ссылке для скачивания зависит от настроек браузера (рис. 1). Если установлена галочка «Всегда выдавать запрос на сохранение файлов», то при щелчке откроется окно для указания места сохранения. Если эта галочка не стоит, то файл будет сохранён автоматически в указанную папку.
Рис. 1. Настройки браузера для сохранения файлов
Ссылка с атрибутом download по внешнему виду никак не отличается от рядовых ссылок, поэтому, чтобы как-то обозначить ссылку для скачивания, к ней можно добавить одиночный символ или текст. Для этого мы воспользуемся селектором a[download] , который будет задавать стиль всех элементов с атрибутом download . Сам вывод текста делается с помощью комбинации псевдоэлемента ::before (выводит до ссылки) или ::after (выводит после ссылки) и свойства content (пример 2).
Пример 2. Стилизация ссылок с download
Различные иконки для своих задач можно взять на сайте utf8icons.com. Достаточно найти подходящий символ, скопировать и вставить его как обычный текст в значение свойства content .
Вместо текста можно использовать и картинку в любом подходящем формате. Свойство content позволяет задать адрес изображения через функцию url() . В примере 3 показано как вставить картинку после текста ссылки.
Пример 3. Добавление картинки после текста
Результат данного примера показан на рис. 2.
Рис. 2. Иконка возле ссылки для скачивания
Бесплатно картинки в формате SVG можно взять с сайта svgrepo.com.
У этого метода есть существенный минус — картинка показывается исходного размера и её нельзя масштабировать через CSS. Чтобы обойти это ограничение, будем выводить картинку как фоновую через свойство background-image, а масштабировать её через background-size (пример 4).
Пример 4. Вывод картинки через фон
Псевдоэлементу, созданному через ::after, задаём фиксированные размеры через свойства width и height. Ширина и высота элемента не применяется к строчному элементу, которым здесь является псевдоэлемент, поэтому мы добавляем свойство display со значением inline-block . Сама картинка выводится как фон через свойство background-image, а масштабируется этот фон через background-size. Итоговый результат показан на рис. 3.
Рис. 3. Фоновая картинка идёт после ссылки для скачивания
target
Атрибут target позволяет открывать ссылку в новой вкладке браузера или в конкретном фрейме (он создаётся через ).
Открытие ссылки в новой вкладке
По умолчанию любая ссылка открывается в текущей вкладке, но если к элементу добавить атрибут target со значением _blank , то ссылка откроется в новой вкладке:
_blank (именно так, с подчёркиванием впереди) — это зарезервированное значение для открытия новой вкладки браузера. Каждая ссылка с _blank откроет свою отдельную вкладку. К примеру, если открыть 10 таких ссылок, то браузер создаст 10 вкладок и в каждую из них загрузит свою веб-страницу. Опять же, атрибут target не влияет на внешний вид ссылки, поэтому догадаться, как она будет открыта — в текущей или в новой вкладке, можно только по поведению. Чтобы различать ссылки с target и без, воспользуемся селектором a[target=_blank] , который задаёт стиль ссылок с атрибутом target и значением _blank .
Давайте для разнообразия выведем картинку перед ссылкой через библиотеку иконок Font Awesome.
Сперва подключаем стилевой файл со всеми иконками библиотеки через .
Выбираем на сайте fontawesome.com/icons/ подходящую бесплатную иконку для наших задач и щёлкаем по ней. В открывшейся панели нас интересует код иконки, он показывается рядом со словом Unicode (рис. 4).
Рис. 4. Код иконки Font Awesome
Копируем код и вставляем его как значение свойства content.
Заметьте, что перед кодом иконки ставится косая черта, она показывает что это не просто такой текст, а символ Юникода. Полный код приведён в примере 5.
Пример 5. Стилизация ссылки с target через Font Awesome
Для разнообразия добавляем картинку не после, как это делали раньше, а перед ссылкой через псевдоэлемент ::before (рис. 5).
Рис. 5. Фоновая картинка перед ссылкой в новой вкладке
Открытие ссылки во фрейме
Вместо значения _blank можно указать имя фрейма, заданного атрибутом name элемента . Такие ссылки будут открываться в указанном фрейме, а не в текущей вкладке (пример 6).
Пример 6. Открытие ссылки во фрейме
Чебурашка
Крокодил Гена
Шапокляк
Если совершить ошибку и указать несуществующее имя фрейма, то браузер откроет ссылку в новой вкладке. Однако эта вкладка будет именованной и все ссылки с одним значением target будут открываться уже в ней. В примере 7 в качестве значения target используется blank (без подчёркивания, заметьте). Поскольку фрейма с таким именем в коде нет, то все ссылки будут открываться в одной и той же новой вкладке.
Пример 7. Открытие ссылки в именованной вкладки
hreflang
Атрибут hreflang содержит код языка того сайта, на который ведёт ссылка. К примеру, вот как будет выглядеть HTML с указанием языка (пример 8).
Пример 8. Использование атрибута hreflang
В качестве значения hreflang обычно пишется двухбуквенный код языка. В частности, для русского — ru; для английского — en; для французского —fr. Если требуется уточнить страну языка, то она добавляется через дефис. К примеру, для немецкого языка пишем de, но австрийский вариант немецкого уже пишем как de-AT.
Сам hreflang не оказывает влияния на внешний вид ссылок и предназначен в первую очередь для поисковых систем. Однако, используя этот атрибут, мы можем добавить к ссылкам иконку или текст, опять же, через селектор атрибута (пример 9).
Пример 9. Стилизация ссылок с hreflang
Здесь к каждой ссылке с соответствующим значением атрибута hreflang добавляется текст с обозначением языка. Результат данного примера показан на рис. 6.
Атрибуты download , target , hreflang должны добавляться только при наличии атрибута href .
Итоги
- Мы рассмотрели следующие атрибуты элемента :
- download — позволяет скачать файл по ссылке, а не открывать его в браузере;
- target — используется для открытия ссылок в новой вкладке или в окне фрейма;
- hreflang — указывает язык сайта или веб-страницы по ссылке;