CSS в 2024 году: новые тенденции

Материал из Викижурнал
Введение в CSS
CSS в 2024 году: новые тенденции
CSS в 2024 году: новые тенденции
Тематические порталы

Ознакомьтесь с новыми тенденциями в CSS в 2024-м году с такими как: контейнерные запросы, новые системы цветов, улучшения переменных CSS, сабгрид, переменные шрифты, селекторы :has() и :is(), вложенность CSS, слои каскадов, современные фреймворки и псевдокласс :focus-visible.

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

  • Контейнерные запросы: революционный элемент адаптивного дизайна, позволяющий компонентам адаптироваться в зависимости от их собственного размера.
  • Новые системы цветов (LCH, LAB, HWB): предоставляют больше возможностей и контроля для создания ярких дизайнов.
  • Улучшения переменных CSS: для динамического оформления и более простой интеграции системы дизайна.
  • Суб-сетки: делает макеты CSS Grid еще более мощными и удобными в управлении.
  • Переменные шрифты: обеспечивают более отзывчивую и эффективную типографику.
  • Селекторы: has() и :is(): упрощают сложные выборки в CSS.
  • Вложенность CSS: для более чистых и организованных структур кода.
  • Слои каскадов: обеспечивают больший контроль над организацией таблицы стилей.
  • Современные фреймворки и инструменты: такие как Tailwind CSS, StyleX и Chakra UI, чтобы ускорить разработку и обеспечить последовательность.
  • Псевдокласс :focus-visible: улучшает доступность для навигации с клавиатуры.

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

Основные преимущества:

  • Больше повторно используемых компонентов: поскольку эти элементы адаптируются в зависимости от места размещения, вы можете использовать один и тот же дизайн во многих местах без повторной работы.
  • Большая гибкость: благодаря контейнерным запросам ваш веб-сайт может изменять свой вид не только при изменении всего размера экрана, но и на основе меньших секций, что дает вам больший контроль.
  • Проще поддерживать: когда каждая часть обрабатывает свои изменения, проще сохранять хороший внешний вид вашего веб-сайта без вмешательства в остальное.
  • Поддержка браузеров: На данный момент контейнерные запросы — это нечто новое, и не все веб-браузеры могут их использовать. Некоторые браузеры, такие как Safari Technology Preview и Chrome Canary, тестируют их. Но не волнуйтесь, есть инструменты, такие как CQFill и правило @supports, которые позволяют начать использовать эти крутые функции даже если некоторые браузеры еще не готовы.

Пример использования:

Вот краткий пример того, как работают контейнерные запросы: 

.card {
  container-type: inline-size;
  container-name: card;
}

@container card (max-width: 30em) {
  .card-title { 
    font-size: 2rem;
  }
}

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

Эволюция CSS-переменных

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

Более динамичное темирование

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

Интеграция в системы дизайна

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

Интерактивность и анимации

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

Улучшения поддержки браузеров

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

Улучшенные цветовые палитры и функции

CSS в 2024 году позволит веб-дизайнерам использовать более широкий спектр цветов с новыми цветовыми системами, такими как HWB, LAB и LCH. Эти системы предоставляют вам больше способов выбора цветов, чем обычный метод RGB. Кроме того, CSS будет иметь умные функции, такие как clamp(), min() и max(), чтобы облегчить обработку цветовых значений.

Новые модели цвета

Мы получаем некоторые новые цветовые системы, которые исправляют некоторые проблемы с RGB и предоставляют больший контроль:

  • HWB - Позволяет выбирать цвета по оттенку (тип цвета), светлоте (насколько белый) и черноте (насколько черный). Это делает простым осветление или затемнение цвета.
  • LAB - Эта система основана на том, как мы видим цвета. Она может показать широкий диапазон цветов, которые мы можем отличить.
  • LCH - Аналогично LAB, но использует светлоту, хроматность (насколько яркий он) и оттенок. Это хорошо для создания плавных переходов цветов.

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

Удобные функции цвета

CSS получает некоторые функции, которые упрощают работу с цветом:

  • clamp() - Удерживает значение в заданном диапазоне. Удобно для контроля яркости или темноты цвета.
  • min() и max() - Выбирают самое маленькое или самое большое значение из набора цветов. Полезно для установки ограничений цвета.

Вот как вы можете использовать их: 

