Может быть применено, когда дело доходит до изменения пропорций изображения (например, уменьшения ширины при сохранении высоты), а также когда потеря некоторых частей изображения нежелательна. Использует алгоритм Seam Carving (вырезание швов).
Largest Contentful Paint (LCP) – важная, ориентированная на пользователя метрика для измерения визуально-воспринимаемой скорости загрузки страницы
Ориентированная на пользователя метрика для измерения реакции на нагрузку, помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта
Как определять и исправлять сдвиги макета с помощью Layout Instability API и DevTools.
Накопительный сдвиг макета – количественный показатель для измерения визуальной стабильности, для оценки, как часто посетители сайта сталкиваются с неожиданными перемещениями контента.
Как измерить Web Vitals с помощью существующих инструментов аналитики.
Количественная оценка впечатления от web-сайта и поиск возможностей для улучшения качества и удобства для пользователя.
Пошаговое руководство по запуску CSS-анимации при появлении HTML-элемента в видимой части окна, во время скролла, с помощью Intersection Observer API.
Обнаружение и использование функций панорамирования (pan), наклона (tilt) и масштабирования (zoom) – PTZ вебкамеры с помощью Javascript.
Как написать стили для выпадающих списков select, сохраняя читаемость, доступность и контрастность в соответствии с требованиями WCAG 2.1.
Улучшение читаемости текста, расположенного над фоновым изображением, с использованием разных техник комбинирования градиентов, прозрачности подложки и теней.
CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа
Запечатлеть все тонкости реальной тени с помощью box-shadow не просто, но кое-то можно улучшить, применяя к блокам несколько слоев теней.
Примеры использования методов Intl API для интернационализации Javascript приложений (i18n): форматирование дат, чисел, валют, единиц измерения.
Использование JavaScript SpeechSynthesis API для синтеза речи, то есть для преобразования в браузере текста в речь и его многочисленные особенности.
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.
Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах
Макет сетки календаря – идеальный кандидат для использования CSS-grid и его свойств: grid-template-columns и grid-column.
Как сделать простой адаптивный макет с сеткой в 3 колонки с помощью CSS-grid и всего 3 CSS-свойств grid-area, grid-gap и grid-template-area.
Как с помощью только CSS расположить картинку или любой float-блок в нижнем углу или по бокам контейнера и текстом вокруг неё.
Загрузка...