Valor de referência de 2023

A métrica de referência está chegando ao caniuse.com. Nesta postagem, saiba mais sobre a integração e descubra alguns dos recursos que passaram a fazer parte da Baseline em 2023.

Com a nova definição de valor de referência, há dois estágios no ciclo de vida de um recurso: quando ele fica disponível e quando fica disponível para todos após 30 meses. Um recurso passa a fazer parte da referência quando se torna interoperável nos seguintes navegadores:

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

A página de destino da página "Posso usar"

Como próxima etapa para esclarecer a disponibilidade de recursos, o Baseline está começando a ser lançado no recurso "Posso usar". Ao visitar algumas páginas no Can I Use, você vai encontrar um selo informando se o recurso está disponível na versão de referência.

Captura de tela do Can I Use com o selo amplamente disponível no layout de grade CSS.

Os recursos que estão na versão de referência também vão mostrar um selo com o ano em que foram disponibilizados. Tudo o que se tornou interoperável no conjunto de navegadores principais deste ano faz parte da Referência de 2023.

Captura de tela do Can I Use com o novo selo disponível nas consultas de contêiner.

No restante desta postagem, saiba mais sobre os recursos que atingiram esse marco em 2023. Todos esses recursos são o Baseline 2023, que está disponível agora.

Dimensionar 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 a criação de componentes reutilizáveis permitindo que você crie componentes que reagem ao tamanho da área em que são colocados.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

O design do card a seguir muda de acordo com a largura do componente. Saiba mais em Consultas de contêineres chegam a navegadores estáveis.

Novos espaços de cores e funções

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

Novos modelos de cores

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

A função color-mix()

Além disso, novas funções de cor passaram a fazer parte da referência. A função color-mix() permite misturar uma cor em outra, em qualquer um dos espaços de cor. No CSS abaixo, 25% do azul é misturado com branco no espaço de cores sRGB.

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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 canais R, G e B. color() recebe primeiro um parâmetro de espaço de cor e, em seguida, uma série de valores de canal para RGB e, opcionalmente, alguns alfa. Você pode usar qualquer um destes: 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 cores, além de informações sobre quais usar.

Fluxos de compactação

A API Compression Streams é uma API JavaScript para compactar e descompactar fluxos de dados. Os apps que usam essa compactação integrada não precisam mais incluir uma biblioteca de compactação.

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

Saiba mais em Agora há suporte para transmissões de compressão em todos os navegadores.

Tela fora da tela

Antes do OffscreenCanvas, os recursos de desenho de tela estavam vinculados ao elemento <canvas>, o que significa que ele dependia diretamente do DOM. A OffscreenCanvas desepara o DOM da API Canvas movendo a tela para fora da tela.

Graças a esse desacoplamento, a renderização de OffscreenCanvas é totalmente separada do DOM. Por isso, ela oferece algumas melhorias de velocidade em relação à tela normal, porque não há sincronização entre as duas. Ele também pode ser usado para mover o trabalho de renderização para um Web Worker, mesmo que não haja um DOM disponível, liberando a linha de execução principal e tornando o aplicativo mais responsivo.

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

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

Pré-carregamento do módulo

O pré-carregamento de módulos pode reduzir o tempo de download e processamento. Adicione rel="modulepreload" ao elemento de link que faz referência a um módulo JavaScript. O navegador recebe o módulo, analisa e compila, e coloca os resultados no mapa de módulo prontos para execução.

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

Saiba mais em Pré-carregar módulos.

Funções trigonométricas no CSS

Em 2023, as funções trigonométricas da especificação de valores e unidades do CSS nível 4 passaram a ser interoperáveis. Isso significa que as funções sin(), cos(), tan(), asin(), acos(), atan() e atan2() fazem parte da referência de 2023.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

Esta demonstração usa as funções trigonométricas para mover itens em um caminho circular em torno 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

Quando você marca um elemento DOM como inert, remove o movimento ou a interação dele. O atributo inert faz com que o navegador ignore o elemento:

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

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

Adicione esse atributo a elementos que estão fora da tela ou ocultos. Para mais informações, consulte O atributo inert.

Subgrade no layout de grade do CSS

O valor 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 você pode alinha elementos em grades aninhadas separadas.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

Em Subgrade CSS, você vai encontrar alguns exemplos e links para muitas outras postagens e exemplos que destacam casos de uso de subgrades.

NumberFormat V3

O Intl.NumberFormat V3 é um conjunto de novos recursos do Intl.NumberFormat que passaram a fazer parte da referência em 2023. Os recursos adicionais são:

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

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

A proposta para NumberFormat V3 descreve cada um desses novos recursos.

A API Fullscreen

A API Fullscreen permite colocar um elemento, como um <video>, no modo de tela cheia chamando o método requestFullscreen(). Ele 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 permite solicitar o modo de tela cheia.

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

Saiba mais no Guia da API Fullscreen no MDN.

O seletor :has() do CSS

O seletor :has(), que será lançado no Firefox 121 em 19 de dezembro, é a versão de referência de 2023. Entre outros usos, esse seletor funciona como um seletor pai, permitindo que você selecione um elemento com base nas coisas que estão dentro dele. Por exemplo, é possível aplicar CSS diferentes dependendo se há ou não uma imagem dentro de um elemento.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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

Mais recursos que foram adicionados ao Baseline este ano

Outros recursos que passaram a fazer parte da referência neste ano incluem:

Muitos desses recursos alcançaram a interoperabilidade por meio do trabalho colaborativo no Interop 2023. É ótimo ver como os recursos podem ser incluídos nesse processo e disponibilizados no nível de referência, o que aciona o timer para que eles fiquem disponíveis para todos. Isso cria um caminho mais claro para decisões sobre quando adotar recursos nos seus próprios projetos.