Метка: layout

aspect-ratio [quirksmode]

aspect-ratio: 16/9

Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) — важная, ориентированная на пользователя метрика для измерения визуально-воспринимаемой скорости загрузки страницы

First Input Delay (FID)

на временную шкалу были добавлены FCP, TTI и FID

Ориентированная на пользователя метрика для измерения реакции на нагрузку, помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта

Cumulative Layout Shift (CLS)

Сдвиг макета при добавлении контента

Накопительный сдвиг макета — количественный показатель для измерения визуальной стабильности, для оценки, как часто посетители сайта сталкиваются с неожиданными перемещениями контента.

Web Vitals

Количественная оценка впечатления от web-сайта и поиск возможностей для улучшения качества и удобства для пользователя.

Выезжающая боковая панель (sidebar)

sidebar

Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах

CSS-свойство aspect-ratio

Применение CSS-свойства aspect-ratio для установки отношения сторон контейнеру вместо использования трюков с помощью padding-top: 56.25% и несколько практических примеров.

Sticky sidebar (VanillaJS)

sticky sidebar

Плавающая боковая панель (sticky sidebar). Несложная HTML-разметка, немного CSS и чистый Javascript.

window.matchMedia()

matchMedia vs resize

Работа с медиа-запросами в JavaScript отличается от работы с ними в CSS, хотя концепции схожи: сопоставить условия и применить результат