Загрузка...
Шаблон html-страницы с шапкой, подвалом и двумя боковыми панелями по бокам от контента
Классические 3 колонки
Выстраивание содержимого
Заголовок, описание и изображение равномерно выстраиваются внутри соседних карточек
Стопка блинчиков
Такой html-макет, обычно называемый sticky footer, часто используется как для веб-сайтов, так и для приложений.
Разорванный блинчик
HTML-макет, который растягивается в зависимости от пространства и привязывается к следующей строке минимального размера.
RAM (Repeat, Auto, Minmax)
Адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами
Адаптивная боковая панель
Макет, в котором для боковой панели указаны минимальный и максимальный размеры, а остальной контент заполняет оставшееся пространство.
Центрирование элемента
Центрирование элемента внутри его родителя одной строкой кода: place-items: center
Классическая сетка для 12 колонок
Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat()
CSS clip и mask для всплывающих подсказок
Несколько техник вырезания и использования слоёв маски для формирования фигуры всплывающих подсказок с произвольным хвостиком-стрелкой.
Обнаружение сенсорного ввода для touchscreen или hover для мыши
Как CSS медиа-запросами hover и pointer определить наличие touchscreen и использование сенсорного ввода или управление курсором с помощью мыши.
Анимация label для текстового input
Рассматривается общий принцип реализации «прыгающих» подписей к полям формы — преобразования placeholder текстового поля в label снаружи него с помощью только CSS и HTML.
@property: наделение CSS-переменных сверхспособностями
Расширение возможностей настраиваемых свойств с помощью установки для них семантического значения — типизация CSS-переменных
CSS-border с анимированным градиентом
Использование в border-image CSS-градиентов и их анимация для перемещения цветов градиента вдоль рамки блока.
aspect-ratio [quirksmode]
Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.
Изменение размеров изображения с учетом его содержимого в JavaScript
Может быть применено, когда дело доходит до изменения пропорций изображения (например, уменьшения ширины при сохранении высоты), а также когда потеря некоторых частей изображения нежелательна. Использует алгоритм Seam Carving (вырезание швов).
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) — важная, ориентированная на пользователя метрика для измерения визуально-воспринимаемой скорости загрузки страницы
First Input Delay (FID)
Ориентированная на пользователя метрика для измерения реакции на нагрузку, помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта
Отладка сдвигов макета (layout shifts)
Как определять и исправлять сдвиги макета с помощью Layout Instability API и DevTools.
Cumulative Layout Shift (CLS)
Накопительный сдвиг макета — количественный показатель для измерения визуальной стабильности, для оценки, как часто посетители сайта сталкиваются с неожиданными перемещениями контента.
Лучшие практики для измерений Web Vitals
Как измерить Web Vitals с помощью существующих инструментов аналитики.