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.
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.
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.
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.
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);
}
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.
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.
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.
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.
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
clicknã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.
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.
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
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.
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.
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.
- Folhas de estilo construtáveis
- Seletores de enésimo filho complexos no CSS
- A sintaxe de intervalo para consultas de mídia
- Importar o Maps
- Vários valores para exibição de CSS
- @counter-style
- A propriedade
counter-setdo CSS - Função de easing
linear() - Sistema de arquivos particulares de origem (OPFS, na sigla em inglês)
- Aninhamento de CSS, incluindo a alteração que adiciona uma análise flexível.
- Seletor de pseudoclasse
:dir()do CSS - Unidade de comprimento
capdo CSS - Máscara CSS
- Suporte a consultas de mídia para elementos
<source>de vídeos HTML - O elemento HTML
<search> - Carregamento lento de elementos
<iframe>(lançamento no Firefox 121 em 19 de dezembro) - As unidades de altura da linha CSS
lherlh
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.