Логово верстальщика
رفتن به کانال در Telegram
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
نمایش بیشتر![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=256&q=75)
شبکه:8 186
مشترکین
-624 ساعت
-207 روز
-9330 روز
در حال بارگیری داده...
کانالهای مشابه
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
ژوئیه '26
ژوئیه '26
+20
در 1 کانالها
ژوئن '26
+142
در 0 کانالها
Get PRO
مه '26
+419
در 22 کانالها
Get PRO
آوریل '26
+109
در 0 کانالها
Get PRO
مارس '26
+77
در 0 کانالها
Get PRO
فوریه '26
+63
در 0 کانالها
Get PRO
ژانویه '26
+192
در 57 کانالها
Get PRO
دسامبر '25
+116
در 25 کانالها
Get PRO
نوامبر '25
+207
در 69 کانالها
Get PRO
اکتبر '25
+74
در 28 کانالها
Get PRO
سپتامبر '25
+115
در 85 کانالها
Get PRO
اوت '25
+38
در 0 کانالها
Get PRO
ژوئیه '25
+62
در 2 کانالها
Get PRO
ژوئن '25
+63
در 9 کانالها
Get PRO
مه '25
+210
در 4 کانالها
Get PRO
آوریل '25
+113
در 0 کانالها
Get PRO
مارس '25
+191
در 21 کانالها
Get PRO
فوریه '25
+120
در 3 کانالها
Get PRO
ژانویه '25
+299
در 18 کانالها
Get PRO
دسامبر '24
+440
در 53 کانالها
Get PRO
نوامبر '24
+427
در 40 کانالها
Get PRO
اکتبر '24
+409
در 27 کانالها
Get PRO
سپتامبر '24
+389
در 33 کانالها
Get PRO
اوت '24
+361
در 24 کانالها
Get PRO
ژوئیه '24
+361
در 34 کانالها
Get PRO
ژوئن '24
+328
در 32 کانالها
Get PRO
مه '24
+345
در 28 کانالها
Get PRO
آوریل '24
+328
در 27 کانالها
Get PRO
مارس '24
+277
در 10 کانالها
Get PRO
فوریه '24
+653
در 3 کانالها
Get PRO
ژانویه '24
+392
در 24 کانالها
Get PRO
دسامبر '23
+696
در 34 کانالها
Get PRO
نوامبر '23
+348
در 16 کانالها
Get PRO
اکتبر '23
+629
در 7 کانالها
Get PRO
سپتامبر '23
+61
در 0 کانالها
Get PRO
اوت '23
+17
در 0 کانالها
Get PRO
ژوئیه '23
+21
در 0 کانالها
Get PRO
ژوئن '23
+11
در 0 کانالها
Get PRO
مه '23
+13
در 0 کانالها
Get PRO
آوریل '23
+17
در 0 کانالها
Get PRO
مارس '23
+9
در 0 کانالها
Get PRO
فوریه '23
+16
در 0 کانالها
Get PRO
ژانویه '23
+16
در 0 کانالها
Get PRO
دسامبر '22
+18
در 0 کانالها
Get PRO
نوامبر '22
+23
در 0 کانالها
Get PRO
اکتبر '22
+21
در 0 کانالها
Get PRO
سپتامبر '22
+83
در 0 کانالها
Get PRO
اوت '22
+23
در 0 کانالها
Get PRO
ژوئیه '22
+22
در 0 کانالها
Get PRO
ژوئن '22
+10
در 0 کانالها
Get PRO
مه '22
+19
در 0 کانالها
Get PRO
آوریل '22
+18
در 0 کانالها
Get PRO
مارس '22
+20
در 0 کانالها
Get PRO
فوریه '22
+19
در 0 کانالها
Get PRO
ژانویه '22
+13
در 0 کانالها
Get PRO
دسامبر '21
+11
در 0 کانالها
Get PRO
نوامبر '21
+15
در 0 کانالها
Get PRO
اکتبر '21
+26
در 0 کانالها
Get PRO
سپتامبر '21
+27
در 0 کانالها
Get PRO
اوت '21
+58
در 0 کانالها
Get PRO
ژوئیه '21
+32
در 0 کانالها
Get PRO
ژوئن '21
+62
در 0 کانالها
Get PRO
مه '21
+19
در 0 کانالها
Get PRO
آوریل '21
+37
در 0 کانالها
Get PRO
مارس '21
+44
در 0 کانالها
Get PRO
فوریه '21
+61
در 0 کانالها
Get PRO
ژانویه '21
+53
در 0 کانالها
Get PRO
دسامبر '20
+7 999
در 0 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 14 ژوئیه | +1 | |||
| 13 ژوئیه | +1 | |||
| 12 ژوئیه | +1 | |||
| 11 ژوئیه | +2 | |||
| 10 ژوئیه | +1 | |||
| 09 ژوئیه | +6 | |||
| 08 ژوئیه | 0 | |||
| 07 ژوئیه | +1 | |||
| 06 ژوئیه | +5 | |||
| 05 ژوئیه | +1 | |||
| 04 ژوئیه | 0 | |||
| 03 ژوئیه | 0 | |||
| 02 ژوئیه | +1 | |||
| 01 ژوئیه | 0 |
پستهای کانال
Экс-глава Google вмазал по удалёнке: «Хочешь делать IT и выигрывать — сиди в офисе». Всё, хана фрилансу?
Не так давно боссы компаний предсказывали удалёнке великое будущее, а теперь народ дружно зовут обратно за столы. Мы из Beeline Cloud решили разобраться, что там с гибким графиком.
Смотрим, готовы ли айтишники терять бабки ради работы из дома, что на самом деле толкает менеджеров на этот «возврат» и не окажется ли отмена дистанта временной лажей. Читать далее
👉 Логово Верстальщика
| 2 | CSS-анимация auto высоты и ширины: интерполяция ключевых слов без костылей
Плавное раскрытие блоков с динамическим контентом — одна из самых частых задач в production: аккордеоны, выпадающие меню, модалки. Раньше это решалось через max-height с запасом, grid-трюками или ручным JS-расчётом, но каждый вариант имел компромиссы по предсказуемости layout или производительности. Новая возможность interpolate-size: allow-keywords меняет подход, позволяя анимировать height: auto напрямую.
Как это работает
Свойство interpolate-size: allow-keywords на контейнере разрешает браузеру интерполировать ключевые слова (auto, min-content, max-content, fit-content) как числовые значения. Например, для аккордеона:
.accordion-item {
interpolate-size: allow-keywords;
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.accordion-item.open {
height: auto;
}
При переключении класса высота плавно меняется от 0 до естественной — без магических чисел и лишней разметки. Это особенно важно для дизайн-систем, где компоненты должны адаптироваться к любому контенту.
Где применять и типичная ошибка
Используйте в UI-компонентах с непредсказуемой высотой: выпадающие списки, дроверы, панели с динамическими данными. Ошибка — применять interpolate-size глобально на * или на всех элементах, где не нужна анимация ключевых слов. Это может сломать встроенную интерполяцию браузера в сложных layout, особенно при использовании min-height в сетках. Лучше ограничивать область действия конкретными компонентами.
Production-контекст и trade-offs
Поддержка пока ограничена: Chrome 130+ и Safari Technology Preview. Firefox требует флага в about:config. В production это только progressive enhancement — если браузер не поддерживает, блок раскроется без анимации. Используйте @supports:
@supports (interpolate-size: allow-keywords) {
.panel { interpolate-size: allow-keywords; }
}
Это не влияет на доступность (скринридеры видят контент сразу) и производительность (браузер оптимизирует анимацию нативного рефлоу). Но не подходит для случаев, где нужна анимация между двумя разными ключевыми словами (например, auto к min-content) — это пока не реализовано.
Вывод: interpolate-size: allow-keywords убирает главный компромисс между живым контентом и плавными анимациями, но требует осторожного внедрения с фоллбэком для неподдерживающих браузеров. | 213 |
| 3 |  Claude Fable 5 дирижирует Grok 4.5 ☕️
Просто ставишь бесплатный плагин для Claude Code, и Grok становится дефолтным кодером. Fable лепит спецификации и гоняет каждый дифф, а Grok 4.5 строчит код через Grok CLI.
Основная кодовая база ложится на Grok, Fable же рулит архитектурой и качеством. Каждый дифф автоматически прогоняется через разные модели — никаких доплат. Если спецификации не перекрываются, таски летят параллельно через отдельных агентов.
Автор гонял такую связку несколько дней. Фишка Fable — он код не пишет в принципе. Только спецификации, отправка исполнителю и разбор полетов.
Настройка:
1. claude plugin marketplace add DannyMac180/fable-advisor && claude plugin install fable-advisor
2. Ставишь Grok CLI отсюда x.ai/cli, потом grok login
3. Команда /model fable
Сорцы в открытом доступе.
👉 Логово Верстальщика | 288 |
| 4 | align-content: normal — неочевидная ловушка в Grid и Flexbox
Поведение align-content: normal радикально отличается во Flexbox и Grid, что приводит к неожиданным разрывам макетов в production-проектах: от лендингов до дизайн-систем. Частая ошибка — полагаться на умолчания, не проверяя контекст.
Flexbox: normal = stretch, но только для многострочных
В многострочных Flexbox-контейнерах (flex-wrap: wrap) normal ведет себя как stretch — строки занимают всю высоту. Это удобно, но ломает сценарии, где нужен компактный вертикальный ритм. Всегда явно задавайте align-content, если макет требует иного:
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 400px;
}
Grid: normal = start, и это правильно для адаптива
В Grid normal эквивалентно start — треки прижимаются к верху, пустота уходит вниз. Это снижает риск «растянутого» контента при динамической высоте. Ошибка: ожидание stretch приводит к перекосу макета:
.grid {
display: grid;
grid-template-rows: auto auto;
align-content: start;
height: 100vh;
}
Так строки не растягиваются, а пустота остается внизу — стабильно для контента разной длины.
Практические советы и предостережения
- В production всегда переопределяйте align-content явно: stretch или start. Это предотвращает «плавающие» компоненты.
- Не путайте align-content (выравнивание всех строк) с align-self (конкретная ячейка). Типичная ошибка: пытаться исправить позицию одного элемента через align-content.
- Для адаптивных сеток с изменяемой высотой контейнера используйте align-content: start в Grid, чтобы избежать лишних вертикальных отступов при скролле.
Вывод: Явное указание align-content — база стабильной верстки, избавляющая от сюрпризов при смене контекста между Flexbox и Grid в production. | 300 |
| 5 |  Народ, смотрим, что OpenAI подвезло — GPT-5.6 породил целую кучу моделей и effort-уровней. Как не запутаться, где реально профит?
Себастьян Рашка проанализировал официальные от OpenAI, скинул effort с моделями в одну кучу и нарисовал диаграмму. Оттуда родились такие приколы:
— Если тебе не сдалась максовая производительность от Terra Ultra, почти всегда умнее брать Luna, но крутить effort повыше.
— Всё, что ниже Sol High, можно смело выкинуть из головы — там проще взять Luna c хай-effort.
— Вместо Sol Extra High тупо бери Terra Ultra — выйдет без потерь.
— Sol Ultra обычно жрет бабки зря, разница с Sol Max того не стоит.
🔄 upd: короче, на диаграмме в левом нижнем углу глюк — подписи Luna сбиты на одну позицию. Так что Luna Ultra на самом деле читаем как Luna Max.
👉 Логово Верстальщика | 339 |
| 6 |  Что тут происходит: Китай хочет прикрыть ворота для иностранцев перед своими лучшими AI-моделями
Как пишет Reuters, китайские власти последний месяц плотно общались с крупнейшими тех. гигантами страны. Обсуждали одно — ограничить доступ зарубежных ребят к своим топовым ИИ-моделям, включая те, что пока даже в релиз не вышли.
Похоже, у китайцев уверенность подскочила. Они, видимо, решили, что для разработки моделей высшего уровня им больше не нужна масштабная дистилляция. Теперь их волнует другое: как бы США не стырили или не адаптировали их наработки в сфере ИИ.
👉 Логово Верстальщика | 452 |
| 7 |  +3Anthropic раскатал доку с двумя подходами, как выжимать из Fable 5 максимум в паре с Sonnet 5. Давай разберем.
Вариант первый — Fable 5 в роли «советника» (Advisor). Sonnet 5 тут рубит бабло — он исполнитель, а к Fable 5 чешет за советами. Почти все токены летят по дешевому тарифу исполнителя. На SWE-bench Pro такая связка выдает ~92% от качества Fable 5, но всего за ~63% цены. Fable 5 дергают где-то раз на задачу — чисто за стратегией. Тут подробности.
Второй заход — Fable 5 как оркестратор. Он сам планирует, что делать, и раскидывает таски между Sonnet 5. Токены опять же по дешевке. На BrowseComp такой расклад дает 96% производительности Fable 5 при 46% стоимости. Все, что жрет ресурсы, скидывается на Sonnet 5. Вот пример.
Claude Managed Agents умеет оба подхода. Каждый подагент живет со своим кэшем — если гоняешь одно и то же, за повторную обработку контекста платить не придется. 👉 Логово Верстальщика | 474 |
| 8 |  Прошла половина лета
Выгореть ещё успеем. А пока лето — отправляемся загорать.
И не просто так, а со скидкой 5000 рублей по промокоду NETSIL от Яндекс Путешествий.
Забронировать
#реклама
travel.yandex.ru
О рекламодателе | 297 |
| 9 | Больше никаких черных ящиков: transition-behavior: allow-discrete -- анимируем display по-взрослому
Долгое время display: none оставался черным ящиком для CSS-анимаций, заставляя верстальщиков городить костыли из visibility, opacity, max-height и JS-классов. В production это особенно болезненно в UI-компонентах: модальных окнах, дропдаунах и тултипах, где внезапное исчезновение элемента ломает восприятие и UX.
Что меняет transition-behavior: allow-discrete
Ключевое слово, которое легально включает анимацию для дискретных свойств, в первую очередь display. Теперь можно анимировать переход между display: block и display: none с помощью обычных transition без фреймворков или хаков. Браузер запоминает начальное состояние и применяет transition перед скрытием элемента.
Ключевой нюанс: @starting-style
Для анимации появления из none обязательно нужен блок @starting-style, задающий начальные значения. Без него анимация не сработает. Пример для меню:
.menu {
transition: opacity 0.3s ease, display 0.3s allow-discrete;
display: block; opacity: 1;
}
.menu--hidden {
display: none; opacity: 0;
}
@starting-style {
.menu--hidden { opacity: 0; display: none; }
}
Производственные сценарии и типичная ошибка
Свойство особенно критично для компонентов с адаптивным поведением, например, мобильного меню или выпадающих фильтров. Типичная ошибка -- забыть указать transition для всех свойств в паре, что приводит к мгновенному скрытию без анимации. Всегда проверяй, что display и animatable-свойства (opacity, transform) объявлены в transition вместе.
Вывод: transition-behavior: allow-discrete и @starting-style превращают скрытие и показ элементов из черного ящика в предсказуемый CSS-паттерн, снижая зависимость от JS и уменьшая визуальную регрессию в интерфейсах. | 390 |
| 10 |  Кешбэк 10% за рекламу в МАКС и Telegram через Директ
Инвестируйте в продвижение в Telegram, МАКС или на обеих площадках 100 000 ₽ и больше через Директ — вернём часть бюджета на следующие кампании. Для участия заполните форму: укажите, что продвигаете, на каком логине и куда прислать условия.
Акция действует с 1 июня по 31 августа.
Получить предложение
#реклама
yandex.ru
О рекламодателе | 279 |
| 11 |  Claude Code наконец допёр до нормальной работы в команде
Теперь можно сидеть в одном терминале с коллегами и долбить задачи. Ещё одна плюшка — собирать несколько копий Claude в кучу, чтобы они гоняли друг друга.
Чё за зверь такой: mosaic.inc 👉 Логово Верстальщика | 2 494 |
| 12 | CSS :has() + scroll-driven-анимации — реактивные хедеры без JS
Связка селектора :has() и scroll-driven анимаций позволяет управлять состоянием UI-элементов по скроллу без единой строчки JavaScript. Раньше для sticky-хедеров, меняющих тень по скроллу, или сайдбаров с плавающим появлением тащили Intersection Observer или слушали scroll — теперь это решается чисто CSS. Основная ошибка: верстальщики продолжают использовать тяжелые JS-обвязки для задач, которые браузер уже умеет в потоке композитинга.
Как работает связка
Создаешь невидимый маркер внутри контента — обычный div с scroll-driven анимацией прозрачности. Затем на контейнере через :has() проверяешь состояние этого маркера: если он анимировался (значение opacity изменилось), значит, скролл прошел заданный порог. Пример для сайдбара:
.marker {
animation: markerAnim linear;
animation-timeline: scroll();
}
@keyframes markerAnim {
0% { opacity: 0; }
100% { opacity: 1; }
}
body:has(.marker[style*="opacity: 1"]) .sidebar {
transform: translateX(0);
box-shadow: 2px 0 10px rgba(0,0,0,0.2);
}
Маркер не занимает места, не ломает layout, а анимация выполняется в отдельном потоке — без пересчета layout и repaint. Подходит для динамических хедеров с blur-эффектом, сайдбаров, floating-кнопок и control-панелей в дашбордах.
Production-контекст и trade-offs
Реальный пример: в админке e-commerce при скролле таблицы заказов нужно показывать панель фильтров, которая прилипает к верху и скрывает лишние контролы. Через :has() + scroll() это делается декоративным маркером на первом скролле страницы. Важно: :has() внутри стилей для ключевых элементов (body, main) может редко, но снижать производительность в больших документах с тысячами DOM-узлов. Практический совет: используй маркер с position: absolute и нулевыми размерами, чтобы избежать дополнительного reflow.
Ошибка: состояние через класс, а не через свойство
Типичная ошибка — пытаться проверять класс маркера, который не меняется при scroll-driven анимациях. Классы изменяются только через JS или через CSS-анимации с animation-fill-mode: forwards и интерполяцией opacity. Всегда проверяй через [style*="..."] или используй CSS-хуки через @property для кастомных свойств. Для старых браузеров без поддержки :has() оставляй Intersection Observer как фолбэк через @supports not selector(:has()).
Вывод: CSS :has() с scroll-driven анимациями — инженерный компромисс между производительностью и браузерной поддержкой, который уже сегодня решает задачи реактивных интерфейсов без JS. | 379 |
| 13 |  Как один отказ бизнесу сэкономил компании 10 миллионов рублей
За трудовой путь сотрудник несколько раз говорил бизнесу «нет», но один такой отказ оказался самым выгодным решением для компании. Близился конец проекта внедрения нового биллинга, бюджет был распределен, команды готовились к запуску. В этот момент бизнес предложил перенести архивные продукты и исторические данные по ним. Архивные продукты использовались редко, но требовались для разбора спорных ситуаций.
Было принято решение не избавляться от legacy биллинга, а использовать его для чтения ретроданных. Оценка объема работ показала, что типового механизма нет, нужно менять архитектуру, разрабатывать новые сценарии миграции, тестировать и поддерживать. Сложенные оценки составили около 10 миллионов рублей. Пересчет финансовой модели показал, что дополнительные инвестиции увеличивают срок окупаемости проекта на один год, при этом функциональность не приносит измеримой бизнес-ценности. Сотрудник принял решение отказать бизнесу и предложил альтернативу — оставить данные в legacy биллинге доступными для чтения.
Читать далее на Хабре | 372 |
| 14 | Сидеть и работать в корпорации страшно, жизнь-то мимо проходит. Уходить строить бизнес страшно, а вдруг прогорит. Один из вариантов - разрабатывать свой пет-проект по вечерам. Многие успешные компании, например, Twitter, создавались именно так. Это не значит, что ваш проект обязательно заработает миллиарды, но заработать больше, чем в найме, и получить ценный опыт вполне реально.
Перед началом разработки появляется множество вопросов, например:
– Как выбрать идею для пет-проекта?
– Что нужно знать про маркетинг?
– Как запуститься и довести до первых продаж не имея бюджета на рекламу?
В телеграм-канале Твой пет проект, Михаил Табунов делится своим опытом с разработчиками и менеджерами.
Он рассказывает, где искать идею для нового проекта, что нужно знать о маркетинге, как запустить стартап и привлечь первых 10 клиентов, а также о многих других важных вещах.
Подписывайтесь на Твой пет проект получайте пользу от практиков рынка! | 369 |
| 15 | CSS навигация без JS: psevdokoordinaty i otstupy pod hatkoj
Два svojstva - ::target-text i scroll-margin - reshayut problemy yakorej, hash-kollizij i pryachego pod headeron na storone HTML/CSS. Na proizvodstvennykh sajtah s dinamicheskim kontentom ili dizajn-sistemami chasto ignorirujut ony, vyodja JS-koostili i narushayut stabilnost layouta.
Podsvetka fragmenta bez ID
Psewdoelement ::target-text v Chrome 131+ pozvolyaet podsvetit tekst, na kotoryj ssylayetsya cherez #:~:text=. Eto rabotaet bez ykornej i bez skriptov. Naprimer, sdelat' link:
/#:~:text=nuzhnyj+tekst
Ili s kontekstom:
#:~:text=nachalo-,do,-konec
CSS minimalen:
::target-text {
background-color: yellow;
color: black;
}
Minus: net podderzhki v Firefox i Safari. No kak progressivnoe uluchshenie dlya Chromium - otlichno.
Otstup pod hatkoj s scroll-margin
Fixed header pyatatet zagolovok pri perekhode po #id. Ranshe eto trebovalo padding na bloke ili JS-vychisleniya. S scroll-margin yor sam znayet svoj otstup:
.anchor {
scroll-margin-top: 80px;
}
Rabotaet s lyubymi hosh-ssylkami i scrollIntoView(). Dlya dublikatov ID - ne dublikat. Esli vtoraja vstrechaetsya, navigatsiya lomaetsya.
Tipovaya oshibka i trade-off
Chertaya sozdavat' mnogo ykorej v HTML, sozdayut kollizii dublikatov ID. Reshenie: ispolzovat ::target-text dlya podsvetki teksta bez privyazki k ID. No uchyot, eto progressivnoe uluchshenie: dlya polzovatelej v Firefox nichego ne podsvetitsya. Zachem? Dlya medijnyh sajtov, e-commerce, gde nado delegirovat' kontekst v URL.
Prakticheskij sovet
Combo-priem dlya stabilnosti:
.anchor {
scroll-margin-top: 80px;
}
:target {
outline: 2px dashed blue;
}
::target-text {
background: rgba(255, 255, 0, 0.5);
}
scroll-margin i :target mozhno bez straktha v production. ::target-text - kak bonus dlya Chrome, no bez eto ne lomat.
Vyvod:
S zamenoj JS-ykorej na scroll-margin i ::target-text ty poluchish predskazuemyj layout bez bagov ot paddingov i bez poteri dostupnosti. | 384 |
| 16 |  Анатомия парного доклада: как мы собирали «PROvoke» на Analyst Days. Часть 2 — выступление и фидбек
Привет, Хабр! В первой части я рассказывал, как мы с Татьяной Маркиной готовили доклад «Провоок» на Analyst Days — про споры, студию в Краснодаре, логистический ад и идею с кнутом и пряником. А сегодня — второй части: что произошло на сцене, какие роли мы играли, почему корсет так и не вышел в свет, и как один разговор в кулуарах перевернул моё понимание публичных выступлений.
Читать далее | 408 |
| 17 | Анимация появления без костылей: CSS @starting-style для display: none
Долгое время плавное появление модалок, тултипов или выпадашек с display: none было головной болью. Браузер просто не успевал проиграть анимацию при переключении — элемент уже отображался, а transition не срабатывал. Приходилось городить костыли с setTimeout или requestAnimationFrame. В production это особенно критично для лендингов и кабинетов, где часто встречается всплывашка с плавным появлением.
Как это работает
В CSS появилось решение — @starting-style. Это директива, которая задаёт начальные стили для момента, когда элемент появляется в DOM или display меняется с none на что-то видимое. Элемент висит с display: none. При смене, скажем, на block, браузер сначала применяет стили из @starting-style, а затем переходит к обычным. Если у элемента прописаны transition или @keyframes — анимация проигрывается.
Пример production-кода
.popup {
display: none;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s ease, transform 0.3s ease;
}
@starting-style {
.popup {
opacity: 0;
transform: scale(0.8);
}
}
.popup.is-open {
display: block;
opacity: 1;
transform: scale(1);
}
После добавления класса .is-open элемент плавно появляется, а при удалении — скрывается. Где пригодится: модальные окна, тултипы, дропдауны, появление элементов при клике или переключении вкладок.
Типичная ошибка и trade-offs
Если у элемента в обычном состоянии уже прописаны opacity: 0 или transform: scale(0.8), @starting-style может не сработать. Нужно убедиться, что display: none задан явно, иначе браузер проигнорирует директиву. Поддержка: Chrome 117+, Safari 17.2. Firefox пока в разработке. Работает и с transition, и с @keyframes. Можно указывать несколько селекторов внутри @starting-style. Практический совет: тестируй анимацию в Chrome DevTools с ручным переключением display — это помогает отловить сценарии, когда @starting-style не применяется из-за каскада.
Вывод: @starting-style — это инженерный шаг к чистому CSS без JS-обвязки для анимации элементов с display: none, устраняющий визуальную регрессию при монтировании. | 367 |
| 18 | Как я хакнул рынок труда: пишем свой ИИ-комбайн для автооткликов на HH.ru
Всем привет! Если вы хоть раз искали работу в IT за последний год, то знаете, что рынок беспощаден к новичкам. Нужно откликнуться на сотни вакансий, а в итоге получаешь отказы от роботов. Чтобы пробиться через фильтры HR, нужно под каждую вакансию писать уникальное сопроводительное письмо.
В этой статье я сделаю полный разбор того, как я написал собственного автономного ИИ-агента, который ищет вакансии, фильтрует мусор с помощью локальной нейросети, пишет персонализированные сопроводительные письма и отчитывается мне в Telegram, пока я спокойно занимаюсь своими делами. Я хотел, чтобы скрипт был бесплатным, автономным и не требовал танцев с бубном вокруг платных API.
Читать далее | 414 |
| 19 | field-sizing: content — auto-height textarea без scrollHeight хаков
Раньше для авто-высоты textarea приходилось писать скрипты: подписываться на input, сбрасывать height в 0, читать scrollHeight, присваивать обратно — и всё это ломалось при ресайзе окна или в SSR. Теперь в CSS появилось свойство field-sizing: content, которое решает проблему на уровне браузера.
Как это работает
Добавьте одно свойство на textarea или input, и браузер сам подстроит размер под содержимое:
textarea {
field-sizing: content;
min-height: 3em;
max-height: 20em;
}
Для input ширина тоже подгоняется под текст. Никакого JavaScript: scrollHeight и height = 0 больше не нужны.
Подводные камни и совместимость
Пока поддержка только в Chromium 123+ (Chrome, Edge, Opera). Firefox и Safari ещё в разработке. Главное ограничение: если задать явные width или height в px или rem, свойство не сработает. Для textarea лучше сразу отключать стандартный resize, иначе авто-высота конфликтует с ручным ресайзом.
Типичная ошибка: игнорирование фоллбэка
Для production-интерфейсов (формы в кабинетах, SaaS, e-commerce) просто положиться на field-sizing нельзя — в Safari высота останется фиксированной. Практический совет: сделайте постепенное улучшение с фоллбэком через CSS и JS:
textarea {
field-sizing: content;
overflow-y: hidden;
resize: none;
}
textarea:not(:focus) {
height: 3em;
}
Для старых браузеров добавьте полифил на scrollHeight. Так вы получите стабильный layout без визуальной регрессии.
Вывод: field-sizing: content — инженерно чистый способ убрать зависимость авто-высоты от JS, но для production в 2024 году обязательно закладывайте фоллбэк, пока Firefox и Safari не догонят Chromium. | 373 |
| 20 | CSS box-decoration-break: clone для production-заголовков
Многострочный заголовок с градиентным фоном и border-radius часто выглядит как бракованный: на второй строке скругления исчезают, фон обрывается. Это не баг браузера, а дефолтное поведение box-decoration-break: slice. В production — лендинги, блоги, админки — такая ошибка ломает визуальную цельность компонента.
Как работает box-decoration-break: clone
По умолчанию браузер режет декорации inline-элемента по границам строк. Свойство box-decoration-break: clone заставляет каждую строку отрисовывать padding, background, border-radius и box-shadow как независимый фрагмент. Для Safari нужен префикс -webkit-box-decoration-break: clone. Пример:
.heading {
display: inline;
background: linear-gradient(to right, #ff7e5f, #feb47b);
padding: 0.2em 0.5em;
border-radius: 8px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
Без clone на второй строке фон плоский, паддинги не срабатывают. С clone каждая строка получает полный набор декораций.
Где это критично в production
Динамические заголовки статей — длина строки плавает, ошибка проявляется непредсказуемо. Градиентные фоны со скруглениями на inline-элементах в UI-библиотеках. Списки с рамкой на каждом пункте-строке. Инлайн-элементы с box-shadow — без clone тень обрезается по краю строки. Поддержка: Chrome, Firefox, Safari, Edge — с префиксом для Safari. IE — нет.
Типичная ошибка и совет
Ошибка: применять к блочным элементам — эффекта ноль, работает только на display: inline или inline-block. Совет: скрести с background-clip: text — тогда каждая строка текстовой маски получит свой фон, что даёт неожиданно чистый визуальный результат для заголовков с прозрачным текстом. Trade-off: увеличивается сложность отладки визуальной регрессии, особенно для адаптивных сеток с переполнением строки.
Вывод: box-decoration-break: clone — обязательное свойство для консистентных inline-декораций в production, предотвращающее визуальные артефакты на многострочных заголовках. | 343 |
