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

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

Это не баг — это просто отсутствующее 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

🔥 Подписка на easyoffer PRO на 1 год со скидкой 70%

easyoffer – сайт для подготовки к собеседованию на программиста, тестировщика и другие IT-профессии становится еще доступнее со скидкой 70% до 10 марта.

⚙️ Актуальные функции:
1. База вопросов из реальных технических собеседований с вероятностью встречи и примерами ответов.
2. База задач с этапа live-coding.
3. База видеозаписей 1100+ реальных собеседований, в том числе в топовые компании (Сбер, Авито, Яндекс, WB, OZON, МТС и др.) на позиции Junior/Middle/Senior.
4. База 400+ тестовых заданий от компаний.
5. Аналитика ТОП-требований из вакансий для лучшего написания резюме по ключевым словам.
6. Тренажеры для подготовки к собеседованию. В том числе тренажер «Реальное собеседование» со сценарием вопросов под конкретную компанию.

Акция до 10 марта (включительно) на PRO-тариф.
– Подписка действует 1 год
– Доступ ко всем профессиями сразу

👉 Смотри подробности тарифа и покупай на easyoffer

Нужно ли писать 5 media queries, чтобы шрифт выглядел нормально на разной ширине экрана?

На деле хватает одной строки CSS:

font-size: clamp(1rem, 2vw + 0.5rem, 2rem);

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

Сразу задаются три значения: минимальный размер, предпочтительный (плавающий) размер и максимальный размер.

Браузер выбирает подходящее среднее значение, но при этом никогда не уходит ниже минимума и выше максимума.

Например:

* 1rem = минимум (16px). Текст никогда не станет меньше 16px.
* 2vw + 0.5rem = предпочтительный размер. Плавно масштабируется вместе с шириной вьюпорта.
* 2rem = максимум (32px). Текст не станет больше 32px даже на огромных мониторах.

Результат:

Текст масштабируется в зависимости от ширины экрана. Без breakpoints, без media queries. Просто плавная адаптивная типографика.

Где использовать:

* Заголовки, которым нужно масштабирование
* Основной текст в hero-секциях
* Любой текст, который должен подстраиваться под размер экрана

Поддержка в браузерах: около 95%

Одна функция.

И адаптивная типографика готова.

@WebDev_Plus