Все о mailto: Ссылки | CSS-Tricks

          
                    
                    
          

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

Базовая функциональность

   Пишите нам   

Это работает!

Но мы сразу же столкнулись с проблемой UX. Один из них заключается в том, что нажатие на эту ссылку удивляет некоторых людей тем способом, который им не нравится. В некотором роде щелчок по ссылке на PDF-файл открывает файл вместо веб-страницы. Le Sigh. Мы вернемся к этому чуть позже.

Иногда имеет значение «Открыть в новой вкладке».

Если у пользователя почтовый клиент по умолчанию (например, Outlook, Apple Mail и т. Д.) Настроен как собственное приложение, это не имеет значения. Они нажимают ссылку mailto: открывается это приложение, создается новое электронное письмо, и оно ведет себя так же, независимо от того, пытались ли вы открыть эту ссылку в новой вкладке или нет.

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

Я немного об этом позабочусь. Раньше я взвешивал вопрос об открытии ссылок в новых вкладках, но не об открытии электронных писем. Я бы сказал, что немного склоняюсь к использованию target = "_ blank" в почтовых ссылках, несмотря на мои ощущения от его использования в других сценариях.

   Пишите нам   

Добавление предмета и тела

По некоторым причинам это редко можно увидеть, но ссылки mailto: также могут определять тему и содержание письма. Это просто параметры запроса!

  электронная почта:?!. Chriscoyier@gmail.com Заголовок = Важно и тело = Привет  

Добавить поддержку копирования и слепого копирования

Вы можете отправлять на электронную почту несколько адресов электронной почты и даже копий (CC) и слепых копий (BCC). Хитрость заключается в большем количестве параметров запроса и разделении запятыми адресов электронной почты.

  MAILTO: someone@yoursite.com куб.см = someoneelse @ theirsite.com, другой @ thatsite.com, я @ mysite.com & ОЦК = lastperson @ theirsite.com  

Этот сайт очень удобен

Используйте

чтобы позволить людям сначала обработать электронную почту

Я не уверен, насколько это полезно, но любопытно, что вы можете заставить

сделать GET, который по сути является перенаправлением на URL — и этот URL может быть в формате mailto: с параметрами запроса, заполненными входными данными! Его можно даже открыть в новой вкладке.

   См. Перо
. Используйте

чтобы отправить электронное письмо Крису Койеру (@chriscoyier)
на CodePen.

Люди не любят сюрпризов

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

Если вы используете реальный адрес электронной почты в качестве ссылки, это, вероятно, хороший признак:

   chriscoyier@gmail.com   

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

  a [href^="mailto:"] :: after {
  content: "(& # x1f4e8; & # x2197; & # xfe0f;)";
}  

Если вам действительно не нравятся ссылки mailto :, есть расширение для браузера.

https://ihatemailto.com/

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