Funções trigonométricas

O Chrome 111 adicionou suporte às funções trigonométricas sin(), cos(), tan(), asin(), acos(), atan() e atan2(), deixando-as disponíveis em todos os principais mecanismos. Essas funções são muito úteis para animação e layout. Por exemplo, agora ficou muito mais fácil posicionar elementos em um círculo ao redor de um centro escolhido.

Saiba mais sobre as funções trigonométricas no CSS.

Seleção complexa de n-ésima*

Com o seletor de pseudoclasse :nth-child(), é possível selecionar elementos no DOM pelo índice deles. Usando a microsintaxe An+B, você tem controle preciso sobre quais elementos selecionar.

Por padrão, os pseudos :nth-*() consideram todos os elementos filhos. A partir do Chrome 111, você pode transmitir uma lista de seletores para :nth-child() e :nth-last-child(). Assim, você pode pré-filtrar a lista de filhos antes que An+B faça sua função.

Na demonstração a seguir, a lógica 3n+1 é aplicada apenas às bonecas pequenas, com uma pré-filtragem usando of .small. Use os menus suspensos para mudar dinamicamente o seletor usado.

Saiba mais sobre seleções complexas de n-ésima*.

Escopo

O Chrome 118 adicionou suporte a @scope, uma regra at que permite que você defina a correspondência do seletor para um subárvore específica do documento. Com o estilo de escopo, você pode ser muito específico sobre quais elementos selecionar sem precisar escrever seletores muito específicos ou acoplar os elementos à estrutura do DOM.

Um subárvore com escopo é definida por uma raiz de escopo (o limite superior) e um limite de escopo opcional (o limite inferior).

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

