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

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

Adam Argyle

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

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

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

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

Вот несколько примеров использования :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;
}

Здесь выдвигается основная область содержимого, когда у Sidenav есть класс .--is-open :

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

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

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

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

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

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

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

Вложение способом CSS

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

Обзор синтаксиса вложенности 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;
  }
}

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

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

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

Используйте единицы запроса контейнера

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

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

1. Встроенный вариант cqi .
2. Вариант ширины cqw .
3. Вариант блока cqb .
4. Вариант высоты cqh .
5. Вариант для той длины, которая меньше cqmin .
6. Вариант для большей длины cqmax .

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

@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 году .