M

MLOG

Português

Explore a regra CSS @when, um recurso poderoso que permite a aplicação condicional de estilos com base no suporte do navegador, tamanho da viewport e muito mais. Aprenda com exemplos práticos.

CSS @when Rule: Mastering Conditional Style Application

O mundo do CSS está em constante evolução, oferecendo aos desenvolvedores maneiras mais poderosas e flexíveis de estilizar páginas da web. Um desses recursos que está ganhando força é a regra @when, também conhecida como CSS Conditional Rules Module Level 1. Essa regra permite que você aplique estilos CSS condicionalmente, com base em condições específicas que sejam atendidas. É uma ferramenta poderosa para design responsivo, detecção de recursos e criação de folhas de estilo mais robustas e adaptáveis.

What is the CSS @when Rule?

A regra @when é uma regra condicional at-rule em CSS que permite que você defina estilos que são aplicados apenas se certas condições forem verdadeiras. Pense nisso como uma instrução if para seu CSS. Ao contrário das media queries, que se concentram principalmente nas características da viewport (tamanho da tela, orientação, etc.), @when fornece uma maneira mais geral e extensível de lidar com a estilização condicional. Ele se expande sobre as regras at-rules condicionais existentes, como @supports e @media.

Key Advantages of Using @when

Syntax of the @when Rule

A sintaxe básica da regra @when é a seguinte: 
@when <condition> {
  /* CSS rules to apply when the condition is true */
}

O <condition> pode ser qualquer expressão booleana válida que avalie como verdadeira ou falsa. Essa expressão geralmente envolve:

Practical Examples of @when in Action

Vamos explorar alguns exemplos práticos para ilustrar o poder e a versatilidade da regra @when.

1. Responsive Design with @when and Media Queries

O caso de uso mais comum para @when é o design responsivo, onde você ajusta os estilos com base no tamanho da tela. Embora as media queries possam conseguir isso por conta própria, @when fornece uma abordagem mais estruturada e legível, especialmente ao lidar com condições complexas.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

Neste exemplo, os estilos dentro do bloco @when são aplicados apenas quando a largura da tela está entre 768px e 1023px (tamanho típico de tablet). Isso fornece uma maneira clara e concisa de definir estilos para intervalos de viewport específicos.

Internationalization Note: O design responsivo é fundamental para um público global. Considere variar os tamanhos de tela em diferentes regiões. Por exemplo, o uso de dispositivos móveis é maior em alguns países, tornando o design mobile-first ainda mais crucial.

2. Feature Detection with @when and @supports

@when pode ser combinado com @supports para aplicar estilos apenas quando um recurso CSS específico é suportado pelo navegador. Isso permite que você aprimore progressivamente seu site, proporcionando uma experiência melhor para usuários com navegadores modernos, mantendo a compatibilidade com os mais antigos.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback styles for browsers that don't support grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Adjust width for older browsers */
  }
}

Aqui, usamos @supports para verificar se o navegador suporta o CSS Grid Layout. Se sim, aplicamos estilos baseados em grid ao .container. Caso contrário, fornecemos estilos de fallback usando flexbox para garantir que um layout semelhante seja alcançado em navegadores mais antigos.

Global Accessibility Note: A detecção de recursos é importante para a acessibilidade. Navegadores mais antigos podem não ter suporte para atributos ARIA mais recentes ou elementos HTML5 semânticos. Forneça fallbacks apropriados para garantir que o conteúdo permaneça acessível.

3. Combining Media Queries and Feature Queries

O verdadeiro poder de @when vem de sua capacidade de combinar media queries e feature queries para criar regras de estilização condicional mais complexas e diferenciadas.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

Neste exemplo, o elemento .modal só terá um plano de fundo borrado quando a largura da tela for de pelo menos 768px e o navegador suportar a propriedade backdrop-filter. Isso permite que você crie efeitos visualmente atraentes em navegadores modernos, evitando possíveis problemas de desempenho ou falhas de renderização em navegadores mais antigos.

4. Styling Based on Custom Properties (CSS Variables)

@when também pode ser usado em conjunto com propriedades personalizadas de CSS (também conhecidas como variáveis CSS) para criar estilização dinâmica e orientada por estado. Você pode usar JavaScript para atualizar o valor de uma propriedade personalizada e, em seguida, usar @when para aplicar estilos diferentes com base nesse valor.

First, define a custom property:

:root {
  --theme-color: #007bff; /* Default theme color */
  --is-dark-mode: false;
}

Then, use @when to apply styles based on the value of the custom property:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Finally, use JavaScript to toggle the value of the --is-dark-mode custom property:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

This allows users to switch between light and dark themes, with the CSS dynamically updating based on the custom property value. Note that direct comparison of CSS variables in `@when` might not be universally supported across browsers. Instead, you might need to use a workaround with a media query checking for a non-zero value: 

@when ( --is-dark-mode > 0 ) { ... }

However, ensure the custom property has a numeric value for this to function correctly.

Accessibility Note: Fornecer temas alternativos (por exemplo, modo escuro) é crucial para a acessibilidade. Usuários com deficiência visual podem se beneficiar de temas de alto contraste. Certifique-se de que sua troca de tema seja acessível via teclado e leitores de tela.

5. Styling Based on Data Attributes

Você também pode usar @when com atributos de dados para estilizar elementos com base em seus valores de dados. Isso pode ser útil para criar interfaces dinâmicas onde os elementos mudam de aparência com base na interação do usuário ou atualizações de dados.

Por exemplo, digamos que você tenha uma lista de tarefas, e cada tarefa tenha um atributo data-status que indica seu status (por exemplo, "todo", "in-progress", "completed"). Você pode usar @when para estilizar cada tarefa de forma diferente com base em seu status.

[data-status="todo"] {
  /* Default styles for todo tasks */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Note: support for the attribute() test condition might be limited or not fully implemented across all browsers currently. Always test thoroughly.

Browser Compatibility and Polyfills

Até o final de 2024, o suporte do navegador para a regra @when ainda está evoluindo. Embora muitos navegadores modernos suportem a funcionalidade principal, alguns navegadores mais antigos podem não suportar. Portanto, é crucial verificar as tabelas de compatibilidade e usar fallbacks ou polyfills apropriados onde necessário.

Sempre consulte recursos como Can I use... para verificar o status atual de suporte do navegador de @when e recursos relacionados.

Best Practices for Using @when

Conclusion

A regra @when é uma adição poderosa à caixa de ferramentas CSS, oferecendo aos desenvolvedores uma maneira mais flexível e expressiva de aplicar estilos condicionalmente. Ao combiná-la com media queries, feature queries e propriedades personalizadas de CSS, você pode criar folhas de estilo mais robustas, adaptáveis e de fácil manutenção. Embora o suporte do navegador ainda esteja evoluindo, @when é um recurso que vale a pena explorar e incorporar em seu fluxo de trabalho de desenvolvimento web moderno.

As the web continues to evolve, mastering features like @when will be essential for creating engaging, accessible, and performant experiences for users around the world. Embrace the power of conditional styling and unlock new possibilities in your CSS development.