Атрибут type тега <link> — MIME-тип пов'язаного файлу
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<link type="media_type">Атрибут type може отримувати єдине значення:
-
media_type -
Тип інтернет-медіа пов'язаного документа.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | ≤12.1 | 12 | ≤6 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Абзац синій — стиль підключився. type="text/css" — історична звичка: для rel="stylesheet" браузер і так знає тип, тож у сучасному коді атрибут опускають.
<link rel="stylesheet" type="text/css" href="data:text/css,p%7Bcolor:%230172ad%7D">
<p>Мене пофарбував підключений стиль.</p>Шість підключень того самого правила. Зелене тло малює саме підключена таблиця стилів, тож сірий блок означає «файл не завантажився». Видно, що без type, із правильним type і навіть із пробілами по краях усе працює однаково, а type="text/plain" вимикає підключення повністю — і для зовнішнього файлу, і для вбудованого <style>.
HTML
<p class="head">Чотири однакові таблиці стилів, підключені по-різному</p>
<link rel="stylesheet" href="data:text/css,%23p1%7Bbackground%3A%23eaf7ec%3Boutline%3A3px%20solid%20%233a9a4f%7D">
<p id="p1" class="probe">1. Без type — стиль підключився</p>
<link rel="stylesheet" type="text/css" href="data:text/css,%23p2%7Bbackground%3A%23eaf7ec%3Boutline%3A3px%20solid%20%233a9a4f%7D">
<p id="p2" class="probe">2. type="text/css" — стиль підключився</p>
<link rel="stylesheet" type=" text/css " href="data:text/css,%23p3%7Bbackground%3A%23eaf7ec%3Boutline%3A3px%20solid%20%233a9a4f%7D">
<p id="p3" class="probe">3. type=" text/css " з пробілами — стиль теж підключився</p>
<link rel="stylesheet" type="text/plain" href="data:text/css,%23p4%7Bbackground%3A%23eaf7ec%3Boutline%3A3px%20solid%20%233a9a4f%7D">
<p id="p4" class="probe">4. type="text/plain" — файл навіть не завантажено</p>
<p class="head">Те саме правило для вбудованих стилів</p>
<style type="text/css">#s1 { background: #eaf7ec; outline: 3px solid #3a9a4f }</style>
<p id="s1" class="probe">5. style type="text/css" — працює</p>
<style type="text/plain">#s2 { background: #eaf7ec; outline: 3px solid #3a9a4f }</style>
<p id="s2" class="probe">6. style type="text/plain" — вміст відкинуто цілком</p>
<p class="note">Зелене тло малює підключена таблиця стилів. Там, де тло сіре, файл
зі стилями не завантажився взагалі — і жодного повідомлення про це немає.</p>CSS
.head {
margin: 18px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.probe {
max-width: 520px;
margin: 8px 0;
padding: 8px 12px;
border-radius: 6px;
background: #f1f2f4;
outline: 3px solid #c8cfd8;
font: 15px/1.5 ui-monospace, monospace;
}
.note {
max-width: 520px;
margin-top: 18px;
color: #5a6472;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!