13,8 тыс подписчиков

Будущее CSS: новейшие возможности языка декорирования в 2023 году

14 июля 202314 июл 2023

5 мин

Оглавление

1. Запросы к контейнерам
2. :has()
3. Вложенность

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

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

1. Запросы к контейнерам

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

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

Синтаксис запросов к контейнерам похож на синтаксис медиа-запросов, но с небольшим отличием. Вместо @media, для определения запроса к контейнеру нужно использовать @container. Вот наглядный пример:

.container {
/* Стили, применяемые к самому контейнеру */
container-type: inline-size;
/*
Перед использованием запросов к контейнерам необходимо определить контекст содержания
в элементе, чтобы браузер мог отслеживать его, поскольку мы можем запросить размеры
определенного контейнера позже. Для этого используем свойство 'container-type', которое
может иметь значение 'size', 'inline-size' или normal.

*/
}
@container (min-width: 300px) {
.container {
/* Стили, применяемые при ширине контейнера не менее 300px */
}
}
@container (min-width: 600px) {
.container {
/* Стили, применяемые при ширине контейнера не менее 600px */
}
}

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

Поддержка браузеров: все основные браузеры.

2. :has()

Функциональный псевдокласс CSS :has() является, вероятно, самым мощным дополнением к селекторному механизму CSS до настоящего времени. Как говорится в документации MDN, :has — это “способ выбора родительского элемента или предыдущего элемента-близнеца относительно элемента типа ссылки посредством приема в качестве аргумента списка относительных селекторов”.

Относительный селектор :has() можно использовать для выбора элементов, если есть “потомки” a и b, т. е. при наличии логического AND, или если есть один из них, т.е. логическое OR:

<div>
<p class="red">This is a red paragraph.</p>
<p>This is a normal paragraph.</p>
</div>
<div>
<ul class="blue">
<li>Item 1</li>
<li>Item 2</li>
<li class="green">Item 3</li>
</ul>
<p>This is another normal paragraph.</p>
</div>

div:has(ul.blue):has(li.test) {
/* Стили, применяемые к элементам div, которые содержат и ul.blue, и li.green*/
background-color: yellow;
}

Поддержка браузеров: все основные браузеры.

3. Вложенность

Функция вложенности наконец-то доступна в CSS, что позволяет писать более красивый, чистый и простой в обслуживании код без каких-либо препроцессоров, таких как SASS/LESS.

<div>
<h2>Nesting Example</h2>
<p>This is an example of nested CSS where :hover pseudo class is
nested inside p element selector.</p>
</div>

p{
color:#fb4a59
&:hover {
color:#eca317
}
}

Поддержка браузеров: Chrome, Edge, Safari.

4. Динамические блоки области просмотра

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

Чтобы решить эту проблему, были введены новые значения единиц, в том числе:

Малая высота и ширина области просмотра (svh и svw), представляющие наименьший размер активной области просмотра.
Большие высота и ширина области просмотра (lvh и lvw), представляющие наибольший размер.
Высота и ширина динамической области просмотра (dvh и dvw).

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

Поддержка браузеров: все основные браузеры.

5. initial-letter

Свойство initial-letter определяет первую букву и количество занимаемых ею строк. В качестве примера этого свойства можно привести газетную статью, где размер шрифта первой буквы больше, чем шрифт, которым написана остальная часть статьи. Это свойство имеет 3 значения: normal, <number> и <integer>.

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

Используя псевдоэлемент “:first-letter” в сочетании с “initial-letter”, вы можете применить к первой букве элементы расширенного стиля, добавляя различные размеры шрифта, стили и украшения. Этот прием не только придаст изысканности дизайну, но и улучшит читабельность и визуальную привлекательность контента.

Поддержка браузеров: Chrome, Edge, Safari.

Примечание: в данный момент находится на стадии эксперимента.

6. Тригонометрические функции

По мере развития CSS в него включили возможность написания математических выражений. Широко известная функция calc() позволяет производить вычисления, а другие полезные функции, такие как min(), max() и clamp() обеспечивают CSS дополнительную гибкость. Примечательно, что тригонометрические функции sin(), cos(), tan(), asin(), acos(), atan() и atan2() теперь поддерживаются в Chrome 111 и доступны во всех браузерах. Эти функции, определенные в модуле CSS Values и Units Module Level 4, позволяют разработчикам выполнять тригонометрические вычисления непосредственно в CSS, открывая новые возможности для создания креативного и динамичного дизайна.

Поддержка браузеров: все основные браузеры.

Это лишь некоторые из обновлений, которые вводятся в CSS. Чтобы узнать о них больше, загляните в документацию MDN.