Сегодня мы с вами познакомимся (а может и повторим) одну очень полезную фичу css, которой я очень часто пользуюсь + небольшой css-челлендж внутри.
CSS3 принес нам целую кучу полезностей (повтори на досуге).
Но сегодня речь будет про функцию calc(); Я люблю JavaScript и периодически так хочется написать какую-нибудь функцию прямо в стилях. Но пока приходится ограничиваться calc. Даже из названия понятно, что она что-то рассчитывает, но у тебя может возникнуть вопрос: “а зачем в css вообще что-то считать?”
Покажу несколько реальных ситуаций, которые могут возникнуть:
Соблюдение пропорций
Часто встречаются ситуации, где вам говорят: “этот блок должен занимать ⅓ ширины”. Причем действительно треть, без привязки к количеству пикселей. Как решить эту проблему? Задать width: 33%? Но ведь мы знаем, что это не совсем треть. Дописать 3 в периоде?
Посмотрим на более элегантный способ:
Все очень просто - мы взяли 100% ширины родителя и разделили на 3. Остальные расчеты возьмет на себя браузер.
Нужны ⅔ ? Запросто:
Я уже не говорю о более сложных дробях наподобие 7/12 = 0,583333…
Комбинация статичной и резиновой верстки
Еще одна ну ооочень частая ситуация: когда два соседних блока занимают определенный % от ширины родителя, но вот расстояние между ними “кровь из носа” должно быть 30px.
Окей, calc, настало твое время (применимо и к display: flex и к inline-block).
Было:
С флексами тоже вылазит за рамку:
И проведя нехитрые математические расчеты с шириной первого блока мы получим:
И вы великолепны! Но заказчик опять шлет вам правки и теперь задача состоит в том, чтобы правый блок был ровно 250px. Придется поднапрячься и усложнить нашу формулу:
Арифметика на уровне 7го класса прекрасна =)
Без этой чудной функции пришлось бы несладко. И обратите внимание на то, что операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Иначе будете возиться с дебагом.
Мелкие задачи
А вот теперь пришло время небольшого css-упражнения. Проверь свои силы или листай дальше для решения :)
На этой доске есть исходники: https://codepen.io/ihinstone/pen/XGrJZp?editors=1100 Нужны знания SCSS
Задача: изначально виден только заголовок из блока описания, а при наведении на карточку заболевания - он плавно выезжает снизу, показывая весь контент. Нужно учесть, что в разных карточках будет разное количество текста, но заголовки - всегда будут умещаться в одну строку.
Пробуй :), а дальше будет один из вариантов решения.
Задача кажется довольно простой. Если мы говорим о плавности - то должны использовать свойства transition и transform. Но что делать с контентом? Ведь каждый раз он может быть разной высоты. Именно об этот факт разбиваются несколько вариантов реализации.
Первый вариант, который мне пришел в голову - это использовать calc(); Если у вас получилось по-другому - смело делитесь в комментариях решением.
Что здесь произошло:
- Обратите внимание на заголовок. Он у меня по макету 45px + padding-top в 24px у блока описания. Эти параметры никогда не будут изменены.
- Для того, чтобы сместить блок описания вниз и скрыть его (overflow-y: hidden у родителя) я применил transform: translateY(calc(100% - 70px));
Если дословно - то смещаем весь блок на всю высоту вниз, но без 70px, чтобы заголовок выглядывал. Эти 70px - это и есть верхний паддинг + высота заголовка. (да-да, там 69 в сумме, я округлил). - Теперь нам все равно, сколько контента будет снизу.
- Ну и теперь при наведении на родительский блок банально возвращаем все как было на transform: translateY(0px); При этом сохраняется плавность за счет transition
Именно в таких мелочах и раскрывается прелесть функции calc();
Надеюсь эта функция осядет в чертогах вашего разума и в нужный момент придет вам на помощь :)
Напишите в комментариях к этому посту, была ли полезна статья. Если есть идеи для следующей — пишите туда же :)