Funções trigonométricas

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

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

Seleção de n-* complexa

Com o seletor de pseudoclasse :nth-child(), é possível selecionar elementos no DOM pelo índice. Usando a microssintaxe An+B, você tem um controle preciso sobre quais elementos quer 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(). Dessa forma, é possível pré-filtrar a lista de filhos antes que An+B faça isso.

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

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

Escopo

O Chrome 118 adicionou suporte a @scope, uma regra que permite escolher um seletor de escopo para corresponder a uma subárvore específica do documento. Com o estilo com escopo, é possível ser bastante específico sobre quais elementos selecionar sem precisar escrever seletores muito específicos ou acoplar esses elementos à estrutura do DOM.

Uma subárvore com escopo é definida por uma raiz do 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 dentro de um bloco de escopo segmentarão apenas elementos dentro da subárvore criada. Por exemplo, a regra de estilo com escopo a seguir segmenta apenas elementos <img> que estão entre o elemento .card e qualquer componente aninhado que corresponda ao 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 correspondentes devido ao limite de escopo aplicado.

Captura de tela da demonstração do escopo

Demonstração ao vivo do escopo

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

Aninhamento

Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente. Isso leva à repetição, muitas folhas de estilo e a uma experiência de criação esparsa. Agora, os seletores podem continuar com as 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 estilos de componentes. A sintaxe foi lançada inicialmente com uma limitação que exigia o uso de & em vários lugares, mas foi levantada com uma atualização de sintaxe flexível de aninhamento.

Saiba mais sobre o aninhamento.

Subgrade

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

A subgrade é especialmente útil para alinhar irmãos ao conteúdo dinâmico uns dos outros. Isso evita que redatores, escritores de UX e tradutores tentem criar um texto do projeto que "se encaixe" no layout. Com a subgrade, o layout pode ser ajustado para corresponder ao conteúdo.

Saiba mais sobre a subgrade.

Letra inicial

No início do ano no Chrome 110, a propriedade initial-letter é um recurso de CSS pequeno, mas eficiente, que define o estilo para o posicionamento das letras iniciais. Você pode posicionar as letras no estado solto ou elevado. A propriedade aceita dois argumentos: o primeiro para definir a profundidade da inserção da letra no parágrafo correspondente e o segundo de quanto colocar a letra acima dela. Você pode até fazer uma combinação de ambos, como na demonstração a seguir.

Captura de tela da letra inicial

Demonstração inicial

Saiba mais sobre a letra inicial.

text-wrap: equilíbrio e beleza

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

É aqui que entram duas novas técnicas de ajuste de texto, uma chamada balance e outra pretty. O valor balance busca criar um bloco de texto harmonioso, enquanto pretty busca evitar órfãos e garantir uma hifenização saudável. Tradicionalmente, essas duas tarefas eram feitas à mão, e é incrível dar o trabalho ao navegador e fazê-lo funcionar em qualquer idioma traduzido.

Saiba mais sobre o text-wrap: saldo.

Espaços de cor em alta definição (nível de cor 4)

Do hardware ao software, do CSS às luzes piscantes; nossos computadores podem levar muito trabalho para tentar representar cores da mesma forma que os olhos humanos conseguem enxergar. Em 2023, vamos lançar novas cores, mais cores, novos espaços de cor, funções de cor e novos recursos.

Agora o CSS e as cores podem: - Verifique se o hardware de tela do usuário é compatível com uma ampla gama de cores HDR. - Verifique se o navegador do usuário entende sintaxe de cores, como Oklch ou Display P3. - Especifique cores HDR no Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, entre outros. - Criar gradientes com cores HDR, - Interpolar gradientes em espaços de cores alternativos. - Misture cores com o color-mix(). - Crie variantes de cor com sintaxe de cor relativa.

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

função de mistura de cores

Misturar cores é uma tarefa clássica e, em 2023, o CSS também pode fazer isso. Você pode não apenas misturar branco ou preto a uma cor, mas também transparência, e fazer tudo isso em qualquer espaço de cor de sua escolha. Ele é simultaneamente um recurso de cor básico e um avançado.

Pense no color-mix() como um momento no tempo de um gradiente. Quando um gradiente mostra todas as etapas necessárias para passar de azul para branco, color-mix() mostra apenas uma etapa. As coisas ficam mais avançadas quando você começa a levar os espaços de cores em consideração e aprende a diferença entre o espaço de cores de mistura e 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 à color-mix() para criar variantes de cor. É um pouco mais eficiente do que color-mix(), mas também é uma estratégia diferente para trabalhar com cores. O color-mix() pode ser misturado na cor branca para clarear uma cor, em que o RCS fornece acesso preciso ao canal de luminosidade e a capacidade de usar calc() no canal para reduzir ou aumentar o brilho de maneira programática.

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

Saiba mais sobre a sintaxe de cores relativas.

Dimensionar consultas de contêiner

