UXPUB 🇺🇦 Дизайн-спільнота: Саша Федорова

Новые свойства и фишки CSS в 2022 году

Саша Федорова — Tue, 07 Jun 2022 09:36:44 +0000

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

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

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

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

Как мы их используем?

Для контейнерного запроса нам нужно указать элемент в качестве контейнера, используя свойство container(сокращение от container-type и container-name). container-type может быть width, height, inline-size или block-size. inline-size и block-size — это логические свойства, которые могут давать разные результаты в зависимости от режима написания документа.

main, aside {
    container: inline-size;
}

Затем мы можем использовать @container аналогично медиазапросу. Обратите внимание, что правило может быть выражено без скобок (inline-size > 30em, а не min-width: 30em). Это часть спецификации MediaQueriesLevel 4. В приведенном выше примере макета карточки, когда контейнер шире 30rem, мы переключаемся на горизонтальный макет с помощью flexbox:

@container (inline-size > 30em) {
    .card {
        display: flex;
    }
}

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

Могу ли я их использовать?

Chrome утверждает, что поддерживает контейнерные запросы, если включить соответствующий флаг, но рабочая версия не соответствует текущей спецификации. Есть полифилл, но он не работает с последней версией синтаксиса. Так что короткий ответ — «нет», я призываю вас немного подождать, прежде чем использовать их в продакшене. Но у контейнерных запросов большое будущее, поэтому я ожидаю их всеобщую поддержку.

Ресурсы

CSS Containment Module Level 3 (официальная спецификация)
A Primer on Container Queries от Stephanie Eckles
CSS Container Queries: A First Look от Bramus Van Damme
SayHellotoContainerQueries от AhmadShadeed (Синтаксис, упомянутый в этом посте, устарел, но содержит несколько хороших примеров).

:has()

Что это?

Этот псевдокласс, часто известный как «родительский селектор», позволяет нам выбирать элемент в зависимости от дочерних элементов. Как написал Брамус Ван Дамм в прошлом году, помимо этого у него есть несколько довольно интересных вариантов использования. Например, мы могли бы по-разному стилизовать изображение в <figure> в зависимости от того, сопровождается ли оно <figcaption> или нет. Или мы могли бы настроить таргетинг на метки в форме, за которыми следуют недопустимые данные ввода. Возможности безграничны.

Как это использовать?

Чтобы стилизовать элементы <section>, которые содержат <h2>:

section:has(h2) {
    background: lightgray;
}

Чтобы стилизовать <img>, только если его родительский элемент <section> также содержит <h2>:

section:has(h2) img {
    border: 5px solid lime;
}

Могу ли я это использовать?

Пока нет поддержки от основных браузеров, но вы можете экспериментировать с ним в Safari Technology Preview. Посмотрите это демо в поддерживаемых браузерах.

Ресурсы

CSS Selectors Level 4 (официальная спецификация)
The CSS :has() selector is way more than a "Parent Selector" от Bramus van Damme
The CSS :has() selector от Robin Rendle (CSS Tricks)

@when/@else

Что это?

At-rule для условий в CSS, аналогично логике if/else в других языках программирования. Например, это может сделать написание сложных медиа-запросов гораздо более логичным. @when был выбран вместо @if, чтобы избежать конфликта с Sass.

Как мы это используем?

Мы можем запросить несколько медиа-условий или поддерживаемых функций, например, превышает ли область просмотра пользователя определенную ширину и поддерживает ли его браузер подсетку (subgrid). При использовании @when/@else мы удаляем @ из правила запроса:

@when media(min-width: 30em) and supports(display: subgrid) {
    /* Styles for viewports over 30em, where the browser also supports subgrid */
} @else {
    /* Styles for browsers that do not meet the condition */
}

Могу ли я использовать это?

Еще нет. Я не ожидаю, что поддержка браузеров будет широко распространена в этом году, но на это свойство определенно стоит обратить внимание.

Ресурсы

CSS Conditional Rules Module Level 5 (официальнаяспецификация)
Extending CSS when/else chains: A first look от Kingsley Ubah (LogRocket blog)
Proposal for CSS @when от Chris Coyier (CSS Tricks)

accent-color

Что это?

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

Как мы это используем?

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

:root {
    accent-color: lime;
}

Или по отдельным элементам:

form {
    accent-color: lime;
}

input[type="checkbox"] {
    accent-color: hotpink;
}

Могу ли я использовать это?

Да! accent-color поддерживается в Chrome, Edge, Firefox и Safari Technology Preview. Браузеры, которые его не поддерживают, просто получат цвета по умолчанию, а входные данные останутся полностью пригодными для использования — отлично подходит для прогрессивного улучшения.

Ресурсы

CSS Basic User Interface Module Level 4 (официальная спецификация)
"CSS accent-color" от Adam Argyle
"Simplifying Form Styles With accent-color" от Michelle Barker

