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

В HTML5 у ссылок появились новые атрибуты в дополнение к старым href и rel.

Атрибут download

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

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


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

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

Кстати говоря, в названии нам не обязательно указывать формат файла, он выставится автоматически.

Этот приём может быть очень полезен для сайтов-хранилищ для загрузки файлов.

Атрибут media

Возможно вы уже использовали атрибут в теге link. В HTML5 атрибут media теперь также может быть применён к гиперссылке. Он работает в точности таким же образом, а его значением может быть любой медиа-запрос.

Атрибут 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>

Также он может быть применён к ссылкам для печати, которые можно увидеть на длинных многостраничных статьях, где при переходе по ссылкам вы видите статью, разбитую на страницы для печати:


<p>Page 1 of 6 <a href="/print/1234" media="print">Print All</a></p>

Поддержка браузерами была достаточно слабой. Проверяйте, стоит ли его использовать на данный момент.

Атрибут ping

Атрибут принимает список URL, разделённых пробелом, которые должны быть опрошены в случае успешного перехода пользователем на URL, обозначенный в href. Или, иными словами, он предоставляет встроенную возможность отслеживать ссылки, по которым перешёл пользователь:


<p><a href="/cats" ping="/track/cats">Cats</a></p>
<p><a href="/kittens" ping="/track/kittens">Kittens</a></p>

Поддержка данного атрибута разная у браузеров.

Реклама