Em vez de usar as informações de tamanho global da janela de visualização para aplicar estilos CSS, as consultas de contêiner suportam a consulta de um elemento pai na página. Isso significa que os componentes podem ser estilizados de maneira dinâmica em vários layouts e visualizações. As consultas de contêiner sobre 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, de maneira 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ê recebe tamanhos de consulta de contêiner. Na demonstração a seguir, o tamanho da consulta do contêiner cqi (que representa o tamanho do contêiner in-line) é usado para dimensionar o cabeçalho do card.

Saiba mais sobre como usar as consultas de contêiner.

Estilizar consultas de contêiner

As consultas de estilo chegaram com implementação parcial no Chrome 111. Com as consultas de estilo, é possível consultar o valor das propriedades personalizadas em um elemento pai usando @container style(). Por exemplo, consulte se existe um valor de propriedade personalizada ou se está definido com 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 classes no CSS, as consultas de estilo têm algumas vantagens. A primeira é que, com consultas de estilo, é possível atualizar o valor no CSS conforme necessário para pseudoestados. Além disso, em versões futuras da implementação, você poderá consultar intervalos de valores para determinar o estilo aplicado, como style(60 <= --weather <= 70), e o estilo com base em pares de propriedade-valor, 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(), que acompanha o Chrome 105, isso agora é possível. Por exemplo, usar .card:has(img.hero) vai selecionar os elementos .card que têm uma imagem principal como filha.

Captura de tela de 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 combinadores CSS, é possível não apenas acessar a árvore DOM, mas também fazer seleções laterais. Por exemplo, li:has(+ li:hover) selecionará o elemento <li> que antecede o elemento <li> que está sendo passar o cursor no momento.

Saiba mais sobre o seletor :has() de 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 está relacionado aos recursos de diferentes dispositivos.

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

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

Consulta de mídia com script

A consulta de mídia de script pode ser usada para verificar se o JavaScript está disponível. Isso é muito bom para 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 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 teste com o Chrome DevTools.

Considere mudar o tema de um site. A consulta de mídia de script pode ajudar a fazer com que o interruptor funcione na preferência do sistema, já que não há JavaScript disponível. Ou considere usar um componente de alternância. Se o JavaScript estiver disponível, será possível deslizar a chave com um gesto em vez de apenas ativar e desativar. Muitas oportunidades de fazer upgrade da UX se o script está disponível, além de fornecer uma experiência básica significativa se o script estiver desativado.

Saiba mais sobre script.

Consulta de mídia com transparência reduzida

Interfaces não opacas podem causar dores de cabeça ou ser um problema visual para vários tipos de deficiências visuais. É por isso que Windows, macOS e iOS têm preferências do sistema que podem reduzir ou remover a transparência da interface. Esta 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 enquanto também se ajusta aos usuários.

Em alguns casos, você pode 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 a seguir do blog tem demonstrações mais inspiradoras que se adaptam às preferências do usuário. Confira se quiser saber quando essa consulta de mídia é importante.

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

Transições de visualização

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, você pode criar transições visuais entre dois estados de página do seu aplicativo de página única. Essas transições podem ser de página inteira ou itens menores, como adicionar ou remover um novo item de uma lista.

A função document.startViewTranstion está no centro da API View Transitions. Transmita uma função que atualiza o DOM para o novo estado, e a API cuida de tudo para você. Para isso, ele faz um snapshot de antes e depois e faz a transição entre os dois. Com CSS, você pode controlar o que é capturado e, opcionalmente, personalizar como esses instantâneos devem ser animados.

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

Função de easing linear

Não deixe que o nome dessa função engane você. A função linear() (que não deve ser confundida com a palavra-chave linear) permite criar funções de easing complexo de maneira simples, comprometendo a precisão.

Antes do linear(), lançado no Chrome 113, era impossível criar efeitos de rejeições ou mola no CSS. Graças a linear(), é possível aproximar esses easings simplificando-os para 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 easing 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 poderia ser disparado enquanto o dedo do usuário ainda estivesse na tela. Com o evento scrollend, você tem um evento scrollend cronometrado 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 podia rastrear a presença de dedos na tela durante uma rolagem, e as informações simplesmente não estavam disponíveis. Pedaços de código incorreto de tentativa de rolagem e final agora podem ser excluídos e substituídos por um evento de alta precisão pertencente ao navegador.

Saiba mais sobre scrollend.

Animações de rolagem

Animações de rolagem são um recurso incrível disponível no Chrome 115. Isso permite que você use uma animação CSS ou uma animação criada com a API Web Animations (link em inglês) e a junte ao deslocamento de rolagem de um botão de rolagem. Conforme você rola para cima e para baixo (ou para a esquerda e para a direita em um botão de rolagem horizontal), a animação vinculada vai para frente e para trás em resposta direta.