Новые функции цвета CSS

Что это?

Возможно, вы уже знакомы с цветовыми форматами Hex, RGB и HSL. Уровни 4 и 5 цветового модуля CSS включают в себя целый ряд новых функций, которые позволяют задавать цвета и управлять ими в CSS. Они включают:

hwb(): оттенок (Hue), белизна (Whiteness), чернота (Blackness).
lab(): светлота (Lightness), вместе со значениями a и b, определяющими оттенок.
lch(): светлота (Lightness), цветовая насыщенность (Chroma), оттенок (Hue).
color-mix(): Смешивание двух цветов вместе.
color-contrast(): Из списка цветов выведите тот, у которого самый высокий контраст по сравнению с первым аргументом.
color(): Укажите цвет в другом цветовом пространстве (например, display-p3).

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

Как мы это используем?

hwb(), lab() и lch() можно использовать почти так же, как и функции rgb() и hsl(), к которым мы привыкли, но с дополнительным альфа-параметром:

.my-element {
  background-color: lch(80% 100 50); // opaque color
}

.my-element {
  background-color: lch(80% 100 50 / 0.5); // color with 50% transparency
}

css
color-mix() выводит цвет в результате смешивания двух других. Нам нужно указать метод интерполяции цвета в качестве первого аргумента:

.my-element {
  background-color: color-mix(in lch, blue, lime);
}

color-contrast() требуется базовый цвет, с которым можно сравнивать остальные. Он выведет цвет с самой высокой контрастностью или, в случае, если указано дополнительное ключевое слово, первый цвет в списке, который соответствует необходимому коэффициенту контрастности:

/* Output the color with the highest contrast */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* Output the first color that meets AA contrast ratio */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

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

Могу ли я их использовать?

На данный момент Safari лидирует в поддержке этих свойств: hwb(), lch(), lab() и color() поддерживаются начиная с версии 15. color-mix() и color-contrast() можно включить с помощью флага в настройках. Firefox поддерживает hwb(), а также пометил флагом поддержку color-mix() и color-contrast(). Удивительным исключением является Chrome, который сейчас не поддерживает ни одно из вышеперечисленных свойств. Однако не так уж сложно предусмотреть в коде запасные варианты: учитывая два правила цвета, браузер проигнорирует второе, если он его не поддерживает.

.my-element {
    background-color: rgb(84.08% 0% 77.36%);
    background-color: lch(50% 100 331);
}

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

Ресурсы

CSS Color Module Level 4 (официальная спецификация)
CSS Color Module Level 5 (официальная спецификация)
A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH от Michelle Barker
LCH colors in CSS: what, why, and how? от Lea Verou
LCH color picker от Lea Verou
Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast() от Bramus van Damme

Каскадные слои

Что это?

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

Мне нравится думать об этом как о z-index для каскада. Если вы понимаете, как работает z-index, вы, вероятно, довольно быстро разберетесь с каскадными слоями.

Как их использовать?

Как объясняет Bramus в своем руководстве, вы можете создавать отдельные слои в соответствии с методологией ITCSS.

/* Create the layers, in the desired order */
@layer reset, base, theme;

/* Append the CSS to each of the layers */
@layer reset {
  /* Append to 'reset' layer */
}

@layer base {
  /* Append to 'base' layer */
  h1.title {
      font-size: 5rem;
  }
}

@layer theme {
  /* Append to 'theme' layer */
  h1 {
      font-size: 3rem;
  }
}

Декларация CSS font-size для h1 в слое theme лучше, чем в базовом слое, несмотря на то, что это имеет более высокую специфичность.

Могу ли я это использовать?

Каскадные слои поддерживаются в последней версии Firefox и могут быть включены с помощью флага в Chrome и Edge (полная поддержка появится в 99 версии Chrome). Похоже, что все основные браузеры согласятся с этой спецификацией, так что скоро ждите более широкой поддержки. Таким образом, вы можете начать экспериментировать с каскадными слоями прямо сейчас, но может пройти некоторое время, прежде чем мы сможем уверенно использовать их в продакшене. Трудно понять, как легко предоставить запасные варианты для старых браузеров без включения отдельной таблицы стилей, возможно, со временем появятся полифиллы. У Мириам Сюзанн есть идеи на этот счет.

Ресурсы

CSS Cascading and Inheritance Level 5 (официальнаяспецификация)
A Complete Guide to CSS Cascade Layers от Miriam Suzanne (CSS Tricks)
Cascade Layers are Coming to Your Browser от Una Kravets (Chrome developer blog)
The Future of CSS: Cascade Layers (CSS @layer) от Bramus van Damme
Getting Started With CSS Cascade Layers от Stephanie Eckles

Подсетка

Что это?

