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

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

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

Управление стилями и определение функций

@scope

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

Как это работает 

Правило @scope определяет границу, в пределах которой применяются определенные стили. Эта граница определяется селектором, и стили в блоке @scope влияют только на те элементы, которые соответствуют селектору и являются потомками элемента в области видимости.

Пример

<div id="my-component">
  <p>This paragraph is inside the scope.</p>
</div>
<p>This paragraph is outside the scope.</p>
<style>
@scope (#my-component) {
  p {
    color: blue;
  }
}
</style>

В этом примере только абзац внутри div #my-component будет окрашен в синий цвет. Абзац снаружи остается незатронутым.

Случаи применения

• Архитектуры, основанные на компонентах: @scope идеально подходит для независимой стилизации компонентов; каждый компонент может иметь свои собственные инкапсулированные стили, что предотвращает конфликты между компонентами и способствует повторному использованию кода.

• Библиотеки сторонних разработчиков: управление стилями сторонних библиотек или встроенных виджетов, предотвращающее их влияние на стили основного приложения.

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

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

@supports

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

Как это работает 

Правило @supports проверяет, поддерживается ли браузером конкретное свойство или функция CSS. Если условие равно true, то применяются прилагаемые стили.

Пример

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }
}

В этом примере стили внутри @supports будут применяться только в том случае, если браузер поддерживает display: flex, обеспечивая современное представление макета и избегая проблем в неподдерживаемых средах.

Случаи применения

• Прогрессивное улучшение: применение современных стилей при обеспечении совместимости со старыми браузерами.

• Обнаружение новых CSS-свойств: возможность проверить поддержку расширенных CSS-свойств, таких как content-visibility или aspect-ratio.

• Фолбэки CSS grid и flexbox: использование @supports для применения стилей grid или flexbox только в тех случаях, когда они доступны, и обеспечения фолбэков на основе float для старых браузеров.

• Обеспечение совместимости с браузерами: поддержка единообразия дизайна в различных пользовательских средах.

Оптимизация производительности и рендеринга

content-visibility

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

Как это работает

При установке значения «auto» content-visibility сообщает браузеру, что он может пропустить рендеринг контента элемента, если в данный момент он не виден в области просмотра. Браузер по-прежнему выполняет начальную подготовку макета, но не отображает контент до тех пор, пока он не понадобится.

Пример

section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

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

Случаи применения

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

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

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

• Страницы с большим количеством изображений: комбинирование content-visibility: auto с методами ленивой загрузки для повышения оптимизации загрузки изображений и улучшения их восприятия.

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

aspect-ratio

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

Как это работает 

Когда определено aspect-ratio, браузер автоматически вычисляет недостающие значения ширины или высоты на основе заданного соотношения. Благодаря этому элемент сохраняет свои пропорции даже при изменении размера контейнера.

Пример

img {
  display: inline;
  width: 200px;               
  background-color: #000fff;    
  vertical-align: top;       
  aspect-ratio: 1 / 1;
}

В этом примере изображение всегда будет сохранять соотношение сторон 1:1 (квадрата), и оно не будет растягиваться или искажаться при изменении размера.

Случаи применения

• Отзывчивые изображения и видео: сохранение необходимых пропорций медиа-элементов при различных размерах экрана.

• Сетчатые макеты: поддержка единого дизайна при работе с элементами разного размера.

• Элементы-заполнители: определение предполагаемой формы содержимого до его загрузки для предотвращения смещения макета.

• Соотносимые UI-компоненты: обеспечение сбалансированных пропорций кнопок, карточек и других компонентов.

Оптимизация анимации и взаимодействия

@keyframes

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

Как это работает

@keyframes определяет серию изменений стиля, которые должны происходить в определенных точках анимации. Эти изменения, или «keyframes» (ключевые кадры), могут быть заданы с помощью процентов от длительности анимации или ключевых слов «from» (от) и «to» («до»).

Пример

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animated-element {
  animation: slide-in 2s ease-in-out;
}

В этом примере задается анимация «slide-in» («скольжения»), при которой элемент перемещается слева направо, делаясь ярче. Затем анимация применяется к .animated-element.

Случаи применения

• UI-переходы: создание плавных переходов для UI-элементов, таких как модалы, выпадающие окна или навигационные меню.

• Циклическая анимация: создание вечных анимаций для индикаторов загрузки, фоновых эффектов или декоративных элементов.

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

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

@starting-style

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

Как это работает

@starting-style позволяет определить начальные стили, которые должны быть применены к элементу перед началом перехода. Это гарантирует, что переходы всегда будут начинаться с согласованного и предсказуемого состояния.

Пример

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
  transition: opacity 0.3s, transform 0.3s;

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

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

Случаи применения

• Переходы с задержкой: когда переход запускается с задержкой (например, с помощью transition-delay), @starting-style обеспечивает правильное состояние элемента в начале перехода, предотвращая резкие скачки.

• Сложные анимации: в анимациях с несколькими этапами или сменой состояний @starting-style помогает поддерживать визуальную последовательность и предотвращает неожиданные визуальные сбои во время перехода.

• Интерактивные элементы: использование @starting-style позволяет создавать плавные переходы для интерактивных элементов, таких как кнопки, меню и модалы, что повышает удобство работы с ними.

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

offset-position

Свойство offset-position, используемое в сочетании с offset-path, обеспечивает тонкий контроль над расположением элемента вдоль заданной траектории движения. Эта эффективная комбинация позволяет создавать сложные, точные анимации, выходящие за рамки простых линейных движений.

Как это работает

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

Пример

.moving-element {
  offset-path: path("M 0 0 L 100 100 L 200 0");
  offset-position: 50% 50%;
  animation: moveAlongPath 4s linear infinite;
}

