CSS-функція sign() — знак числа: -1, 0 або 1 у calc()
Опис
Експериментальна технологія: Перед використанням уважно перевірте таблицю сумісності з браузерами.
Функція sign() в CSS відіграє ключову роль у роботі з числовими значеннями. Вона дозволяє визначити знак числа, повертаючи -1, 0 або 1, залежно від характеристики вхідного числа. Ця функція може стати надзвичайно корисною в ситуаціях, де необхідно швидко визначити напрямок анімації або вплинути на інші числові параметри стилізації.
sign() вивчає вхідне число і робить наступне:
- Якщо вхідне число від'ємне, функція повертає
-1. - Якщо число дорівнює нулю, функція повертає
0. - Якщо число є додатнім, функція повертає
1.
Це робить функцію sign() ідеальним інструментом для визначення напрямку руху або позиціонування в залежності від значення числа.
Приклад:
div {
background-position: sign(10%);
}
У цьому прикладі функція sign(10%) використовується властивістю background-position. Позитивні відсотки можуть вирішуватися як від'ємна довжина, а від'ємні відсотки - як додатна довжина, якщо зображення фону більше за область фону. Таким чином, функція sign(10%) може повернути 1 або -1, залежно від того, як розподіляється відсоток! (Або навіть 0, якщо він розподіляється на основі нульової довжини.) Це демонструє потужність і гнучкість sign() в обробці числових значень у CSS.
Загальний опис
автор: NagarD
- Порада
-
Функція
автор: Bondsign()може бути корисною при виконанні математичних обчислень або в анімаціях, де вам потрібно враховувати знак числа.
Синтаксис
sign(<value>);Функція sign може отримувати єдине значення:
-
<value> -
Приймає числове значення. Значення можуе бути додатнім, від'ємним чисвлом або нулем.
автор: Bond
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 138 | 118 | 15.4 | 122 | 138 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 138 | 138 | 118 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Перша група — один вираз translate: calc(sign(--v) * 90px) на трьох доріжках: знак змінної сам вирішує, куди поїде повзунок, а нуль лишає його по центру. Друга показує, що sign() бере не лише числа — довжини, кути й em теж. Третя — пара з abs(): модуль дає довжину смуги, знак — бік. Остання — пастки: width: sign(-5) відкинуто, а opacity: sign(-5) цілком дійсне й ховає плитку зовсім.
HTML
<p class="head">Один вираз translate: calc(sign(--v) * 90px) — знак сам вирішує
напрямок, а нуль лишає повзунок по центру:</p>
<div class="track t1"><span class="knob"></span><em>--v: -5 → sign = -1</em></div>
<div class="track t2"><span class="knob"></span><em>--v: 0 → sign = 0</em></div>
<div class="track t3"><span class="knob"></span><em>--v: 5 → sign = 1</em></div>
<p class="head">Аргументом може бути не лише число — довжини, кути й em теж:</p>
<div class="track t4"><span class="knob"></span><em>sign(-3px) = -1</em></div>
<div class="track t5"><span class="knob"></span><em>sign(-45deg) = -1</em></div>
<div class="track t6"><span class="knob"></span><em>sign(2em) = 1</em></div>
<p class="head">Пара з abs(): модуль дає ДОВЖИНУ смуги, знак — БІК.
Обидві смуги зроблені одним і тим самим правилом:</p>
<div class="axis">
<span class="seg g1">--d: -70</span>
<span class="seg g2">--d: 120</span>
</div>
<p class="head">⚠️ sign() — це число: у ширині воно невалідне, зате в opacity
цілком дійсне, і мінус одиниця затискається до нуля:</p>
<div class="row">
<span class="tile w1">width: sign(-5) — відкинуто, лишилось 190px</span>
<span class="tile o1">opacity: sign(5) → 1</span>
<span class="tile o2">opacity: sign(-5) → 0</span>
<span class="tile o3">opacity: calc(sign(-5) / -1) → 1</span>
</div>CSS
.head {
margin: 20px 0 8px;
max-width: 620px;
color: #5a6472;
font-size: .9em;
}
.track {
position: relative;
display: flex;
align-items: flex-start;
width: 320px;
height: 56px;
padding-top: 6px;
margin-bottom: 6px;
background: #f6f9ff;
border: 1px solid #b9c6d8;
}
.track::before {
content: "";
position: absolute;
left: 159px;
top: 0;
width: 2px;
height: 100%;
background: #d7dee8;
}
.track em {
position: absolute;
left: 8px;
bottom: 4px;
color: #5a6472;
font: 11px/1 ui-monospace, monospace;
font-style: normal;
}
.knob {
width: 22px;
height: 22px;
margin-left: 149px;
background: #2f6fd0;
border-radius: 50%;
translate: calc(sign(var(--v)) * 90px);
}
.t1 { --v: -5; }
.t2 { --v: 0; }
.t3 { --v: 5; }
.t4 { --v: -3px; }
.t5 { --v: -45deg; }
.t6 { --v: 2em; }
.axis {
position: relative;
width: 400px;
padding: 10px 0;
background: #f6f9ff;
border: 1px solid #b9c6d8;
}
.seg {
display: block;
height: 26px;
margin-bottom: 6px;
margin-left: 200px;
padding-left: 6px;
background: #2f6fd0;
color: #fff;
font: 600 11px/26px ui-monospace, monospace;
white-space: nowrap;
width: calc(abs(var(--d)) * 1px);
translate: calc(sign(var(--d)) * 0.5 * abs(var(--d)) * 1px - 50%);
}
.g1 { --d: -70; }
.g2 { --d: 120; background: #3a9a4f; }
.row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
}
.tile {
display: flex;
align-items: center;
width: 190px;
height: 64px;
padding: 6px;
background: #2f6fd0;
color: #fff;
font: 600 11px/1.3 ui-monospace, monospace;
}
.w1 { width: sign(-5); }
.o1 { opacity: sign(5); }
.o2 { opacity: sign(-5); }
.o3 { opacity: calc(sign(-5) / -1); }Коментарі
Коментарів ще немає — будьте першим!