Os últimos meses deram início à era de ouro da interface da Web. Os novos recursos de plataforma pousaram em uma forte adoção entre navegadores, que suportam mais recursos da web e recursos de personalização do que nunca.
Confira 20 dos recursos mais incríveis e impactantes que chegaram recentemente ou vão ser lançados em breve:
- Consultas de contêiner
- Estilizar consultas
- Seletor
:has() - enésima da microssintaxe
text-wrap: balanceinitial-letter- Unidades dinâmicas da janela de visualização
- Espaços de cor com ampla gama
color-mix()- Aninhamento
- Camadas em cascata
- Estilos com escopo
- Funções trigonométricas
- Propriedades de transformação individuais
- popover (link em inglês)
- posicionamento da âncora
- menu de seleção
- Transições de propriedade discretas
- Animações de rolagem
- Transições de visualização
O novo anúncio responsivo
Vamos começar com alguns novos recursos de design responsivo. Os novos recursos da plataforma permitem criar interfaces lógicas com componentes que incluem as informações de estilo responsivo, criar interfaces que aproveitam os recursos do sistema para oferecer IUs com aparência mais nativa e permitir que o usuário faça parte do processo de design com consultas de preferência do usuário para uma personalização completa.
Consultas de contêiner
As consultas de contêiner ficaram estáveis em todos os navegadores mais recentes. Eles permitem que você consulte o tamanho e o estilo de um elemento pai para determinar os estilos que devem ser aplicados a qualquer um dos filhos. As consultas de mídia só podem acessar e aproveitar informações da janela de visualização. Isso significa que elas só podem funcionar em uma visualização macro de um layout de página. As consultas de contêiner, por outro lado, são uma ferramenta mais precisa que pode oferecer suporte a qualquer número de layouts dentro de layouts.
No exemplo a seguir, a Caixa de entrada principal e a barra lateral Favoritos são contêineres. Os e-mails dentro deles ajustam o layout de grade e mostram ou ocultam o carimbo de data/hora do e-mail com base no espaço disponível. Esse é exatamente o mesmo componente na página, apenas aparecendo em visualizações diferentes
Como temos uma consulta de contêiner, os estilos desses componentes são dinâmicos. Se você ajustar o tamanho e o layout da página, os componentes responderão ao espaço alocado individualmente. A barra lateral se torna uma barra superior com mais espaço, e o layout se parece mais com a caixa de entrada principal. Quando há menos espaço, os dois são exibidos em um formato condensado.
Saiba mais sobre consultas de contêiner e criação de componentes lógicos nesta postagem.
Estilo de consultas
A especificação de consulta do contêiner também permite que você consulte os valores de estilo de um contêiner pai. No momento, isso está parcialmente implementado no Chrome 111, em que é possível usar propriedades personalizadas de CSS para aplicar estilos de contêiner.
O exemplo a seguir usa características climáticas armazenadas nos valores de propriedades personalizadas, como chuva, ensolarado e nublado, para estilizar o plano de fundo e o ícone indicador do cartão.
@container style(--sunny: true) {
.weather-card {
background: linear-gradient(-30deg, yellow, orange);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: gold;
}
}
Esse é apenas o começo para as consultas de estilo. No futuro, teremos consultas booleanas para determinar se existe um valor de propriedade personalizada e reduzir a repetição de código. No momento, estão em discussão as consultas de intervalo para a aplicação de estilos com base em um intervalo de valores. Isso permitiria aplicar os estilos mostrados aqui usando um valor percentual para a chance de chuva ou nuvens.
Saiba mais e confira mais demonstrações na nossa postagem do blog sobre consultas de estilo.
:has()
Quando se trata de recursos dinâmicos e avançados, o seletor :has() é um dos novos recursos de CSS mais eficientes usados nos navegadores mais recentes. Com :has(), é possível aplicar estilos verificando se um elemento pai contém a presença de filhos específicos ou se esses filhos estão em um estado específico. Isso significa que agora temos um seletor pai.
Com base no exemplo de consulta do contêiner, é possível usar :has() para tornar os componentes ainda mais dinâmicos. Nele, um item com um elemento de "estrela" recebe um fundo cinza aplicado a ele e um item com uma caixa de seleção marcada tem um fundo azul.
Mas essa API não se limita à seleção dos pais. Também é possível definir o estilo dos filhos dentro do pai. Por exemplo, o título está em negrito quando o item tem o elemento estrela. Isso é feito com .item:has(.star) .title. O uso do seletor :has() dá acesso aos elementos pais, filhos e até irmãos. Isso torna essa API muito flexível, com novos casos de uso aparecendo todos os dias.
Para saber mais e explorar mais algumas demonstrações, confira esta postagem do blog sobre o :has().
enésima sintaxe
Compatibilidade com navegadores
- 111
- 111
- 113
- 9
A plataforma da Web agora tem uma seleção de enésimo filho mais avançada. A sintaxe avançada de enésimo filho fornece uma nova palavra-chave ("de"), que permite que você use a sintaxe micro existente de An+B, com um subconjunto mais específico no qual pesquisar.
Se você usar o nth-child regular, como :nth-child(2) na classe especial, o navegador vai selecionar o elemento que tiver a classe especial aplicada, e também será o segundo filho. Isso é diferente em :nth-child(2 of .special), que primeiro pré-filtra todos os elementos .special e, em seguida, escolhe o segundo elemento da lista.
Explore esse recurso mais a fundo em nosso artigo sobre sintaxe de enésima.
text-wrap: balance
Seletores e consultas de estilo não são os únicos lugares em que podemos incorporar a lógica aos nossos estilos. A tipografia é outro recurso. A partir do Chrome 114, é possível usar o balanceamento de quebra de texto para títulos com a propriedade text-wrap com o valor balance.
Para equilibrar o texto, o navegador realiza efetivamente uma pesquisa binária para a menor largura, sem gerar linhas adicionais, parando em um pixel CSS (não o pixel de exibição). Para minimizar ainda mais as etapas na pesquisa binária, o navegador começa com 80% da largura média da linha.
Saiba mais sobre isso neste artigo.
initial-letter
Outra melhoria interessante para a tipografia da Web é o initial-letter. Essa propriedade de CSS oferece melhor controle sobre o estilo do limite de soltar encarte.
Use initial-letter no pseudoelemento :first-letter para especificar:
o tamanho da letra com base em quantas linhas ela ocupa.
O deslocamento de bloco, ou “coletor”, referente ao local da letra.
Saiba mais sobre como usar o intial-letter aqui.
Unidades dinâmicas da janela de visualização
Compatibilidade com navegadores
- 108
- 108
- 101
- 15,4
Um problema comum que os desenvolvedores da Web enfrentam hoje é o dimensionamento preciso e consistente da janela de visualização completa, especialmente em dispositivos móveis. Como desenvolvedor, você quer que 100vh (100% da altura da janela de visualização) signifique "ser tão alto quanto a janela de visualização", mas a unidade vh não considera ações como o recolhimento das barras de navegação em dispositivos móveis, por isso, às vezes, o gráfico fica muito longo e resulta em rolagem.
Para resolver esse problema, agora temos novos valores de unidade na plataforma da Web, incluindo:
- Altura e largura pequenas da janela de visualização (ou svh e svw), que representam o menor tamanho ativo da janela de visualização.
- altura e largura grandes da janela de visualização (lvh e lvw), que representam o maior tamanho.
: altura e largura dinâmicas da janela de visualização (dvh e dvw).
As unidades dinâmicas da janela de visualização mudam de valor quando as barras de ferramentas adicionais do navegador dinâmico (como o endereço na parte superior ou a barra de guias na parte inferior) ficam visíveis ou não.
Para mais informações sobre essas novas unidades, leia As unidades da janela de visualização grandes, pequenas e dinâmicas.
Espaços de cores com ampla gama
Outra novidade importante da plataforma da Web são os espaços de cores com uma ampla gama de cores. Antes que a ampla gama de cores ficasse disponível na plataforma da Web, era possível tirar uma fotografia com cores vívidas, visualizável em dispositivos modernos, mas não havia botão, cor de texto ou plano de fundo que correspondesse a esses valores vívidos.
Faça um teste
Mas agora temos uma variedade de novos espaços de cor na plataforma da Web, incluindo REC2020, P3, XYZ, LAB, OKLAB, LCH e OKLCH. Conheça os novos espaços de cores da Web e muito mais no Guia de cores em HD.
É possível ver imediatamente no DevTools como o intervalo de cores se expandiu, com a linha branca delineando onde o intervalo srgb termina e onde começa o intervalo de cores de gama mais ampla.
Há muito mais ferramentas disponíveis para cores. Não perca também todas as incríveis melhorias dos gradientes. Adam Argyle, uma ferramenta nova, foi criada para ajudar você a testar o novo seletor de cores da Web e o criador de gradientes, disponível em gradient.style.
Função color-mix()
A expansão dos espaços de cor expandidos é a função color-mix(). Esta função suporta a mistura de dois valores de cor para criar novos valores com base nos canais das cores que estão se misturando. O espaço de cores no qual você mistura afeta os resultados. Trabalhar em um espaço de cores mais perceptível, como oklch, vai passar por um intervalo de cores diferente de algo como srgb.
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
A função color-mix() oferece um recurso solicitado há muito tempo: a capacidade de preservar valores de cor opaca e adicionar transparência a eles. Agora, você pode usar as variáveis de cor da sua marca ao criar variações dessas cores em diferentes opacidades. A maneira de fazer isso é misturar uma cor com transparente. Quando você mistura a cor azul com 10% transparente, obtém uma cor da marca 90% opaca. Você pode ver como isso permite criar sistemas de cores rapidamente.
Veja como isso funciona no Chrome DevTools hoje com uma prévia do ícone do diagrama de Venn no painel de estilos.
Veja mais exemplos e detalhes em nossa postagem do blog sobre mistura de cores ou experimente este playground de color-mix().
Fundamentos do CSS
A criação de novos recursos com ganhos claros para os usuários é uma parte da equação, mas muitos dos recursos que chegam ao Chrome têm o objetivo de melhorar a experiência do desenvolvedor e criar uma arquitetura de CSS mais confiável e organizada. Esses recursos incluem aninhamento de CSS, camadas em cascata, estilos com escopo, funções trigonométricas e propriedades de transformação individuais.
Aninhamento
O aninhamento de CSS, algo que as pessoas adoram do Sass e uma das principais solicitações de desenvolvedores de CSS há anos, finalmente chegou à plataforma da Web. O aninhamento permite que os desenvolvedores gravem em um formato mais sucinto e agrupado, o que reduz a redundância.
.card {}
.card:hover {}
/* can be done with nesting like */
.card {
&:hover {
}
}
Você também pode aninhar Consultas de mídia, o que significa que você também pode aninhar Consultas de contêiner. No exemplo a seguir, um card muda de um layout de retrato para um de paisagem se tiver largura suficiente no contêiner:
.card {
display: grid;
gap: 1rem;
@container (width >= 480px) {
display: flex;
}
}
O ajuste de layout para flex ocorre quando o contêiner tem mais (ou igual a) 480px de espaço inline disponível. O navegador aplicará o novo estilo de exibição quando as condições forem atendidas.
Para mais informações e exemplos, confira nossa postagem sobre aninhamento de CSS.
Propagar camadas
Outro ponto problemático para os desenvolvedores que identificamos é garantir a consistência em que os estilos prevalecem sobre os outros, e uma parte da resolução disso é ter melhor controle sobre a cascata do CSS.
As camadas em cascata resolvem isso ao dar aos usuários controle sobre quais camadas têm maior precedência que outras, o que significa um controle mais ajustado de quando os estilos são aplicados.
Saiba mais sobre como usar camadas em cascata neste artigo.
CSS com escopo
Compatibilidade com navegadores
- 118
- 118
- x
- 17,4
Os estilos com escopo de CSS permitem que os desenvolvedores especifiquem os limites aos quais estilos específicos se aplicam, basicamente criando um namespace nativo no CSS. Antes, os desenvolvedores usavam scripts de terceiros para renomear classes ou convenções de nomenclatura específicas para evitar a colisão de estilos, mas logo será possível usar @scope.
Aqui, estamos definindo o escopo de um elemento .title para um .card. Isso evita que esse elemento de título entre em conflito com outros elementos .title na página, como o título de uma postagem de blog ou outro cabeçalho.
@scope (.card) {
.title {
font-weight: bold;
}
}
Confira @scope com limites de escopo com @layer nesta demonstração ao vivo:
Saiba mais sobre @scope na especificação css-cascade-6.
Funções trigonométricas
Outra parte da nova estrutura do CSS são as funções trigonométricas que estão sendo adicionadas às funções matemáticas atuais do CSS. Essas funções agora são estáveis em todos os navegadores modernos e permitem que você crie mais layouts orgânicos na plataforma da Web. Um ótimo exemplo é esse layout de menu radial, que agora pode ser projetado e animado usando as funções sin() e cos().
Na demonstração abaixo, os pontos giram em torno de um ponto central. Em vez de girar cada ponto em torno de seu próprio centro e depois movê-lo para fora, cada ponto é transladado nos eixos X e Y. As distâncias nos eixos X e Y são determinadas considerando o cos() e, respectivamente, o sin() do --angle.
Consulte nosso artigo sobre funções trigonométricas para informações mais detalhadas sobre esse tópico.
Propriedades de transformação individual
A ergonomia do desenvolvedor continua a melhorar com funções de transformação individuais. Desde a última vez que fizemos E/S, as transformações individuais ficaram estáveis em todos os navegadores modernos.
Antes, você dependia da função de transformação para aplicar subfunções a fim de dimensionar, girar e traduzir um elemento da interface. Isso exigia muita repetição e era especialmente frustrante ao aplicar várias transformações em momentos diferentes na animação.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}
Agora, você pode ter todos esses detalhes nas animações CSS separando os tipos de transformações e aplicando-os individualmente.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.target:hover {
scale: 2;
}
Com isso, mudanças de translação, rotação ou escala podem acontecer simultaneamente em diferentes taxas de mudança em momentos distintos durante a animação.
Veja esta postagem sobre funções de transformação individuais para mais informações.
Componentes personalizáveis
Para atender a algumas das principais necessidades dos desenvolvedores na plataforma da Web, estamos trabalhando com o grupo da comunidade OpenUI e identificamos três soluções para começar:
- Funcionalidade pop-up integrada com manipuladores de eventos, uma estrutura DOM declarativa e padrões acessíveis.
- Uma API CSS para vincular dois elementos entre si e permitir o posicionamento de âncoras.
- Um componente de menu suspenso personalizável para quando você quiser estilizar o conteúdo dentro de uma seleção.
Pop-up
A API popover dá aos elementos uma mágica integrada ao suporte ao navegador, como:
- Suporte à camada superior, para que você não precise gerenciar
z-index. Quando você abre um pop-over ou uma caixa de diálogo, esse elemento é promovido a uma camada especial na parte superior da página. - O comportamento de dispensa de luz é sem custo financeiro em pop-ups do
auto. Assim, quando você clica fora de um elemento, o pop-up é dispensado, removido da árvore de acessibilidade e o foco é gerenciado corretamente. - Acessibilidade padrão para o tecido conjuntivo do alvo do popover e o próprio popover.
Tudo isso significa que menos JavaScript precisa ser escrito para criar toda essa funcionalidade e rastrear todos os estados.
A estrutura DOM para popover é declarativa e pode ser escrita de forma tão clara quanto atribuir um id ao elemento popover e o atributo popover. Em seguida, sincronize esse ID com o elemento que abriria o pop-up, como um botão com o atributo popovertarget:
<div id="event-popup" popover>
<!-- Popover content goes in here -–>
</div>
<button popovertarget="event-popup">Create New Event</button>
popover é uma abreviação de popover=auto. Um elemento com popover=auto força o fechamento de outros pop-ups quando aberto, recebe foco quando aberto e pode dispensar a luz. Por outro lado, os elementos popover=manual não forçam o fechamento de nenhum outro tipo de elemento, não recebem foco imediatamente e não dispensam luzes. Eles são fechados com um botão de alternância ou outra ação de fechamento.
A documentação mais atualizada sobre pop-ups está disponível no MDN.
Posicionamento de âncoras
Os popovers também são frequentemente usados em elementos como caixas de diálogo e dicas, que geralmente precisam ser ancorados a elementos específicos. Confira este exemplo de evento. Quando você clica em um evento da agenda, uma caixa de diálogo aparece perto do evento em que você clicou. O item da agenda é a âncora, e o pop-up é a caixa de diálogo que mostra os detalhes do evento.
É possível criar uma dica centralizada com a função anchor(), usando a largura da âncora para posicioná-la em 50% da posição x da âncora. Em seguida, use os valores de posicionamento existentes para aplicar o restante dos estilos de posição.
Mas o que acontece se o pop-up não couber na janela de visualização devido à forma como ele foi posicionado?
Para resolver isso, a API de posicionamento de âncoras inclui posições substitutas que podem ser personalizadas. O exemplo a seguir cria uma posição substituta chamada "top-then-bottom". O navegador tentará primeiro posicionar a dica na parte superior. Se ela não couber na janela de visualização, o navegador a posicionará sob o elemento de ancoragem, na parte inferior.
.center-tooltip {
position-fallback: --top-then-bottom;
translate: -50% 0;
}
@position-fallback --top-then-bottom {
@try {
bottom: calc(anchor(top) + 0.5rem);
left: anchor(center);
}
@try {
top: calc(anchor(bottom) + 0.5rem);
left: anchor(center);
}
}
Saiba mais sobre o posicionamento de âncoras nesta postagem do blog.
<selectmenu>
Com as posições pop-over e de âncora, você pode criar menus de seleção totalmente personalizáveis. O grupo da comunidade do OpenUI está investigando a estrutura fundamental desses menus e procurando maneiras de permitir a personalização de qualquer conteúdo neles. Confira estes exemplos visuais:
Para criar o exemplo de selectmenu no canto esquerdo, com pontos coloridos correspondentes à cor que seria mostrada em um evento da agenda, escreva-o da seguinte maneira:
<selectmenu>
<button slot="button" behavior="button">
<span>Select event type</span>
<span behavior="selected-value" slot="selected-value"></span>
<span><img src="icon.svg"/></span>
</button>
<option value="meeting">
<figure class="royalblue"></figure>
<p>Meeting</p>
</option>
<option value="break">
<figure class="gold"></figure>
<p>Lunch/Break</p>
</option>
...
</selectmenu>
Transições de propriedades discretas
Para que tudo isso faça a transição dos pop-ups para dentro e para fora suavemente, a web precisa de alguma forma de animar as propriedades discretas. Essas são propriedades que normalmente não eram animadas no passado, como animações de/para a camada superior e a animação de/para display: none.
Como parte do trabalho para permitir transições bonitas para popovers, menus selecionados e até mesmo elementos já existentes, como caixas de diálogo ou componentes personalizados, os navegadores estão permitindo novos encanamentos para dar suporte a essas animações.
A demonstração de pop-up a seguir anima os pop-ups que entram e saem usando :popover-open para o estado aberto, @starting-style para o estado antes-aberto e aplica um valor de transformação diretamente ao elemento para o estado após a abertura/fechamento. Para que tudo isso funcione com a tela, é necessário adicionar a propriedade transition da seguinte forma:
.settings-popover {
&:popover-open {
/* 0. before-change */
@starting-style {
transform: translateY(20px);
opacity: 0;
}
/* 1. open (changed) state */
transform: translateY(0);
opacity: 1;
}
/* 2. After-change state */
transform: translateY(-50px);
opacity: 0;
/* enumarate transitioning properties, including display */
transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}
Interações
Isso nos leva às interações, a última parada deste tour pelos recursos da interface da Web.
Já falamos sobre a animação de propriedades discretas, mas também há algumas APIs muito interessantes no Chrome para animações de rolagem e transições de visualização.
Animações de rolagem
Animações de rolagem permitem que você controle a reprodução de uma animação com base na posição de rolagem de um contêiner de rolagem. Isso significa que, conforme você rola para cima ou para baixo, a animação vai para frente ou para trás. Além disso, com as animações de rolagem, você também pode controlar uma animação de acordo com a posição de um elemento dentro do seu contêiner de rolagem. Assim, você cria efeitos interessantes, como uma imagem de fundo com efeito paralaxe, barras de rolagem de progresso e imagens que se revelam à medida que aparecem.
Essa API oferece suporte a um conjunto de classes JavaScript e propriedades CSS que permitem criar facilmente animações declarativas de rolagem.
Para conduzir uma animação CSS por rolagem, use as novas propriedades scroll-timeline, view-timeline e animation-timeline.
Para gerar uma API JavaScript Web Animations, transmita uma instância ScrollTimeline ou ViewTimeline como a opção timeline para Element.animate().
Essas novas APIs trabalham em conjunto com animações já existentes da Web e APIs de animações com CSS, o que significa que elas se beneficiam das vantagens dessas APIs. Isso inclui a capacidade de executar essas animações fora da linha de execução principal. Sim, leia corretamente: agora você pode ter animações suaves, impulsionadas pela rolagem e executadas na linha de execução principal, com apenas algumas linhas de código extra. Do que você não gosta?
Para acessar um guia detalhado sobre a criação dessas animações de rolagem, consulte este artigo sobre animações de rolagem.
Ver transições
A API View Transition facilita a mudança do DOM em uma única etapa, criando uma transição animada entre os dois estados. Eles podem ser esmaecimentos simples entre visualizações, mas você também pode controlar como partes individuais da página devem fazer a transição.
As transições de visualizações podem ser usadas como um aprimoramento progressivo: coloque o código que atualiza o DOM por qualquer método e o envolva na API de transição de visualizações com um substituto para navegadores que não são compatíveis com o recurso.
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data));
}
A aparência da transição é controlada pelo CSS
@keyframes slide-from-right {
from { opacity: 0; transform: translateX(75px); }
}
@keyframes slide-to-left {
to { opacity: 0; transform: translateX(-75px); }
}
::view-transition-old(root) {
animation: 350ms both slide-to-left ease;
}
::view-transition-new(root) {
animation: 350ms both slide-from-right ease;
}
Como demonstrado nesta demonstração maravilhosa de Maxi Ferreira, outras interações de página, como a reprodução de um vídeo, continuam funcionando enquanto uma transição de visualização acontece.
No momento, as transições de visualização funcionam com apps de página única (SPAs) do Chrome 111. Estamos trabalhando no suporte ao aplicativo de várias páginas. Para mais informações, confira nosso guia completo de transições de visualização.
Conclusão
Acompanhe todas as novidades sobre CSS e HTML aqui em developer.chrome.com e confira os vídeos do Google I/O para mais informações sobre isso.