È passato un po' di tempo. Il video Novità di Chrome è tornato con informazioni su:
- casella di testo CSS, che ti consente di controllare con precisione la spaziatura verticale utilizzando le metriche dei caratteri.
- L'API di accesso al file system, ora supportata su Android e Webview.
- Un modo per spostare un elemento DOM mantenendo lo stato con
moveBefore. - La chiusura rapida viene applicata all'elemento
<dialog>. - E ci sono molti aggiornamenti in Baseline e altro ancora.
Sono Mariko. Diamo un'occhiata alle novità di Chrome nelle ultime tre release.
Casella di testo CSS
La proprietà CSS text-box ti consente di controllare con precisione la spaziatura verticale utilizzando le metriche dei caratteri.
Ogni carattere produce una quantità diversa di spazio sopra e sotto i caratteri, che determina le dimensioni dell'elemento.
Fino a oggi è stato impossibile controllare le dimensioni di questi spazi.
La nuova proprietà text-box-trim specifica i lati da tagliare, sopra o sotto, mentre la proprietà text-box-edge specifica come devono essere tagliati.
Ad esempio, taglia all'altezza del cappuccio, ovvero la parte superiore dei caratteri maiuscoli.
Puoi anche scrivere questa espressione utilizzando la proprietà abbreviata text-box.
Scopri di più su come utilizzare queste nuove proprietà nell'articolo CSS text-box-trim.
API File System Access
Aggiunta in Chrome 133, una primitiva DOM Node.prototype.moveBefore consente di spostare gli elementi all'interno di una struttura ad albero DOM, senza reimpostare lo stato dell'elemento.
Quando rimuovi e reinserisci un elemento per spostarlo, lo stato dell'elemento viene reimpostato. Con questa nuova primitiva, lo stato di un nodo viene mantenuto.
Pertanto, gli iframe rimangono caricati, gli elementi attivi rimangono attivi, elementi come i popup e le finestre di dialogo rimangono aperti e le animazioni o le transizioni CSS continuano.
Metodo per spostare un elemento DOM mantenendo lo stato
L'API File System Access è disponibile su Chrome per computer da un po' di tempo. Questa API consente alle app web di interagire con i file sul file system locale dell'utente. A partire da Chrome 132, l'API è disponibile anche su Android e in WebView.
Per leggere un file, chiama showOpenFilePicker(). Questo metodo mostra un selettore di file e restituisce un handle file che puoi utilizzare per leggere il file.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Per salvare un file sul disco, puoi utilizzare lo stesso handle file ottenuto in precedenza o chiamare showSaveFilePicker() per ottenere un nuovo handle file.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
La dismissione rapida viene visualizzata nell'elemento <dialog>
Se hai utilizzato l'API Popover per creare un popover, sai che una delle funzionalità interessanti dell'API Popover è il comportamento di chiusura rapida. Gli utenti possono fare clic sullo sfondo e l'elemento popup viene chiuso senza premere specificamente il pulsante di chiusura.
Questa funzionalità di dismissione della luce è ora supportata anche nell'elemento <dialog>.
Quando imposti l'attributo closedby su any, la finestra di dialogo può essere chiusa facendo clic all'esterno della finestra o premendo i tasti Esc.
<dialog closedby="any">...</dialog>
Si tratta dello stesso comportamento che si verifica quando un popup è impostato su automatico.
Aggiornamenti in Baseline
Ecco le notizie su Baseline
Base di riferimento di nuova disponibilità
Innanzitutto, le funzionalità di Base di recente disponibili sono state implementate di recente in tutti e quattro i browser principali.
scrollbar-gutter e scrollbar-width
Con la proprietà CSS scrollbar-gutter puoi riservare uno spazio per la barra di scorrimento per evitare modifiche indesiderate al layout quando la barra di scorrimento viene visualizzata o nascosta. Con scrollbar-width puoi creare una barra di scorrimento più stretta o addirittura nasconderla completamente senza influire sulla scorrevolezza.
ruby-align
Con la proprietà CSS ruby-align puoi specificare l'allineamento del testo di base ruby e del testo dell'annotazione ruby.
Promise.try
Promise.try è un metodo pratico per gestire gli errori per le richieste sincrone. In questo modo, puoi eliminare le funzioni di callback quando provi a effettuare una richiesta con Promise.resolve.
Garbage collection Wasm e ottimizzazioni di chiamate finali
WebAssembly ora supporta le ottimizzazioni della raccolta dei rifiuti e delle chiamate finali.
Gruppo di base Ampia disponibilità
Array findLast() e findLastIndex()
findLast() e findLastIndex() sono metodi molto pratici per recuperare gli elementi dalla fine di un array. Questa funzionalità è supportata da tutti i principali browser da 30 mesi, il che significa che ora è ampiamente disponibile in Baseline.
Singole proprietà di trasformazione
Anche le proprietà di trasformazione individuali, che offrono un controllo più granulare sulle trasformazioni CSS, sono ora disponibili a livello di riferimento a livello generale .
Scopri di più su Base di riferimento
Se vuoi saperne di più sul valore di riferimento e sulla differenza tra Nuovo e Disponibile in molti paesi, guarda il video breve che ho realizzato.
Puoi anche scoprire di più sullo stato di riferimento di una funzionalità nella dashboard dello stato della piattaforma web.
Il progetto di interoperabilità è tornato per il 2025
Infine, il progetto Interop tornerà nel 2025 con un elenco di aree di interesse tra cui transizioni di visualizzazione, posizionamento di ancore CSS e API Navigation. Assicurati di consultare l'annuncio del progetto.
Iscriviti
Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.
Sono Mariko Kosaka e tornerò tra tre mesi per raccontarti di più sulle novità di Chrome.