Когда много лет назад впервые заговорили о CSS сетке, многие разработчики думали, что она позволит размещать весь интерфейс в одной сетке, аналогично типичным макетам с 12 столбцами. На практике это потребует полного выравнивания разметки и нарушения семантики! Часть спецификации CSS Grid Layout Module 2, подсетка позволяет элементу наследовать сетку родительского элемента либо на оси строки, либо на оси столбца. Теоретически вы можете вкладывать сетки, выравнивая каждый компонент по одной и той же сетке. Вероятно, нам не нужно делать это слишком часто, поскольку мы используем более гибкий,внутренний веб-дизайн, отдающий предпочтение контенту, UX и доступности, а не строгому следованию сетке. Но подсетка по-прежнему невероятно полезна для решения всевозможных UI-задач.

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

Как мы используем это?

Укажите сетку родительского элемента, используя обычные свойства сетки. Используйте ключевое слово subgridдля свойства grid-template-columns или grid-template-rows во вложенном элементе, который вы хотите наследовать родительской сетке:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

.grid > figure {
    display: grid;
    grid-template-rows: subgrid;
}

.grid figcaption {
    grid-row: 2;
}

Посмотрите примерSubgrid captions от Michelle Barker.

Я могу это использовать?

Примечательно, что подсетка поддерживается в Firefox с 2019 года, но ни один другой браузер так и не последовал их примеру. Хотя, прошло уже почти три года. Есть признаки, что команда Chromium наконец-то приступила к работе по ее поддержке, так что, возможно, уже в этом году нам посчастливится увидеть ее в Chrome и Edge. (Отслеживайте проблему здесь). Я сомневаюсь в поддержке от Safari, но учитывая, что работу над CSS в Apple возглавляет Джен Симмонс, все возможно. Ничто не мешает вам использовать подсетку в продакшене, но пока лучше относиться к ней как к прогрессивному усовершенствованию.

Ресурсы

CSS Grid Layout Module Level 2 (официальная спецификация)
MDN Subgrid page
"CSS Grid Level 2: Here Comes Subgrid" от Rachel Andrew

Скролл таймлайна

Что это?

Вы, наверное, видели много классных сайтов, на которых реализована причудливая анимацияскролла. Существует множество библиотек JS, которые помогут нам реализовать подобные сценарии — я большой поклонник плагина ScrollTrigger [от Greensock]. Представьте, если бы мы могли сделать все это в CSS? И теперь с помощью @scroll-timeline это стало возможно!

Как мы это используем?

Нам нужно несколько вещей:

анимация по ключевым кадрам,
правило @scroll-timeline,
свойство элемента animation-timeline, который мы анимируем (или укажите таймлайн в сокращенном свойстве animation).

Вот пример:

/* Set up keyframe animation */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* Configure our scroll timeline. Here we're giving it the name `slide-timeline` */
@scroll-timeline slide-timeline {
  source: auto; /* the scrollable element that triggers the scroll-linked animation (the document by default) */
  orientation: vertical; /* the scroll orientation (vertical by default) */
  scroll-offsets: 0%, 100%; /* an array of progress intervals in which the timeline is active */
}

/* Specify the keyframe animation and the scroll timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

В качестве альтернативы мы можем использовать смещения на основе элементов для свойства scroll-offsets, чтобы запускать таймлайн, когда определенный элемент прокручивается в области просмотра:

@scroll-timeline slide-timeline {
    scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}

И снова Bramus предоставил исчерпывающее руководство и несколько замечательных примеров использования.

Могу ли я это использовать?

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

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

Ресурсы

Scroll-linked Animations (официальные спецификации)
MDN page
"Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines" от Bramus Van Damme

Вложенность (Nesting)

Что это?

Если вы знакомы с Sass, то знаете об удобстве возможности вкладывать селекторы — по сути, писать дочернее правило внутри родительского. Вложенность помогает поддерживать код в порядке, хотя, иногда ее чрезмерное использование может стать проблемой! Кажется, что вложенность наконец-то приходит в нативный CSS.

Как мы ее используем?

Синтаксически она похожа на Sass, так что не должно быть больших проблем. Вложенное правило нацелено на h2 внутри элемента с классом card:

.card {
    color: red;

    & h2 {
        color: blue;
    }
}

Или мы можем использовать его для псевдоклассов и псевдоэлементов:

.link {
    color: red;

    &:hover,
    &:focus {
        color: blue;
    }
}

Эквивалентом в сегодняшнем CSS было бы:

.link {
    color: red;
}

.link:hover,
.link:focus {
    color: blue;
}

Могу ли я использовать это?

Не нативно. Ни один браузер пока не поддерживает вложенность, даже если стоит флажок. Но, если вы используете PostCSS, вы можете попробовать его с помощью плагина postcss-preset-env.

Ресурсы

CSS Nesting Module
"CSS Nesting, specificity and you", от Killian Valkhof

Будущее CSS

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

Вместо того, чтобы строго регламентироватьнаши проекты и сетовать на недостижимое «пиксельное совершенство», мы можем использовать CSS, чтобы давать подсказки, и позволить браузеру решать, как лучше всего отображать нашу веб-страницу. Эти идеи были обобщены Джен Симмонс и Уной Кравец (среди прочих), которые придумали термины «внутренний (Intrinsic)» и «новый адаптивный (Newresponsive)» веб-дизайн.

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

Перевод статьи smashingmagazine.com

Полное руководство по вычислительной CSS функции calc() с примерами

Саша Федорова — Mon, 30 May 2022 08:55:27 +0000

В CSS для выполнения основных математических операций есть специальная функция calc(). В этой статье мы рассмотрим практически все, что нужно знать об этой очень полезной функции.

Вот пример:

.main-content {
  /* Subtract 80px from 100vh */
  height: calc(100vh - 80px);
}

