Valor de referência de 2023

A referência de base está chegando ao caniuse.com. Nesta postagem, você vai saber mais sobre a integração e alguns dos recursos que se tornaram parte do valor de referência em 2023.

Com a nova definição de valor de referência, há duas etapas no ciclo de vida de um recurso. Primeiro, quando o produto é recém-disponível e depois de 30 meses para ser amplamente disponibilizado. Um recurso se torna parte do valor de referência recentemente disponibilizado quando se torna interoperável nos seguintes navegadores:

  • Safari (macOS e iOS)
  • Firefox (para computadores e Android)
  • Chrome (computador e Android)
  • Edge (computador)

A referência chega a "Can I Use"

Como a próxima etapa para esclarecer a disponibilidade de recursos, o valor de referência está começando a ser usado a partir de hoje. Ao acessar algumas páginas em "Can I Use", você vai encontrar um selo informando se o recurso está disponível na versão de referência.

Captura de tela de "Posso usar" com o selo disponível no CSS Grid Layout.

Os recursos recém-disponibilizados na versão de referência também vão mostrar um selo com o ano em que foram disponibilizados. Tudo que se tornou interoperável no conjunto principal de navegadores este ano faz parte do Valor de referência 2023.

Captura de tela de "Can I Use" com o novo selo disponibilizado nas consultas de contêiner.

No restante desta postagem, saiba mais sobre os recursos que alcançaram esse marco em 2023. Todos esses recursos são o Baseline 2023, recém-disponível.

Tamanho de consultas de contêiner e unidades de consulta de contêiner

As consultas de contêiner de tamanho permitem consultar o tamanho de um elemento, da mesma forma que as consultas de mídia permitem consultar o tamanho da janela de visualização. Eles facilitam muito a criação de componentes reutilizáveis, pois você pode criar componentes que reagem ao tamanho da área em que são colocados.

Compatibilidade com navegadores

  • 105
  • 105
  • 110
  • 16

Origem

O design do card a seguir muda dependendo da largura do componente. Saiba mais em As consultas de contêiner são armazenadas em navegadores estáveis.

Novos espaços de cor e funções

O CSS agora oferece suporte a espaços de cor que permitem acessar cores fora da gama sRGB. Isso significa que você pode oferecer suporte a telas HD (alta definição), usando cores da gama HD.

Novos modelos de cores

Agora, no valor de referência, as funções de cor lch(), lab(), oklch() e oklab() dão acesso aos modelos de cores LCH, Lab, OKLCH e OKLab.

Compatibilidade com navegadores

  • 111
  • 111
  • 113
  • 15

Origem

Captura de tela do editor gradient.style com um gradiente vibrante de rosa a azul.
Teste os novos espaços de cores usando gradient.style.

A função color-mix()

Além disso, novas funções de cor se tornaram parte da referência. A função color-mix() permite a mistura de uma cor em outra, em qualquer um dos espaços de cor. No CSS a seguir, 25% do azul é misturado ao branco, no espaço de cores srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Compatibilidade com navegadores

  • 111
  • 111
  • 113
  • 15

Origem

Saiba mais sobre color-mix().

A função color()

A função color() pode ser usada para qualquer espaço de cores que especifique cores com os canais R, G e B. color() usa um parâmetro de espaço de cores primeiro e depois uma série de valores de canal para RGB e, opcionalmente, um valor alfa. Você pode usar qualquer uma destas opções: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 e xyz-d65. Exemplo:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

O guia de cores de alta definição do CSS oferece muitos outros exemplos dos novos espaços e funções de cor, além de informações sobre quais cores usar e quando.

Streams de compactação

A API Compression Streams é uma API JavaScript para compactar e descompactar streams de dados. Ao usar essa compactação integrada, os aplicativos não precisam mais incluir uma biblioteca de compactação.

Compatibilidade com navegadores

  • 80
  • 80
  • 113
  • 16.4

Origem

Saiba mais em Os fluxos de compactação agora são compatíveis com todos os navegadores.

Tela fora da tela

Antes do OffscreenCanvas, os recursos de desenho da tela eram vinculados ao elemento <canvas>, o que significava que eles dependiam diretamente do DOM. OffscreenCanvas, como o nome indica, separa o DOM e a API Canvas movendo-o para fora da tela.

Graças a esse dissociamento, a renderização do OffscreenCanvas é totalmente removida do DOM e, por isso, ela oferece algumas melhorias de velocidade em relação à tela normal, já que não há sincronização entre as duas. No entanto, o que é mais importante é que ele pode ser usado para mover o trabalho de renderização para um Web Worker, mesmo que não haja um DOM disponível, liberando o thread principal e tornando o aplicativo mais responsivo.

