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 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 enésima-*

Com o seletor de pseudoclasse :nth-child(), é possível selecionar elementos no DOM pelo índice. Usando a microssintaxe An+B, você tem um bom controle sobre os elementos que quer selecionar.

Por padrão, os pseudos :nth-*() consideram todos os elementos filhos. A partir do Chrome 111, você tem a opção de 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, pré-filtrando-as com of .small. Use os menus suspensos para mudar dinamicamente o seletor usado.

Saiba mais sobre seleções nth-* complexas.

Escopo

O Chrome 118 adicionou suporte a @scope, uma regra que permite que você faça a correspondência do seletor de escopo com uma subárvore específica do documento. Com a estilização com escopo, você pode especificar com muita precisão quais elementos seleciona sem ter que criar seletores muito específicos ou associá-los à estrutura do DOM.

Uma 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 inseridas em um bloco de escopo segmentam apenas elementos da subárvore gerada. Por exemplo, a regra de estilo com escopo a seguir segmenta apenas os elementos <img> que estão entre o elemento .card e qualquer componente aninhado correspondente ao seletor [data-component].

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

Na demonstração a seguir, não há correspondência com os elementos <img> no componente carrossel 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 seus seletores". Neste artigo, você vai aprender sobre o seletor :scope, como a especificidade é tratada, escopos sem prelúdio e como a cascata é afetada por @scope.

Transição

Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente um do outro. Isso leva à repetição, folha de estilo em massa e uma experiência de criação esparsa. Agora, os seletores podem continuar 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 estilos de componentes. A sintaxe foi lançada inicialmente com uma limitação que exigia o uso de & em vários locais, mas foi removida com uma atualização de sintaxe relaxada de aninhamento.

Saiba mais sobre o aninhamento.

Subgrade

O CSS subgrid permite criar grades mais complexas com melhor alinhamento entre os layouts filhos. Ela permite que uma grade dentro de outra grade adote as linhas e colunas da grade externa como se fossem próprias, usando subgrid como um valor para as 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 uma cópia do projeto que "se encaixe" no layout. Com a subgrade, o layout pode ser ajustado de acordo com o conteúdo.

Saiba mais sobre a subgrid.

Letra inicial

Chegando no início do ano no Chrome 110, a propriedade initial-letter é um recurso de CSS pequeno, mas eficiente, que define o estilo da colocação das letras iniciais. Você pode posicionar letras em um estado caído ou em relevo. A propriedade aceita dois argumentos: o primeiro para o quanto a letra é solta no parágrafo correspondente e o segundo para o quanto ela deve levantar a letra acima dela. É possível até fazer uma combinação dos dois, como na demonstração a seguir.

Captura de tela com a letra inicial

Demonstração da letra 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 sabe todos os fatores, como tamanho da fonte, idioma e área alocada, ele é um ótimo candidato para lidar com layouts de texto avançados 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 são feitas à mão, e é incrível dar esse trabalho ao navegador e fazê-lo funcionar em qualquer idioma traduzido.

Saiba mais sobre ajuste de texto: saldo.

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

Do hardware ao software, do CSS até as luzes piscando pode ser necessário muito trabalho para nossos computadores tentarem representar cores tão boas quanto nossos olhos humanos conseguem enxergar. Em 2023, temos mais cores, novos espaços de cor, funções de cor e novos recursos.

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

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

função color-mix

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

Pense na color-mix() como um momento no tempo de um gradiente. Enquanto um gradiente mostra todas as etapas necessárias para mudar de azul para branco, color-mix() mostra apenas uma etapa. As coisas ficam avançadas quando você começa a levar em conta os espaços de cor e aprende como o espaço de cor de mistura pode ser diferente nos 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 misturar a cor branca para clarear uma cor, em que o RCS oferece acesso preciso ao canal de brilho e a capacidade de usar calc() no canal para reduzir ou aumentar o brilho 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 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, apenas em 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 globais de tamanho da janela de visualização para aplicar estilos CSS, as consultas de contêiner dão suporte à consulta de um elemento pai na página. Isso significa que os componentes podem ser estilizados de modo dinâmico em vários layouts e visualizações. As consultas de contêiner por tamanho se tornaram 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, assim como em uma consulta de mídia, use @container com os parâmetros de tamanho para aplicar os estilos. Junto com as consultas de contêiner, você recebe os tamanhos das consultas de contêiner. Na demonstração a seguir, o tamanho da consulta do contêiner cqi (que representa o tamanho do contêiner inline) é usado para dimensionar o cabeçalho do cartão.

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

Estilizar consultas de contêiner

Consultas de estilo chegaram com a implementação parcial no Chrome 111. Com as consultas de estilo atualmente, é 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 como 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 as 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 como usar consultas de estilo.

Seletor:has()

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

Captura de tela da demonstração :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. Com o uso de vários combinadores CSS, é possível não apenas subir na árvore do DOM, mas também fazer seleções laterais. Por exemplo, li:has(+ li:hover) selecionará o elemento <li> que precede o elemento <li> que está passando 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 em relação às capacidades 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. 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 suporta animações ou atualizações frequentes, significa que você pode economizar o uso da bateria ou atualizações de visualização com defeito.

Saiba mais sobre @media (update).

Consulta de mídia de script

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

Considere a troca de tema em um site. A consulta de mídia de script pode ajudar a fazer essa mudança funcionar de acordo com a preferência do sistema, já que nenhum JavaScript está disponível. Ou considere usar um componente de chave: se o JavaScript estiver disponível, a chave poderá ser deslizada com um gesto, em vez de apenas ativada e desativada. Há muitas oportunidades para atualizar a UX se o script estiver disponível e, ao mesmo tempo, fornecer uma experiência de base significativa se ele estiver desativado.