Функция calc() для значений

Единственный вариант, где вы можете использовать функцию calc() — это значения. Посмотрите эти примеры, где мы устанавливаем значение для ряда различных свойств.

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

Его также можно использовать только для части ресурса, например:

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

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

.el {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}

Функция calc()предназначена для различных числовых значений

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

.el {
  /* Nope! */
  counter-reset: calc("My " + "counter");
}
.el::before {
  /* Nope! */
  content: calc("Candyman " * 3);
}

Однако существует много величин CSS, и все они могут использоваться с функцией calc():

px % em rem in mm cm ptpc ex ch vh vw vmin vmax

Безразмерные величины также допустимы. Например, line-height: calc(1.2 * 1.2); а также такие свойства углов, как transform: rotate(calc(10deg * 5));.

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

.el {
  /* Little weird but OK */
  width: calc(20px);
}

Нет медиа-запросам

Когда calc() используется правильно (единицы длины используются в качестве значения свойства), к сожалению, calc() не будет работать для медиа-запросов.

@media (max-width: 40rem) {
  /* Narrower or exactly 40rem */
}

/* Nope! */
@media (min-width: calc(40rem + 1px)) {
  /* Wider than 40rem */
}

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

Смешанные единицы 🎉

Это, пожалуй, самая ценная функция calc()! Почти в каждом приведенном выше примере уже есть смешанные единицы, но для наглядности, взгляните на этот пример:

/* Percentage units being mixed with pixel units */
width: calc(100% - 20px);

Это говорит, что ширина такая же, как у элемента, минус 20 пикселей.

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

Вот еще несколько примеров смешанных единиц:

transform: rotate(calc(1turn + 45deg));

animation-delay: calc(1s + 15ms);

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

Сравнение с математическими расчетами препроцессора

Только что мы узнали, что вы не можете использовать calc() для препроцессинга. Но есть выход. В Sass встроены математические расчеты, поэтому вы можете делать подобные вещи:

$padding: 1rem;

.el[data-padding="extra"] {
  padding: $padding + 2rem; // processes to 3rem;
  margin-bottom: $padding * 2; // processes to 2rem; 
}

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

Показать расчеты

calc() можно использовать, чтобы «показать расчеты» внутри CSS. Например, вам нужно рассчитать ровно 1⁄7 ширины элемента…

.el {
  /* This is easier to understand */
  width: calc(100% / 7);

  /* Than this is */
  width: 14.2857142857%;
}

Это может сработать в каком-то самостоятельно созданном CSS API, например:

[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }

Математические операторы calc()

У вас есть +, -, * и /. Но они отличаются тем, как вы должны их использовать.

Сложение (+) и вычитание (-) требуют, чтобы оба числа были длинами

.el {
  /* Valid 👍 */
  margin: calc(10px + 10px);

  /* Invalid 👎 */
  margin: calc(10px + 5);
}

Недопустимые значения делают недействительным декларирование.

Деление (/) требует, чтобы второе число было безразмерным

.el {
  /* Valid 👍 */
  margin: calc(30px / 3);

  /* Invalid 👎 */
  margin: calc(30px / 10px);

  /* Invalid 👎 (can't divide by 0) */
  margin: calc(30px / 0);
}

Умножение (*) требует, чтобы одно из чисел было безразмерным

.el {
  /* Valid 👍 */
  margin: calc(10px * 3);

  /* Valid 👍 */
  margin: calc(3 * 10px);

  /* Invalid 👎 */
  margin: calc(30px * 3px);
}

Пробелы имеют значение

Когда речь идет о сложении и вычитании.

.el {
  /* Valid 👍 */
  font-size: calc(3vw + 2px);

  /* Invalid 👎 */
  font-size: calc(3vw+2px);

  /* Valid 👍 */
  font-size: calc(3vw - 2px);

  /* Invalid 👎 */
  font-size: calc(3vw-2px);
}

Отрицательные числа допустимы (например, calc (5vw – -5px)), но это пример того, когда пробелы не только необходимы, но полезны.

