Новые атрибуты HTML5 для ссылок: download, media и ping

Ссылки были введены еще на заре веба. Но с расцветом HTML5 к так хорошо знакомым ссылкам были добавлены новые атрибуты, которые призваны составить компанию уже знакомым атрибутам href и rel.

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

Атрибут download

Атрибут download - новичок, пришедший с HTML5. Этот атрибут дополняет существующий атрибут href, и говорит браузеру, что ресурс, на который указывает href нужно скачать вместо того, чтобы открывать (например, браузеры уже научились открывать PDF, а этим атрибутом можно принудительно указать, что данный файл предназначен для скачивания, а не просмотра). Значение атрибута download используется для задания названия загружаемого файла.

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

<a href="files/eid987jdien2i.pdf" download="Месячный отчет за март 2014.pdf">Download March 2014 Report</a>

Когда пользователь кликнет по данной ссылке, он загрузит файл "Месячный отчет за март 2014.pdf", а не непонятный файл eid987jdien2i.pdf.

В теории нет никаких ограничений на значения атрибута download. На практике это не совсем так, так как вам нужно помнить о том, что нельзя использовать некоторые символы, которые являются специфичными для файловых систем, например, символ обратного слеша (\) в Windows, или прямого слеша в *nix и OS X, а акже то, что браузер может подправить значение download для того, чтобы исключить подобные запрещенные символы. Стоит также отметить, что значение атрибута download может быть переопределено параметром filename HTTP заголовка Content-Disposition.

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

Обычно в атрибуте href вы будете указывать ссылку на двоичные данные, а дальше, как и в примере с месячным отчетом в PDF, с помощью атрибута 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 браузерами

Если вы думаете, что теперь вам нет необходимости обрабатывать логику загрузки файла на серверной стороне, то смею вас разочаровать. К сожалению, данный атрибут не полностью поддерживается всеми основными браузерами. На время наприсания статьи браузеры 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 браузерами

На момент написания статьи данный атрибут не сказать, чтобы очень поддерживается браузерами. По крайней мере, применительно к ссылкам. Он указан в спецификации MDN, но о нем нет упоминания (как о валидном атрибуте) ни в спецификации WHATWG, ни в спецификации W3C.

Атрибут ping

Наконец, присмотримся к новому атрибуту ping. Этот атрибут принимает список URL, разделенных пробелом, которые должны быть опрошены в случае успешного перехода пользователем на 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, которые позволяют отслеживать, какие внешние ссылки наиболее популярны среди пользователей, что позволяет рекламодателям лучше отслеживать рейтинг различных ссылок.

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

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

Поддержка атрибута ping браузерами

В настоящее время поддержка данного атрибута является смешанной. Браузеры Safari и Chrome поддерживают его, у Firefox есть поддержка этого атрибута, но она отключена, а IE и Opera не поддерживаютвовсе. Также стоит упомянуть, что данный атрибут не включен в официальный проект спецификации W3C HTML5, но он есть в спецификации WHATWG HTML5.

Заключение

Вот мы и рассмотрели три новых HTML5 атрибута тега <a> - download, media и ping.

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