As regras de estilo colocadas em um bloco de escopo só vão segmentar elementos dentro do subárvore gerada. Por exemplo, a regra de estilo com escopo a seguir tem como alvo apenas os elementos <img> que ficam entre o elemento .card e qualquer componente aninhado correspondido pelo seletor [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

Na demonstração a seguir, os elementos <img> no componente do carrossel não são correspondidos devido ao limite de escopo aplicado.

Captura de tela da demonstração do escopo

Demonstração ao vivo do Scope

Saiba mais sobre @scope no artigo "Como usar @scope para limitar o alcance dos seus seletores". Neste artigo, você vai aprender sobre o seletor :scope, como a especificidade é processada, escopos sem Prelude e como a cascata é afetada por @scope.

Aninhamento

Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente um do outro. Isso leva à repetição, ao volume de folhas de estilo e a uma experiência de criação de conteúdo dispersa. Agora, os seletores podem ser continuados com regras de estilo relacionadas agrupadas.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

O aninhamento pode reduzir o peso de uma folha de estilo, reduzir a sobrecarga de seletores repetidos e centralizar os estilos de componentes. A sintaxe foi lançada inicialmente com uma limitação que exigia o uso de & em vários lugares, mas foi suspensa com uma atualização da sintaxe relaxada de aninhamento.

Saiba mais sobre anilhamento.

Subgrades

O CSS subgrid permite criar grades mais complexas com melhor alinhamento entre os layouts filhos. Ele permite que uma grade dentro de outra adote as linhas e colunas da grade externa como próprias, usando subgrid como um valor para linhas ou colunas de grade.

A subgrade é especialmente útil para alinhar elementos irmãos ao conteúdo dinâmico um do outro. Isso libera redatores de copy, redatores de UX e tradutores da tentativa de criar cópias de projeto que "se encaixem" no layout. Com a subgrade, o layout pode ser ajustado para se ajustar ao conteúdo.

Saiba mais sobre a subgrade.

Letra inicial

A propriedade initial-letter, lançada no início do ano no Chrome 110, é um recurso CSS pequeno, mas poderoso, que define o estilo para a colocação de letras iniciais. É possível posicionar as letras em um estado rebaixado ou elevado. A propriedade aceita dois argumentos: o primeiro para definir a profundidade de inserção da letra no parágrafo correspondente e o segundo para definir a altura da letra acima dele. Você pode até combinar os dois, como na demonstração a seguir.

Captura de tela da primeira letra

Demonstração de letra inicial

Saiba mais sobre letra-inicial.

text-wrap: balance and pretty

Como desenvolvedor, você não sabe o tamanho final, o tamanho da fonte ou até mesmo o idioma de um título ou parágrafo. Todas as variáveis necessárias para um tratamento eficaz e estético do ajuste de texto estão no navegador. Como o navegador conhece todos os fatores, como tamanho da fonte, idioma e área alocada, ele é uma ótima opção para lidar com layouts de texto avançados e de alta qualidade.

É aqui que entram duas novas técnicas de quebra de texto, uma chamada balance e a outra pretty. O valor balance busca criar um bloco de texto harmonioso, enquanto pretty busca evitar órfãos e garantir a divisão de palavras adequada. Tradicionalmente, essas duas tarefas são feitas manualmente, e é incrível poder delegar o trabalho ao navegador e fazer com que ele funcione para qualquer idioma traduzido.

Saiba mais sobre text-wrap: balance.

Espaços de cores em HD (nível de cor 4)

Do hardware ao software, do CSS às luzes piscando, pode ser muito trabalhoso para os computadores tentarem representar as cores tão bem quanto os olhos humanos. Em 2023, temos novas cores, mais cores, novos espaços de cores, funções de cores e novos recursos.

O CSS e a cor agora podem: - Verificar se o hardware da tela do usuário é compatível com cores HDR de ampla gama. - Verifique se o navegador do usuário entende a sintaxe de cores, como Oklch ou Display P3. - Especifique cores HDR em Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ e muito mais. - Crie gradientes com cores HDR; - Interpole gradientes em espaços de cores alternativos. - Misture cores com color-mix(). - Crie variantes de cor com sintaxe de cor relativa.

Saiba mais sobre Color 4 e espaços de cor.

função de mistura de cores

Misturar cores é uma tarefa clássica, e o CSS 2023 também pode fazer isso. Você pode misturar branco ou preto com uma cor, mas também pode usar transparência, e tudo isso em qualquer espaço de cores que você escolher. Ele é um recurso de cor básico e avançado ao mesmo tempo.

Pense em color-mix() como um momento de um gradiente. Enquanto um gradiente mostra todas as etapas necessárias para ir do azul ao branco, o color-mix() mostra apenas uma etapa. As coisas ficam mais avançadas quando você começa a considerar os espaços de cores e aprende como a mistura de espaços de cores pode ser diferente para os resultados.

Saiba mais sobre color-mix().

Sintaxe de cor relativa

A sintaxe de cor relativa (RCS, na sigla em inglês) é um método complementar a color-mix() para criar variantes de cores. Ele é um pouco mais poderoso do que color-mix(), mas também é uma estratégia diferente para trabalhar com cores. O color-mix() pode misturar a cor branca para clarear uma cor, em que o RCS oferece acesso preciso ao canal de luminosidade e a capacidade de usar calc() no canal para reduzir ou aumentar a luminosidade de forma programática.

O RCS permite realizar manipulações relativas e absolutas em uma cor. Uma mudança relativa é aquela em que você pega o valor atual de saturação ou luminosidade e o modifica com calc(). Uma mudança absoluta é quando você substitui um valor de canal por um totalmente novo, como definir a opacidade em 50%. Essa sintaxe oferece ferramentas significativas para temas, variantes just in time e muito mais.

Saiba mais sobre a sintaxe de cores relativa.

Consultas de tamanho do contêiner

Em vez de usar as informações de tamanho global da viewport para aplicar estilos CSS, as consultas de contêiner oferecem suporte à consulta de um elemento pai na página. Isso significa que os componentes podem ter estilo de forma dinâmica em vários layouts e visualizações. As consultas de contêiner para tamanho ficaram estáveis em todos os navegadores modernos no Dia dos Namorados deste ano (14 de fevereiro).

Para usar esse recurso, primeiro configure a contenção no elemento que você está consultando e, em seguida, semelhante a uma consulta de mídia, use @container com os parâmetros de tamanho para aplicar os estilos. Além das consultas de contêiner, você também tem os tamanhos delas. Na demonstração a seguir, o tamanho da consulta do contêiner cqi (que representa o tamanho do contêiner inline) é usado para definir o tamanho do cabeçalho do card.

Saiba mais sobre o uso de consultas de contêiner.

Consultas de contêineres de estilo

As consultas de estilo foram lançadas com implementação parcial no Chrome 111. Com as consultas de estilo, é possível consultar o valor de propriedades personalizadas em um elemento pai ao usar @container style(). Por exemplo, consulte se um valor de propriedade personalizada existe ou está definido para um determinado valor, como @container style(--rain: true).

Captura de tela da consulta de estilo

Demonstração de consulta de estilo

Embora isso pareça semelhante ao uso de nomes de classe no CSS, as consultas de estilo têm algumas vantagens. A primeira é que, com consultas de estilo, você pode atualizar o valor no CSS conforme necessário para pseudoestados. Além disso, em versões futuras da implementação, será possível consultar intervalos de valores para determinar o estilo aplicado, como style(60 <= --weather <= 70), e o estilo com base em pares de valor de propriedade, como style(font-style: italic).

Saiba mais sobre o uso de consultas de estilo.

Seletor:has()

Por quase 20 anos, os desenvolvedores pediram um "seletor pai" no CSS. Com o seletor :has() enviado no Chrome 105, isso agora é possível. Por exemplo, o uso de .card:has(img.hero) vai selecionar os elementos .card que têm uma imagem principal como filho.

Captura de tela da demonstração de :has()

:has() Demonstração ao vivo

Como :has() aceita uma lista de seletores relativos como argumento, é possível selecionar muito mais do que o elemento pai. Usando vários combinatores de CSS, é possível não apenas subir na árvore do DOM, mas também fazer seleções laterais. Por exemplo, li:has(+ li:hover) vai selecionar o elemento <li> que precede o elemento <li> que está com o cursor.

Saiba mais sobre o seletor :has() do CSS.

Atualizar consulta de mídia

A consulta de mídia update oferece uma maneira de adaptar a interface à taxa de atualização de um dispositivo. O recurso pode informar um valor de fast, slow ou none, que se relaciona aos recursos de diferentes dispositivos.

A maioria dos dispositivos para os quais você projeta provavelmente tem uma taxa de atualização rápida. Isso inclui computadores e a maioria dos dispositivos móveis. Leitores de e-books e dispositivos como sistemas de pagamento de baixa potência podem ter uma taxa de atualização lenta. Saber que o dispositivo não pode processar animações ou atualizações frequentes significa que você pode economizar o uso da bateria ou atualizações de visualização com falhas.

Saiba mais sobre o @media (atualização).

Scripting media query

A consulta de mídia de script pode ser usada para verificar se o JavaScript está disponível ou não. Isso é muito bom para o aprimoramento progressivo. Antes dessa consulta de mídia, uma estratégia para detectar se o JavaScript estava disponível era colocar uma classe nojs no HTML e removê-la com o JavaScript. Esses scripts podem ser removidos, já que o CSS agora tem uma maneira de detectar o JavaScript e fazer os ajustes necessários.

Saiba como ativar e desativar o JavaScript em uma página para testes usando o Chrome DevTools.

Considere uma troca de tema em um site. A consulta de mídia de script pode ajudar a fazer a troca funcionar com a preferência do sistema, já que nenhum JavaScript está disponível. Ou considere um componente de chave: se o JavaScript estiver disponível, a chave poderá ser deslizada com um gesto em vez de apenas ativar e desativar. Há muitas oportunidades de melhorar a UX se o script estiver disponível, além de oferecer uma experiência de base significativa se o script estiver desativado.

Saiba mais sobre o script.

Consulta de mídia com transparência reduzida

Interfaces não opacas podem causar dores de cabeça ou ser uma dificuldade visual para vários tipos de deficiência visual. É por isso que o Windows, o macOS e o iOS têm preferências do sistema que podem reduzir ou remover a transparência da interface. Essa consulta de mídia para prefers-reduced-transparency se encaixa bem com as outras consultas de mídia de preferência, que permitem que você seja criativo e ajuste para os usuários.

Em alguns casos, é possível fornecer um layout alternativo que não tenha conteúdo sobreposto a outro. Em outros casos, a opacidade de uma cor pode ser ajustada para ser opaca ou quase opaca. A postagem do blog a seguir tem mais demonstrações inspiradoras que se adaptam à preferência do usuário. Confira se você tem curiosidade sobre os momentos em que essa consulta de mídia é valiosa.

Saiba mais sobre @media (prefers-reduced-transparency).

Conferir transições

As transições de visualização têm um grande impacto na experiência do usuário em uma página. Com a API View Transitions, é possível criar transições visuais entre dois estados de página do seu aplicativo de página única. Essas transições podem ser de páginas inteiras ou menores, como adicionar ou remover um item de uma lista.

A função document.startViewTranstion é o núcleo da API View Transitions. Transmita uma função que atualize o DOM para o novo estado, e a API cuida de tudo para você. Para isso, ele tira um snapshot antes e depois e faz a transição entre os dois. Usando o CSS, é possível controlar o que é capturado e personalizar como esses snapshots serão animados.

A API View Transitions para aplicativos de uma página foi lançada no Chrome 111. Saiba mais sobre as Transições de visualização.

Função de transição linear

Não se deixe enganar pelo nome dessa função. A função linear(), que não deve ser confundida com a palavra-chave linear, permite criar funções de transição complexas de maneira simples, com a perda de precisão.

Antes do linear(), que foi lançado no Chrome 113, era impossível criar efeitos de salto ou mola no CSS. Graças a linear(), é possível aproximar essas transições simplificando-as em uma série de pontos e, em seguida, interpolando linearmente entre esses pontos.

Saiba mais sobre linear(). Para criar curvas linear(), use o gerador de transição linear.

Fim da rolagem

Muitas interfaces incluem interações de rolagem e, às vezes, a interface precisa sincronizar informações relevantes para a posição de rolagem atual ou buscar dados com base no estado atual. Antes do evento scrollend, era necessário usar um método de tempo limite impreciso que podia ser acionado enquanto o dedo do usuário ainda estava na tela. Com o evento scrollend, você tem um evento de fim de rolagem com o tempo perfeito que entende se um usuário ainda está no meio do gesto ou não.

Isso era importante para o navegador porque o JavaScript não pode rastrear a presença de um dedo na tela durante a rolagem. A informação simplesmente não está disponível. Partes de código de tentativa de final de rolagem impreciso agora podem ser excluídas e substituídas por um evento de alta precisão pertencente ao navegador.

Saiba mais sobre scrollend.

Animações com rolagem

As animações movidas por rolagem são um recurso interessante disponível no Chrome 115. Elas permitem que você pegue uma animação em CSS ou uma animação criada com a API Web Animations e a combine com o deslocamento de rolagem de um scroller. Conforme você rola para cima e para baixo ou para a esquerda e direita em um controle deslizante horizontal, a animação vinculada avança e retrocede em resposta direta.

Com uma ScrollTimeline, é possível acompanhar o progresso geral de um scroller, conforme demonstrado na demonstração a seguir. Conforme você rola até o fim da página, o texto aparece caractere por caractere.

Com uma ViewTimeline, é possível acompanhar um elemento à medida que ele cruza o scrollport. Isso funciona de forma semelhante à maneira como o IntersectionObserver rastreia um elemento. Na demonstração a seguir, cada imagem é revelada desde o momento em que entra no scrollport até chegar ao centro.

Como as animações de rolagem funcionam com animações CSS e a API Web Animations, você pode aproveitar todas as vantagens dessas APIs. Isso inclui a capacidade de executar essas animações fora da linha de execução principal. Agora você pode ter animações suaves, controladas por rolagem, na linha de execução principal com apenas algumas linhas de código extra. O que não gostar?

Para saber mais sobre animações com rolagem, confira este artigo com todos os detalhes ou acesse scroll-driven-animations.style, que inclui muitas demonstrações.

Anexo de cronograma adiado

Ao aplicar uma animação de rolagem pelo CSS, o mecanismo de pesquisa para encontrar o controle de rolagem sempre percorre a árvore do DOM, o que a limita apenas aos ancestrais de rolagem. No entanto, muitas vezes, o elemento que precisa ser animado não é filho do scroller, mas um elemento localizado em um subárvore totalmente diferente.

Para permitir que o elemento animado encontre uma linha do tempo de rolagem nomeada de um não ancestral, use a propriedade timeline-scope em um pai compartilhado. Isso permite que o scroll-timeline ou view-timeline definido com esse nome seja anexado a ele, a ele um escopo mais amplo. Com isso, qualquer filho desse pai compartilhado pode usar a linha do tempo com esse nome.

Saiba mais sobre timeline-scope.

Animações de propriedades discretas

Outro novo recurso em 2023 é a capacidade de animar animações discretas, como a animação de e para display: none. No Chrome 116 e versões mais recentes, é possível usar display e content-visibility nas regras de keyframe. Também é possível fazer a transição de qualquer propriedade discreta no ponto de 50% em vez de 0%. Isso é feito com a propriedade transition-behavior usando a palavra-chave allow-discrete ou na propriedade transition como uma abreviação.

Saiba mais sobre como fazer transições de animações discretas.

@starting-style

A regra CSS @starting-style usa novos recursos da Web para animar display: none e display: none. Essa regra oferece uma maneira de dar a um elemento um estilo "antes da abertura" que o navegador pode procurar antes que o elemento seja aberto na página. Isso é muito útil para animações de entrada e para animar elementos como um pop-up ou uma caixa de diálogo. Ele também pode ser útil sempre que você estiver criando um elemento e quiser dar a ele a capacidade de animar. Confira o exemplo a seguir, que anima um atributo popover (consulte a próxima seção) na visualização e na camada de cima de forma suave, fora da viewport.

Saiba mais sobre @starting-style e outras animações de entrada.

Overlay

A nova propriedade CSS overlay pode ser adicionada à transição para permitir que elementos com estilos de camada superior, como popover e dialog, sejam animados de forma suave. Se você não fizer a transição da sobreposição, o elemento vai voltar imediatamente a ser cortado, transformado e coberto, e você não vai notar a transição. Da mesma forma, overlay permite que ::backdrop seja animado sem problemas quando adicionado a um elemento da camada superior.

Saiba mais sobre sobreposições e outras animações de saída.

Popover

A API Popover ajuda a criar elementos que ficam sobre o restante da página. Isso pode incluir menus, seleção e dicas. É possível criar um pop-up simples adicionando o atributo popover e um id ao elemento que aparece e conectando o atributo id a um botão de invocação usando popovertarget="my-popover". A API Popover oferece suporte a:

• Promoção para a camada superior. Os pop-ups vão aparecer em uma camada separada acima do restante da página, para que você não precise mexer no z-index.
• Funcionalidade de dispensação leve. Clicar fora da área do pop-up fecha o pop-up e retorna o foco.
• Gerenciamento de foco padrão. Abrir o pop-up faz com que a próxima guia pare dentro dele.
• Vinculação de teclado acessível. Pressionar a tecla esc ou alternar duas vezes fecha o pop-up e retorna o foco.
• Vinculação de componentes acessível. Conexão semântica de um elemento de pop-up a um gatilho de pop-up.

Regras horizontais em seleção

Outra pequena mudança no HTML que chegou ao Chrome e ao Safari este ano é a capacidade de adicionar elementos de regra horizontal (tags <hr>) a elementos <select> para ajudar a dividir visualmente o conteúdo. Antes, colocar uma tag <hr> em um item de seleção simplesmente não renderizava. Mas, este ano, o Safari e o Chrome oferecem suporte a esse recurso, permitindo uma melhor separação do conteúdo nos elementos <select>.

Selecionar captura de tela

Selecione "Demonstração ao vivo"

Saiba mais sobre como usar a linha horizontal em opções.

:pseudoclasses válidas e inválidas do usuário

Estável em todos os navegadores este ano, o :user-valid e o :user-invalid se comportam de maneira semelhante às pseudoclasses :valid e :invalid, mas correspondem a um controle de formulário somente depois que um usuário interage significativamente com a entrada. Um controle de formulário obrigatório e vazio vai corresponder a :invalid, mesmo que o usuário não tenha começado a interagir com a página. O mesmo controle não vai corresponder a :user-invalid até que o usuário mude a entrada e a deixe em um estado inválido.

Com esses novos seletores, não é mais necessário escrever código com estado para acompanhar a entrada que um usuário mudou.

Saiba mais sobre o uso de pseudoelementos de validação de formulário user-*.

Accordion exclusivo

Um padrão de interface comum na Web é um componente de acordeão. Para implementar esse padrão, combine alguns elementos <details>, geralmente agrupando-os visualmente para indicar que eles pertencem ao mesmo grupo.

O Chrome 120 tem suporte ao atributo name em elementos <details>. Quando esse atributo é usado, vários elementos <details> com o mesmo valor name formam um grupo semântico. No máximo, um elemento do grupo pode estar aberto por vez. Quando você abre um dos elementos <details> do grupo, o elemento aberto anteriormente é fechado automaticamente. Esse tipo de acordeão é chamado de acordeão exclusivo.

Os elementos <details> que fazem parte de um acordeão exclusivo não precisam ser irmãos. Elas podem estar espalhadas pelo documento.