Frontender's notes [ru]

💬 Округление значений в CSS — когда точность важна

Посмотрев на свойство margin в инструментах разработчика, мы можем заметить, что оно выводит дробную часть — 1.25rem. Как бы это ни казалось точным, для меня такие значения порой раздражают. Если вы, как и я, хотите избавиться от десятичных значений в CSS, у нас есть отличная новинка: математическая функция round(). Используя round(), можно округлить число, а с помощью функции to-zero, избавиться от дробной части.

ℹ️ Как это работает:

html {
font-size: 106.25%; /* это будет равно 17px */
}

.awesome-block {
width: 2rem;
height: 2rem;
background-color: tomato;
box-sizing: border-box;
margin: round(to-zero, 1.25rem, 1px);
}

📌 Теперь значение свойства будет идеально округленным без лишней десятичной части. Хотя это не всегда критично, но знать про эту функцию в целом не помешает.

🚪 Frontender's notes

Please open Telegram to view this post

VIEW IN TELEGRAM

❤6👍5👎2🐳2

www.tgoop.com/frontendnoteschannel_ru/5218

4.46K viewsOct 2 at 11:17

💬 Округление значений в CSS — когда точность важна

Посмотрев на свойство margin в инструментах разработчика, мы можем заметить, что оно выводит дробную часть — 1.25rem. Как бы это ни казалось точным, для меня такие значения порой раздражают. Если вы, как и я, хотите избавиться от десятичных значений в CSS, у нас есть отличная новинка: математическая функция round(). Используя round(), можно округлить число, а с помощью функции to-zero, избавиться от дробной части.

ℹ️ Как это работает:

html {
font-size: 106.25%; /* это будет равно 17px */
}

.awesome-block {
width: 2rem;
height: 2rem;
background-color: tomato;
box-sizing: border-box;
margin: round(to-zero, 1.25rem, 1px);
}