all в CSS — скидання всіх властивостей елемента одразу
Універсальна властивість, яка скидає всі значення властивостей в значення без задання чи успадковані, за винятком властивостей direction і unicode-bidi.
Загальний опис
автор: NagarD
Синтаксис
all: initial|inherit|unset;Властивість all може отримувати 3 значень:
-
initial -
Встановлює цю властивість в значення без задання
автор: NagarD -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: NagarD -
unset -
Якщо властивість успадковується, то його значення приймається як
автор: NagarDinherit, в іншому випадку воно приймається якinitial.
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.all="initial" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 37 | 27 | 9.1 | 24 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 37 | 27 | 9.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Обом блокам задано жовте тло і червоний текст, але у другого all: initial скидає всі властивості до значень без задання — успадковане й задане зникає разом.
HTML
<div>Звичайний div зі стилями.</div>
<div class="reset">Такий самий div, але з all: initial.</div>CSS
div {
background-color: yellow;
color: red;
}
.reset {
all: initial;
}Чотири ряди однакової розмітки: посилання, кнопка й пункт списку без скидання, потім із all: initial, all: unset і all: revert. Видно, що revert повертає вигляд БРАУЗЕРА (посилання лишається синім і підкресленим, пункт — з маркером), а initial та unset роздягають елемент до голого тексту. Останній ряд показує, що власна властивість --tone переживає скидання.
HTML
<table class="demo">
<tr>
<th>без скидання</th>
<td><a href="#a">посилання</a></td>
<td><button type="button">кнопка</button></td>
<td><ul><li>пункт списку</li></ul></td>
</tr>
<tr>
<th>all: initial</th>
<td><a href="#a" class="ini">посилання</a></td>
<td><button type="button" class="ini">кнопка</button></td>
<td><ul><li class="ini">пункт списку</li></ul></td>
</tr>
<tr>
<th>all: unset</th>
<td><a href="#a" class="uns">посилання</a></td>
<td><button type="button" class="uns">кнопка</button></td>
<td><ul><li class="uns">пункт списку</li></ul></td>
</tr>
<tr>
<th>all: revert</th>
<td><a href="#a" class="rev">посилання</a></td>
<td><button type="button" class="rev">кнопка</button></td>
<td><ul><li class="rev">пункт списку</li></ul></td>
</tr>
</table>
<p class="cap">Власну властивість скидання не чіпає — обидві плашки лишаються теракотовими:</p>
<div class="vars">
<span class="chip">звичайний</span>
<span class="chip ini2">all: initial</span>
</div>CSS
.demo {
border-collapse: collapse;
font: 15px/1.6 system-ui, sans-serif;
}
.demo th {
padding: 8px 12px 8px 0;
text-align: left;
font: 600 .85em/1.4 system-ui, sans-serif;
color: #5a6472;
white-space: nowrap;
}
.demo td {
padding: 8px 18px 8px 0;
border-top: 1px solid #dfe4ec;
vertical-align: middle;
}
.demo ul {
margin: 0;
padding-left: 22px;
}
.ini {
all: initial;
}
.uns {
all: unset;
}
.rev {
all: revert;
}
.cap {
margin: 22px 0 8px;
font: 600 .9em/1.4 system-ui, sans-serif;
color: #5a6472;
}
.vars {
--tone: #c0392b;
display: flex;
gap: 12px;
}
.chip {
display: inline-block;
padding: 10px 14px;
background: var(--tone, #2f6fd0);
color: #fff;
font: 13px system-ui, sans-serif;
}
.ini2 {
all: initial;
background: var(--tone, #2f6fd0);
color: #fff;
padding: 10px 14px;
font: 13px system-ui, sans-serif;
}Коментарі
Коментарів ще немає — будьте першим!