Как отправить отказоустойчивый компонент CSS?

На чтение 2 мин Просмотров 26 Опубликовано 06.06.2023

В этом кратком совете, взятом из книги Unleashing the Power of CSS, Стефани показывает, как контейнерные запросы позволяют нам поставлять устойчивые компоненты, содержащие встроенные макеты и варианты стилей.

Это может показаться довольно смелым, но контейнерные запросы позволяют нам применять методологию «сделай один раз, разверни везде». Мне, как системному инженеру дизайна, очень нравится иметь возможность поставлять компоненты дизайн-системы со встроенными вариантами компоновки и стиля.

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

Сетка — отличный компаньон для составления этих вариантов. Используя области шаблона сетки, мы можем изменить порядок разделов формы без необходимости дополнительной разметки. В этом компоненте формы подписки я выделил три области сетки: legend, fieldи submit. Наложения, добавленные в следующем видео, показывают, как макет меняется в разных вариантах.

В коде формы подписки <form>элемент имеет класс subscription-formи задан как контейнер. Вложенный <div>класс form-content— это то, что наши контейнерные запросы будут затем изменять:

.subscription-form {
  container-type: inline-size;
}

При самой узкой ширине по умолчанию форма представляет собой простой стек сетки с примененным зазором:

.form__content {
  display: grid;
  gap: 1rem;
}

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

@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend field" 
            "legend submit";
    align-items: center;
    column-gap: 2rem;
  }

  legend {
    grid-area: legend;
  }

  .form-group {
    grid-area: field;
  }

  button {
    grid-area: submit;
  }
}

Затем второй, последний запрос контейнера должен только скорректировать grid-template-areasопределение, чтобы выровнять области по горизонтали. Требуется только одна дополнительная настройка, которая заключается в том, чтобы переместить кнопку «Подписаться» в конечное положение, что визуально выравнивает ее с вводом электронной почты:

@container (min-width: 700px) {
  .form__content {
    grid-template-areas: 
            "legend field submit";
  }

  button {
    align-self: end;
  }
}

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