CSS запросы к контейнерам наконец с нами

[Vadiok]

Читаю новость с телефона, а так хочется попробовать проверить

.wrapper {    
  container-type: inline-size;
}   

.card {
  height: 100px;
}

@container (min-height: 150px) {  
  .card {
    height: 200px;
  }
}

[mihailgok]

Протестируйте в chrome с ПК - можете использовать мой кодпен - он в конце статьи)

[TomatoBrain]

Я не могу понять в чём же такая геймченжеровость этих контейнерных запросов. Как по мне они выглядят не столько полезными, сколько вредными, ещё одна прослойка в css за которой надо следить, не сказать, что очень наглядная.
Может я чего-то не понимаю, буду рад, если наглядно объяснят.

[mihailgok]

Для меня это просто замена медиа-запросов. Как дополнительная фишка в проекте - контейнерные запросы могут стать усложнением. А вот попробовать на них построить проект - интересно.

В любом случае, активно эта технология будет использоваться года через три-четыре. Посмотрим за развитием.

[Vadiok]

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

[eps]

Тут часто забывают добавить, новое свойство — это веб-стандарт или Google Chrome feature. А комментаторы забывают спросить, как будто уже не видят разницы.

В нашем случае — W3C working draft, всё хорошо.

[mytecor]

не совсем понял, почему нельзя использовать тот же класс:

.c-article {      
  /* Стандартные стили */  
}  

@media (min-width: 800px) {    
  /* Стили в горизонтальном режиме */
  
  .c-article {      
    display: flex;      
    align-items: center;    
  }  
}

[mihailgok]

Можно, и тогда карточки изменятся и в сайдбаре и в main. А нам нужно, чтобы они немного отличались.