Народ, всем привет. CSS, ну вдруг кто не в курсе, это язык… но не только стилей, но и творческой магии. За простыми правилами скрываются удивительные возможности, которые можно использовать, чтобы упростить разработку, ускорить работу сайта или добавить интерактивности без JavaScript. Сегодня я решил показать три необычные, но практичные CSS-фишки, которые можно применять прямо сейчас. Я просто тут недавно решил поиграться, че там новенького завезли, и вот что откапал. Тут же еще главное, чтобы не сколько «новье», сколько «работало стабильно и везде». Так что погнали.
:has()
Вот он, родительский селектор, которого мы так долго ждали. В чём его фишка? До недавнего времени CSS не позволял выбирать родительский элемент, опираясь на его потомков, и это сильно бесило. Теперь это возможно благодаря этому псевдоклассу :has(), который работает, как «обратный селектор» - мы можем стилизовать элемент, если внутри него есть что-то определённое. Например, показать обводку у карточки товара, если внутри есть скидка:
.card:has(.discount) {
border: 2px solid red;
}
Теперь, если внутри .card есть элемент с классом .discount, она получит красную обводку. И это можно применять повсюду, подсвечивать поля формы, если в них ошибка (form:has(.error)), изменять внешний вид кнопки, если выбран чекбокс (.settings:has(input[type="checkbox"]:checked)) или адаптировать карточки по наличию изображений (.card:has(img)).
Единственно, надо понимать, что поддерживается это фишка не во всех браузерах (особенно устаревших, вроде IE и старых Safari), но в современных уже стабильно.
clamp()
Фишка данной функции в том, что она позволяет создавать «резиновый размер» без медиазапросов. Проще говоря, clamp(min, preferred, max) позволяет устанавливать значение в относительном диапазоне. Это особенно удобно для шрифтов и отступов, когда элемент будет масштабироваться между заданными значениями без лишней возни с @media. Ну, скажем, для шрифта будет так:
h1 {
font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}
1.5rem — минимальный размер
2vw + 1rem — «гибкий» размер, который зависит от ширины окна
3rem — максимальный размер
Помимо размеров шрифтов, можно применять к отступам между секциями: padding: clamp(1rem, 5vw, 4rem) или менять ширину элементов карточек, блоков, изображений и т.д. И по сути он просто заменяет несколько медиазапросов и делает интерфейс более «жидким» и естественным, что упрощает поддержку на разных экранах.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.
scroll-timeline и @keyframes
Благодаря Scroll-Driven Animations API, можно теперь синхронизировать CSS-анимации с прокруткой, без JS. Это новшество доступно в современных версиях Chrome, Edge и частично в Safari (те, как всегда, на своей волне). Если раньше анимации при скролле приходилось делать через JavaScript и IntersectionObserver, то теперь — нативно, декларативно и плавно.
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.scroll-section {
animation: fade-in linear;
animation-timeline: scroll();
animation-range: entry 0% cover 30%;
}
В примере animation-timeline: scroll() — запускает анимацию в зависимости от прокрутки, а animation-range: entry 0% cover 30% — описывает, когда анимация начнётся (когда блок появляется на экране) и когда закончится (через 30% прокрутки его высоты). И получается, что данную функцию можно использовать для мягкого появления элементов при скролле (эффект fade-in), анимации прогресса или сдвига фона, а также параллакса и динамичных заголовков.
Да, пока не все браузеры поддерживают animation-timeline и иногда придётся использовать JS-фолбэк для Safari или Firefox, но с этими браузерами у нас постоянные проблемы и к ним многие привыкли.
Еще парочка маленьких, но полезных CSS-фишек, бонусом, так сказать, для общего развития
1. accent-color — стилизует нативные чекбоксы и радиокнопки:
input[type="checkbox"] {
accent-color: green;
}
2. :is() и :where() — упрощают сложные селекторы:
:is(h1, h2, h3) {
font-family: 'Montserrat';
}
3. container queries (@container) — позволяют адаптировать стили внутри компонента, а не всего экрана.
Кстати, у нас есть и другой канал, FIT FOR FUN, про фитнес, бодибилдинг, правильное питание, похудение и ЗОЖ в целом. Кому интересно, ждем вас в гости!