Valor de referência de 2023

Rachel Andrew

A versão de referência estará disponível em caniuse.com. Nesta postagem, aprenda sobre a integração e conhecer alguns dos recursos que fizeram parte Valor de referência em 2023.

Com a nova definição de valor de referência, há são dois estágios no ciclo de vida de um recurso: quando ele se torna recém-disponível e quando ele for amplamente disponível após 30 meses. Um atributo se torna parte do valor de referência recém-disponibilizado quando se torna interoperável nos seguintes navegadores:

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

O valor de referência chega em "Can I Use".

Como a próxima etapa para esclarecer a disponibilidade de recursos, o valor de referência está começando a chegar em "Can I Use" a partir de hoje. Ao visitar algumas páginas em "Posso usar", você verá um selo que informa se o recurso está amplamente disponível no nível de referência.

Captura de tela de "Can I Use" (posso usar com o selo amplamente disponível no layout de grade CSS).

Os recursos que estiverem no nível de referência recém-disponibilizados também vão mostrar um selo, junto com o ano em que foram disponibilizados. Tudo que se tornou interoperável o principal conjunto de navegadores deste ano faz parte do Baseline 2023 (link em inglês).

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

No restante desta postagem, você vai saber mais sobre os recursos que atingem esse marco. em 2023. Todos esses recursos são Valor de referência de 2023: recém-disponível.

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

Dimensione as consultas de contêiner 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 tornam a criação de componentes reutilizáveis muito mais fácil, permitindo criar componentes que reagem ao tamanho da área em que foram colocados.

Compatibilidade com navegadores

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

Origem

O design do card a seguir muda dependendo da largura do componente. Saiba mais em Consultas de contêiner 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 em HD (alta definição) usando cores de alta definição gamas.

Novos modelos de cores

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

Compatibilidade com navegadores

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

Origem

Captura de tela do editor gradient.style com um gradiente vibrante de rosa a azul.
Teste os novos espaços de cor usando gradient.style (em inglês).

A função color-mix()

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

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

Compatibilidade com navegadores

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

Origem

Saiba mais sobre color-mix().

A função color()

O color() pode ser usada para qualquer espaço de cor que especifique cores com R, G e B canais. Primeiro, color() usa um parâmetro de espaço de cores e, em seguida, uma série de valores de canal para RGB e, opcionalmente, algum 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 dá muitos outros exemplos dos novos espaços de cor e funções, junto com informações sobre qual usar e quando.

Streams de compactação

a API Compression Streams é uma API JavaScript para compactar e descompactar streams de dados. Aplicativos usar essa compactação integrada não precisam mais incluir uma biblioteca de compactação.

Compatibilidade com navegadores

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

Origem

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

Tela fora da tela

Antes do OffscreenCanvas, os recursos de desenho em tela estavam vinculados ao <canvas>. o que significava que dependia diretamente do DOM. Separação do "OffscreenCanvas" o DOM da API Canvas movendo o canvas para fora da tela.

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

Compatibilidade com navegadores

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

Origem

Saiba mais em OffscreenCanvas: agilize suas operações com um web worker

Pré-carregamento do módulo

O pré-carregamento de módulos pode reduzir o tempo de download e processamento. Adicionar rel="modulepreload" ao elemento do link que faz referência a um módulo JavaScript, e o navegador receberá a do módulo, o analisa e compila e coloca os resultados no mapa do módulo para executar.

Compatibilidade com navegadores

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

Origem

Saiba mais em Pré-carregar módulos.

Funções trigonométricas no CSS

Em 2023, funções trigonométricas do CSS Values e das unidades, nível 4 essa especificação se tornou interoperável. Isso significa que as funções sin(), cos(), tan(), asin(), acos(), atan() e atan2() fazem parte do valor de referência de 2023.

Compatibilidade com navegadores

  • Chrome: 111
  • Borda: 111.
  • Firefox: 108.
  • Safari: 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 (em inglês).

Atributo "inert"

Ao marcar um elemento DOM como inert, você remove o movimento ou a interação do reimplantá-lo. 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 ganha o foco.
  • O elemento e o conteúdo dele são excluídos da árvore de acessibilidade.

Compatibilidade com navegadores

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

Origem

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

Subgrade no layout de grade CSS

O valor subgrid para grid-template-columns e grid-template-rows permite você usa as faixas definidas em uma grade pai, em grades aninhadas. Isso significa que você pode alinhar elementos em grades aninhadas separadas uns com os outros.

Compatibilidade com navegadores

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

Origem

Em Subgrade CSS, você encontrará alguns exemplos e links para muitas outras postagens e exemplos destacando casos de uso de subgrade.

NumberFormat V3

O Intl.NumberFormat V3 é um conjunto de novos recursos para o 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

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

Origem

A proposta do NumberFormat V3 detalha cada um desses novos recursos.

API Fullscreen

A API Fullscreen permite colocar um elemento, como um <video>, em tela cheia. chamando o método requestFullscreen(). Ele também oferece métodos 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

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

Origem

Saiba mais neste Guia para a API Fullscreen no MDN.

Seletor de CSS :has()

O Baseline 2023 é o seletor :has(), que vai estar disponível no Firefox 121 no dia 19 de dezembro. Entre outros usos, esse seletor age como um seletor principal, que permite selecionar um elemento com base nos itens que estão nele reimplantá-lo. Por exemplo, é possível aplicar CSS diferentes dependendo da existência de uma imagem dentro de um elemento.

Compatibilidade com navegadores

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

Origem

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

Mais recursos que entraram no Baseline neste ano

Outros recursos que se tornaram parte do valor de referência este ano incluem:

Muitos desses recursos alcançaram a interoperabilidade com o trabalho colaborativo no Interoperabilidade 2023. É empolgante ver como os recursos podem ser trazidos por esse processo e chegar à linha de base como recém-disponibilizados, o que inicia o cronômetro para que eles se tornem amplamente disponíveis. Isso cria uma caminho mais claro para decisões sobre quando adotar atributos em seus próprios projetos.