Faz um tempo! O vídeo "Novidades do Chrome" está de volta com informações sobre:
- CSS text-box, que permite controlar o espaçamento vertical com precisão usando as métricas da fonte.
- A API de acesso ao sistema de arquivos, que agora tem suporte para Android e visualização da Web.
- Uma maneira de preservar o estado para mover um elemento DOM com
moveBefore. - A encerrar leve é exibida no elemento
<dialog>. - E há muitas atualizações na Referência e muito mais.
Meu nome é Mariko. Vamos conferir as novidades do Chrome nas três últimas versões.
Caixa de texto CSS
A propriedade CSS text-box permite controlar o espaçamento vertical com precisão usando as métricas da fonte.
Cada fonte produz uma quantidade diferente de espaço acima e abaixo dos caracteres, o que determina o tamanho do elemento.
Até agora, era impossível controlar o tamanho desses espaços.
A nova propriedade text-box-trim especifica os lados a serem cortados, acima ou abaixo,
e a propriedade text-box-edge especifica como ele deve ser cortado.
Por exemplo, corte na altura da letra maiúscula, que é a parte de cima dos caracteres maiúsculos.
Também é possível escrever isso usando a propriedade abreviada text-box.
Saiba mais sobre como usar essas novas propriedades no artigo CSS text-box-trim.
API File System Access
Adicionado no Chrome 133, um Node.prototype.moveBefore primitivo do DOM permite mover elementos em uma árvore do DOM sem redefinir o estado do elemento.
Quando você remove e reinsere um elemento para mover um elemento DOM, o estado desse elemento é redefinido. Com essa nova primitiva, o estado de um nó é preservado.
Assim, os iframes permanecem carregados, os elementos ativos permanecem em foco, elementos como popovers e caixas de diálogo permanecem abertos, e as transições ou animações do CSS continuam.
Como preservar o estado para mover um elemento DOM
A API File System Access já está disponível no Chrome para computador há algum tempo. Essa API permite que os apps da Web interajam com arquivos no sistema de arquivos local do usuário. A partir do Chrome 132, a API também está disponível no Android e nas WebViews.
Para ler um arquivo, chame showOpenFilePicker(). Esse método mostra um seletor de arquivos e retorna um identificador de arquivo que pode ser usado para ler o arquivo.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Para salvar um arquivo no disco, use o mesmo identificador de arquivo que você recebeu anteriormente ou chame showSaveFilePicker() para receber um novo identificador.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
A dispensa leve é mostrada no elemento <dialog>.
Se você usou a API Popover para criar um popover, sabe que um dos recursos interessantes da API Popover é o comportamento de dispensa leve. Os usuários podem clicar no plano de fundo, e o elemento de pop-up é fechado sem clicar especificamente no botão de fechamento.
Esse recurso de dispensação leve agora também é compatível com o elemento <dialog>.
Quando você define o atributo closedby como any, a caixa de diálogo pode ser dispensada clicando fora dela ou pressionando a tecla de escape.
<dialog closedby="any">...</dialog>
Esse é o mesmo comportamento de quando um popover é definido como automático.
Atualizações no valor de referência
Aqui estão as notícias sobre a referência
Valor de referência recém disponível
Primeiro, a referência recém-disponível, esses são recursos que foram enviados recentemente para os quatro principais navegadores.
scrollbar-gutter e scrollbar-width
Com a propriedade CSS scrollbar-gutter, é possível reservar um espaço para a barra de rolagem e evitar mudanças indesejadas no layout quando ela aparece ou desaparece. Com scrollbar-width, é possível criar uma barra de rolagem mais estreita ou até mesmo ocultar a barra de rolagem completamente sem afetar a rolagem.
ruby-align
Com a propriedade CSS ruby-align, é possível especificar o alinhamento do texto base e do texto de anotação do ruby.
Promise.try
Promise.try é um método conveniente para fazer o tratamento de erros de solicitações síncronas. Com isso, você pode eliminar as funções de callback ao tentar fazer uma solicitação com Promise.resolve.
Coleta de lixo do Wasm e otimizações de chamada de cauda
O WebAssembly agora oferece suporte a otimizações de chamada de cauda e coleta de lixo.
Valor de referência amplamente disponível
Matriz findLast() e findLastIndex()
As funções findLast() e findLastIndex() são métodos muito convenientes para receber itens do final de uma matriz. Esse recurso tem suporte de todos os principais navegadores há 30 meses, o que significa que ele está amplamente disponível.
Propriedades de transformação individuais
As propriedades de transformação individuais, que oferecem um controle mais detalhado sobre as transformações de CSS, também estão disponíveis na versão de referência .
Mais sobre a referência
Se quiser saber mais sobre a base e a diferença entre "Recém-disponível" e "Disponível para todos", confira este vídeo que fiz.
Você também pode encontrar mais informações sobre o status de referência de um recurso no painel de status da plataforma da Web.
O projeto de interoperabilidade está de volta para 2025
Por fim, o projeto de interoperabilidade vai voltar em 2025 com uma lista de áreas de foco, incluindo transições de visualização, posicionamento de âncora do CSS e a API Navigation. Confira o anúncio do projeto.
Inscrever-se
Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.
Meu nome é Mariko Kosaka, e eu vou voltar em três meses para falar mais sobre as novidades do Chrome.