Таб Аткинс говорит, что причина, по которой необходим интервал между + и - на самом деле связана с проблемами синтаксического анализа. Я не могу сказать, что полностью это понимаю, но, например, 2px-3px обрабатывается как число «2» и единица измерения «px-3px». А у + есть другие проблемы. Я думал, что пробелы связаны с синтаксисом пользовательских свойств, но нет!

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

Пустое пространство снаружи не имеет значения. Вы даже можете делать разрывы строк, если хотите:

.el {
  /* Valid 👍 */
  width: calc(
    100%     /   3
  );
}

Однако будьте осторожны: между calc() и открывающей скобкой не должно быть пробелов.

.el {
  /* Invalid 👎 */
  width: calc (100% / 3);
}

Вложение calc(calc());

Так делать можно, но не нужно. Это то же самое, что использовать дополнительный набор скобок без calc() . Например:

.el {
  width: calc(
    calc(100% / 3)
    -
    calc(1rem * 2)
  );
}

Они не нужны вам внутри calc(), потому что скобки работают сами по себе:

.el {
  width: calc(
   (100% / 3)
    -
   (1rem * 2)
  );
}

И в этом случае нам помогает «порядок действий» даже без скобок. То есть сначала происходят деление и умножение (перед сложением и вычитанием), поэтому скобки вообще не нужны. Можно было бы написать так:

.el {
  width: calc(100% / 3 - 1rem * 2);
}

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

.el {
  /* This */
  width: calc(100% + 2rem / 2);

  /* Is very different from this */
  width: calc((100% + 2rem) / 2);
}

Пользовательские свойства CSS и calc() 🎉

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

html {
  --spacing: 10px;
}

.module {
  padding: calc(var(--spacing) * 2);
}

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

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

html {
  --spacing: 10px;
  --spacing-L: var(--spacing) * 2;
  --spacing-XL: var(--spacing) * 3;
}

.module[data-spacing="XL"] {
  padding: calc(var(--spacing-XL));
}

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

Пользовательские свойства могут исходить из HTML, что иногда чертовски круто и полезно. (Посмотрите, как Splitting.js добавляет индексы к словам/символам).

<div style="--index: 1;"> ... </div>
<div style="--index: 2;"> ... </div>
<div style="--index: 3;"> ... </div>

div {
  /* Index value comes from the HTML (with a fallback) */
  animation-delay: calc(var(--index, 1) * 0.2s);
}

Добавьте единицы позже

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

html {
  --importantNumber: 2;
}

.el {
  /* Number stays 2, but it has a unit now */
  padding: calc(var(--importantNumber) * 1rem);
}

Игра с цветами

Цветовой формат, такой как RGB и HSL, имеет числа, с которыми вы можете работать, используя calc(). Например, установив базовые значения HSL, а затем изменив их, создав собственную систему, например:

html {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

.el {
  background: hsl(
    calc(var(--H) + 20),
    calc(var(--S) - 10%),
    calc(var(--L) + 30%)
  )
}

Вы не можете комбинировать calc() и attr()

Функция attr() в CSS выглядит привлекательно, как будто вы можете извлекать значения атрибутов из HTML и использовать их. Но…

<div data-color="red">...</div>

div {
  /* Nope */
  color: attr(data-color);
}

К сожалению, здесь нет «types», поэтому attr() предназначена только для строк в сочетании со свойством content.

div::before {
  content: attr(data-color);
}

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

<div class="grid" data-columns="7" data-gap="2">...</div>

.grid {
  display: grid;

  /* Neither of these work */
  grid-template-columns: repeat(attr(data-columns), 1fr);
  grid-gap: calc(1rem * attr(data-gap));
}

К счастью, это не имеет большого значения, потому что пользовательские свойства в HTML не менее полезны!

<div class="grid" style="--columns: 7; --gap: 2rem;">...</div>

.grid {
  display: grid;

  /* Yep! */
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: calc(var(--gap));
}

Инструменты браузера

DevTools браузера попросит вас показать вам calc() в том виде, в котором вы его создали в таблице стилей.

Firefox DevTools

Если вам нужно определить расчетное значение, есть вкладка «Computed» (в DevTools всех браузеров, по крайней мере, тех, о которых я знаю), которая покажет вам его.

Chrome DevTools

Поддержка браузера

Если вам действительно нужна поддержка очень старой версии браузера (например, IE 8 или Firefox 3.6) добавьте другое свойство или значение перед тем, которое использует calc():

.el {
  width: 92%; /* Fallback */
  width: calc(100% - 2rem);
}

Также известно несколько проблем с функцией calc(), но все они относятся к старым браузерам. Существует список из 13 известных проблем. Вот несколько из них:

Firefox до 59 версии не поддерживает calc() для функций цвета. Пример: color: hsl(calc(60 \* 2), 100%, 50%).
IE 9–11 не будет отображать свойство box-shadow, если для любого из значений используется calc().
Ни IE 9–11, ни Edge не поддерживают функцию width: calc() в ячейках таблицы.

Сценарии использования

Я использовал ее для создания полноценного служебного класса: .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } Я бы сказал, что calc() входит в тройку моих любимых функций CSS.

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

