Перевод статьи The Web in 2020: Extensibility and Interoperability с сайта css-tricks.com для css-live.ru, автор — Юна Кравец.

В последние годы мы наблюдали, как быстро развиваются и меняются веб-технологии. В 2020 году основными трендами сообщества веб-разработчиков вполне предсказуемо станут расширяемость и совместимость. Давайте рассмотрим их подробнее.

Расширяемость

Расширяемость определяется тем, насколько гибко мы можем приспособить ту или иную технологию для решения своих задач. За последние несколько лет мы построили компонентно-ориентированный веб — как в разработке (компоненты React! компоненты Vue! компоненты Svelte! веб-компоненты!), так и в дизайне (дизайн-системы!). Интересно, как форма определяется содержанием, да?

Теперь мы пытаемся сделать так, чтобы эта компонентная система выглядела более уникальной. Расширяемость в сети позволяет нам проектировать платформу под наши собственные задачи и экспериментировать с результатами.

Сам CSS становится намного более расширяемым…

CSS Houdini

С помощью CSS Houdini разработчики смогут расширить текущие возможности объектной модели CSS и научить браузер читать и отрисовывать CSS так, как они хотят.

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

See the Pen
MDC Angled Buttons with Houdini by Una Kravets (@una)
on CodePen.

Если вы ещё не знаете, Houdini — это общее название нескольких разных браузерных API, предназначенных для улучшения производительности браузера. Они расширяют возможности оформления и позволяют пользователям определять собственные CSS-свойства. Вот список текущих API Houdini:

• Свойства и значения (Properties and Values)
• API рисования (Paint API)
• Ворклет анимации (Animation Worklet)
• Типизированная объектная модель (Typed Object Model)
• API построения макета (Layout API)

С помощью этих API пользователи могут подключаться к осмысленному семантическому CSS (через Typed Object Model) и даже добавлять семантику к своим CSS-переменным (через Properties and Values). С помощью Paint API можно нарисовать холст и использовать его в качестве изображения для рамки (привет, градиентные рамки!) или создать анимированные блестки, которые принимают динамические аргументы и реализуются с помощью одной строки CSS.

.sparkles {
  background: paint(sparkles);
}

С помощью Layout API можно создавать круглые меню, не размещая элементы вручную через свойство margin, а с помощью Animation Worklet — интегрировать собственные зависимости, которые живут вне основного потока.

Houdini — определённо одна из тех новинок, на которые стоит обратить внимание в наступившем году, и сейчас самое время начать экспериментировать с ним, если вы еще этого не сделали.

Вариативные шрифты

Ещё одна технология, которая очень выручает в задаче ускорения сайтов и при этом расширяет возможности для пользователей — это вариативные шрифты. С появлением такого количества новых вариативных шрифтов — и недавним бета-запуском Google Fonts — они стали доступнее и проще в использовании, чем когда-либо.

Вариативные шрифты имеют векторный формат и позволяют устанавливать широкий диапазон значений для различных осей интерполяции, таких как насыщенность и наклон. Интерполяция осей позволяет шрифтам плавно переходить между точками.

Вот пример:

Кроме того, можно добавлять новые оси вариативных шрифтов, и эта возможность делает работу дизайнеров и разработчиков ещё более креативной. Вот пример некоторых вариативных шрифтов с отличного ресурса под названием v-fonts:

Вариативные шрифты поддерживаются относительно хорошо — их распознают 87% современных браузеров.

Кастомные свойства

Кастомные свойства, как и вариативные шрифты, также хорошо поддерживаются браузерами. И хотя они не новы, мы всё ещё открываем для себя многое из того, что можно делать с их помощью.

Кастомные свойства позволяют создавать по-настоящему динамические CSS-переменные, то есть мы можем настраивать их в JavaScript, разделяя логику и оформление. Отличный пример — работа Дэвида Хуршида, который показывает, как легко можно создавать реактивную анимацию и синхронизировать стили.

Мы начинаем также использовать больше логики в своих таблицах стилей. Недавно я описала в своём блоге, как создавать динамические цветовые темы с помощью нативной функции CSS calc() и кастомных свойств.

