Frontend Portal

Интересный факт: когда речь идёт о возможности прерывания, CSS transitions и keyframe-анимации ведут себя по-разному Transitions интерполируют значения к последнему актуальному состоянию и могут быть прерваны, тогда как keyframe-анимации выполняются по фиксированному таймлайну и после запуска не перенаправляются на новое состояние ➡️ @FrontendPortal

Совет по CSS Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище. Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными Сделай доступным для клавиатуры: используй :focus-within, чтобы показывать кнопки, когда фокус находится внутри контейнера. Сделай доступным для тачскрина: hover: none сработает, если основное устройство ввода не поддерживает наведение ➡️ @FrontendPortal | #tip by...

Я, сливающий все приватные данные своей компании в нейронку, просто чтобы отцентрировать div ➡️ @FrontendPortal

CodePen анонсировал CodePen 2.0 Популярная фронтенд-песочница получает крупное обновление. Сейчас версия находится в закрытой бете, доступ к которой можно запросить. Новые возможности включают: → Поддержку файлов и папок для более удобной структуры проекта → Build with Blocks — сборка интерфейсов из переиспользуемых UI-блоков → Беспроблемную настройку инструментов и фреймворков → Совместную работу в реальном времени с другими разработчиками → Omnibar для быстрого поиска чего угодно → Новые настр...

Вышел Better Auth 1.5! Добавь аутентификацию на свой сайт за считанные минуты. Бесплатно и с открытым исходным кодом. ✓ React, Vue, Astro, Next.js, Nuxt… ✓ Логин через X, GitHub, Meta, Google, Discord и другие $ pnpm install better-auth ➡️ @FrontendPortal

tabular-nums должен быть значением по умолчанию для любых чисел, которые обновляются (таймеры, счётчики, цены, проценты, очки, лайв-данные и т.д.). Включить OpenType-фичу tnum можно через CSS-свойство font-variant-numeric: .tabular-nums { font-variant-numeric: tabular-nums; } ➡️ @FrontendPortal

У текста всегда странный лишний отступ: сверху над заглавными буквами и снизу под базовой линией. Фикс в одну строку CSS: text-box: trim-both cap alphabetic; Идеально обрезает текстовый бокс по реальным границам глифов. Больше никаких костылей с паддингами. ➡️ @FrontendPortal

Если ты используешь эти JavaScript-библиотеки… Скорее всего, они тебе уже не нужны. Лучше используй нативный API ➡️ @FrontendPortal

Совет по веб-доступности: Лучший способ сделать ссылки только с иконками доступными для скринридеров Иногда нужно создавать ссылки, содержащие только иконку. Например: ссылки для шеринга поста Но такие ссылки недоступны для пользователей скринридеров Чтобы это исправить, можно задать подпись в скрытом элементе и связать его с тегом <a> с помощью атрибутов aria-labelledby и id. Также установите aria-hidden="true" на SVG-иконку, чтобы скринридеры её пропускали ➡️ @FrontendPortal | #tip by Shripal ...

CSS Pattern Сборник красивых фонов на чистом CSS Можно настраивать цвета, плотность, отступы, размеры и другие параметры, чтобы идеально попасть в ваш дизайн https://css-pattern.com/ ➡️ @FrontendPortal