abs() в CSS — модуль числа, довжини, кута або відсотка
Опис
Експериментальна технологія: Перед використанням уважно перевірте таблицю сумісності з браузерами.
Функція abs() приймає одне числове або вимірювальне значення і повертає його абсолютне значення. Наприклад, якщо ми використаємо abs(-5), результат буде 5, оскільки абсолютне значення -5 дорівнює 5.
Функція abs() може бути корисною, коли потрібно отримати завжди додатне значення, незалежно від знаку вхідного числа. Вона застосовується в різних ситуаціях, включаючи обробку числових значень, обчислення розмірів або відступів, а також в анімаціях.
Ось приклад використання функції abs() в CSS:
p {
margin-top: abs(-10px);
}
У цьому прикладі, властивість margin-top елементу p використовує функцію abs() для встановлення позитивного значення 10px, незалежно від знаку вхідного числа.
Загальний опис
автор: NagarD
Синтаксис
abs(<value>);Функція abs може отримувати єдине значення:
-
<value> -
Числове значення для обчислення абсолютного значення.
А також вимірювальне значення, таке як пікселі (
автор: Bondpx), відсотки (%) тощо, яке може бути перетворене в числове значення для обчислення абсолютного значення.
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 138 | 118 | 15.4 | 122 | 138 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 138 | 138 | 118 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Смуги, у яких ширина задана через abs(): від'ємне значення, додатне, вираз усередині дужок і відсоток — усі дають однакову довжину незалежно від знака. Нижче — головний прийом: одна змінна --offset описує зсув в обидва боки, а ширина «вусів» береться як abs(var(--offset)), тож жоден із них не схлопується. Останній рядок показує, що буде без abs(): від'ємна ширина затискається до нуля.
HTML
<p class="head">Ширина = abs(…) — знак не має значення:</p>
<p class="lbl">abs(-180px)</p>
<div class="bar b1"></div>
<p class="lbl">abs(180px)</p>
<div class="bar b2"></div>
<p class="lbl">abs(-260px + 80px) — модуль береться від усього виразу</p>
<div class="bar b3"></div>
<p class="lbl">abs(-30%) — відсоток теж працює</p>
<div class="bar b4"></div>
<p class="lbl">calc(abs(-3) * 60px) — безрозмірному аргументу одиницю додаємо самі</p>
<div class="bar b5"></div>
<p class="head">Симетрія однією змінною: --offset задає зсув в обидва боки,
а довжина вуса = abs(var(--offset)):</p>
<div class="sym s1"><span class="stem"></span><em>--offset: 90px</em></div>
<div class="sym s2"><span class="stem"></span><em>--offset: -90px</em></div>
<div class="sym s3"><span class="stem"></span><em>--offset: -40px</em></div>
<p class="head">Без abs() від'ємна ширина мовчки затискається до нуля:</p>
<div class="sym s4"><span class="stem raw"></span><em>width: var(--offset) при -90px</em></div>CSS
.head {
margin: 20px 0 8px;
max-width: 560px;
color: #5a6472;
font-size: .9em;
}
.lbl {
margin: 10px 0 3px;
color: #5a6472;
font: 12px/1.4 ui-monospace, monospace;
}
.bar {
height: 26px;
outline: 1px solid #b9c6d8;
background: #2f6fd0;
}
.b1 { width: abs(-180px); }
.b2 { width: abs(180px); }
.b3 { width: abs(-260px + 80px); }
.b4 { width: abs(-30%); background: #3a9a4f; }
.b5 { width: calc(abs(-3) * 60px); background: #8a6d1f; }
.sym {
display: flex;
align-items: center;
gap: 10px;
height: 34px;
margin-bottom: 6px;
}
.sym em {
color: #5a6472;
font: 12px/1 ui-monospace, monospace;
font-style: normal;
}
.stem {
width: abs(var(--offset));
height: 18px;
background: #c0392b;
outline: 1px solid #7d2318;
}
.s1 { --offset: 90px; }
.s2 { --offset: -90px; }
.s3 { --offset: -40px; }
.s4 { --offset: -90px; }
.raw {
width: var(--offset);
background: #d64545;
outline: 1px dashed #7d2318;
}Коментарі
Коментарів ще немає — будьте першим!