Благодаря этому способу темизации отпадает необходимость в дополнительных инструментах для обработки CSS — он работает в любом технологическом стеке; и это подводит нас к следующему тренду 2020 года: совместимость.

Совместимость

Совместимость, по моему определению в этом посте, означает возможность работать с разными технологиями и задачами, которые ставят перед собой люди. С технической точки зрения, при нынешнем фрагментированном вебе, многие компании недавно перешли на другой стек технологий, или работают со многими стеками сразу, и теперь им важно защитить свои стеки технологий от будущих изменений, чтобы обеспечить хоть какое-то подобие единообразия.

Веб-компоненты

Веб-компоненты пытаются решить эту проблему, рассматривая компонентную архитектуру через призму веб-стандартов. Идея заключается в том, чтобы ввести стандартный формат, который может использоваться независимо от наличия какой-либо библиотеки, что облегчит работу разработчика и обеспечит единообразие взаимодействия компонентов.

Каждый веб-компонент инкапсулирован и работает в современных браузерах без зависимостей. Эта технология всё ещё разрабатывается, и я думаю, что она будет активно совершенствоваться в 2020 году.

Логические свойства

Логические свойства заставляют нас по-новому взглянуть на то, как мы задаём размеры и положение элементам макета, чтобы страница отображалась корректно на разных языках и в разных режимах чтения. Логические свойства помогают верстать страницы с учётом особенностей восприятия пользователя.

В английском и других языках с письмом слева направо мы рассматриваем макеты в категориях высоты и ширины и ориентируем поля, рамки и отступы по конкретным сторонам: сверху, слева, снизу и справа (top, left, bottom, right). Однако, если мы стилизуем страницу таким образом, а затем отобразим её на языке с письмом справа налево, например арабском, свойство padding-left для абзацев больше не будет означать внутренний отступ от начала строки. Это ломает вёрстку.

А если вместо padding-left написать padding-inline-start, то при переключении на язык с письмом справа налево внутренний отступ корректно переместится на другую сторону страницы, в начало строки на выбранном языке, сохраняя целостность макета.

Медиазапросы пользовательских предпочтений

Медиазапросы пользовательских предпочтений также усиливают свои позиции, и в 2020 году ожидается появление нового функционала. Такие медиазапросы позволяют адаптировать сайты для людей, которые предпочитают просматривать страницы с высоким контрастом, в тёмном режиме и с минимумом анимации.

Вот список ожидаемых новинок медиазапросов пользовательских предпочтений:

• prefers-color-scheme
• prefers-contrast
• prefers-reduced-motion
• prefers-reduced-transparency

В этом видео я расскажу, как создать медиазапрос пользовательских предпочтений для тёмного режима, используя пользовательские свойства для стилизации:

Ещё один претендент: скорость

Скорость тоже входит в число приоритетных направлений развития веб-технологий в 2020 году. Некоторые из упомянутых выше технологий способствуют повышению производительности сайтов, даже если это не является их основной функцией (например, вариативные шрифты могут уменьшить общий размер загружаемых шрифтов). Быстродействие становится крайне важным, когда мы думаем о миллиарде пользователей, выходящих в сеть там, где скорость интернета может быть низкой.

Кроме того, набирает популярность формат Web Assembly — оболочка, позволяющая писать более низкоуровневый код для браузера. Также в наступившем году я предвижу больше работы с WebGL, который использует похожие методы для быстрой и улучшенной отрисовки графики. Благодаря низкоуровневому коду страницы отображаются быстрее, и в некоторых случаях использования WebGL такой код может потребоваться, чтобы предотвратить сбои в работе браузера при просмотре страниц с улучшенной визуализацией. Я думаю, что эти технологии будут активно развиваться и нас ждёт больше примеров использования WebGL в 2020 году.

Веб постоянно развивается, и именно за это мы его и любим. А что вы видите в качестве цели или достойной внимания технологии в 2020 году? Расскажите об этом в комментариях!

P.S. Это тоже может быть интересно:

• CSS-выражения от контейнера для дизайнеров
• Как читать W3C-спецификации
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами