Статті для тих, хто
виводить стек у прод
Матеріали про React, Node.js, TypeScript і AI. Перекладений текст показується, якщо він є. Якщо ні — ви бачите англійський текст і примітку про це.
Тег: CSS
Плавна навігація, схожа на у додатках, завдяки API View Transitions у Next.js
Переходи між сторінками у стилі додатків у Next.js за допомогою View Transitions API: рух спільних елементів між маршрутами без використання важких бібліотек анімацій, а також примітки щодо підтримки.
4 хв читанняП’ять підказок rel=link щодо швидкості першого відображення змісту
Використовуйте preconnect, preload, dns-prefetch, prefetch та modulepreload у заголовку документа, щоб попередньо підготувати з’єднання та скоротити використання ресурсів, не переписуючи додаток.
3 хв читанняСтилізуйте батьківські елементи за їхнім вмістом за допомогою CSS :has()
Дізнайтеся, як метод :has() нарешті дозволяє селекторам оглядати нащадків та братські елементи, де можна використовувати мікрофронтенд-шелли, та чому Shadow DOM у поєднанні з правилами класових імен все ще обмежує цю модель.
6 хв читанняРеактивні акордіони, які можна прокручувати: згортання за допомогою CSS Grid, а не видалення компонентів
Створіть вкладені аккордіони React, які зберігатимуть вміст у DOM для індексації, анімуватимуть зміну висоти за допомогою рядків сітки, дозволятимуть відкривати лише один елемент на рівні та скидатимуть стан після закриття.
8 хв читанняПропуск рендерингу поза екраном за допомогою content-visibility та contain-intrinsic-size
Дізнайтеся, як параметр content-visibility: auto зменшує витрати на форматування на довгих сторінках, які генеруються сервером, чому обов’язково використовувати параметр contain-intrinsic-size, та як це порівнюється з віртуалізацією.
12 хв читанняCSS attr() у вигляді тексту: безпосереднє введення значень атрибутів HTML у стилі
Дізнайтеся, як функція CSS attr() перетворює атрибути даних на значення довжини, кольорів та часу, чому її альтернативні рішення не працюють, чому функція url() заблокована, та як сьогодні безпечно її використовувати.
18 хв читанняХто має контролювати поведінку інтерфейсу? Вибір між HTML, CSS та JavaScript
Концепція для визначення того, коли вбудовані функції HTML та CSS, такі як dialog, popover, :has() та container queries, слід використовувати замість JavaScript, а коли — ні.
15 хв читанняКнопка зворотного зв’язку у вигляді піднятого великого пальця з анімацією без будь-якої бібліотеки анімацій
Створіть віджет зворотного зв’язку у вигляді пальця, піднятого вгору, та пальця, опущеного вниз, із анімацією pop на ключових кадрах, активними станами та викликом fetch, використовуючи лише HTML, CSS та кілька рядків JavaScript.
7 хв читанняСтруктура, стиль, поведінка: як HTML, CSS та JavaScript ділять роботу
Карта, придатна для початківців, яка показує, що саме належить до HTML, CSS та JavaScript у веб-сторінці, як вони співпрацюють, та які поширені помилки змивають межі між ними.
6 хв читання
Про ці статті
Оцінка за 24 години
Потрібен такий стек в операторському шарі? Надішліть бриф — оцінка за 24 години.