0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p><strong>Вы любите верстать? А использовать @media запросы? Я - нет, а потому очень рад тому, что существуют CSS-функции, которые я опишу ниже.</strong></p>
1
<p><strong>Вы любите верстать? А использовать @media запросы? Я - нет, а потому очень рад тому, что существуют CSS-функции, которые я опишу ниже.</strong></p>
2
<h2>Содержание</h2>
2
<h2>Содержание</h2>
3
<ul><li><a>Функция calc()</a></li>
3
<ul><li><a>Функция calc()</a></li>
4
<li><a>Функции min() и max()</a></li>
4
<li><a>Функции min() и max()</a></li>
5
<li><a>Функция clamp()</a></li>
5
<li><a>Функция clamp()</a></li>
6
<li><a>Итог</a></li>
6
<li><a>Итог</a></li>
7
</ul><h2>Функция calc()</h2>
7
</ul><h2>Функция calc()</h2>
8
<p>Данная функция позволяет нам совмещать относительные и абсолютные величины. Сделать размер элемента равный 5px + 5rem? Никаких проблем.</p>
8
<p>Данная функция позволяет нам совмещать относительные и абсолютные величины. Сделать размер элемента равный 5px + 5rem? Никаких проблем.</p>
9
<p>Пример того, как используя функцию calc() можно расположить элемент ровно посередине экрана пользователя:</p>
9
<p>Пример того, как используя функцию calc() можно расположить элемент ровно посередине экрана пользователя:</p>
10
<h2>Функции min() и max()</h2>
10
<h2>Функции min() и max()</h2>
11
<p>Две функции, работающие противоположно друг другу.</p>
11
<p>Две функции, работающие противоположно друг другу.</p>
12
<p>min() - выбирает наименьшее значение из введённых.</p>
12
<p>min() - выбирает наименьшее значение из введённых.</p>
13
<p>max() - выбирает наибольшее значение из введённых.</p>
13
<p>max() - выбирает наибольшее значение из введённых.</p>
14
<p>Вроде всё просто, но на деле данные функции работают не очень логично. По сути min() ограничивает максимальную величину значения, а max() - наоборот, минимальную.</p>
14
<p>Вроде всё просто, но на деле данные функции работают не очень логично. По сути min() ограничивает максимальную величину значения, а max() - наоборот, минимальную.</p>
15
<p>Логика работы данных функций обратна и к тому нужно привыкнуть.</p>
15
<p>Логика работы данных функций обратна и к тому нужно привыкнуть.</p>
16
<p>Посмотрев на данный пример вы можете задаться вопросом: "Зачем нам использовать CSS-функции, если то же самое можно было сделать с помощью max-width". И вы будете правы, данные кнопки можно было стилизовать без min() и max(), однако CSS функции работают с любыми свойствами, в отличие от max-width и max-height.</p>
16
<p>Посмотрев на данный пример вы можете задаться вопросом: "Зачем нам использовать CSS-функции, если то же самое можно было сделать с помощью max-width". И вы будете правы, данные кнопки можно было стилизовать без min() и max(), однако CSS функции работают с любыми свойствами, в отличие от max-width и max-height.</p>
17
<h2>Функция clamp()</h2>
17
<h2>Функция clamp()</h2>
18
<p>Самая интересная функция из представленных, так как она позволяет задать минимальное, рекомендованное и максимальное значение, а дальше функция сделает всё сама.</p>
18
<p>Самая интересная функция из представленных, так как она позволяет задать минимальное, рекомендованное и максимальное значение, а дальше функция сделает всё сама.</p>
19
<h2>Итог</h2>
19
<h2>Итог</h2>
20
<p>Работа с CSS-функциям ограничена лишь вашим воображением, они легки в использовании и позволяют упростить работу с абсолютными величинами.</p>
20
<p>Работа с CSS-функциям ограничена лишь вашим воображением, они легки в использовании и позволяют упростить работу с абсолютными величинами.</p>
21
<p>На этом у меня всё, спасибо за внимание!</p>
21
<p>На этом у меня всё, спасибо за внимание!</p>