Eu conhecia o scriptingrecurso de mídia CSS, mas ainda tinha a impressão de que faltava suporte para vários navegadores. Que surpresa agradável descobrir que ele está disponível em todos os navegadores modernos desde dezembro de 2023, de acordo com caniuse.com. Com este recurso, podemos fornecer regras CSS alternativas dependendo se o JavaScript está ou não disponível no navegador do usuário. Também pode ajudar a reduzir flashes de conteúdo sem estilo ou mudanças indesejáveis de layout.
Antes de começarmos: por mais interessante que seja esse recurso, aprendi que existem algumas pegadinhas infelizes. Alterei o artigo com uma seção de problemas abaixo.
Uso
Podemos aprimorar progressivamente nossos estilos:
@media (scripting: enabled) {
.my-element {
/* enhanced styles if JS is available */
}
}Ou podemos voltar graciosamente a alguns estilos alternativos:
@media (scripting: none) {
.my-element {
/* fallback styles when JS is not supported */
}
}Há também um initial-only valor para scripts habilitados durante o carregamento da página, mas não depois. O rascunho de trabalho do W3C para consultas de mídia nível 5 inclui alguns casos em que pode ser útil.
Exemplos são páginas impressas ou proxies de rede de pré-renderização que renderizam uma página em um servidor e enviam uma versão quase estática da página ao usuário.
Pessoalmente, não imagino usar initial-onlymuito, ou nunca. Embora eu esteja interessado em encontrar exemplos mais específicos disso na prática.
O tempo antes da consulta
Antes desse recurso, uma abordagem para detectar suporte a JavaScript era definir um seletor personalizado na htmltag de abertura – um seletor comum visto é o no-jsnome da classe. Se o JavaScript for suportado e ativado, ele removerá esse seletor antes de renderizar o conteúdo da página. Quando o JavaScript está desabilitado, podemos fornecer estilos alternativos que se adaptam à experiência.
<html class="no-js">
<!-- page content -->
</html>.no-js .my-element {
/* styles when JS is disabled */
}Isso ea vida real?
Imagine que uma nova campanha na web está prestes a ser lançada e é hora de se conectar com todos os principais interessados. Tudo parece ótimo, a maior parte da equipe está satisfeita com o resultado, mas de repente algum profissional de marketing moderno na reunião solicita enfaticamente uma animação de introdução complexa no componente herói quando a página carrega. Eles gesticulam descontroladamente enquanto pedem que a manchete principal desapareça, encolhem-se como se estivessem sendo puxados para trás por um estilingue e então… neste ponto eles fazem um barulho de explosão com a boca. “Faça aparecer!” eles decretam apenas 24 horas antes do lançamento.
Uau. Melhor começar.
Para lidar com a complexidade deste trabalho, poderíamos recorrer a uma biblioteca de animação como GSAP. Mas o que o usuário vê quando o JavaScript não está disponível, sem mencionar se a prefers reduced motion configuração do usuário está habilitada? Precisaremos considerar uma versão alternativa do herói sem toda aquela investida e escalada.
Essa consulta de mídia desbloqueia a capacidade de fornecer regras CSS que se adaptam melhor à experiência do usuário. Na demonstração do CodePen abaixo, se desabilitarmos o JavaScript, descobriremos que a animação será ignorada e o título estático será exibido.
Assista aquele flash
Para realmente fazer com que a animação de introdução pareça suave no carregamento da página, a demonstração depende da scriptingconsulta de mídia para ocultar o título com CSS. Ao fazer isso, não captaremos nenhum texto sem estilo antes que a animação GSAP seja carregada. Além disso, só queremos ocultar o título se o JavaScript estiver disponível, caso contrário, ele ficará oculto para os usuários quando estiver desativado.
Combinando consultas
Na guia CSS da demonstração, observe que as consultas de mídia são combinadas para verificar as condições de script e de movimento reduzido.
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
/* JS available and motion OK */
}
@media (scripting: none), (prefers-reduced-motion) {
/* JS disabled or reduced motion enabled */
}Cada condição certamente pode ter estilos exclusivos se o resultado desejado exigir isso, mas é bom podermos combiná-los onde houver sobreposição nos conjuntos de regras.