Условный CSS

30 сентября 2023 г.

Применить стили в том случае, если элемент пустой

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

Can I use

Например, скрыть элемент, если он пустой.

1.element:empty {
2    display: none;
3}
4

Расстояние между элементами

Для flex и grid контейнеров можно использовать свойство gap (также grid-gap в grid), чтобы установить расстояние между элементами. Оно не добавляет отступы у первого элемента слева и последнего справа/ Также это свойство сохраняет отступы при изменении расположения элементов. Например, когда элемент переходит на вторую строку если у flex контейнера есть свойство flex-wrap: wrap;

Также отдельно можно установить отступы между колонками - column-gap, между строками - row-gap.

Can I use

Установить стили в зависимости от ширины экрана

Для этого можно использовать медиа выражение @media (min-width: 700px) - mobile first, или @media (max-width: 700px) - desktop first.

1.cards {
2  display: flex;
3  flex-direction: column;
4
5  @media (min-width: 700px) {
6    flex-direction: row;
7  }
8}
9
10//or
11
12.cards {
13  display: flex;
14  flex-direction: row;
15
16  @media (min-width: 700px) {
17    flex-direction: column;
18  }
19}
20

Также медиа выражения можно комбинировать. Следующий пример указывает, что стили нужно применять, когда ширина экрана между 500px и 1200px.

1@media (min-width: 500px) and (max-width: 1200px) {
2  /* … */
3}
4

Стили в зависимости от ширины контейнера - container query

Чтобы воспользоваться container query - у самого контейнера необходимо указать стиль - container-type: inline-size; У самых элементов внутри контейнера указываем стили через @container.

1.cards {
2  container-type: inline-size;
3}
4
5@container (min-width: 400px) {
6  .card {
7    background-color: #F2E7DC;
8  }
9}
10

Пример: Стилизация в зависимости от css переменной.

1//Чтобы указать стили для значения true, прописываем их следующим образом
2@container cards style(--featured: true) {
3  .card__inner {
4    color: red;
5  }
6}
7//Для значения false или отсутствия этой переменной:
8@container cards not style(--featured: true) {
9  .card__inner {
10  color: black;
11  }
12}

Can I use

Стили в зависимости от поддержки CSS-функции браузером

Это позволяет сделать @supports

can i use

Селектор :has

1) Позволяет указать стили в зависимости от того, есть ли элемент внутри контейнера или нет

1.card:has(.icon) {
2  justify-content: space-around;
3}

2) Показать элемент в зависимости от выбранного value в select

1form:has(option[value="other"]:checked) textarea {
2  display: block;
3}
4

3) Изменять ширину блока, в зависимости от количества элементов. Например, если количество карточек больше 5, то уменьшаем их размер.

1.cards {
2  --item-size: 200px;
3  margin-top: 20px;
4  width: 100%;
5  display: grid;
6  grid-template-columns: repeat(auto-fill, var(--item-size));
7  gap: 20px;
8
9  &:has(.card:nth-last-child(n + 5)) {
10    --item-size: 100px;
11  }
12}
13

Can I use

Автоматическое заполнение пространство

Свойство grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); позволит элементам заполнить все доступное свободное пространство.

Can I use

Установить стили на элемент в фокусе

В этом поможет псевдо класс :focus-within.

Can I use

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

Источник https://ishadeed.com/article/conditional-css/