Я использовал ее, чтобы установить fluid type / dynamic typography… вычисленный font-size, основанный на минимуме, максимуме и скорости изменения единиц области просмотра. Не только font-size, но и line-height.

Если вы используете calc() как часть fluid type, которая включает единицы области просмотра, убедитесь, что добавили единицу, использующую rem или em, чтобы у пользователя все еще был контроль над увеличением или уменьшением шрифта с помощью увеличение или уменьшение масштаба по мере необходимости.

Мне очень нравится добавлять пользовательское свойство «content width», а затем использовать его для создания необходимого интервала, например полей: .margin { width: calc( (100vw - var(--content-width)) / 2); }

Я использовал ее для создания кросс-браузерного компонента drop-cap. Вот его часть: .drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height)); }

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

Я использовал ее, чтобы правильно разместить на странице визуальные элементы, комбинируя ее с отступами и единицами vw/vh.

Я использую ее, чтобы преодолеть ограничения в background-position, но особенно ограничения в позиционировании точек stop-color в градиентах. Например, «stop 0.75em short of the bottom».

Перевод статьи css-tricks.com

Кастомные эффекты для изображений в Next.js с помощью Tailwind CSS

Саша Федорова — Mon, 16 May 2022 07:10:59 +0000

Вступление

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

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

Начало работы

Если у вас его еще нет, начните с создания нового проекта Next.js. Использование Create Next App является наиболее распространенным методом.

$ npx create-next-app my-project
$ cd my-project

После создания проекта переходим к установке Tailwind.

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Добавьте пути ко всем файлам вашего шаблона в tailwind.config.js файле.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Добавьте директивы @tailwind в ./styles/globals.css файл.

@tailwind base;
@tailwind components;
@tailwind utilities;

В конце концов, мы можем запустить проект с помощью:

$ yarn dev
# or
$ npm run dev

Как работают переходы Tailwind CSS

Например, мы можем сделать кнопку с переходом при наведении, который меняет цвет фона.

<button className='rounded-full bg-teal-600 px-6 py-3 font-medium text-white transition duration-300 hover:bg-indigo-500'>
  Hello Universe!
</button>

с кода понятно, что с помощью класса transition мы можем изменить цвет фона с bg-teal-600 на bg-indigo-500 с длительностью 300 мс duration-300.

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

Понимание обратного вызова next/image

onLoadingComplete — это функция обратного вызова, которая вызывается после полной загрузки изображения и удаления заполнителя.

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

Чтобы увидеть, как в onLoadingComplete работает обратный вызов, мы должны создать состояние, содержащее логическое значение false.

const [isReady, setIsReady] = useState(false);

Затем мы создаем функцию onLoadCallback, которая изменит состояние isReady на true.

const onLoadCallback = () => {
  setIsReady(true);
};

После этого мы можем вызвать onLoadCallback функцию в onLoadingComplete свойстве, которая вызовет параметр события, содержащий загруженный файл img.

<NextImage
  objectFit='cover'
  src={}
  width={}
  height={}
  onLoadingComplete={onLoadCallback} //this is called the callback function
/>

Создание пользовательских компонентов изображений

Теперь, когда мы знаем, как использовать обратный вызов onLoadingComplete , мы можем создавать пользовательские компоненты изображения, создав папку компонентов и поместив в нееimage.js файл.

├── README.md
├── components # This is the folder where we will create our custom images components
│   └── image.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.js
│   ├── index.js
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── tailwind.config.js

Затем в файл image.js добавьте следующий код:

import React, { useState } from 'react';
import NextImage from 'next/image';

const Image = ({ src, ...props }) => {
  const [isReady, setIsReady] = useState(false);

  const onLoadCallback = () => {
    setIsReady(true);
  };

  return (
    <NextImage
      objectFit='cover'
      src={src}
      {...props}
      onLoadingComplete={onLoadCallback}
      layout='responsive'
    />
  );
};

export default Image;

На самом деле приведенный выше код — это тот же код (полная версия), что и код, который мы изучили в разделе «Обратные вызовы next/image».

Применение эффекта размытия к изображениям

Мы используем эффект размытия, чтобы применить эффект к пользовательским изображениям, которые мы создали ранее. Мы можем сделать это, добавив класс размытия blur-2xl к изображению, когда isReady равно false, и удаляет, когда isReady равно true, добавляя класс blur-0.

Чтобы сделать переход более интерактивным, мы можем добавить класс масштабирования scale-120 к изображению, когда isReady равно false и scale-100 когда isReady равно true.

