Атрибут sizes тега <link> — розміри іконки сайту й вкладки
Атрибут sizes вказує розміри іконок для візуальних засобів масової інформації.
Цей атрибут використовується тільки якщо rel="icon".
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<link sizes="HeightxWidth|any">Атрибут sizes може отримувати 2 значень:
-
HeightxWidth -
Визначає один або кілька розмірів для зв'язаного значка. Висота і ширина значення відокремлюються одна від одної "х" або "X". Приклади:
автор: NagarD<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">(1 size)<link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png">(2 sizes) -
any -
Вказує, що значок може масштабуватися (як SVG-зображення). Приклади:
автор: NagarD<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 15 | 31 | 6 | 15 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 31 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
sizes каже браузеру, під який розмір ця іконка — маючи кілька link rel="icon", він обере найдоречнішу для вкладки, закладок чи домашнього екрана. У демо нічого не малюється: атрибут працює у head справжньої сторінки.
<link rel="icon" href="/favicon.ico" sizes="16x16">
<link rel="icon" href="/img/logo.svg" type="image/svg+xml" sizes="any">
<p>Іконки видно на вкладці браузера, а не на сторінці.</p>Три однакові картинки з однаковим srcset із двох файлів: синього дрібного (100w) і зеленого великого (800w). Різний лише sizes — і видно, який файл узяв браузер: із sizes="60px" синій, із sizes="800px" і без атрибута — зелений. Нижче — той самий за назвою sizes у <link>: у рамці прикладу значки не побачити, тому розмітка показана текстом.
HTML
<p class="head">sizes у картинки — видно живцем</p>
<p>sizes="60px" — браузер узяв дрібний файл:</p>
<img class="demo" width="300" height="60" sizes="60px"
srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='60'%3E%3Crect%20width='100'%20height='60'%20fill='%232f6fd0'/%3E%3Ctext%20x='8'%20y='38'%20font-size='24'%20fill='%23ffffff'%3E100w%3C/text%3E%3C/svg%3E 100w, data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='60'%3E%3Crect%20width='800'%20height='60'%20fill='%2372b043'/%3E%3Ctext%20x='8'%20y='38'%20font-size='24'%20fill='%23ffffff'%3E800w%3C/text%3E%3C/svg%3E 800w"
alt="Дрібний файл зі srcset">
<p>sizes="800px" — той самий список, узято великий:</p>
<img class="demo" width="300" height="60" sizes="800px"
srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='60'%3E%3Crect%20width='100'%20height='60'%20fill='%232f6fd0'/%3E%3Ctext%20x='8'%20y='38'%20font-size='24'%20fill='%23ffffff'%3E100w%3C/text%3E%3C/svg%3E 100w, data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='60'%3E%3Crect%20width='800'%20height='60'%20fill='%2372b043'/%3E%3Ctext%20x='8'%20y='38'%20font-size='24'%20fill='%23ffffff'%3E800w%3C/text%3E%3C/svg%3E 800w"
alt="Великий файл зі srcset">
<p>без sizes — браузер вважає, що картинка на всю ширину вікна:</p>
<img class="demo" width="300" height="60"
srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='60'%3E%3Crect%20width='100'%20height='60'%20fill='%232f6fd0'/%3E%3Ctext%20x='8'%20y='38'%20font-size='24'%20fill='%23ffffff'%3E100w%3C/text%3E%3C/svg%3E 100w, data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='60'%3E%3Crect%20width='800'%20height='60'%20fill='%2372b043'/%3E%3Ctext%20x='8'%20y='38'%20font-size='24'%20fill='%23ffffff'%3E800w%3C/text%3E%3C/svg%3E 800w"
alt="Без sizes">
<p class="head">sizes у link — та сама назва, інша робота</p>
<pre><link rel="icon" href="/i.svg" sizes="any" type="image/svg+xml">
<link rel="icon" href="/i-180.png" sizes="180x180" type="image/png">
<link rel="icon" href="/i-32.png" sizes="16x16 32x32" type="image/png"></pre>
<p class="note">Ці рядки живуть у <head> документа, а не в тілі сторінки, тому в рамці
прикладу їхньої дії не побачити: значок малюється на вкладці браузера.</p>CSS
.head {
margin: 22px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
p {
margin: 12px 0 6px;
max-width: 560px;
}
.demo {
display: block;
border: 2px dashed #b9c6d8;
}
pre {
max-width: 560px;
overflow-x: auto;
padding: 10px 12px;
border: 1px solid #b9c6d8;
border-radius: 6px;
background: #f6f9ff;
font-size: .9em;
}
.note {
color: #5a6472;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
Атрибут sizes з’явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!