Новые атрибуты 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.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/new-html5-attributes-hyperlinks-download-media-ping/
Перевел: Станислав Протасевич
Урок создан: 13 Апреля 2014
Просмотров: 20634
Правила перепечатки


5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

    В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

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

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Июня 2014 19:56
    prologos
    Почему атрибут download не срабатывает в новой версии Браузера Chrome, версия: 35.0 (раньше работал, ссылки качались так, как указано было в кавычках этого атрибута)? Использую расширение предоставленное на странице http://muzbank.net/posts/rasshirenie-skachivaniya-muzyki-dlya-brauzera-chrome-svoimi-rukami-vkontakte-mailmir.html Этот атрибут формируется вместе с клонами новых ссылок. Код в консоли выглядит примерно так:
    <a href="http://cs1-31v4.vk.me/p1/4e81159c3111d0.mp3"
    download="Garbage-I'm Only Happy When It Rains.mp3" ...>
    <span style="cursor:copy;padding:6px;width:16px;height:16px;
    background-color:#5F7D9D;color:#fff;border-radius:2px;">
    <img src="http://st0.vk.me/images/icons/darr.gif">
    </span></a>
    
    Могу предположить, что разработчики браузера специально отключили эту возможность (в целях безопасности?).
^ Наверх ^