Статьи для тех, кто
выводит стек в прод
Материалы о React, Node.js, TypeScript и AI. Переведённый текст показывается, если он есть. Если нет — вы видите английский текст и пометку об этом.
Тег: CSS
Плавная навигация в стиле приложений благодаря API View Transitions в Next.js
Переходы между страницами в стиле приложений в Next.js с использованием API View Transitions: анимация общих элементов при переходе между маршрутами без необходимости в тяжелой библиотеке анимаций, плюс примечания по использованию.
4 мин чтенияПять указателей rel в ссылках, ускоряющих первую отрисовку содержимого.
Используйте preconnect, preload, dns-prefetch, prefetch и modulepreload в разделе head документа для подготовки соединений и сокращения времени загрузки ресурсов без необходимости переписывания приложения.
3 мин чтенияСтилизуйте родительские элементы на основе их содержимого с помощью CSS :has()
Узнайте, как функция :has() наконец позволяет селекторам обращаться к потомкам и братьям элементов, где могут использоваться оболочки микрофронтендов, и почему Shadow DOM в сочетании с правилами классовых имён по-прежнему ограничивает этот подход.
6 мин чтенияРаскрывающиеся элементы React, доступные для индексации: скрытие с помощью CSS Grid, а не демонтирования
Создайте вложенные аккордеоны на React, которые сохраняют содержимое в DOM для индексации, анимируют изменение высоты с использованием строк сетки, ограничивают возможность открытия только одного элемента на уровне и сбрасывают состояние при закрытии.
8 мин чтенияИгнорирование отрисовки вне экрана с использованием content-visibility и contain-intrinsic-size
Узнайте, как функция видимости контента автоматически снижает затраты на форматирование длинных страниц, генерируемых сервером, почему обязательно использовать параметр contain-intrinsic-size, и как это сравнивается с виртуализацией.
12 мин чтенияCSS attr() в виде текста: прямое вставление значений атрибутов HTML в стили
Узнайте, как функция CSS attr() преобразует атрибуты данных в значения длины, цвета и времени, почему её альтернативные решения не срабатывают, почему функция url() заблокирована и как можно безопасно использовать её сегодня.
18 мин чтенияКто должен контролировать поведение интерфейса? Выбор между HTML, CSS и JavaScript
Критерии для определения того, когда встроенные функции HTML и CSS, такие как диалоговые окна, поп-апы, :has() и запросы к контейнерам, должны заменять JavaScript, а когда — нет.
15 мин чтенияКнопка обратной связи с анимированным жестом «палец вверх» без использования каких-либо библиотек анимаций
Создайте всплывающий анимированный элемент обратной связи с символами «лайк» и «дизлайк», включающий состояния активности и запрос к серверу, используя только HTML, CSS и несколько строк JavaScript.
7 мин чтенияСтруктура, стиль, поведение: как HTML, CSS и JavaScript делят работу
Простая для новичков карта, показывающая, что именно включает HTML, CSS и JavaScript на веб-странице, как они взаимодействуют, и какие распространённые ошибки затрудняют различение между ними.
6 мин чтения
О этих статьях
Оценка за 24 часа
Нужен такой же стек в операторском слое? Пришлите бриф — оценка за 24 часа.