Эта страница переведена с помощью Cloud Translation API.

5 фрагментов CSS, которые должен знать каждый разработчик интерфейса в 2024 году,5 фрагментов CSS, которые должен знать каждый разработчик интерфейса в 2024 году

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

Adam Argyle

Я считаю, что каждый разработчик интерфейса должен знать :has() — это больше, чем просто «родительский селектор», как и почему используется subgrid , как вкладывать элементы с помощью встроенного синтаксиса CSS, как позволить браузеру сбалансировать перенос текста заголовка и как использовать контейнерные блоки запросов.

Эта публикация является продолжением прошлогодней публикации «6 CSS-фрагментов», которые должен знать каждый фронтенд-разработчик в 2023 году .

CSS: имеет(.потенциал-за-пределами-родительского-селектора)

:has()

Browser Support

Source

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

Показаны 4 панели, каждая с изображением и подписью. На каждой из картинок показан мозг, активирующий все больше и больше мозговой мощности. Первая панель называет :has(). Вторая панель говорит figure:has(caption) как родительский селектор. Третья панель говорит .layout:has(> :nth-child(5)) как селектор количества. Четвертая панель говорит html:has(#checked) .new-subject как условный селектор изменения субъекта.

Вот пара примеров использования :has() в качестве родительского селектора. Он получил такое название, потому что обычно субъект селектора находится в конце, например, ul li , где li является субъектом и получает стили. С :has() элемент в начале селектора может стать субъектом. В следующем примере кнопка имеет зазор, если внутри есть элемент с классом .icon . Карточка меняет ориентацию, если внутри есть изображение.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Давно желанный селектор — это изменение макета на основе того, сколько в нем элементов. Теперь это возможно с :has() , поскольку он может сохранять контейнер в качестве субъекта при запросе количества потомков.

main:has(> :nth-child(5)) {…}

Еще один пример более высокого уровня — изменение стилей, установленных для всего документа, при установке определенного флажка на странице:

html:has(#dark-mode:checked) {…}

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

Здесь отображается элемент ошибки формы, если какие-либо из ее входных данных недействительны:

form:has(:user-invalid) .error {
  display: block;
}

Этот вариант выдвигает область основного контента, когда у боковой навигации есть класс .--is-open :

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

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

Попробуйте на Codepen

Создать подсетку

subgrid

Browser Support

Source

В течение многих лет сообщество front-end веб просило subgrid помочь завершить и довести до конца чрезвычайно популярный и мощный движок CSS grid layout. Теперь он доступен во всех трех основных движках.

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

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

Вложите CSS-способ

nesting

Browser Support

Source

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

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

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

Пусть браузер сбалансирует заголовки

balance

Browser Support

Source

pretty

Browser Support

Source

Без text-wrap: balance разработчикам и копирайтерам приходится использовать подсказки по переносу строк, такие как элементы <wbr> или  . Это в основном проигрышная битва, поскольку как только контент переводится, масштабируется или изменяется каким-либо образом, нет никакой гарантии, что эти подсказки по переносу окажутся в нужном месте для нового представления контента.

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

Использовать контейнерные блоки запросов

cqw

Browser Support

Source

В прошлогоднем посте говорилось, что каждый разработчик интерфейса должен знать, как писать контейнерный запрос. Если вы еще не научились, сделайте 2024 год годом, чтобы сделать решительный шаг, и ознакомьтесь также с контейнерными запросами. В качестве обзора Ахмад Шадид написал замечательную статью о контейнерных запросах в 2021 году.

Появилось шесть новых контейнерных единиц запроса :

Встроенный вариант cqi .
Вариант ширины cqw .
Блочный вариант cqb .
Вариант высоты cqh .
Вариант для любой длины, меньшей cqmin .
Вариант для большей длины cqmax .

Рассмотрим сценарий для относительной и внутренней анимации контейнера. Дочерний элемент, который полностью выдвигается из своего контейнера с использованием 100cqi — это 100% от размера контейнера inline.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

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

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

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

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

Adam Argyle

CSS: имеет(.потенциал-за-пределами-родительского-селектора)

:has()

Browser Support

Source

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

main:has(> :nth-child(5)) {…}

html:has(#dark-mode:checked) {…}

Здесь отображается элемент ошибки формы, если какие-либо из ее входных данных недействительны:

form:has(:user-invalid) .error {
  display: block;
}

Этот вариант выдвигает область основного контента, когда у боковой навигации есть класс .--is-open :

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Попробуйте на Codepen

Создать подсетку

subgrid

Browser Support

Source

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

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

Вложите CSS-способ

nesting

Browser Support

Source

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

Пусть браузер сбалансирует заголовки

balance

Browser Support

Source

pretty

Browser Support

Source

Использовать контейнерные блоки запросов

cqw

Browser Support

Source

Появилось шесть новых контейнерных единиц запроса :

Встроенный вариант cqi .
Вариант ширины cqw .
Блочный вариант cqb .
Вариант высоты cqh .
Вариант для любой длины, меньшей cqmin .
Вариант для большей длины cqmax .

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}