Позиционирование якоря

Позиционирование привязки CSS — это экспериментальная новая функция CSS, которая позволяет вам позиционировать элемент относительно другого элемента на странице. Это делается с помощью свойства anchor-position. Например, следующий код поместит элемент на 10 пикселей левее элемента привязки:

.element {
  anchor-position: my-anchor left 10px;
}

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

<div id="anchor">This is the anchor element</div>
<div id="tooltip">This is the tooltip</div>
#tooltip {
    position: absolute;
    display: none;
  }
#anchor:hover #tooltip {
    display: block;
  }
#tooltip {
    anchor-position: my-anchor top 10px;
  }

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

В другом примере с сайта developers.chrome.com позиционирование привязки используется для отслеживания визуального индикатора полей ввода, находящихся в фокусе. Как видите, якорь может иметь дело с несколькими позициями и макетами.

В будущем мы сможем позиционировать элемент относительно нескольких элементов привязки:

.anchor1 {
  anchor-name: anchor1;
}
.anchor2 {
  anchor-name: anchor2;
}
.positioned {
  position: absolute;
  top: 0;
  left: 0;
  anchor: anchor1, anchor2;
}

Примером нескольких обработчиков для одного элемента является приведенная ниже диаграмма, где всплывающие подсказки привязаны путем объединения их с максимальным и минимальным значениями диаграммы (источник: developers.chrome.com).

Некоторые другие примеры того, как можно использовать позиционирование привязки CSS:

  • Элементы, которые следуют за пользователем, когда он прокручивает страницу вниз.
  • Аккордеоны, которые расширяются и сворачиваются, когда пользователь нажимает кнопку.
  • Изменение размера изображений на основе нескольких позиций привязки
  • Модальные диалоги, которые появляются поверх остальной части страницы.
  • Еще больше динамических подсказок!

Обратите внимание, что по состоянию на август 2023 года позиционирование привязки по-прежнему является экспериментальной функцией. Вы можете протестировать Chrome Canary!

Новые функции для фигур

С CSS Shapes мы не имеем в виду создание div размером 100 на 100 пикселей и его заполнение для создания квадрата… CSS Shapes — это реальная вещь, которая позволяет легко создавать сложные фигуры с помощью CSS.

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

.circle {
  shape-outside: circle(50px at 10px 10px);
}

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

.triangle {
  shape-outside: triangle(50px, 0, 50px, 100px, 0, 100px);
}

Другие новые функции:

  • shape-inside, который можно использовать для создания фигур, заполненных изображениями или другим содержимым.
  • shape-image, который можно использовать для создания фигур, реагирующих на размер элемента.
  • shape-overflow, которые можно использовать для создания обрезанных фигур или контента, выходящего за пределы фигуры. В следующем примере shape-overflow: clip позволит содержимому переполнять форму, но оно будет ограничено рамкой обводки элемента:
.shape {
  shape-image: url(https://example.com/image.png);
  shape-overflow: clip;
}

Обратите внимание, что по состоянию на август 2023 г. эти функции все еще находятся на стадии разработки.

Новые возможности привязки прокрутки

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

.my-element {
  scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(50px, 100px);
}

Этот код создаст элемент, который привязывается к каждые 50 пикселей по оси X и каждые 100 пикселей по оси Y.

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

  • Выравнивание с привязкой прокрутки. Новое свойство scroll-snap-align позволяет управлять выравниванием элемента при его привязке к позиции привязки. Например, вы можете использовать это свойство, чтобы убедиться, что элемент всегда выровнен по верху, низу, центру или слева/справа контейнера прокрутки. Также в приведенном ниже примере вы можете видеть, что есть поддержка привязки прокрутки по обеим осям.
.container {
  overflow-x: scroll;
  overflow-y: scroll;
  scroll-snap-type: both mandatory; // Support both axes
  scroll-snap-align: center;
}
  • Улучшенная поддержка сенсорных устройств: упрощается привязка к позициям с помощью сенсорных жестов.
.container {
  scroll-snap-type: both mandatory;
  scroll-snap-touch-snap-points: true;
}

Аудио псевдоклассы

В рамках обновления Selectors Level 4 добавлено несколько псевдоклассов, которые представляют загруженные изображения и видео.

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

Другой раздел посвящен состояниям загрузки мультимедиа и включает :buffering и :stalled. Эти классы указывают пользователям, что мультимедиа будет продолжать воспроизводиться после устранения проблем с загрузкой. Также будут добавлены псевдоклассы :muted и :volume-locked. Эти псевдоклассы — хороший способ обеспечить визуальную обратную связь, информировать пользователей и работать с различными стилями, как в следующем примере:

video {
  opacity: 1;
}
video:buffering {
  background-color: #ccc;
  opacity: 0.5;
}

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

По состоянию на август 2023 г. некоторые из этих функций доступны только в Safari.

Псевдокласс текущего элемента

Псевдокласс :current прост; он представляет отображаемый в данный момент элемент или предка этого элемента. Мы могли бы использовать это для создания стилей, которые реагируют на текущую позицию пользователя в определенном элементе.

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

:current(p, a) {
  background: yellow;
}

Кроме того, псевдоклассы :past и :future также предлагают интересные возможности, представляя элементы, которые полностью появляются до или после элемента :current. Псевдокласс :past представляет любой элемент, который определен как полностью предшествующий элементу :current. Однако псевдокласс :future представляет следующий элемент.

Новые функции для подсетки

Подсетки CSS — это функция CSS Grid Layout, которая позволяет создавать вложенные сетки в одном контейнере сетки, и скоро появятся новые функции! Небольшое резюме; вот пример того, как вы можете создать подсетку:

.my-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.my-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 50px);
}
.my-grid > .my-subgrid {
  grid-column: 1 / 2;
}
Grid Container
   Column 1
       Subgrid
         Row 1
         Row 2
   Column 2

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

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

.grid {
  display: grid;
  grid-template-names: a b c;
}
.grid .item.a {
  grid-column: a;
}
.grid .item.b {
  grid-column: b;
}
.grid .item.c {
  grid-column: c;
}

Другой способ — выравнивание подсетки дочерней сетки, чтобы выровнять сетку с родительской сеткой:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.grid .item {
  background-color: #ccc;
  border: 1px solid black;
}
.grid .item > .child-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-alignment: start start;
}

Свойство grid-alignment можно использовать для выравнивания дочерней сетки с ее родителем. В этом примере дочерняя сетка выравнивается с родительской сеткой как по горизонтальной, так и по вертикальной осям.

Один недостаток вложенных сеток: их сложно отлаживать. Если их сложно отлаживать: используйте инспектор сетки для визуализации макета. На панели инспектора вы увидите несколько разных вкладок. Одной из вкладок будет вкладка «Сетка». Вкладка «Сетка» покажет вам визуализацию макета сетки CSS. Визуализация покажет вам линии сетки, дорожки сетки и элементы сетки.

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

Обратите внимание, что по состоянию на август вложенные сетки поддерживаются не всеми браузерами!