CSS unset — скинути значення властивості
Є комбінацією ключових слів initial і inherit. Ключове слово unset встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.
body {
font-size: 1.5em;
}
.module {
font-size: unset;
}
Різниця між unset і initial в тому, що значення, які могли бути успадковані елементом, скидаються.
Ключове слово unset скидає властивість його успадкованого значення, якщо він успадковує від батьків, а також його початкове значення, якщо ні. Іншими словами, він поводиться як наслідок ключового слова в першому випадку, і як початкове ключове слово у другому випадку. Його можна застосувати до будь-якої властивості CSS, включаючи стенограму CSS.
Загальний опис
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 41 | 27 | 9.1 | 28 | 13 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 41 | 41 | 27 | 9.3 |
Приклади
+ запропонувати свій приклад у пісочниці
unset скидає властивість: успадковувані — до успадкованого значення, решту (як border-color) — до initial. Initial для border-color — це currentColor, тому рамка другого абзацу стає синьою, як його текст.
HTML
<div class="block">
<p class="a">Рамка червона за власним правилом.</p>
<p class="b">border-color: unset — рамка кольору тексту.</p>
</div>CSS
.block p {
border: 3px solid;
border-color: red;
color: #0172ad;
padding: 6px;
}
.block .b {
border-color: unset;
}Одна й та сама дитина в трьох станах: без ключових слів, з unset і з inherit — на парі властивостей, де одна успадковується (color), а друга ні (padding). У середньому блоці видно обидві половини unset: колір прийшов від батька, а відступ став нулем.
HTML
<div class="frame">
<p class="lead">Батько: color рожевий, padding 24px.</p>
<div class="child">свої значення: color сірий, padding 24px</div>
<div class="child u">color: unset; padding: unset</div>
<div class="child i">color: inherit; padding: inherit</div>
</div>CSS
body {
font-family: system-ui, sans-serif;
font-size: 16px;
}
.frame {
color: #b5179e;
padding: 24px;
border: 2px solid #b5179e;
}
.child {
color: #555;
padding: 24px;
background: #f4f4f6;
border: 2px solid; /* колір не заданий → currentColor */
margin-bottom: 12px;
}
/* успадковувана → inherit, неуспадковувана → initial (нуль) */
.child.u {
color: unset;
padding: unset;
}
/* обидві беруть значення батька */
.child.i {
color: inherit;
padding: inherit;
}
.lead { margin: 0 0 16px; }Демонстація роботи.
HTML
<p>Цей фон червоний.</p>
<div class="foo">
<p>Цей фон також червоний.</p>
</div>
<div class="bar">
<p>Цей фон зелений (за замовчуванням успадковане значення).</p>
</div>CSS
body{
font-size: 19px;
}
.foo {
color: blue;
}
.bar {
color: green;
}
p {
color: red;
}
.bar p{
color: unset;
}Коментарі
Коментарів ще немає — будьте першим!