🔍 От CSS до Event Loop: что происходит в браузере

➡️ Как работают браузеры — рендеринг страницы

Понимание критического пути рендеринга: DOM, CSSOM, Render Tree.

➡️ CSS Triggers

Интерактивный инструмент, показывающий, какие свойства CSS вызывают перерасчёт layout и перерисовку.

➡️ How V8 Optimizes Your Code

Разбираем, как движок V8 оптимизирует JS через hidden classes и inline caching.

➡️ Event Loop: Microtasks and Macrotasks

Как работает Event Loop, микротаски и макротаски, и что это значит для асинхронного JS.

➡️ HTTP/3 vs HTTP/2: Main Performance Differences

Почему новые протоколы HTTP ускоряют загрузку страниц и улучшают UX.

🐸 Библиотека фронтендера

#under_hood #css

🔥 Адаптив без медиазапросов

Медиазапросы хороши, но часто усложняют каскад. Современный CSS позволяет адаптировать сетку контекстно, без @media.

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  transition: .3s;
}

.card-grid:has(.expanded) { grid-template-columns: 1fr; }

.card-grid:has(.card:hover) .card:not(:hover) {
  opacity: .4;
  transform: scale(.98);
  filter: blur(1px);
}

➡️ Что получите:

— Контейнер, «реагирующий» на состояние внутренних элементов,

— Адаптивные layout-переходы без JS и без медиазапросов,

— Гибкость, пригодную для UI-эффектов, collapsible-контента и интерактивных сеток.

➡️ Применимо для: карточек, галерей, layout-адаптации внутри компонентов, инлайн-редакторов.

⚙️ Поддержка: Chrome 105+, Safari 15.4+, Firefox 121+.

🐸 Библиотека фронтендера

#readme #css

💳 Плавный ввод данных карты на Vue.js

Изящная форма с мягкими микровзаимодействиями и реалистичной анимацией переворота при вводе CVV.

♾ Автоматически форматирует номер, определяет тип карты (Visa, Mastercard, Amex) и проверяет корректность данных.

🎨 Отличный пример того, как детали делают UX «живым».

🔗 Ссылка на CodePen

🐸 Библиотека фронтендера

#readme #css

🌗 Автоматическая темная тема без медиазапросов

Вместо @media (prefers-color-scheme) можно использовать color-scheme:

:root {
  color-scheme: light dark;
  background: light-dark(#fff, #111);
  color: light-dark(#111, #fff);
}

➰ Что это дает:

— Автоматическое переключение темы по системным настройкам
— Скроллбары, инпуты и формы тоже меняют стиль
— Меньше кода и больше нативности

⚙️ Поддержка: Chrome 120+, Safari 17+, Firefox 120+

🐸 Библиотека фронтендера

#readme #css

✨ Вариативные отступы через clamp()

Делаем отступы адаптивными без медиазапросов — пусть дизайн сам подстраивается под ширину экрана:

.section {
  padding: clamp(1rem, 5vw, 3rem);
}

Что это дает:

— Минимальный отступ — 1rem, максимум — 3rem

— В промежутке — плавное масштабирование по ширине вьюпорта

— Один рядок кода вместо трёх @media

💡 Работает не только с padding, но и с font-size, margin, gap и даже border-radius

🔤 Поддержка: Chrome 79+, Safari 16+, Firefox 75+

Сейчас на курсы Proglib действует −40%🥰

🐸 Библиотека фронтендера

#readme #css

🔍 Валидация форм без раздражения

Вместо :invalid, который срабатывает сразу, используйте :user-invalid.

Что это дает:

— Валидация срабатывает только после взаимодействия с полем

— Не показываем ошибки в пустой форме при загрузке

— Лучший UX без дополнительного JS

⚙️ Поддержка: Chrome 119+, Safari 16.5+, Firefox 88+

Сейчас на курсы Proglib действует −40%🥰

🐸 Библиотека фронтендера

#readme #css