Novità di Chrome 106

Pete LePage
Adriana Jara

Tieni presente quanto segue:

  • Esistono nuove API internazionali che offrono maggiori controlli durante la formattazione dei numeri.
  • È disponibile una prova dell'origine per l'API Pop-up per facilitare la visualizzazione di contenuti critici per l'utente.
  • Stiamo aggiungendo alcune funzionalità CSS per migliorare l'interoperabilità.
  • E ce ne sono molte altre.

Mi chiamo Pete LePage e sono Adriana Jara. Analizziamo in dettaglio le novità per gli sviluppatori di Chrome 106.

Nuove API internazionali

Le API Intl aiutano a visualizzare i contenuti in un formato localizzato.

Come altre API Intl, questo trasferisce il carico sul sistema, perciò non devi inviare o gestire un codice di localizzazione complesso per ogni utente.

L'API sa dove va il simbolo della valuta, come formattare date e ore o come compilare un elenco.

Chrome 106 aggiunge una serie di nuove funzionalità per il formato numerico.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Devi mostrare una fascia di prezzo? Ci pensa formatRange.

Crea un nuovo oggetto numberFormat, specifica style e altre opzioni e quante cifre mostrare.

Quindi chiama formatRange() per recuperare la stringa formattata.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Vuoi arrotondare un numero all'incremento più vicino di cinque con una precisione di due cifre decimali? Nessun problema.

Specifica minimumFractionDigits e roundingIncrement, quindi chiama format().

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

Puoi anche dire al browser di includere gli zeri finali con trailingZeroDisplay, molto utile per i prezzi.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Per ulteriori informazioni, consulta la documentazione sul formato numeri internazionale su MDN.

L'API Pop-Up semplifica la creazione di UI per quelle situazioni in cui devi solo mostrare le informazioni all'utente.

L'attributo popup porta automaticamente l'elemento nel livello superiore del sito e fornisce semplici controlli per attivare/disattivare la visibilità. Non dovrai più preoccuparti di posizionamento, impilamento di elementi, stato attivo o interazioni da tastiera. Meglio ancora, non richiede JavaScript.

Con il solo snippet riportato di seguito, l'API si occupa di eseguire il rendering dell'elemento in cima a tutti gli altri contenuti, gestire l'input utente e ottimizzare la gestione.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

Per impostazione predefinita, gli utenti possono chiudere il popup con gesti come il tasto ESC o facendo clic su altri elementi.

Gli sviluppatori hanno il pieno controllo dello stile,del posizionamento e delle dimensioni del livello superiore, ma anche della flessibilità di modificare i comportamenti predefiniti. Utilizzare solo CSS e HTML.

Consulta l'articolo di Jhey per altri esempi e opzioni relative alle API.

Registrati alla prova dell'origine per fornire facilmente agli utenti informazioni tempestive. Facci sapere cosa ne pensi.

Nuove funzionalità CSS

Sono disponibili due nuove funzionalità CSS che migliorano l'interoperabilità e speriamo che ti semplifichino la vita.

C'è una nuova unità di lunghezza in città: ic sta per partecipare alla festa. ic è simile a ch. Tuttavia, ic viene usato specificamente per il testo scritto in lingue che usano ideogrammi, fondamentalmente misura la lunghezza in base alla larghezza o all'altezza di questo carattere [punto da qualche parte], che indica l'acqua.

Si tratta di un'unità progettata per ridimensionare il testo, consentendoti di limitarne la larghezza per migliorare la leggibilità e che offre un controllo prevedibile indipendentemente dalle dimensioni del testo.

Ad esempio, se imposti il valore max-width di un contenitore, diciamo 10ic, sai che il contenitore conterrà al massimo 10 glifi a larghezza intera, a prescindere dalla dimensione del carattere. Dai un'occhiata al seguente esempio:

Il supporto della griglia CSS per l'interpolazione per grid-template-columns e grid-template-rows è in arrivo, era previsto per la versione 106, ma è in ritardo e verrà lanciato nella versione 107 di Chrome. Puoi ancora provarlo in Chrome Beta. Ecco un esempio del codice di Bramus:

E tanto altro.

Ovviamente c'è molto altro.

  • Stiamo iniziando la fase 5 del piano di riduzione dello user agent.
  • Il supporto per Push HTTP2 e il tipo di quota permanente sono stati ritirati.
  • Inoltre, la proprietà CSS hyphenate-character ora è disponibile senza prefisso.

Per approfondire

Vengono trattati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 106.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Sono Adriana Jara e non appena verrà rilasciata la versione 107 di Chrome, sarò qui per farti conoscere le novità di Chrome.