Com um ScrollTimeline, você pode monitorar o progresso geral de um botão, como demonstrado na demonstração a seguir. À medida que você rola até o fim da página, o texto se revela caractere por caractere.

Com um ViewTimeline, é possível rastrear um elemento conforme ele cruza a janela de rolagem. Isso funciona de forma semelhante à maneira que o IntersectionObserver rastreia um elemento. Na demonstração a seguir, cada imagem se revela do momento em que entra na janela de rolagem até o centro.

Como as animações de rolagem funcionam com animações CSS e a API Web Animations, você pode se beneficiar de todas as vantagens que essas APIs trazem. Isso inclui a capacidade de executar essas animações fora da linha de execução principal. Agora você pode ter animações suaves, impulsionadas pela rolagem, executadas fora da linha de execução principal com apenas algumas linhas de código extra. Como não gosta?

Para saber mais sobre animações de 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 por CSS, o mecanismo de pesquisa para encontrar o botão de rolagem de controle sempre percorre a árvore do DOM, limitando-a apenas à rolagem de ancestrais. No entanto, muitas vezes o elemento que precisa ser animado não é um filho do botão de rolagem, mas um elemento localizado em uma subárvore completamente 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 o view-timeline definido com esse nome sejam anexados a ele, conferindo um escopo mais amplo. Assim, qualquer filho desse pai compartilhado poderá usar a linha do tempo com esse nome.

Saiba mais sobre timeline-scope.

Animações de propriedade discretas

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

Saiba mais sobre a transição de animações discretas.

@estilo inicial

A regra CSS @starting-style se baseia em novos recursos da Web para animação de e para display: none. Essa regra fornece uma maneira de atribuir a um elemento um estilo "antes de abrir" que o navegador possa consultar antes de abrir o elemento 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 que ele seja animado. Veja o exemplo a seguir, que anima um atributo popover (confira a próxima seção) para que ele seja visto e para a camada superior suavemente de fora da janela de visualização.

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

Sobreposição

A nova propriedade CSS overlay pode ser adicionada à sua transição para permitir que elementos com estilos de camada superior, como popover e dialog, sejam animados fora da camada superior de forma suave. Se você não fizer a transição de sobreposição, seu elemento voltará imediatamente a ser recortado, transformado e coberto e você não verá a transição acontecer. Da mesma forma, overlay permite que ::backdrop seja animada suavemente quando adicionada a um elemento da camada superior.

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

Popover (link em inglês)

A API Popover ajuda você a criar elementos que se sobrepõem ao restante da página. Eles podem incluir menus, seleção e dicas. Você pode 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 para:

• Promoção para a camada superior. Os popovers aparecerão em uma camada separada acima do resto da página, para que você não precise brincar com o Z-index.
• Funcionalidade de dispensar a luz. Clicar fora da área de pop-up fecha o pop-up e retorna o foco.
• Gerenciamento de foco padrão. Abrir o pop-up faz a próxima guia parar dentro do pop-up.
• Vinculações de teclado acessíveis. Pressionar a tecla esc ou alternar duas vezes vai fechar o pop-up e retornar o foco.
• Vinculações de componentes acessíveis. Conectar um elemento de pop-up a um acionador de pop-up semanticamente.

Regras horizontais em select

Outra pequena mudança no HTML que foi lançada no Chrome e no Safari este ano é a capacidade de adicionar elementos de regra horizontal (tags <hr>) a elementos <select> para ajudar a dividir visualmente seu conteúdo. Antes, colocar uma tag <hr> em um select simplesmente não era renderizado. No entanto, este ano, o Safari e o Chrome oferecem suporte a esse recurso, permitindo uma melhor separação de conteúdo nos elementos <select>.

Selecione "Captura de tela"

Selecionar demonstração ao vivo

Saiba mais sobre como usar "hr" em select

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

Estáveis em todos os navegadores neste ano, :user-valid e :user-invalid se comportam de maneira semelhante às pseudoclasses :valid e :invalid, mas correspondem a um controle de formulário somente depois que o usuário interage significativamente com a entrada. Um controle de formulário obrigatório e vazio vai corresponder a :invalid mesmo que um usuário não tenha começado a interagir com a página. O mesmo controle não 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 as entradas modificadas por um usuário.

Saiba mais sobre como usar pseudoelementos de validação de formulário do usuário*.

Acordeão exclusivo

Um padrão de IU comum na Web é um componente acordeão. Para implementar esse padrão, é necessário combinar alguns elementos <details>, geralmente agrupando visualmente para indicar que estão juntos.

Uma novidade do Chrome 120 é o suporte para o atributo name nos elementos <details>. Quando esse atributo é usado, vários elementos <details> que têm o mesmo valor name formam um grupo semântico. No máximo, um elemento do grupo pode ser aberto por vez: quando você abrir um dos elementos <details> do grupo, o que estava aberto antes será fechado automaticamente. Este tipo de acordeão é chamado de acordeão exclusivo.

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