A referência de base está chegando ao caniuse.com. Nesta postagem, aprenda sobre a integração e descubra 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á dois estágios no ciclo de vida de um recurso: quando ele é recém-disponível e quando ele é amplamente disponível após 30 meses. Um recurso 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 computadores e Android)
- Chrome (computador e Android)
- Edge (computador)
A referência chega a "Can I Use"
Como próxima etapa para esclarecer a disponibilidade de recursos, o valor de referência está começando a ser "Posso usar" a partir de hoje. Ao visitar 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 que estão na versão de referência recém-disponibilizados também vão mostrar um selo com o ano em que foram disponibilizados. Tudo o que se tornou interoperável no conjunto principal do navegador 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, permitindo que você crie 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 em alta definição (alta definição) usando cores da gama de alta definição.
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 cores.
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, em seguida, 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. Os apps que usam essa compactação integrada 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. O OffscreenCanvas dissocia
o DOM da API Canvas movendo a tela para fora da tela.
Graças a esse dissociamento, a renderização do OffscreenCanvas é totalmente removida 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.
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 vai receber o
módulo, analisá-lo e compilá-lo e colocar os resultados no mapa do módulo prontos
para execução.
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 de CSS de nível 4
se tornaram interoperáveis. Isso significa que as funções sin(), cos(),
tan(), asin(), acos(), atan() e atan2() fazem parte do valor de referência de 2023.
Aprenda a usar essas funções e descubra alguns casos de uso em Funções trigonométricas no CSS.
O atributo inert
Ao marcar um elemento DOM como inert, você remove o movimento ou a interação dele. O atributo inert faz com que o navegador ignore o elemento:
- O evento
clicknão é acionado 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.
Adicione esse atributo a elementos que estejam fora da tela ou ocultos. Para saber mais, consulte 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 entre si em grades aninhadas separadas.
Em 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,formatRangeToPartseselectRange - 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 detalha cada um desses 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 de :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
Confira outros recursos que foram incluídos no valor de referência este ano:
- 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>(a partir do Firefox 121 em 19 de dezembro) - As unidades de altura da linha CSS
lherlh
Muitos desses recursos alcançaram a interoperabilidade com o trabalho colaborativo na Interoperabilidade de 2023. É empolgante ver como os recursos podem ser trazidos por esse processo e chegar ao valor de referência como recém-disponibilizados, o que inicia o tempo para que eles se tornem amplamente disponíveis. Isso cria um caminho mais claro para decisões sobre quando adotar recursos nos seus próprios projetos.