5 трендов Front-End, которым стоит следовать в 2021 году

Опубликовано: 2020-12-17

В Интернете есть масса статей о тенденциях в дизайне, которым нужно следовать. Мы также добавили одну из них в «Горячие тенденции веб-дизайна, которым следует следовать в 2021 году». Акцент на таких статьях очень понятен - сам дизайн - это то, что видят и клиент, и посетитель. Однако код, стоящий за ним, в основном не имеет отношения к большинству пользователей.

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

Итак, чтобы отдать должное всем разработчикам интерфейса, а также дать некоторые идеи и идеи дизайнерам, мы составили этот список «Тенденции внешнего интерфейса, которым следует следовать в 2021 году».

1. Настраиваемые свойства CSS

Это то, чего разработчики хотели годами, хотя настраиваемые свойства CSS (или также известные как переменные CSS) существуют уже некоторое время. Например, W3C Module Level 1 относится к 2015 году. Но, как и с любой новой технологией, требуется время, чтобы набрать обороты. И мы считаем, что в 2021 году мы увидим одни из самых высоких показателей внедрения с момента его создания.

Почему это круто?

Пользовательские свойства фактически являются переменными в CSS. Вы можете сказать: «Но ведь в Sass есть переменные, не так ли?» Да! Но когда вы компилируете Sass в CSS, вы получаете CSS. И нет никаких переменных. Вы больше не можете изменять значение этой переменной. $primary: red просто красный.

поддержка настраиваемых свойств

Настраиваемые свойства хорошо поддерживаются везде, кроме Internet Explorer.

Однако с настраиваемыми свойствами у вас есть --primary: red . А затем, например, вы можете переопределить --primary на синий. Прямо в браузере, компиляция не требуется. Чтобы узнать больше об этих приемах CSS В чем разница между переменными CSS и переменными препроцессора?

Один из отличных способов их использования - настраивать тематику. Вы можете определить значения HSL с помощью переменных, а затем разрешить пользователям изменять оттенок с помощью ползунка на интерфейсе. Подключите значение ползунка к переменной CSS с помощью JS и BAM с помощью функции «Установить свою цветовую схему».

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

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

Один из популярных веб-сайтов, которые вы можете использовать для просмотра и экспериментов, - это вариативные шрифты. Это также может служить хорошей демонстрацией на тот случай, если вы впервые слышите этот термин. Вариативные шрифты позволяют использовать один файл и применять такие свойства, как "font-weight" или "font-style" с полным контролем над толщиной или наклоном…

переменные шрифты-gif

Источник: Введение в вариативные шрифты в Интернете.

Почему это круто?

Что ж, ясно, что это дает нам, разработчикам (и дизайнерам), почти бесконечную свободу в том, как выглядит шрифт. Вы когда-нибудь думали, что "font-weight: bold" - это слишком много, а «normal» - слишком тонко, и у вас нет ничего промежуточного?

Дизайнеры шрифтов прекрасно об этом знают и часто предоставляют средние свойства. Они маркируют их числами, например, 100 (светлый) или 900 (очень толстый) и любыми промежуточными значениями, например, 300, 400, 600, 700 и т. Д. Но, может быть, вам нужно 750 А это недоступно? Теперь у вас есть вариативные шрифты!

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

  • headings-font-normal.woff2
  • headings-font-bold.woff2
  • body-normal.woff2
  • body-italic.woff2
  • body-bold.woff2

Со всем этим добром вы можете легко преодолеть 500 КБ. С переменным шрифтом вам нужен только один шрифт, и вы получите все остальные варианты. Одна просьба.

Вы можете дополнительно прочитать статью «Переменные шрифты: введение в вариативные шрифты в Интернете».

3. Больше JavaScript!

Это название «закатывает глаза», но это правда! Front-End разработчики - это не только «JS-разработчики», но и просто разработчики «CSS / HTML». И этот заголовок для них.

