1. A Regra @supports

@supports permite que você teste se o navegador do usuário suporta determinadas propriedades ou valores CSS, aplicando estilos apenas quando o teste é verdadeiro. Isso é especialmente útil para funcionalidades CSS modernas que ainda não são universalmente suportadas.

Exemplo Prático de @supports:

.box {
  width: 200px;
  height: 200px;
  background-color: lightgrey;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

2. Expandindo o Uso de @media

Enquanto @media é frequentemente usado para adaptar estilos com base na largura da tela, ele também pode ser empregado para responder a uma ampla gama de condições, incluindo orientação, resolução e até preferências do usuário, como esquemas de cores.

Exemplo Prático de @media para Orientação e Resolução:

/* Estilos para telas em modo paisagem com resolução alta */
@media (orientation: landscape) and (min-resolution: 2dppx) {
  .high-res-img {
    background-image: url('image-hd.jpg');
  }
}

/* Estilos para preferência de esquema de cores escuro */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

Prática com @supports e @media

Criando um Card de Perfil Responsivo:

Vamos criar um card de perfil que se adapta a diferentes condições de visualização, demonstrando o uso de @supports e @media.

<div class="perfil-card">
  <img src="perfil.jpg" alt="Foto de Perfil">
  <h2>Nome do Usuário</h2>
  <p>Desenvolvedor Web</p>
</div>

.perfil-card {
  background-color: lightgrey;
  padding: 20px;
  max-width: 300px;
}

@supports (display: grid) {
  .perfil-card {
    display: grid;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .perfil-card {
    max-width: 100%;
    padding: 10px;
  }
}

Este exemplo utiliza @supports para aplicar um layout grid se suportado, proporcionando um espaçamento consistente entre os elementos do card. Com @media, ajustamos o tamanho e o padding do card em dispositivos com tela menor que 600px, garantindo uma boa visualização em dispositivos móveis.

As regras @supports e @media são ferramentas essenciais para criar sites modernos, responsivos e acessíveis a uma ampla gama de dispositivos e preferências do usuário. Experimente incorporar essas técnicas em seus projetos para criar designs mais adaptáveis e inclusivos.