Novità di Chrome 130

Pete LePage

Ecco cosa devi sapere:

Mi chiamo Pete LePage. Scopriamo le novità per gli sviluppatori di Chrome 130.

Picture in picture dei documenti

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

Finestra Picture in picture di Spotify

L'API Picture in picture per i documenti elimina questa limitazione, consentendoti di creare una finestra Picture in picture in cui hai il controllo sui contenuti. È ideale per elementi come lettori video personalizzati, videoconferenze e app di produttività. Mi piace molto come Spotify ha implementato questa funzionalità nel suo web player. Vedo una finestra con la copertina del brano in riproduzione, i controlli del player e posso aggiungere facilmente il brano ai miei preferiti.

Per utilizzarlo, richiedi una nuova finestra Picture in picture per i documenti. Il valore promise restituito viene risolto con un oggetto JavaScript della finestra Picture in picture. Quindi, 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 indicare a Chrome di aprire sempre la finestra Picture in picture nella posizione e nelle dimensioni predefinite, anziché riutilizzare la posizione o le dimensioni della finestra precedente.

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

Per saperne di più, leggi il post di François Picture in Picture per qualsiasi elemento.

Dichiarazioni nidificate CSS

Il nesting CSS consente di utilizzare selettori più brevi, semplifica la lettura e offre una maggiore modularità grazie all'annidamento delle regole all'interno di altre. Il nesting CSS è Baseline Newly available, ed è disponibile da quasi un anno.

Si sono verificati alcuni casi limite che non hanno funzionato come previsto. Ad esempio, con il seguente blocco CSS, ti aspetteresti che il colore di sfondo sia verde, dato che è 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 delle dichiarazioni nidificate, implementata in Chrome 130. Ora, lo stesso blocco CSS produce uno sfondo verde, come previsto. Se stavi alternando dichiarazioni semplici con regole nidificate, dovresti ricontrollare il codice.

Per una spiegazione più approfondita, consulta l'articolo di Bramus CSS nesting improves with CSSNestedDeclarations.

box-decoration-break

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

Nessuna interruzione di riga

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

Interruzioni di riga con sezioni

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

Interruzioni di riga con clone

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

Sebbene non sia ancora una baseline, è disponibile in Chrome e Firefox ed è preceduto dal prefisso del fornitore in Safari.

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

Per ulteriori dettagli, consulta la documentazione box-decoration-breaksu MDN e il post di Rachel The box-decoration-break property in Chrome 130.

E tanto altro.

Ovviamente, c'è molto altro.

Per approfondire

Questi sono solo alcuni dei punti salienti. Consulta i seguenti link per ulteriori modifiche in Chrome 130.

Iscriviti

Per rimanere aggiornato, iscriviti al canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video.

Sono Pete LePage e non appena verrà rilasciato Chrome 131, saremo qui per raccontarti le novità di Chrome.