03.12.2021

Условный border-radius в CSS

Условный border-radius в CSS

От создателя: некоторое время назад я изучал домашнюю страничку facebook.com, чтобы узнать и разобраться, как она построена. Мне всегда интересно посмотреть, как люди пишут CSS. Я увидел очень и очень интересное значение border-radius для карточного компонента в основной ленте.

И поделился последующим твитом об этом открытии. Затем, я получил таковой ответ от Мириам Сюзанн: всегда ли это 8 пикселей? Для меня эта математика смотрится как переключатель, где в определенный момент ((100vw — 4px) — 100%) может быть отрицательным значением, переключаясь с 9999 на -9999? Что изменит значение на 0? В основном: если мы в границах 4 пикселей от полного размера области просмотра, удалите border-radius.

Через несколько часов, Фрэнк Ян из Facebook подтвердил, что это условный оператор, чтоб изменить 8px на 0px, когда карточка занимает всю ширину окна просмотра. Разве это не великолепно?

Сначала я подумал, что это какая-то ошибка. К счастью, нет. В этой статье я постараюсь осветить делему и объяснить, как работает ее решение.

Неувязка

У нас есть карточный компонент с border-radius равным 8px. Когда карточка не имеет поля либо занимает всю ширину области просмотра, мы желаем изменить ее border-radius на 0.

Условный border-radius в CSS

Это можно сделать, удалив border-radius с помощью медиа-запроса CSS, подобного такому:

CSS

В неких случаях это ограничение. Если по некий причине мы хотим активировать border-radius, когда размер области просмотра меньше 450px, нам необходимо будет создать вариативный класс CSS и опять использовать медиа-запрос.

CSS

Решение

Это умный пример, изготовленный командой Facebook. Он имитирует следующую логику:

JavaScript

Чтоб реализовать эту логику в CSS, нам необходимо сравнить два значения с помощью функции сопоставления CSS. Решение вдохновлено статьей Хейдона Пикеринга «Священный альбатрос Flexbox». Наман Гоэл из Facebook адаптировал его для работы с border-radius.

CSS

Давайте тщательно рассмотрим приведенный выше CSS.

У нас есть функция max(), которая ассоциирует 0px с вычисленным значением min(). Она изберет большее значение.

Функция min() ассоциирует между 8px и вычисленным значением из calc((100vw — 4px — 100%) * 9999). Результатом будет очень огромное положительное или отрицательное число.

Огромное число 9999, заставляет значение быть или 0px либо 8px.

Давайте объясним чудо calc()! Волшебство происходит в значении 100%. Оно может отличаться в зависимости от 2-ух разных сценариев:

Оно может быть равно 100% содержащему его элементу (родительский элемент / оболочка .. либо как он там называется в вашем CSS).

Либо оно может быть равно 100vw, если карта занимает всю ширину области просмотра (к примеру, в мобильном телефоне).

Условный border-radius в CSS

Для чего Использовать 9999?

Это не поэтому, что это точное число имеет суперсилу либо что-то в этом роде. Речь идет о том, чтоб избежать крайнего случая. Предположим, что ширина области просмотра равна 375px, а контейнера — 365px. Если подставить эти значения в уравнение, оно будет смотреться так.

CSS

На основании вышеизложенного, браузером будет выбрано значение 6px. Мы этого не желаем. Вместо этого радиус должен быть или 0px либо 8px. Для этого мы можем помножить результат на большое число, например 9999.

CSS

Исходя из этого, браузер изберет значение 8px из функции min, а потом то же значение из функции max(). Возьмем пример, основанный на первом сценарии. У нас есть окно просмотра шириной 1440px, а компонент карты находится снутри контейнера 700px.

Условный border-radius в CSS

Умножение приобретенного значения на 9999 приведет 7359264 что является огромным случайным числом. В этом случае CSS для браузера будет смотреться следующим образом:

CSS

Так как у нас есть min(), будет выбрано меньшее из имеющихся значений -8px. При сопоставлении с max(), тоже будет выбрано 8px. Это 1-ый вариант использования такого CSS.

CSS

2-ой, когда карта занимает всю ширину области просмотра. Это можно узреть в мобильном окне просмотра. Обратите внимание, что ширина контейнера и области просмотра схожа.

Условный border-radius в CSS

Умножение значения на 9999 приведет к отрицательному значению -39996px. Браузер прочтет это так:

CSS

А сейчас самое интересное! Браузеру нужно задать два вопроса:

Какое значение меньше? 8px либо -39996px? Результат -39996px.

Какое значение больше? 0px либо -39996px? Результат 0px.

CSS

Вы лицезрели, как это произошло? Меня все еще поражает такое умное использование функций сравнения CSS. Мы также можем вывести это на новый уровень, используя CSS clamp(). Я думаю, что команда Facebook не использовала его, так как он не поддерживается в более старенькых версиях Safari (например, v12).

CSS

Проверьте это на Codepen. Надеюсь, вам приглянулась статья. Спасибо за чтение!

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *