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.

Mi chiamo Pete LePage e io sono Adriana Jara. Vediamo quali sono le novità di Chrome 106 per gli sviluppatori.

Nuove API internazionali

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

Come per le altre API Intl, questa operazione trasferisce l'onere al sistema, così non è necessario distribuire o gestire un codice di localizzazione complesso per ogni utente.

L'API sa dove va il simbolo della valuta, come formattare date e orari o come 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 pieno controllo sullo stile,sul posizionamento e sulle dimensioni del livello superiore, ma anche sulla possibilità 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 agli utenti informazioni tempestive. Facci conoscere le tue impressioni.

Nuove funzionalità CSS

Ci sono due nuove funzionalità CSS che migliorano l'interoperabilità e, possibilmente, ti 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 il push HTTP2 e il tipo di quota permanente saranno ritirati.
  • Inoltre, la proprietà CSS hyphenate-character è ora disponibile senza prefisso.

Per approfondire

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

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.

Mi chiamo Adriana Jara e non appena verrà rilasciato Chrome 107 saranno qui per farti conoscere le novità di Chrome.