Телеграм канал «WebDev+ | Веб-разработка»

Одно CSS-свойство только что избавило от необходимости писать JavaScript для каждого FAQ-аккордеона, который вы когда-либо делали.

Серьёзно.

Это свойство — interpolate-size: allow-keywords.

Годами в CSS нельзя было анимировать переход от height: 0 к height: auto.

Браузер просто не мог вычислить переход между числовым значением и ключевым словом.

Поэтому разработчики писали JavaScript, измеряли scrollHeight, использовали requestAnimationFrame и подобные вещи.

Теперь это можно сделать одной строкой:

interpolate-size: allow-keywords;

Что оно делает

Сообщает браузеру, что ему разрешено интерполировать между числовыми значениями и ключевыми словами вроде auto, min-content, max-content и т.д.

Как это работает

Добавьте это свойство к элементу (часто к :root). Затем используйте обычные CSS-transition для height, и браузер сам обработает остальное.

Контент будет плавно раскрываться от 0 до своей фактической высоты.

И всё. Без JavaScript.

:root {
interpolate-size: allow-keywords;
}

.content {
height: 0;
overflow: clip;
transition: height 0.3s ease;
}

.content.is-open {
height: auto;
}

Небольшое замечание про аккордеоны

Да, я знаю, что accordion-компоненты имеют довольно спорную репутацию в кругах UX и accessibility.

Но это отличный пример, чтобы показать, как работает interpolate-size.

Поддержка браузерами

Пока поддержка не идеальная — около 70%.

- Chrome 129+
- Edge 129+
- Opera 115+ ✅

Firefox и Safari — пока нет.

Отдельная благодарность команде Chrome за внедрение этой возможности. Она решает проблему, которая существовала с момента появления CSS transitions.

@WebDev_Plus

Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа.

ИИ не убил профессию. Он убрал самое страшное — барьер входа.

Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.

Именно это мы и делаем на бесплатном 7-дневном практикуме.

Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.

Стартуем завтра.

👉 Приходи на бесплатный практикум

🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»

Замечали, как вся страница сдвигается, когда вы открываете модальное окно?

Это не баг — это просто отсутствующее CSS-свойство.

Вот что происходит:

Вы открываете модалку.

Затем обычно отключаете прокрутку, добавляя overflow: hidden к тегу body.

Прокрутка отключается, и скроллбар исчезает.

И тут — бум — страница сдвигается, например, на 15px влево, потому что контент расширяется и занимает место, где раньше был скроллбар.

В результате получается layout shift.

Чтобы это исправить, можно использовать scrollbar-gutter: stable.

Что делает это свойство:

Оно резервирует место под скроллбар, даже когда он не отображается. Когда открывается модалка и скроллбар исчезает, пространство под него остаётся зарезервированным, поэтому никакого сдвига layout не происходит.

Как это использовать 👇

body {
overflow-y: scroll;
scrollbar-gutter: stable;
}

Теперь, когда вы открываете модальное окно:

* скроллбар исчезает
* зарезервированное пространство остаётся
* layout остаётся стабильным

Важное замечание (!)

В MacOS вы можете не заметить этот эффект, пока явно не включите настройку “всегда показывать скроллбар”. По крайней мере, я заметил разницу только после этого.

Предполагаю, что для пользователей Windows/Linux это происходит чаще, чем для пользователей MacOS, но я не проверял, как это работает там.

Поддержка браузерами: ~93%

Одна строка CSS — и ваши модальные окна больше не выглядят сломанными.

@WebDev_Plus

Теперь, когда shape() поддерживается всеми основными браузерами, напоминаю: вы можете использовать этот онлайн‑генератор, чтобы создавать любые полигоны с закруглёнными углами: https://css-generators.com/polygon-shape/

Настраиваете фигуру, потом просто копируете сгенерированный код.

@WebDev_Plus

Собрал сайт через ИИ за вечер → заработал 27 000₽.

Так и работают вайбкодеры:
Загнал промт в ChatGPT → собрал структуру → запустил сайт → получил деньги.

Работы — 2–4 часа.
Оплата — 20–50 000₽ за проект.
Без кода и долгих курсов.

Если умеешь пользоваться браузером — справишься.

А спрос сейчас огромный:
бизнесу нужны сайты, автоматизация и ИИ-решения уже сегодня.

Это одна из самых быстрорастущих ниш 2026 года — заходи и бери заказы.

Инструкции здесь:
👉 @itvibecodebot

Если ты хочешь реально хорошо зарабатывать, от 150к в месяц без начальников, нужно решать важные задачи бизнесов.

Хвала небесам за то, что есть ИИ, который самое сложное сделает за тебя.

Даже голову особо напрягать не надо.
Пробуй 👉 @itvibecodebot

Создавать Promise с внешними resolve и reject стало чище 🧹

Promise.withResolvers() возвращает объект вида { promise, resolve, reject }

Больше не нужно заворачивать логику внутрь конструктора.

Подробнее тут
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers

@WebDev_Plus

Laravel Tip

Хотите знать, как отработала ваша запланированная задача в полночь?

Тут вам повезло: вывод scheduled tasks можно без проблем сохранить или отправить по email

@WebDev_Plus