Атрибут target тега <base> — типове вікно для посилань
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<base target="_blank|_self|_parent|_top|framename">Атрибут target може отримувати 5 значень:
-
_blank -
Відкриває посилання в новій вкладці або вікні (залежить від налаштувань браузера).
автор: NagarD -
_self -
Відкриває посилання в тому ж вікні або вкладці, де було натиснуто посилання. Без задання.
автор: NagarD -
_parent -
Якщо
<iframe>вкладений у інший<iframe>, то посилання відкриється у іншому<iframe>.Якщо ж
автор: NagarD<iframe>без вкладень, то посилання відкриється у поточному вікні, або вкаладці. -
_top -
Відкриває посилання у верхньому (основному) вікні чи вкаладці, навіть, якщо посилання було у
<iframe>. Якщо посилання не у<iframe>- працює як_selfПрацює також із формати, якщо форма у
автор: NagarD<iframe>. Після надсилання форми, action сторінка відкриється у всьому верхньому (основному) вікні чи вкладці, навіть якщо форма знаходиться всередині iframe. -
framename -
Дозволяє відкривати посилання у конкретному вікні або фреймі, якщо таке існує.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
<base target="_blank"> задає типовий target усім посиланням документа: жодне з них не має власного target, але обидва відкриються в новій вкладці. У вбудованій пісочниці нові вкладки можуть бути заблоковані — перевір на повній сторінці.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base target="_blank">
</head>
<body>
<p><a href="https://css.in.ua">css.in.ua</a> та
<a href="https://css.in.ua/css/properties">довідник CSS</a> —
обидва успадкували target від base.</p>
</body>
</html>Документ із <base target="_blank">. Стилі показують ЖОВТИМ кожне посилання, яке не має свого target і тому відкриється в новій вкладці, — таких тут більшість, зокрема й найзвичайніші «Про нас» і «Контакти». Синім позначено ті, що мають свій target і базі не підкоряються; поруч виведено його значення. Те саме правило застосовано до форми й до зони карти зображень.
HTML
<base target="_blank">
<p class="head">Меню сайту</p>
<nav>
<a href="#a">Головна</a> ·
<a href="#b">Про нас</a> ·
<a href="#c">Контакти</a> ·
<a href="#d" target="_self">Кошик (свій target)</a> ·
<a href="#e" target="">Вихід (target="")</a>
</nav>
<p class="head">Форма пошуку</p>
<form action="#s" method="get">
<input type="search" name="q" placeholder="що шукаємо">
<button type="submit">Знайти</button>
</form>
<p class="head">Та сама форма, але зі своїм target</p>
<form action="#s" method="get" target="_self">
<input type="search" name="q" placeholder="що шукаємо">
<button type="submit">Знайти</button>
</form>
<p class="note">Жовтим підсвічено все, що успадкує target від base і відкриється
в новій вкладці. Один рядок у head — і таких елементів на сторінці більшість.</p>CSS
.head {
margin: 20px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
nav {
max-width: 620px;
line-height: 2.4;
}
a:not([target]),
form:not([target]) {
padding: 2px 6px;
border-radius: 4px;
background: #fff6d8;
outline: 2px solid #e0a800;
}
a:not([target])::after,
form:not([target])::after {
content: " ← target від base";
color: #8a6100;
font-size: .8em;
}
a[target],
form[target] {
padding: 2px 6px;
border-radius: 4px;
background: #eef3fb;
outline: 2px solid #2f6fd0;
}
a[target]::after,
form[target]::after {
content: " ← свій target=\"" attr(target) "\"";
color: #1b4f9c;
font-size: .8em;
}
form {
display: block;
max-width: 460px;
margin-bottom: 10px;
padding: 8px 10px;
}
input,
button {
padding: 5px 8px;
font: inherit;
}
.note {
max-width: 620px;
margin-top: 18px;
color: #5a6472;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
Фрейми та набори фреймів більше не підтримується в HTML5. Тому значення _parent, _top і framename тепер в основному використовується з iframe.
Коментарі
Коментарів ще немає — будьте першим!