От автора: Гиперссылки существуют с самого зарождения Сети. А в начале эры HTML5 к скромному тэгу a добавились три новых атрибута поддержки уже существующих атрибутов вроде href, rel и прочих за компанию.
Эти новые атрибуты: download, media и ping. В данной статье мы вкратце разберемся в том, что эти атрибуты из себя представляют, и как по мере улучшения браузерной поддержки можно будет ими пользоваться.
Атрибут download
Атрибут download — новичок HTML5. Он дополняет существующий атрибут href, говоря браузеру о том, что ресурс, на который указывает href, вместо перехода по ссылке должен напрямую скачиваться (что происходит с тем файлом, который браузер способен открыть, например PDF). Значение атрибута download применяется для имени скачиваемого файла.
Атрибут download может быть таким же, как файл, на который делается ссылка в атрибуте href, но это не обязательно. Возможность иметь разные значения для href и download может пригодиться. Например, вам нужно динамически генерировать на сервере уникальные файлы для ежемесячных или ежегодных отчетов на каждого пользователя, и при этом представлять пользователю значимое имя файла для момента его загрузки. Так как атрибут download может отличаться от href, это довольно легко сделать:
|
1 2 |
<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 и data URI, отчего он очень удобен там, где пользователю требуется сохранить созданный им в вашем веб-приложении динамический контент (например, в приложении для рисования).
Традиционно вы бы установили атрибут href на URI бинарного большого объекта (blob) или данных (data), а затем, как с вышеприведенном примере с ежемесячным отчетом, установили бы атрибут download на более содержательное имя файла. В следующем примере показано, как сделать это при использовании Canvas API.
Вот наш HTML:
|
1 2 3 4 5 6 |
<section> <canvas id="c" width="400" height="400"></canvas> <footer> <a id="download-canvas" href="#">Download</a> </footer> </section> |
И JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 |
(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 используется в чисто справочных целях. Он может пригодиться, например, в случае, когда вы предусматриваете загрузку в зависимости от устройства, такую, как обои для десктопа и мобильного устройства:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
Еще его можно применить для ссылок «Печать», часто встречающихся в длинных многостраничных статьях, где вы переходите по ссылке для того, чтобы форматировать ее на одной странице для печати:
|
1 2 3 |
<footer> <p>Page 1 of 6 <a href="/print/1234" media="print">Print All</a></p> </footer> |
Браузерная поддержка атрибута media
Что касается этого произведения, то, похоже, у данного атрибута не так уж много поддержки в гиперссылках, если вообще таковая имеется. Он внесен в списки атрибутов HTML5 в рекомендациях MDN по HTML, но не причислен к действующим атрибутам в спецификациях WHATWG.
Атрибут ping
Наконец, давайте рассмотрим новый атрибут ping. Он принимает разделенный пробелами список URL’ов, которые нужно пинговать, если пользователь удачно доберется до href гиперссылки. Или, другими словами, этот атрибут обеспечивает естественную поддержку слежения за щелчком и ссылкой:
|
1 2 3 4 5 6 7 8 |
<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 повторяет более ранние технологии, то какой в нем смысл? Собственно, его идея в том, что он позволяет пользователю видеть, какие еще запросы могут быть сделаны в результате его щелчка по определенной ссылке. Именно такая прозрачность поощряет авторов к использованию этого атрибута.
Предполагается, что браузеры должны давать пользователям возможность самим конфигурировать управление пинг-уведомлениями, например, блокируя некоторые URL’ы, позволяя только URL’ы одинакового происхождения или вообще отключая пингование. Также браузеры могли бы отображать URL пинга рядом с местом ссылки в строке состояния браузера.
Браузерная поддержка атрибута ping
Текущая браузерная поддержка ping весьма разношерстная. Safari и Chrome его поддерживают, у Firefox’а имеется его поддержка, но по умолчанию она отключена, а IE и Opera его не поддерживают. Также следует отметить, что атрибута ping нет в текущем проекте спецификации W3C HTML5, зато он присутствует в спецификации WHATWG HTML5.
Резюме
Итак, вот вам три новых атрибута, добавленных в HTML5 к элементу a — download, media и ping. Как видите, когда улучшится их браузерная поддержка, они станут весьма удобными и будут потенциально применяться во многих случаях.
Автор: Ian Oxley
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