Saiba mais sobre script.

Consulta de mídia de transparência reduzida

Interfaces não opacas podem causar dor de cabeça ou ser uma dificuldade visual para vários tipos de deficiência visual. É por isso que o Windows, macOS e iOS têm preferências de 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, ao mesmo tempo, faça ajustes para os usuários.

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

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

Ver 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, 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 menores em uma página, como adicionar ou remover um novo item de uma lista.

No centro da API View Transitions está a função document.startViewTranstion. Transmita uma função que atualize o DOM para o novo estado, e a API cuidará de tudo para você. Para isso, ele cria um snapshot de antes e depois e faz a transição entre os dois. Usando 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 fornecidos no Chrome 111. Saiba mais sobre transições de visualização.

Função de easing linear

Não se engane 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 easing complexas de maneira simples, com o risco de perda de precisão.

Antes do linear(), que foi incluído no Chrome 113, era impossível criar efeitos de mola ou pulos no CSS. Graças a linear(), é possível aproximar esses easings simplificando-os 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 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 podia ser disparado enquanto o dedo do usuário ainda estava na tela. Com o evento scrollend, você tem um evento de fim de rolagem perfeitamente programado 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 consegue rastrear a presença de dedos na tela durante uma rolagem, e as informações simplesmente não estão disponíveis. Partes do código de tentativa de rolagem final impreciso agora podem ser excluídos e substituídos por um evento de alta precisão pertencente ao navegador.

Saiba mais sobre o scrollend.

Animações de rolagem

Animações de rolagem são um recurso interessante disponível no Chrome 115. Eles permitem combinar uma animação CSS ou criada com a API Web Animations ao deslocamento de rolagem de um botão. À medida que 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 deslizar para frente e para trás em resposta direta.

Com um ScrollTimeline, você pode acompanhar o progresso geral de um botão, conforme demonstrado na demonstração a seguir. Conforme você rola até o final da página, o texto se revela caractere por caractere.

Com uma ViewTimeline, você pode acompanhar um elemento enquanto ele cruza a janela de rolagem. Isso funciona de maneira semelhante à forma como o IntersectionObserver rastreia um elemento. Na demonstração a seguir, cada imagem é revelada do momento em que entra na janela de rolagem até chegar ao 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 dessas APIs. Isso inclui a capacidade de executar essas animações na linha de execução principal. Agora você pode ter animações suaves, impulsionadas por rolagem, sendo executadas fora da linha de execução principal com apenas algumas linhas de código extra. Por que você não gosta disso?

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

Anexo de cronograma adiado

Ao aplicar uma animação de rolagem usando CSS, o mecanismo de pesquisa para encontrar o botão de rolagem de controle sempre sobe na árvore do DOM, limitando-se apenas à rolagem de ancestrais. Muitas vezes, no entanto, 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 view-timeline definido com esse nome seja anexado a ele, aumentando o escopo. Com isso definido, qualquer filho desse pai compartilhado poderá usar a linha do tempo com esse nome.

Saiba mais sobre timeline-scope.

Animações de propriedades diferenciadas

Outro novo recurso lançado 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. Você também pode fazer a transição de qualquer propriedade discreta no ponto de 50% em vez de 0%. Isso pode ser feito 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.

@starting-style

A regra CSS @starting-style se baseia em novos recursos da Web para animações de e para display: none. Esta regra fornece uma maneira de dar a um elemento uma tag "antes de abrir" estilo que o navegador pode procurar antes que o elemento seja aberto na página. Isso é muito útil para animações de entrada e para elementos como pop-over ou caixas de diálogo. Também pode ser útil sempre que você estiver criando um elemento e quiser permitir a animação. Confira o exemplo a seguir, que anima um atributo popover (consulte a próxima seção) para a visualização 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 à transição para permitir que elementos com estilos da camada superior, como popover e dialog, saiam da camada superior suavemente. Se você não fizer a transição da sobreposição, o elemento voltará imediatamente a ser recortado, transformado e coberto, e a transição não acontecerá. Da mesma forma, overlay permite que o ::backdrop seja animado suavemente quando adicionado a um elemento da camada superior.

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

Pop-over (link em inglês)

A API Popover ajuda você a criar elementos sobrepostos ao resto da página. Podem incluir menus, seleção e dicas de ferramentas. É possível criar um pop-over 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 suporta:

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

Regras horizontais na 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>) em elementos <select> para ajudar a dividir visualmente seu conteúdo. Anteriormente, colocar uma tag <hr> em um select simplesmente não seria renderizado. Neste ano, o Safari e o Chrome serão compatíveis com esse recurso, permitindo uma melhor separação de conteúdo em elementos <select>.

Selecionar captura de tela

Selecionar "Demonstração ao vivo"

Saiba mais sobre como usar hr in select.

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

Estável em todos os navegadores este ano, :user-valid e :user-invalid se comportam de maneira semelhante às pseudoclasses :valid e :invalid, mas só correspondem a um controle de formulário depois que um usuário interagiu significativamente com a entrada. Um controle de formulário obrigatório e vazio corresponderá a :invalid mesmo que o 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ódigos com estado para acompanhar as entradas alteradas pelo usuário.

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

Acordeão exclusivo

Um padrão de interface comum na Web é um componente de acordeão. Para implementar esse padrão, você combina alguns elementos <details>, geralmente agrupando-os visualmente para indicar que pertencem juntos.

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

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