background: clamp(0, var(--brand-grey), 15%);
color: max(white, var(--text-color), #eee);

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

Продвижение CSS Grid и Subgrid

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

Что такое Subgrid?

Subgrid – это крутое дополнение к CSS Grid, которое позволяет меньшим сеткам внутри большой сетки следовать тому же макету, что и большая. Это означает, что вы можете создавать более сложные дизайны более легко, без необходимости настройки макета для каждой части отдельно. Например, если макет вашей основной страницы имеет 12 столбцов, то любая меньшая сетка внутри нее автоматически будет иметь также 12 столбцов. Вам не придется каждой из них говорить, как себя вести на разных размерах экрана; они сами знают.

Основные преимущества использования Subgrid

Subgrid упрощает проектирование сеток несколькими ключевыми способами:

  • Единообразие на разрывах - Ваши дизайны остаются одинаковыми на разных размерах экрана без дополнительной работы.
  • Гибкая вложенность - Вы можете иметь сетки внутри сеток, и они все хорошо работают вместе.
  • Точное управление - Вы можете настраивать меньшие сетки без вмешательства в общую картину.
  • Проще обслуживание - Управление макетом становится проще с одним набором правил для всего.

Вот базовый пример того, как работает Subgrid: 

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.subgrid {   
  display: grid; 
  grid-column: span 6; /* Занимает 6 столбцов родительской сетки */
}

Этот .subgrid автоматически получает настройку из 12 столбцов от своего родителя, что сильно упрощает вашу работу.

Текущая поддержка Subgrid браузерами

В настоящее время не все браузеры могут использовать Subgrid, но крупные, такие как Chrome и Firefox, начинают это делать. Есть некоторые хитрости, такие как полифиллы, которые позволяют использовать некоторые из его функций даже в браузерах, которые еще не полностью его поддерживают. По мере того, как все больше браузеров начнут поддерживать Subgrid к 2024 году, это будет большим событием для создания веб-сайтов. Он позволяет создавать сложные и гибкие дизайны намного легче, и когда вы добавляете другие умные функции сетки, вы можете делать многое с меньшими сложностями.

Управление макетом

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

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

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

Появление селекторов CSS :has() и :is()

Псевдоклассы :has() и :is() – это новые инструменты в CSS, которые помогают нам более легко выбирать элементы на веб-странице. По мере того, как все больше веб-браузеров начинают поддерживать эти функции в 2024 году, они сделают написание CSS проще.

Как работает :has()

Псевдокласс :has() позволяет выбирать родительские элементы, внутри которых есть определенные элементы. Это изменяет правила игры, потому что это означает, что вам не нужно писать длинные, сложные селекторы для выбора этих родителей. Вот простой пример: 

/* Выбрать элементы article, внутри которых есть элемент с классом 'highlight' */
article:has(.highlight) {
  border: 1px solid #fee599; 
}

Раньше, без :has(), вам пришлось бы писать это более сложным способом, что могло привести к запутанному коду.

Сферы применения для :has()

Некоторые интересные вещи, которые можно делать с псевдоклассом :has(), включают:

  • Изменение внешнего вида родительских контейнеров, если в них есть определенные типы содержимого
  • Показ или скрытие элементов на основе содержимого внутри них
  • Изменение способа расположения вещей, если присутствует определенное содержимое

Это упрощает выполнение задач, которые раньше требовали дополнительного JavaScript.

Как работает :is()

Псевдокласс: is() позволяет применять те же правила CSS к разным элементам одновременно. Просто перечислите элементы в скобках, разделенные запятыми. Например: 

/* Сделать кнопки и пользовательские вводы похожими */
:is(button, .custom-input) {
  border-radius: 4px;
  padding: 8px 12px; 
}

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

Сферы применения для :is()

Псевдокласс :is() отлично подходит для:

  • Применения одних и тех же стилей к разным элементам без повторения
  • Избегания проблем с селекторами, которые слишком конкретны
  • Уменьшения количества CSS, которое вам приходится писать

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

Поддержка браузеров и запасные варианты

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

  • Вы можете упорядочить ваши инструкции @import как простой запасной план.
  • Используйте инструменты, такие как postcss-cascade-layers, чтобы устаревшие браузеры понимали слои.
  • Проверьте поддерживают ли браузеры слои с помощью @supports и используйте их только в том случае, если они это делают.

Пример использования: 

/* Основные стили */
@import "reset.css"; 
/* Слои */
@layer utilities, components, layout;

/* Таблицы стилей */  
@import "utilities.css" layer(utilities);
@import "buttons.css" layer(components);
@import "grid.css" layer(layout);

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

Современные фреймворки и инструменты

Фреймворки и инструменты, такие как Tailwind CSS, StyleX и Chakra UI, становятся все более популярными среди веб-разработчиков. Эти инструменты отлично подходят для быстрой разработки веб-сайтов и обеспечивают их хороший внешний вид на всех устройствах.

Tailwind CSS

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

Основные функции:

  • Готовые классы для быстрых изменений дизайна
  • Легко настраивается
  • Хорошо работает с разными размерами экрана
  • Автоматически удаляет неиспользуемые стили, чтобы сайты оставались быстрыми
  • Может использоваться с популярными фреймворками, такими как React

Вот пример использования Tailwind для создания кнопки: 

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Некоторые могут найти названия классов немного длинными, но это помогает избежать проблем с конфликтами CSS.

StyleX

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

Основные функции:

  • Вы сообщаете ему, что вы хотите, и он понимает, как это сделать
  • Размещает элементы без необходимости устанавливать точки останова
  • Работает с переменными CSS

Например, чтобы выровнять что-то по центру, вы просто скажете: 

centerVertical()
centerHorizontal()

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

Chakra UI

Chakra UI - это набор инструментов для разработчиков React, который ускоряет создание веб-сайтов и обеспечивает их простоту использования. Особое внимание уделяется тому, чтобы убедиться, что веб-сайты доступны для всех.

Основные функции:

  • Фокусируется на доступности
  • Позволяет легко изменять внешний вид компонентов
  • Поставляется с множеством готовых к использованию компонентов
  • Включает хуки для управления состоянием
  • Не замедляет ваш сайт

Вот как вы можете настроить кнопку в Chakra UI: 

<Button 
  colorScheme="purple"
  variant="outline"
>
  Click Me  
</Button>

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

Псевдокласс :focus-visible

Псевдокласс :focus-visible - это замечательная функция, которая делает веб-сайты более удобными для пользователей, которые перемещаются с помощью клавиатуры. Он позволяет добавлять специальные стили к элементу, на который вы сосредоточены, когда используете клавиатуру для перемещения туда. Это замечательно, потому что это явно показывает, с какой частью веб-сайта вы взаимодействуете, без путаницы у пользователей мыши. По мере того, как мы продвигаемся в 2024 году, :focus-visible ожидается использоваться намного чаще, потому что он действительно хорош в разделении фокусировки с клавиатуры от фокусировки мыши. Это особенно полезно для пользователей клавиатуры, которые могут путаться, когда стили фокуса появляются только из-за кликов мыши.

Основные преимущества:

  • Улучшенная доступность: Облегчает задачу пользователям клавиатуры, показывая, где они находятся на сайте, что важно для создания веб-сайтов, которые могут использовать все.
  • Лучший пользовательский опыт: Предотвращает путаницу, показывая стили фокуса только тогда, когда они имеют смысл для вашего способа просмотра.
  • Широкая поддержка браузеров: Большинство новых браузеров могут использовать это, поэтому многие люди будут в выигрыше.
  • Легко реализовать: Это простой CSS-код, который не требует много работы для добавления на ваш сайт.

Вот как использовать :focus-visible, чтобы обеспечить пользователям клавиатуры необходимый стиль фокуса: 

button:focus {
  /* Стиль для всех фокусов */
}

button:focus-visible {
  /* Стиль только для фокуса с клавиатуры */  

}

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

Прогнозы

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

Заключение

Вглядываясь в будущее CSS в 2024 году, захватывающе видеть, сколько новых способов у нас будет для улучшения внешнего вида и работы веб-сайтов. От создания сайтов, которые лучше адаптируются к разным размерам экрана с помощью запросов контейнера, до использования новых методов цвета, таких как LAB и LCH, до крутых вещей, которые мы можем делать с переменными шрифтами, CSS становится более мощным и проще в использовании. Но с использованием всех этих новых функций мы должны помнить, что веб-сайты должны быть легкими для всех в использовании и хорошо работать на любом устройстве или браузере. К счастью, у нас есть инструменты и методы, такие как вложенность и правило @supports, которые помогают нам использовать новые функции CSS, обеспечивая при этом доступность для всех. Используя последние трюки CSS наряду с доброй старой заботой о создании веб-сайтов доступными и легкочитаемыми, мы можем строить сайты, которые выглядят потрясающе и отлично подходят для всех. CSS всегда становится лучше, и хотя мы, возможно, никогда не создадим идеальный веб-сайт, весело продолжать пытаться, поскольку CSS продолжает улучшаться. Интернет и веб-сайты постоянно меняются, и так же меняются способы их создания. Даже спустя 25 лет, с CSS все еще есть многое, что мы можем сделать. Давайте продолжим учиться и пробовать новые вещи, делая веб лучшим местом для всех в 2024 году и далее.

Настройка элементов при помощи CSS

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=CSS_в_2024_году:_новые_тенденции&oldid=12692