Compatibilidade com navegadores

  • 69
  • 79
  • 105
  • 16.4

Origem

Saiba mais em OffscreenCanvas: acelere as operações de tela com um Web worker.

Pré-carregamento do módulo

O pré-carregamento de módulos pode reduzir o tempo de download e processamento. Adicione rel="modulepreload" ao elemento do link que referencia um módulo JavaScript, e o navegador receberá o módulo, o analisará e compilará e colocará os resultados no mapa do módulo prontos para execução.

Compatibilidade com navegadores

  • 66
  • ≤79
  • 115
  • 17

Origem

Saiba mais no artigo Módulos pré-carregados.

Funções trigonométricas no CSS

Em 2023, as funções trigonométricas da especificação CSS Values e Units Level 4 tornaram-se interoperáveis. Isso significa que as funções sin(), cos(), tan(), asin(), acos(), atan() e atan2() fazem parte do valor de referência 2023.

Compatibilidade com navegadores

  • 111
  • 111
  • 108
  • 15,4

Origem

Esta demonstração usa as funções trigonométricas para mover itens em um caminho circular ao redor de um ponto central.

Aprenda a usar essas funções e descubra alguns casos de uso em Funções trigonométricas no CSS.

O atributo inert

Inerte significa não conseguir se mover. Portanto, ao marcar algo como inerte, você remove o movimento ou a interação desses elementos DOM. O atributo inert faz com que o navegador ignore o elemento.

  • O evento click não é disparado se um usuário clicar no elemento.
  • O elemento não receberá foco.
  • O elemento e o conteúdo dele são excluídos da árvore de acessibilidade.

Compatibilidade com navegadores

  • 102
  • 102
  • 112
  • 15.5

Origem

Esse atributo deve ser adicionado a elementos que estejam fora da tela ou ocultos. Saiba mais no atributo inert.

Subgrade no layout de grade CSS

O valor de subgrid para grid-template-columns e grid-template-rows permite usar as faixas definidas em uma grade mãe, em grades aninhadas. Isso significa que é possível alinhar elementos dentro dessas grades aninhadas entre si.

Compatibilidade com navegadores

  • 117
  • 117
  • 71
  • 16

Origem

No artigo Subgrade CSS, você encontrará alguns exemplos e links para muitas outras postagens e exemplos que destacam os casos de uso da subgrade.

Formato de número V3

Intl.NumberFormat V3 é um conjunto de novos recursos para Intl.NumberFormat, que se tornou parte do valor de referência em 2023. Os recursos adicionais são:

  • Três novas funções para formatar intervalos de números: formatRange, formatRangeToParts e selectRange.
  • Enumeração de agrupamento
  • Novas opções de arredondamento e precisão
  • Prioridade de arredondamento
  • Interpretar strings como decimais
  • Modos de arredondamento
  • Assinar negativo de display

Compatibilidade com navegadores

  • 106
  • 106
  • 116
  • 15,4

Origem

A proposta do NumberFormat V3 (link em inglês) detalha cada um dos novos recursos.

A API Fullscreen

A API Fullscreen permite colocar um elemento, como uma <video>, no modo de tela cheia chamando o método requestFullscreen(). Ela também fornece métodos para detectar se um elemento está no modo de tela cheia e se o documento está em um estado que permita solicitar o modo de tela cheia.

Compatibilidade com navegadores

  • 71
  • 79
  • 64
  • 16.4

Origem

Saiba mais neste guia para a API Fullscreen no MDN.

O seletor :has() do CSS

Apenas o valor de referência 2023 é o seletor :has(), que vai estar disponível no Firefox 121 em 19 de dezembro. Entre outros usos, esse seletor atua como um seletor pai, permitindo selecionar um elemento com base no que está dentro dele. Por exemplo, é possível aplicar CSS diferentes dependendo de haver ou não uma imagem dentro de um elemento.

Compatibilidade com navegadores

  • 105
  • 105
  • 121
  • 15,4

Origem

Saiba mais em :has(): o seletor de famílias.

Mais recursos que entraram no valor de referência este ano

Nesta postagem, mostramos alguns dos principais recursos que se tornaram parte do valor de referência este ano, mas ainda tem mais.

Muitos deles alcançaram a interoperabilidade com o trabalho colaborativo da Interoperabilidade de 2023. É empolgante ver como os recursos podem ser trazidos por esse processo e entrar no valor de referência quando recém-disponibilizados, o que inicia o tempo para que eles fiquem amplamente disponíveis. Isso cria um caminho mais claro para tomar decisões sobre quando adotar recursos nos seus próprios projetos.