Мы также добавляем класс transition и duration-1000 к изображению, чтобы применить эффект перехода.

<NextImage
  objectFit='cover'
  src={src}
  className={`bg-gray-400 transition duration-1000 ${
    isReady ? 'scale-100 bg-gray-400 blur-0' : 'scale-120 blur-2xl'
  }`}
  {...props}
  onLoadingComplete={onLoadCallback}
  layout='responsive'
/>

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

//this is the image component we created before
import Image from '../components/image';

const Test = () => {
  return (
    <main className='flex h-screen w-screen items-center justify-center'>
      <div className='w-1/4'>
        <Image src={`YOURIMAGESRC`} width={300} height={300} />
      </div>
    </main>
  );
};

export default Test;

Создайте список персонажей Рика и Морти с пользовательским изображением

Чтобы новый проект заработал, нам нужно импортировать компоненты, которые были созданы ранее.

Например, мы будем реализовывать API Рика и Морти.

import Image from '../components/image';

export async function getStaticProps() {
  const res = await fetch('https://rickandmortyapi.com/api/character/');
  const content = await res.json();

  return {
    props: {
      content,
    },
  };
}

const Home = ({ content }) => {
  return (
    <div className='bg-gray-200 p-5 sm:p-16 lg:p-32'>
      <div className='grid grid-cols-1 gap-5 sm:grid-cols-2 md:gap-10 lg:grid-cols-3 xl:grid-cols-5'>
        {content.results.map((character) => {
          const { id, name, image, status, type, gender } = character;

          return (
            <div key={id} className='rounded-lg bg-white'>
              <div className='overflow-hidden rounded-t-lg'>
                <Image
                  src={image}
                  width={300}
                  height={300}
                  layout='responsive'
                />
              </div>
              <div className='mx-4 my-4'>
                <h2 className='text-xl font-bold text-gray-900'>{name}</h2>
                <p className='text-md text-gray-600'>Status : {status}</p>
                <p className='text-md text-gray-600'>Gender : {gender}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Home;

Вот результат реализации списка персонажей Рика и Морти с пользовательским изображением.

Выводы

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

Код этого проекта находится по адресу: https://github.com/jagadyudha/custom-image-transition-in-nextjs-with-tailwind-css.

Кастомные и нативные скроллбары в веб-приложениях

Саша Федорова — Fri, 29 Apr 2022 08:46:47 +0000

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

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

История скроллбара

Скроллбары веб-приложений

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

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

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

Целостный опыт

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

Height — это приложение, которое работает в основном в Интернете. С нативными скроллбарами это означало бы, что разные браузеры/операционные системы будут отображать Height по-разному, и что использование другого устройства скролла радикально изменит способ отображения Height.

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

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

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

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

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

Улучшите обнаружение

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

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

Добавьте кастомное поведение

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

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

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

VSCode добавляет результаты поиска в трек скроллбара

Эффективная реализация

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

Несколько советов для наилучшей производительности:

Сохраняйте базовый скролл нативным: не переопределяйте его с помощью javascript, пусть этим занимается браузер. На практике это означает сохранение свойства CSS overflow, но скрытие нативных скроллбаров.

.ScrollView {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ScrollView::-webkit-scrollbar {
 display: none;
}

Избегайте сбоев макета при рендеринге или измерении скроллбаров. Простой способ сделать это — использовать fastdom.
Убедитесь, что скроллинг не происходит в основном треде. Чтобы обнаружить потенциальные проблемы, вы можете включить в инструментах разработчика GoogleChrome Rendering → Scrolling performance issues

Включение панели рендеринга "…" → Moretools → Rendering

Таким образом, кастомные полосы прокрутки могут помочь:

Контролировать, как и когда полосы видны
Поддерживать единообразный скролл на разных платформах
Добавить к полосам прокрутки программно-зависимые функции

Учитывая все обстоятельства, создание кастомных скроллбаров — это инвестиция. Если все сделано плохо, неинтуитивные или неэффективные полосы прокрутки могут нанести ущерб пользовательскому опыту. Но если все сделано правильно, они могут значительно улучшить ваше приложение, оставаясь при этом невидимыми для конечного пользователя.

Есть вопросы или мысли? Пишите в комментариях.

Перевод статьи height.app

Будущее CSS: переключатели CSS (Toggles)

Саша Федорова — Fri, 22 Apr 2022 08:56:19 +0000

Привет. В конце прошлой недели я была очень рада увидеть, что Chromium начнет прототипирование CSS переключателей, фича, которая в настоящее время доступна только в виде неофициального проекта, авторами которого являются Таб Аткинс и Мириам Сюзанна.

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

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

Основным вариантом использования будет что-то похожее на выключатель света, который может меняться от 0 (неактивный) до 1 (активный).

html {
  toggle-root: lightswitch; /* Создайте переключатель с именем lightswitch. Он будет переключаться между 0 (неактивно, по умолчанию) и 1 (активно) */
}

button {
  toggle-trigger: lightswitch; /* При нажатии на кнопку срабатывает переключатель */
}

html:toggle(lightswitch) {
  /* Стили, применяемые при активном переключателе */
}

Вот демонстрация этого поведения, в котором используется JS-polyfill:

Хочу рассказывать о самых новых технологиях фронтенда в виде небольших заметок и хотела узнать будет ли это вам интересно? 🧑‍💻👩‍💻

Навигация с горизонтальным скроллом (CSS+ JavaScript)

Саша Федорова — Fri, 08 Apr 2022 08:59:52 +0000

Всем привет!

Продолжая экспериментировать с JavaScript, я хотела обновить горизонтальную навигацию, которую ранее создала для GitHubMobile (до текущей адаптивной версии и нативных приложений), и для этого примера панели инструментов Bootstrap.

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

Вот финальное демо на сайте CodePen.

Посмотрите, что под капотом. Для HTML я использую базовые элементы: <nav>, <ul> и навигационные ссылки. <nav> – это элемент, который прокручивается, а <ul> всегда содержит ссылки на одну строку.

<header>
  <h1>Demo</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">World</a></li>
      <li><a href="#">Politics</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">Opinion</a></li>
      <li><a href="#" class="active">Tech</a></li>
      <li><a href="#">Science</a></li>
      <li><a href="#">Health</a></li>
      <li><a href="#">Sports</a></li>
      <li><a href="#">Arts</a></li>
      <li><a href="#">Books</a></li>
      <li><a href="#">Style</a></li>
      <li><a href="#">Food</a></li>
      <li><a href="#">Travel</a></li>
    </ul>
  </nav>
</header>

Однако CSS для элементов <nav> и <ul> становится немного умнее. Я установила фиксированное значение height (равное вычисленной высоте ссылки) и overflow-y на <nav>, чтобы «обрезать» ссылки внутри. Но это не избавляет от раздражающих полос прокрутки, появляющихся при скролле и, таким образом, закрывающих ссылки. Таким образом, среди ряда дополнительных базовых стилей у элемента <ul> есть большое значение padding-bottom, позволяющее скрыть любую видимую полосу прокрутки. У такого решения есть свои проблемы юзабилити — полосы прокрутки показывают, что часть интерфейса можно скроллить, есть дополнительный контент и т. д. — но нет элегантного способа решить эту проблему во всех браузерах и на всех устройствах.

nav {
position: relative;
z-index: 2;
height: 2.5rem;
overflow-y: hidden;
scroll-behavior: smooth;
}

ul {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1.5rem;
padding-left: 0;
margin-block: 0;
overflow-x: auto;
list-style: none;
text-align: center;
white-space: nowrap;
}

На стороне JavaScript мы начинаем с запроса селектора, проверяем, существует ли он на странице, и устанавливаем ряд переменных для навигационных ссылок и активной ссылки.

let nav = document.querySelectorAll('nav')

if (nav) {
  let navLinks = document.querySelectorAll('nav a')
  let activeLink = document.querySelector('.active')

  //
}

Наша первая строка JSотвечает за немедленную (при загрузке страницы) прокрутку активной ссылки для просмотра содержащего ее элемента. В CodePen я установила ссылку, которая должна быть за пределами экрана, в качестве элемента .active, чтобы вы могли видеть прокрутку при загрузке страницы. Во время работы над документацией Bootstrap я нашел для этого полезный JS-метод — scrollIntoView.

let nav = document.querySelectorAll('nav')

if (nav) {
  let navLinks = document.querySelectorAll('nav a')
  let activeLink = document.querySelector('.active')
  activeLink.scrollIntoView({ behavior: "smooth", inline: "center" })

  //
}

behavior сообщает браузеру, как анимировать скроллинг, в то время как inline указывает браузеру выровнять скролл по горизонтали. (Для вертикального выравнивания, если необходимо, есть параметр block) Отсюда нам нужно добавить eventlistener к каждой навигационной ссылке, чтобы установить класс .active и прокрутить ссылку, по которой щелкнули в окне просмотра. Этот последний фрагмент кода можно было бы очистить с помощью функции scrollIntoView для дедупликации этой строки, но на данный момент это не кажется целесообразным и добавляет немного больше JS.

let nav = document.querySelectorAll('nav')

if (nav) {
  let navLinks = document.querySelectorAll('nav a')
  let activeLink = document.querySelector('.active')
  activeLink.scrollIntoView({ behavior: "smooth", inline: "center" })

  navLinks.forEach( function(link) {
    link.addEventListener("click", (event) => {
      navLinks.forEach( function(link) {
        link.classList.remove('active')
      })
      link.classList.add('active')
      link.scrollIntoView({ behavior: "smooth", inline: "center" })
    })
  })
}

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