@keyframes moveAlongPath {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

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

Случаи применения

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

• Интерактивные эффекты: использованиe offset-position вместе с пользовательским вводом (например, движением мыши) позволяет создавать интерактивные анимации и эффекты.

• Пользовательские курсоры: создание пользовательских курсоров, следующих по заданному пути и добавляющих уникальный штрих к интерактивности сайта.

Масштабирование и настройка отзывчивости изображений

image-set()

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

Как это работает 

image-set() предоставляет список источников изображений вместе с дескрипторами их разрешения. Затем браузер выбирает наиболее подходящее изображение, основываясь на характеристиках устройства.

Пример

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    url("https://image1.jpg") 1x,
    url("https://image2.jpg") 2x
  );
}

Как следует из этого примера, устройства со стандартным разрешением будут загружать image1.jpg, а устройства с высоким разрешением (например, дисплеи Retina) — image2.jpg.

Случаи применения

• Отзывчивые изображения: предоставление различных разрешений изображений для различных устройств с разным соотношением пикселей обеспечивает четкие изображения на экранах с высоким DPI без неоправданно большой загрузки на стандартных экранах.

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

• Перспективность: по мере появления новых разрешений экрана функция image-set() позволяет легко добавить их поддержку без изменения существующей разметки.

Пользовательские CSS-свойства и управление движением

@property

CSS-правило @property — эффективная функция набора CSS Houdini API. Она позволяет разработчикам явно определять и ограничивать пользовательские CSS-свойства, обеспечивая больший контроль над ними и предсказуемость их поведения.

Как это работает

@property определяет пользовательское свойство с определенным именем, синтаксисом, поведением при наследовании и начальным значением. Это дает возможность проверки типов пользовательских свойств и позволяет плавно анимировать их.

Пример

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

.element {
  background-color: var(--my-color);
  transition: --my-color 1s;
}

.element:hover {
  --my-color: #bada55;
}

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

Случаи применения

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

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

• Отзывчивая типографика: использование @property с медиа-запросами обеспечивает динамическую настройку размера шрифта и других типографических свойств в зависимости от размера экрана.

• Анимация и переходы: плавная анимация и переходы к пользовательским свойствам позволяют создавать динамичные и привлекательные пользовательские интерфейсы.

Типографика и форматирование текста

text-wrap

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

Как это работает

text-wrap предоставляет несколько значений, которые управляют поведением обертывания текста:

• balance: позволяет сбалансировать количество строк в абзаце для более эстетичного вида;

• pretty: настраивает переносы строк, чтобы избежать концевых («сиротских») и начальных («вдовствующих») висячих строк, улучшая общую структуру текста;

• stable: обеспечивает единообразное обертывание при различных рендерингах, что помогает избежать сдвигов макета.

Пример

.balanced-text {
  text-wrap: balance;
  text-align: justify; 
}

.pretty-text {
  text-wrap: pretty;
}

В этих примерах класс balanced-text создает равномерное распределение текста по строкам, а класс pretty-text настраивает переносы строк для улучшения читабельности.

Случаи применения

• Заголовки и названия: использование text-wrap: balance для заголовков позволяет создать визуально привлекательные разрывы строк, особенно в отзывчивых дизайнах.

• Текст статьи: применение text-wrap: pretty к длинному содержимому улучшает читабельность за счет избегания начальных и концевых висячих строк.

• UI-элементы: использование text-wrap: stable для UI-элементов (например, навигационных меню или текста кнопок) обеспечивает единообразие обертки.

• Отзывчивый дизайн: комбинирование различных значений text-wrap с медиа-запросами позволяет оптимизировать отображение текста на экранах разных размеров.

white-space-collapse

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

Как это работает

Свойство white-space-collapse определяет, как обрабатываются последовательности пробелов в элементе. Оно имеет несколько значений:

• collapse: сворачивает последовательности пробелов в один пробел (поведение по умолчанию);

• preserve: сохраняет все пробельные символы;

• preserve-breaks (сохранение разрывов): сохраняет разрывы строк, но сворачивает другие пробельные символы;

• break-spaces: действует аналогично сохранению, но позволяет разрывать любой пробельный символ.

Пример

.collapsed-spaces {
  white-space-collapse: collapse;
}

.preserved-spaces {
  white-space-collapse: preserve;
}

.preserved-breaks {
  white-space-collapse: preserve-breaks;
}

.break-spaces {
  white-space-collapse: break-spaces;
}

Эти примеры демонстрируют различные способы обработки пробелов в текстовых элементах.

Случаи применения

• Примеры кода: использование preserve или preserve-breaks позволяет отображать фрагменты кода с точными интервалами и отступами.

• Предварительное отформатированный текст: сохранение точных пробелов в блоках предварительно отформатированного текста обеспечивает соответствие макета исходному форматированию.

• Управление оберткой в длинных строках: использование break-spaces позволяет разрешить обертывание в длинных строках, в которых отсутствуют естественные разрывы слов, например в URL-адресах или ключах баз данных.

• Тонкая настройка расположения текста: использование collapse для управления интервалами между словами и строками создает более точные типографские настройки.

Заключение

Современные CSS-функции, рассмотренные в этом руководстве, представляют собой значительный скачок вперед в возможностях веб-разработки. Эти функции — начиная с тонкого контроля, предлагаемого @scope и white-space-collapse, и заканчивая оптимизацией производительности, обеспечиваемой content-visibility, и творческими возможностями, открываемыми @property и offset-position, — позволяют разработчикам создавать более эффективные, гибкие и визуально привлекательные сайты. 

Читайте также:

• Как сделать зернистый градиент на CSS
• 11 малоизвестных, но полезных приемов по фронтенду
• Почему решения CSS-in-JS во время сборки сейчас в тренде?

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Onix React: New CSS Features You Should Know