Novità di Chrome 106

Pete LePage
Adriana Jara

Tieni presente quanto segue:

  • Esistono nuove API Intl per darti un maggiore controllo durante la formattazione dei numeri.
  • È disponibile una prova dell'origine per l'API Pop-up per mostrare facilmente all'utente contenuti critici.
  • Stiamo aggiungendo alcune funzionalità CSS per migliorare l'interoperabilità.
  • E c'è molto altro.

Sono Pete LePage e Adriana Jara. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 106.

Nuove API internazionali

Le API Intl consentono di visualizzare i contenuti in un formato localizzato.

Come per le altre API Intl, il carico viene trasferito al sistema, quindi non è necessario inviare o gestire codice di localizzazione complesso per ogni utente.

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

Chrome 106 aggiunge una serie di nuove funzionalità di 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? formatRange ha quello che fa per te.

Crea un nuovo oggetto numberFormat, fornisci il valore style e altre opzioni, nonché il numero di cifre da mostrare.

Quindi, chiama formatRange() per ottenere 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 di cinque più vicino 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 chiedere al browser di includere i 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 relativa a Int.NumberFormat su MDN.

L'API Pop-Up semplifica notevolmente la creazione di UI, per le volte in cui devi semplicemente mettere le informazioni davanti all'utente.

L'attributo popup sposta automaticamente l'elemento nel livello superiore del sito e fornisce controlli semplici per attivare/disattivare la visibilità. Non dovrai più preoccuparti di posizionamento, impilamento degli elementi, stato attivo o interazioni con la tastiera. Il bello è che non richiede JavaScript.

Con solo il seguente snippet, l'API si occupa di eseguire il rendering dell'elemento sopra tutti gli altri contenuti, nonché di gestire l'input dell'utente e la gestione dell'attenzione.

<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 controllo completo sullo stile,sul posizionamento e sulle dimensioni del livello superiore, ma anche la flessibilità di modificare i comportamenti predefiniti. Utilizza solo CSS e HTML.

Dai un'occhiata all'articolo di Jhey per altri esempi e opzioni per le API.

Registrati alla prova dell'origine per fornire facilmente ai tuoi utenti informazioni tempestive. Facci conoscere le tue impressioni.

Nuove funzionalità CSS

Esistono due nuove funzionalità CSS che migliorano l'interoperabilità e, si spera, semplificano la vita.

È arrivata una nuova unità di misura della lunghezza: ic si unisce al gruppo. ic è simile a ch. Tuttavia, ic viene utilizzato specificamente per il testo scritto in lingue che utilizzano ideogrammi. In pratica, misura la lunghezza in base alla larghezza o all'altezza di questo carattere [indica un punto] che significa acqua.

Si tratta di un'unità progettata per regolare le dimensioni del testo, che consente di limitare la larghezza per migliorare la leggibilità e offre un controllo prevedibile indipendentemente dalle dimensioni del testo.

Ad esempio, se imposti max-width di un contenitore, ad esempio su 10 ic, sai che il contenitore conterrà al massimo 10 glifi a larghezza intera, indipendentemente dal font-size. Dai un'occhiata all'esempio seguente:

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

E tanto altro.

Ovviamente ce ne sono molti altri.

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

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 106.

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 Adriana Jara e, non appena verrà rilasciata la versione 107 di Chrome, sarò qui per dirti quali sono le novità.