2021 marca uma mudança significativa para a adoção mais ampla das propriedades lógicas do CSS! Os lançamentos recentes da API Chrome provocaram debate, o controle de proporção da SVG oferece nova flexibilidade, o WordPress prioriza a tipografia acessível e o desenvolvimento de consultas de mídia personalizado CSS permanece paralisado. Vamos nos aprofundar nos detalhes.

CSS lógico: o padrão emergente

Seis anos após a implementação inicial de Mozilla, as propriedades lógicas do CSS estão chegando ao suporte completo do navegador em 2021. Firefox, Chrome e a mais recente visualização do Safari já suportam as propriedades e os valores descritos abaixo. O CSS lógico simplifica o estilo com abreviação como margin-inline (Combinando margin-left e margin-right e e e inset e e esquerda). /* ANTES */ principal { margem-esquerda: automático; Margem-direita: Auto; } /* DEPOIS */ principal { margem-in-inline: automático; } adaptação aos layouts da direita para a esquerda (RTL) se torna significativamente mais fácil. Um interruptor de classe simples lida com a transição, crucial para sites traduzidos para idiomas RTL como árabe, persa e urdu.

/* BEFORE */
main {
  margin-left: auto;
  margin-right: auto;
}

/* AFTER */
main {
  margin-inline: auto;
}

O site de David Bushell exemplifica essa abordagem, aproveitando a classe

traduzida-rtl

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

controverso Fugu Apis do Chrome A recente lançamento do Chrome de três APIs para interação avançada de hardware - WebHID e Web Serial (Desktop) e Web NFC (Android) - parte do Project Fugu, gerou controvérsia. Enquanto desenvolvidos em grupos comunitários do W3C, eles ainda não são padrões da Web.

webhid API:

Ativa a interação do aplicativo da web com dispositivos de interface humana incomuns que não possuem drivers de sistema operacional (por exemplo, Nintendo Wii Remote).

• web serial API: facilita a comunicação byte por bytes com periféricos como microcontroladores e impressoras 3D por meio de conexões seriais emuladas.
• web nfc API: permite leitura/gravação sem fio de curto alcance para NFC Tags.
• Apple e Mozilla Express Reservas, citando impressões digitais, segurança e outras preocupações. A posição de Mozilla é detalhada na página de posições de especificação. SVG Flexibility:
preserveaspetratio = nenhum

por padrão, SVG escalas ao preservar a proporção de aspecto. Setting

preserveaspetratio = "nenhum" estica o SVG para preencher seu contêiner, potencialmente distorcendo a imagem. Isso pode ser útil para elementos simples e decorativos em páginas responsivas, como bordas ou linhas diagonais que precisam preencher um espaço específico.

WordPress: Reduzindo itálico para acessibilidade

enquanto os itálicos aumentam a ênfase, o uso estendido apresenta desafios de acessibilidade, principalmente para leitores com dislexia. O WordPress 5.7 aborda isso removendo o itálico de descrições, texto de ajuda e outras áreas dentro da interface do administrador para melhorar a legibilidade. A atualização também substitui fontes da web personalizadas por fontes do sistema.

Consultas de mídia personalizadas CSS: ainda aguardando progresso

a

@regra personalizada

, proposta há quase sete anos, permanece não desenvolvida. Esse recurso permitiria definir consultas de mídia reutilizáveis, reduzir a duplicação de código e melhorar a legibilidade.

@custom-media--narrow-window (max-width: 30em); @media (--Narrow-window) { / * Estilos estreitos da janela */ }

Embora o suporte ao navegador seja incerto, o plug -in oficial do PostCSS oferece benefícios imediatos de implementação. O conceito de variáveis ​​de ambiente definido pelo autor também está sendo explorado, mas continua sendo um trabalho em andamento.

@Media (Max-Width: Env (-Window)) { / * Estilos estreitos da janela */ }