Загрузка...
Рассматривается общий принцип реализации «прыгающих» подписей к полям формы — преобразования placeholder текстового поля в label снаружи него с помощью только CSS и HTML.
Анимация label для текстового input
@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 с помощью существующих инструментов аналитики.
Web Vitals
Количественная оценка впечатления от web-сайта и поиск возможностей для улучшения качества и удобства для пользователя.
Как запускать CSS-анимацию при прокрутке страницы
Пошаговое руководство по запуску CSS-анимации при появлении HTML-элемента в видимой части окна, во время скролла, с помощью Intersection Observer API.
Управление панорамированием, наклоном и масштабированием вебкамеры
Обнаружение и использование функций панорамирования (pan), наклона (tilt) и масштабирования (zoom) — PTZ вебкамеры с помощью Javascript.
CSS для настройки HTML-элемента SELECT
Как написать стили для выпадающих списков select, сохраняя читаемость, доступность и контрастность в соответствии с требованиями WCAG 2.1.
CSS для настройки текста поверх изображений
Улучшение читаемости текста, расположенного над фоновым изображением, с использованием разных техник комбинирования градиентов, прозрачности подложки и теней.
Использование CSS для управления выделением текста
CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа
Смягчение теней с помощью слоёв в CSS-свойстве box-shadow
Запечатлеть все тонкости реальной тени с помощью box-shadow не просто, но кое-то можно улучшить, применяя к блокам несколько слоев теней.
JavaScript Intl API интернационализация (I18n)
Примеры использования методов Intl API для интернационализации Javascript приложений (i18n): форматирование дат, чисел, валют, единиц измерения.
Преобразование текста в речь c помощью JavaScript
Использование JavaScript SpeechSynthesis API для синтеза речи, то есть для преобразования в браузере текста в речь и его многочисленные особенности.
Уменьшающаяся при прокрутке «шапка» страницы без JavaScript
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.