Атрибут scoped тега <style> — стилі лише для батька
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<style scoped>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 0+ | 21+ | 0+ | 0+ | 12+ | 0+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 0+ | 0+ | 0+ | 0+ |
Приклади
+ запропонувати свій приклад у пісочниці
scoped мав замикати стилі всередині свого контейнера, але браузери підтримку прибрали: стиль діє на всю сторінку — червоні ОБИДВА заголовки, і в div, і поза ним. Локальні стилі тепер дають Shadow DOM або правило @scope.
<div>
<style scoped>
h4 { color: red; }
</style>
<h4>Заголовок у div</h4>
</div>
<h4>Заголовок поза div — теж червоний, scoped не спрацював.</h4>Чотири однакові картки. У перших двох стилі загорнуто в <style scoped> — і замість двох різних кольорів обидві стають зеленими: виграло правило, що нижче, а заразом позеленів і абзац поза картками. У третій і четвертій те саме зроблено правилом @scope — кольори різні, і нічого зовні не зачеплено.
HTML
<div class="card">
<style scoped>.tekst { color: #c0392b; }</style>
<p class="tekst">Картка 1: тут написано color: #c0392b (червоний)</p>
</div>
<div class="card">
<style scoped>.tekst { color: #1b5e20; }</style>
<p class="tekst">Картка 2: тут написано color: #1b5e20 (зелений)</p>
</div>
<p class="tekst poza">Абзац ПОЗА картками — його «локальні» стилі теж пофарбували</p>
<div class="card ok">
<style>@scope { .vmist { color: #c0392b; } }</style>
<p class="vmist">Картка 3: @scope і color: #c0392b (червоний)</p>
</div>
<div class="card ok">
<style>@scope { .vmist { color: #1b5e20; } }</style>
<p class="vmist">Картка 4: @scope і color: #1b5e20 (зелений)</p>
</div>
<p class="vmist poza">Абзац поза картками — @scope його не чіпає</p>CSS
.card {
max-width: 520px;
margin: 8px 0;
padding: 8px 12px;
border: 2px dashed #d64545;
border-radius: 6px;
background: #fff8f8;
}
.card.ok {
border: 2px solid #3a9a4f;
border-style: solid;
background: #f3fbf4;
}
.poza {
max-width: 520px;
margin: 8px 0 22px;
padding: 6px 12px;
background: #f4f5f7;
font-weight: 600;
}
p {
margin: 4px 0;
}Різниця між HTML 4.01 та HTML5
Атрибут scoped з’явився тільки у HTML5.
Різниця між XHTML та HTML
У XHTML мінімізацований запис атрибутів заборонено, тому атрибут scoped повинен бути визначений як <style scoped="scoped" />.
Коментарі
Коментарів ще немає — будьте першим!