@mídia personalizada

O CSS @custom-media at-rule permite criar aliases para media consultas . Isso é particularmente valioso se você tiver consultas de mídia longas ou complexas usadas várias vezes em sua base de código. O recurso é de natureza semelhante a uma versão de consulta de mídia de propriedades personalizadas CSS (variáveis ​​CSS) .

Sintaxe

A sintaxe para definir um alias é:

@media (<dashed-ident>) [<media-query-list> | true | false ];

Por exemplo:

@custom-media --modern-touch (pointer: coarse) and (min-width: 1024px);

… onde o ident tracejado é --modern-touch.

A sintaxe para usando um alias é a mesma que usar qualquer consulta de mídia, mas em vez de fornecer tipos de mídia ou recursos de mídia, você fornece o <dashed-ident> do seu definido @custom-media:

@media <dashed-ident> {
  /* ... */
}

Argumentos e descritores

• <dashed-ident>: Um identificador definido pelo usuário que deve começar com dois travessões (--), semelhante a funções ou propriedades customizadas. Assim como as propriedades customizadas, o nome diferencia maiúsculas de minúsculas. Por exemplo, --mobile-breakpoint e --Mobile-Breakpoint se refeririam a diferentes definições de mídia personalizada.
• <media-query-list>: Uma lista de consultas de mídia, separadas por operadores.
• true/false: Sempre corresponder / nunca corresponder alterna.

Vejamos como eles funcionam em diferentes contextos, como o escopo deles, como usá-los com booleanos, definir lógica complexa, definir regras com a sintaxe de intervalo CSS e até mesmo aninhar aliases.

Escopo e posicionamento

Ao contrário das propriedades personalizadas, que têm como escopo o elemento em que estão definidas (e seus filhos), @custom-media as regras são globais. Eles são avaliados no escopo global da folha de estilo e sempre serão aplicados a todo o documento. Se diversas regras @custom-media forem definidas com o mesmo nome, aquela que estiver no escopo no momento da avaliação será a usada.

Quando uma regra @media usa um alias personalizado, ou seja, o ident tracejado, ela analisa a definição atual desse alias naquele ponto da folha de estilo. Se o alias for redefinido posteriormente, ele não “atualizará” as consultas de mídia que já foram processadas. Por exemplo, neste caso margin-block: 1rem só será aplicado a #body se for fullscreen e não browser apesar da declaração posterior usar o mesmo nome.

@custom-media --screen-display (display-mode: fullscreen);

@media (--screen-display) {
  body {
    margin-block: 1rem;
  }
}

@custom-media --screen-display (display-mode: browser);

Nota: Este comportamento de escopo ainda está sendo discutido e está sujeito a alterações no futuro.

Constantes Booleanas

Na seção Sintaxe acima, observe que uma regra @custom-media pode ser explicitamente definida como true ou false. Isso é útil para “alternar” blocos inteiros de CSS durante o desenvolvimento ou para sinalização de recursos.

Operadores e lógica complexa

Como @custom-media utiliza exatamente os mesmos operadores lógicos (and, ,, or, not, only) e regras de agrupamento como @media, você pode criar uma lógica complexa agrupada por parênteses, como faria normalmente. Para obter uma análise completa de como usar operadores, negar recursos ou ocultar folhas de estilo de navegadores mais antigos, consulte a seção Lógica e Operadores do @media almanaque . Também vale a pena consultar a seção sobre aninhamento e tomada de decisões complexas ao criar consultas complexas.

Para, por exemplo, construir uma consulta usando o operador lógico and, você pode escrever isto:

@custom-media --modern-touch (pointer: coarse) and (min-width: 1024px);

Sintaxe de intervalo

O mesmo que qualquer outro <media-query-list>, @custom-media tem suporte para a sintaxe de consulta de mídia de intervalo que usa operadores, por ex. maior que (>), menor que (<) e igual (=), para avaliar as condições:

/* Old way */
@custom-media --tablet (min-width: 768px) and (max-width: 1024px);

/* New, cleaner way */
@custom-media --tablet (768px <= width <= 1024px);

Aliases aninhados

Um recurso exclusivo dos aliases @custom-media é que eles podem fazer referência uns aos outros. Isso permite que você crie condições semânticas em camadas:

@custom-media --narrow-window (width < 30rem);
@custom-media --small-and-hover (--narrow-window) and (hover: hover);

@media (--small-and-hover) {
  /* Styles for mobile-sized screens with hover capabilities */
}

No entanto, se um loop for detectado, todas as consultas de mídia personalizadas envolvidas serão tratadas como indefinidas. Por exemplo, se --query-a fizer referência a --query-b, então --query-b não é possível fazer referência a --query-a. Da mesma forma, uma consulta de mídia personalizada não pode referir-se a si mesma.

Esteja ciente também do aninhamento excessivo, pois isso pode dificultar muito a depuração e a identificação de qual camada de consulta está tendo o impacto relevante nas ferramentas de desenvolvedor do seu navegador.

Exemplo: Definindo pontos de interrupção comuns

Em vez de lembrar se o ponto de interrupção do seu “tablet” é 768px ou 800px, você pode defini-lo uma vez no topo da sua folha de estilo.

@custom-media --tablet (min-width: 768px);

.sidebar {
  display: none;

  @media (--tablet) {
    display: block;
  }
}

Exemplo: Definindo abreviações para propriedades existentes

Padrão padrão como (prefers-reduced-motion: reduce) pode ser usado muitas vezes em uma base de código, e esses bytes se somam. Você pode usar @custom-media para definir alternativas mais simples:

@custom-media --prefers-reduced-motion (prefers-reduced-motion: reduce);

@media (--prefers-reduced-motion) {
  /* ... */
}
@custom-media --js-enabled (scripting: enabled);
@custom-media --js-disabled (scripting: none);

@media (--js-disabled) {
  .no-js-banner {
    display: block;
  }
}

Há um grande número de Open Props #@custom-media Receitas que você pode considerar usar.

Suporte JavaScript

@custom-media aliases não são expostos ao método JavaScript matchMedia() , o que significa que este código não funcionará, mesmo se você tiver o alias definido em algum lugar da sua página.

matchMedia("(--tablet)")

Especificação

A regra @custom-media at-rule é definida na especificação Media Queries Level 5 .

Suporte ao navegador

Navegadores não suportados ignoram amplamente @custom-media, portanto, declarações de fallback e estratégias de aprimoramento progressivo podem ser vantajosas. Você pode usar @supports para verificar se @custom-media é compatível com o navegador do usuário, assim:

@supports (at-rule(@custom-media)) {
  /* ... */
}

Ironicamente, no entanto, no momento em que este artigo foi escrito, a funcionalidade de avaliação @supports at-rule não tem suporte completo em navegadores ( Chrome 148 + apenas), então você precisará verificar se for compatível no seu caso. Você pode ver a discussão sobre isso em CSS Drafts Issue #2463 .

Outra abordagem é usar uma ferramenta como PostCSS Custom Media , que expandirá as regras em uma etapa de construção para obter suporte mais amplo ao navegador.

@custom-media originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.