@supports и @media - это два различных видов правил в CSS для проверки поддержки браузером определённых функций.
@media: Это правило используется для применения стилей в зависимости от различных медиа-условий, таких как ширина экрана, тип устройства и т.д.
@supports: Это правило позволяет применять стили только в том случае, если браузер поддерживает определенное свойство CSS или его значение.
Таким образом, @supports и @media оба используются для условного применения CSS стилей в зависимости от условий, но с разными целями: первое проверяет поддержку определённых CSS свойств, второе - подходящие медиа-условия.
и 