JavaScript - это не просто тенденция, хотя в зависимости от того, кого вы спрашиваете, могут возникать очень горячие разговоры с комментариями вроде «Да, а в настоящее время вы даже не можете открыть веб-сайт, если у вас не включен JS» или «Спасибо за загрузка слайдеров размером 5 МБ и рекламы для вашей страницы «О нас» ».

Но независимо от того, сколько у него положительных и отрицательных сторон, его использование растет. Итак, какие технологии / подход / инструменты на основе JS должны иметь больше тенденций?

  • React / Vue как прикрытие для CMS, таких как WordPress (без головы)
  • WebGL (Three.js) 3D-графика, моделирование, интерактивность
  • Контент VR и AR
  • Более оптимизированные рабочие процессы сборки (webpack, gulp)
  • API браузера для большего контроля / функциональности

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

4. Утилитарный стиль.

Стиль на основе утилит фокусируется на применении стилей через предопределенные классы. Это то, что обычно означает стилизация веб-страницы. Однако здесь он немного отличается от стандартного. Видите ли, вы не .card с тенью, фоном и т. Д. Вы .shadow HTML-элемент с помощью .shadow .bg-light и .br-5 (например, border-radius).

Это подход, который отлично работает для JS-разработчиков, которым просто нужно что-то быстро вывести и которые не беспокоятся о CSS.

Это совсем не ново, но популярность Tailwind заставила разработчиков пересмотреть подход.

Домашняя страница Tailwind

Домашняя страница Tailwind

Некоторые могут возразить, что это в значительной степени «написание CSS в HTML», когда вы не можете изменить компонент из CSS и обновить его повсюду. Технически это правда, но когда ваши компоненты представляют собой файлы JS, например, в приложении React / Vue, вы ОБЯЗАТЕЛЬНО обновляете их в одном месте.

Возможно, один из недостатков заключается в том, что вам нужно изучить другой фреймворк. Это не просто CSS, вам нужно запомнить свойства, поскольку некоторые элементы могут выглядеть так:

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

Хотя всегда найдутся люди, которые его любят (и ненавидят), это отличное решение многих проблем. Кроме того, вы никогда не узнаете, работает ли это для вас, пока действительно не попробуете.

5. Новые возможности CSS

Использование новых функций CSS может быть само по себе тенденцией. Хотя это не изменение конкретной функции или подхода, это ставит под сомнение то, как мы кодировали до сих пор. Плюсы? Это решает множество проблем. Плохо? Обратная совместимость.

Но благодаря прогрессу производителей браузеров за последние год или два (если посмотреть на вас, Microsoft), большинство пользователей во всем мире могут получить доступ к Интернету более эффективно, чем когда-либо прежде.

ccs теневые части

CSS Shadow Parts как еще одна предстоящая функция

Пользовательские свойства CSS - одна из этих функций, но, поскольку ей около 5 лет (и она довольно крупная), у нее есть свой собственный раздел.

Режимы записи

Хотя они используются не слишком часто, поскольку многим разработчикам редко требуется поддержка языков с направлением справа налево, режимы письма все же существуют. Они необходимы для информационных панелей / фреймворков и многоязычных сайтов. Благодаря усиленной поддержке свойств направленного письма, например, margin-inline-start, вам не нужно перезаписывать margin-left на margin-right для RTL.

Подсетка CSS

У нас был флекс, затем были сетки. Теперь у нас есть сетки внутри сеток . Подсетки - это то, что разработчики ожидали получить из коробки, когда Grid впервые была поддержана. Что ж, теперь он у нас есть, и он такой же крутой и полезный, как кажется. Достойное упоминание: зазоры Flexbox (так как это тоже часть сеток). Он делает то, что говорит. К сожалению, он еще не поддерживается.

:is

Сокращенный селектор, который лучше всего объясняется фрагментом кода, который мы взяли из MDN:

 / * Выбирает любой абзац внутри заголовка, главный
или элемент нижнего колонтитула, который зависает * /
: is (header, main, footer) p: hover {
красный цвет;
курсор: указатель;
}
 / * Вышеуказанное эквивалентно следующему * /
заголовок p: hover,
основной p: навести,
footer p: hover {
красный цвет;
курсор: указатель;
}