Novità di Chrome 130

Pete LePage

Tieni presente quanto segue:

• La funzionalità Picture in picture di Documenti ti offre un maggiore controllo sulle finestre Picture in picture.
• Le dichiarazioni CSS nidificate correggono alcuni casi limite complicati.
• Puoi specificare il comportamento delle decorazioni sugli elementi che si suddividono su più righe.
• E ce ne sono molti altri.

Sono Pete LePage. Vediamo le novità per gli sviluppatori in Chrome 130.

Picture in picture del documento

L'API Picture in picture è ideale per estrarre un video da una scheda del browser in modo da poterlo tenere d'occhio mentre interagisci con altri siti o applicazioni. ma utilizza solo video.

L'API Picture in picture dei documenti elimina questa restrizione, consentendoti di creare una finestra Picture in picture in cui hai il controllo sui contenuti. È ideale per video player personalizzati, videoconferenze e app di produttività. Adoro quello che Spotify ha fatto con questa funzionalità nel suo web player. Viene visualizzata una finestra con l'artwork del brano in riproduzione, i controlli di riproduzione e posso aggiungere facilmente il brano ai miei preferiti.

Per utilizzarla, richiedi una nuova finestra Picture in picture del documento. Il valore promise restituito viene risolto con un oggetto JavaScript della finestra Picture in picture. A questo punto, utilizzalo per aggiungere i tuoi contenuti alla finestra.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

Con la nuova proprietà preferInitialWindowPlacement, puoi chiedere a Chrome di aprire sempre la finestra Picture in picture nelle dimensioni e nella posizione predefinite, anziché riutilizzare le dimensioni o la posizione della finestra precedente.

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

Dai un'occhiata al post di François su Picture-in-Picture per qualsiasi elemento per scoprire molti altri dettagli.

Dichiarazioni nidificate al CSS

L'annidamento CSS consente di avere selettori più brevi, una lettura più facile e una maggiore modularità nidificando le regole all'interno di altre. La nidificazione CSS è una funzionalità di base di recente disponibilità ed è disponibile da quasi un anno.

Alcuni casi limite non hanno funzionato come previsto. Ad esempio, con il seguente blocco CSS, ti aspetteresti che il colore di sfondo sia verde, poiché è l'ultimo, ma è rosso.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Per risolvere casi limite come questo, il gruppo di lavoro CSS ha introdotto la regola Dichiarazioni nidificate, implementata in Chrome 130. Ora, lo stesso blocco CSS genera uno sfondo verde, come previsto. Se intercavi dichiarazioni senza parametri con regole nidificate, devi ricontrollare il codice.

Per una spiegazione più approfondita, consulta l'articolo di Bramus Il nesting CSS migliora con CSSNestedDeclarations.

box-decoration-break

La proprietà CSS box-decoration-break consente di specificare in che modo devono essere visualizzati i frammenti di un elemento quando sono suddivisi in più righe, colonne o pagine.

Ad esempio, questo elemento ha un aspetto ottimale quando tutto è su una sola riga.

Quando i contenuti vengono suddivisi in più righe, le decorazioni come sfondo, ombra della casella, bordo e così via vengono tagliate, creando un aspetto piuttosto drastico.

Aggiungendo box-decoration-break: clone, ogni frammento viene visualizzato in modo indipendente, creando un aspetto molto più gradevole.

Sebbene non sia esattamente Baseline, è disponibile in Chrome e Firefox e ha il prefisso del fornitore in Safari.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Per ulteriori dettagli, consulta la documentazione di box-decoration-break su MDN e il post di Rachel La proprietà box-decoration-break in Chrome 130.

E tanto altro.

Naturalmente c'è molto altro.

• Dopo alcuni tentativi, i contenitori con scorrimento che possono essere attivati con la tastiera sono finalmente disponibili.
• WebGPU supporta la miscelazione con due origini.
• E la seriale web riceve un attributo collegato.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per altre modifiche in Chrome 130.

• Note di rilascio di Chrome 130.
• Novità di Chrome DevTools (130)
• Aggiornamenti di ChromeStatus.com per Chrome 130
• Elenco delle modifiche al repository di origine di Chromium
• Calendario dei rilasci di Chrome

Iscriviti

Per rimanere al passo con le novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 131, sarò qui per dirti le novità di Chrome.