Вашу рекламу в этом канале увидит до 2,3 тыс. человек
Заказать рекламу →с 20 июля 2026 по 12 октября 2026 · минимум 23 900 · максимум 24 623
Рекламодатель определён по маркировке рекламы в постах канала.
✨ Одна и та же CSS-переменная может дать 1, а может 2 Кастомные свойства вроде --index по умолчанию хранятся как кусок текста. Вычисляется он там, где переменную подставили через var(), а не там, где объявили. Пример Джейка Арчибальда. У второго div задано --index: sibling-index() (номер элемента среди соседей, с единицы). Его первый ребёнок, абзац, получает scale: var(--index). Масштаб будет 1: функция считается…
🎉 iframe, который сам подстраивается под содержимое Обычно у <iframe> фиксированный размер. Встроенная форма или виджет комментариев выросли, и появляется полоса прокрутки. В Chrome 154 фрейм умеет брать размер из встроенного документа. Нужно согласие обеих сторон. Внешняя страница задаёт фрейму свойство frame-sizing: /* In styles.css for index.html */ iframe { frame-sizing: content-height; width: 100%; } А документ…
⚽ Одна обёртка, две стороны сетки: турнирная таблица на subgrid Турнирную сетку плей-офф рисуют симметрично: часть пар раунда слева, часть справа. На сайте FIFA каждая такая половина свёрстана отдельным div, и разметка просто повторяет картинку. Есть вариант чище. Раунд остаётся одним элементом с детьми .start и .end. Он растягивается на всю общую сетку .rounds и через subgrid получает её колонки и строки:…
3 дня бесплатного обучения во Frontend-разработке! Вместо лекций пройди симуляцию настоящего первого заказа . Скучных уроков не будет. Их заменяет сюжет, где ты уже начинающий Frontend-разработчик и у тебя есть первый клиент. За 3 дня ты: - Получишь первую задачу от «клиента» стоимостью 10 000 руб. и соберёшь структуру сайта на HTML; - Оформишь внешний вид сайта по пожеланиям клиента с помощью CSS; - Добавишь на…
✨ Как не оставить один пункт меню одного на новой строке Когда во флексбоксе включён перенос (flex-wrap: wrap), элементы уходят на следующую строку, как только перестают помещаться. Бывает, что там оказывается ровно один: пять пунктов меню сверху и одинокий «Speaking» снизу. Обычно это чинят медиазапросом, но он легко ломается, стоит поменять текст. Новое значение flex-wrap: balance делает иначе: браузер сам…
📦 Почему карточка ломается на широком мониторе Медиазапрос @media знает только ширину окна. Положите карточку в колонку 300px на экране 1920px, и правило min-width: 1024px всё равно сработает. Карточка получит широкую раскладку и начнёт сжиматься и вылезать за края. Контейнерный запрос @container спрашивает другое: сколько места у компонента именно здесь. Обёртку объявляем контейнером, а стили карточки завязываем на…
✅ Свой чекбокс, который не ломает фокус Родной чекбокс в CSS почти не настраивается: по сути, только цвет через accent-color. Псевдоэлемент ::checkmark уже есть в спецификации, но, по словам автора, браузеры над ним пока не работают. Приём простой: настоящий <input> не прячут, а кладут внутрь span с рамкой, снимают родной вид и растягивают поверх коробки: .checkbox input { margin: 0; width: 100%; height: 100%;…
🤖 AI для фронтенд-разработчика: собираем инструменты на Podlodka Frontend Crew AI-инструменты уже используют все, но порой в обсуждении с LLM возникает ощущение, что голова полна ответов, но их всё ещё недостаточно, чтобы разрешить вполне себе прикладные вопросы. Эксперты Podlodka Frontend Crew собрали онлайн-конференцию «Фронтенд с AI» , чтобы вместе с практиками из индустрии увидеть, как работает AI в разных…
🎯 Иконка в списке съезжает, когда подпись переносится на вторую строку Иконка и текст стоят в flex-контейнере с align-items: center. Когда текст переносится, иконка встаёт посередине всего блока, а не напротив первой строки. С align-items: start она поднимается выше букв: у строки есть пустое место от шрифта. Сдвиг на фиксированные 3px ломается, как только меняется шрифт или размер иконки. Надёжнее считать сдвиг…