Гиперссылки появились с самого начала Интернета. Но на заре HTML5 три новых атрибута были добавлены в <a> тег <a> чтобы сохранить существующие атрибуты, такие как href , rel и другие компании.
Новые атрибуты: download , media и ping . В этой статье мы кратко рассмотрим, что представляют собой эти новые атрибуты и как их можно использовать после улучшения поддержки браузера.
Атрибут download
Атрибут download является новым в HTML5. Он дополняет существующий атрибут href , сообщая браузеру, что ресурс, на который указывает href следует загружать напрямую, а не посещать (что может произойти с файлом, который браузер может открыть, например, в формате PDF). Значение атрибута download используется для имени загружаемого файла.
Атрибут download может совпадать с файлом, на который ссылается атрибут href , но это не обязательно. Может пригодиться возможность иметь разные значения для href и download . Например, вам может потребоваться динамически генерировать уникальные файлы на сервере для ежемесячных или годовых отчетов для каждого пользователя, но при этом пользователю все равно предоставляется значимое имя файла при загрузке файла. Поскольку атрибут download может отличаться от href, это довольно легко сделать:
<a href="files/eid987jdien2i.pdf" download="Monthly Report for March 2014.pdf">Download March 2014 Report</a>
Когда пользователь щелкает ссылку на скачивание, он загружает Ежемесячный отчет за март 2014.pdf, а не с привлекательным названием eid987jdien2i.pdf.
В теории нет никаких ограничений на то, что вы можете ввести для атрибута download . На практике это не совсем так, поскольку вам нужно помнить об ограничениях, которые накладывают операционные системы, на которые нельзя использовать символы в именах файлов, таких как обратный слеш ‘\’ в Windows или прямой слеш ‘/ ‘на * nix и OS X — и что браузер может соответствующим образом изменить значение атрибута download . Также стоит отметить, что значение атрибута download может быть переопределено параметром filename заголовка HTTP Content-Disposition .
Атрибут download может использоваться с BLOB и URI данных , что делает его полезным, когда пользователи должны иметь возможность сохранять динамический контент, созданный им через ваше веб-приложение (например, приложения для рисования).
Как правило, вы устанавливаете атрибут href для BLOB или URI данных, а затем, как в предыдущем примере с ежемесячным отчетом, устанавливаете атрибут download для более значимого имени файла. В следующем примере показано, как это можно сделать при использовании Canvas API.
Вот наш HTML:
<section> <canvas id="c" width="400" height="400"></canvas> <footer> <a id="download-canvas" href="#">Download</a> </footer> </section>
И JavaScript:
(function() { var canvas = document.getElementById('c'), cxt = canvas.getContext('2d'), downloadLink = document.getElementById('download-canvas'); cxt.fillRect(100, 100, 200, 200); cxt.clearRect(150, 150, 100, 100); downloadLink.href = canvas.toDataURL(); downloadLink.download = "squares.png"; })();
А вот и живая демонстрация:
Обратите внимание, что в реальном приложении вполне вероятно, что атрибут download не будет жестко закодирован, а будет добавлен после ввода пользователем перед загрузкой изображения.
Браузерная поддержка для download атрибута
Хотя вы можете подумать, что атрибут download предвещает конец необходимости реализации логики загрузки файлов на сервере, к сожалению, он не полностью поддерживается во всех основных браузерах. На момент написания этой статьи Safari и IE (как настольные, так и мобильные) не поддерживают этот атрибут.
Атрибут media
Если вы работали с CSS, то раньше вы сталкивались с атрибутом media и наверняка использовали его в теге link . В HTML5 атрибут media теперь также может быть применен к гиперссылке. Он работает таким же образом, и его значением может быть любой допустимый медиа-запрос .
Применительно к тегу <a> атрибут media используется исключительно в качестве рекомендации. Это может быть полезно, например, в ситуациях, когда вы предоставляете загрузку для конкретного устройства, например, для рабочего стола и мобильных обоев:
<ul> <li> <a href="download/320" media="min-width: 320px"> <img src="files/320.jpg" alt=""> </a> </li> <li> <a href="download/1382" media="min-width: 1382px"> <img src="files/1382.jpg" alt=""> </a> </li> </ul>
Его также можно применить к тем ссылкам «Печать», которые вы часто видите в длинных многостраничных статьях, где вы переходите по ссылке, чтобы получить целую статью на одной странице, отформатированную для печати:
<footer> <p>Page 1 of 6 <a href="/print/1234" media="print">Print All</a></p> </footer>
Браузер Поддержка media атрибута
На момент написания статьи, кажется, что этот атрибут в гиперссылках не поддерживается. Он указан как атрибут HTML5 в HTML-справке MDN, но не указан в качестве допустимого атрибута в спецификации WHATWG или в W3C .
Атрибут ping
Наконец, давайте посмотрим на новый атрибут ping . Этот атрибут принимает разделенный пробелами список URL-адресов, которые необходимо пропинговать, если пользователь успешно перейдет к href гиперссылки. Или, другими словами, он обеспечивает встроенную поддержку отслеживания кликов и ссылок:
<ul> <li> <a href="/products/blaster" ping="/track/products/blaster">Blasters</a> </li> <li> <a href="/products/light-sabres" ping="/track/products/light-sabres">Light sabres (choice of colours)</a> </li> </ul>
Тем не менее, есть предупреждение от спецификации WHATWG :
Атрибут ping является избыточным благодаря уже существующим технологиям, таким как HTTP-перенаправления и JavaScript, позволяющим веб-страницам отслеживать, какие внешние ссылки наиболее популярны, или позволяющим рекламодателям отслеживать рейтинг кликов.
Итак, если атрибут ping избыточен с уже существующими технологиями, какой в этом смысл? Идея состоит в том, что это дает пользователям большую прозрачность в том, чтобы видеть, какие другие запросы могут быть сделаны в результате нажатия на определенную ссылку. Именно эта большая прозрачность, поэтому авторам рекомендуется использовать этот атрибут.
Было предложено, чтобы браузеры позволяли пользователям настраивать способ обработки уведомлений с помощью ping, например, блокируя некоторые URL-адреса, разрешая только те же исходные URL-адреса или вообще отключая ping. Браузеры также могут отображать URL-адрес ping рядом с местоположением ссылки в строке состояния браузера.
Браузерная поддержка атрибута ping
Текущая поддержка браузера для ping является смешанной. Safari и Chrome поддерживают его , Firefox поддерживает его, но по умолчанию он отключен, а IE и Opera не поддерживают его. Стоит также отметить, что атрибут ping отсутствует в текущей спецификации проекта W3C HTML5, но в спецификации WHATWG HTML5.
Резюме
Итак, это 3 новых атрибута, которые были добавлены к элементу <a> в HTML5 — download , media и ping .
Как вы можете видеть, когда они получат лучшую поддержку браузера, они будут весьма полезны и имеют много потенциальных вариантов использования.
Если вы можете придумать какие-то уникальные способы их использования, мы будем рады услышать ваши мысли в комментариях.