Атрибут download тега <area> — зберегти файл замість переходу
Загальний опис
автор: NagarD
- Нотатка
-
Атрибут download вказує, що ціль буде завантажена, коли користувач натискає на гіперпосилання.
Цей атрибут використовується тільки якщо встановлений атрибут href.
Значенням атрибута буде ім'я завантаженого файлу. Там немає ніяких обмежень на допустимих значень, браузер автоматично визначить правильне розширення файлу і додасть його до імені файла (.img, .pdf, .txt, .html, і т.д.).
Якщо значення опущено, використовується оригінальне ім’я файлу.
автор: NagarD
Синтаксис
<area download="filename">Атрибут download може отримувати єдине значення:
-
filename -
Необов'язково. Задає нове ім'я файлу для завантаженого файлу.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 54 | 20 | 10.1 | 41 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 54 | 54 | 20 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Кожна область карти з download не переходить за адресою, а зберігає файл під своїм іменем: клацни Сонце чи планету. У вбудованій пісочниці завантаження може бути заблоковане.
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Crect width='300' height='120' fill='%23001b33'/%3E%3Ccircle cx='40' cy='60' r='55' fill='gold'/%3E%3Ccircle cx='180' cy='60' r='14' fill='%23b3b3b3'/%3E%3Ccircle cx='255' cy='60' r='22' fill='%23e0a96d'/%3E%3C/svg%3E" width="300" height="120" alt="Сонячна система" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,100,120" alt="Сонце"
href="data:text/plain;charset=utf-8,Сонце" download="sun.txt">
<area shape="circle" coords="180,60,16" alt="Меркурій"
href="data:text/plain;charset=utf-8,Меркурій" download="mercury.txt">
<area shape="circle" coords="255,60,24" alt="Венера"
href="data:text/plain;charset=utf-8,Венера" download="venus.txt">
</map>Картинка з мапою на три ділянки: одна зберігає файл як є, друга — з іншим імʼям, третя без href і тому мертва. Нижче ті самі атрибути на звичайних посиланнях, де їх видно: правило content: attr(download) дописує значення, а чужий домен і відсутній href підсвічено червоним. У рамці прикладу завантаження заблоковане, тому дивимось саме на розмітку.
HTML
<p class="head">Мапа з трьома ділянками</p>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='90'%3E%3Crect%20width='100'%20height='90'%20fill='%232f6fd0'/%3E%3Crect%20x='100'%20width='100'%20height='90'%20fill='%2372b043'/%3E%3Crect%20x='200'%20width='100'%20height='90'%20fill='%23b9c6d8'/%3E%3C/svg%3E"
usemap="#karta" width="300" height="90" alt="Три ділянки: зберегти, зберегти з іншим імʼям, мертва зона">
<map name="karta">
<area shape="rect" coords="0,0,100,90" href="zvit.csv" download alt="Зберегти zvit.csv як є">
<area shape="rect" coords="100,0,200,90" href="zvit.csv" download="звіт за рік.csv" alt="Зберегти з іншим імʼям">
<area shape="rect" coords="200,0,300,90" download alt="Без href — нічого не станеться">
</map>
<p class="head">Ті самі атрибути на посиланнях</p>
<p><a href="zvit.csv" download>зберегти як є</a></p>
<p><a href="zvit.csv" download="звіт за рік.csv">зберегти з іншим імʼям</a></p>
<p><a href="zvit.csv" download="tables/звіт.csv">імʼя зі скісною — її замінить підкреслення</a></p>
<p><a href="https://example.com/zvit.csv" download>чужий домен — атрибут не діє</a></p>
<p><a download>без href — просто текст</a></p>CSS
.head {
margin: 22px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
img {
border: 2px dashed #b9c6d8;
}
p {
margin: 8px 0;
max-width: 620px;
}
a {
color: #1b4f9c;
font-weight: 600;
}
a[download]::after {
font-family: ui-monospace, monospace;
font-size: .85em;
font-weight: 400;
color: #3a9a4f;
content: " [download=" attr(download) " — таке імʼя буде запропоновано]";
}
a[download=""]::after {
content: " [download без значення — імʼя візьметься з адреси]";
}
a[href^="https://"]::after {
color: #c0392b;
content: " [чужий домен — браузер просто перейде за адресою]";
}
a:not([href])::after {
color: #c0392b;
content: " [href немає — атрибут мертвий]";
}Різниця між HTML 4.01 та HTML5
Атрибут download для тегу <area> з’явився тільки у HTML5..
Коментарі
Коментарів ще немає — будьте першим!