Novedades de Chrome 106

Pete LePage
Adriana Jara

Tenga en cuenta lo siguiente:

  • Hay nuevas APIs internacionales para brindarte más control cuando aplicas formato a los números.
  • Hay una prueba de origen para la API de Pop-up que facilita la visualización de contenido importante para el usuario.
  • Agregamos algunas funciones de CSS para mejorar la interoperabilidad.
  • Y hay mucho más.

Soy Pete LePage y Adriana Jara. Analicemos las novedades para desarrolladores en Chrome 106.

Nuevas APIs internacionales

Las APIs de Intl ayudan a mostrar contenido en un formato localizado.

Al igual que otras APIs de Intl, esto transfiere la carga al sistema, por lo que no es necesario enviar ni mantener un código de localización complejo para todos los usuarios.

La API sabe dónde va el símbolo de moneda, cómo dar formato a las fechas y horas, o compilar una lista.

Chrome 106 agrega una gran cantidad de funciones nuevas de formato de números.

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

¿Necesitas mostrar un rango de precios? formatRange tiene lo que necesitas.

Crea un nuevo objeto numberFormat, proporciona el style y otras opciones, y la cantidad de dígitos que se mostrarán.

Luego, llama a formatRange() para obtener la cadena con formato.

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"

¿Quieres redondear un número al incremento de cinco más cercano con una precisión de dos decimales? No hay problema.

Especifica minimumFractionDigits y roundingIncrement y, luego, llama a 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%"

Incluso puedes indicarle al navegador que incluya ceros finales con trailingZeroDisplay, lo que es muy útil para los precios.

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%

Consulta las documentaciones sobre el formato de número internacional en MDN para obtener más información.

La API de Pop-Up facilita mucho la compilación de IUs, para esos momentos en los que solo necesitas colocar información frente al usuario.

El atributo popup lleva automáticamente el elemento a la capa superior del sitio y proporciona controles fáciles para activar o desactivar la visibilidad. Ya no tendrás que preocuparte por el posicionamiento, la apilación de elementos, el enfoque ni las interacciones del teclado. Lo mejor de todo es que no requiere JavaScript.

Con solo el siguiente fragmento, la API se encarga de renderizar el elemento sobre todo el resto del contenido, controlar las entradas del usuario y administrar el enfoque.

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

De forma predeterminada, los usuarios pueden cerrar la ventana emergente con gestos como la tecla Esc o haciendo clic en otros elementos.

Además, los desarrolladores tienen control total sobre el estilo, la posición y el tamaño de la capa superior, así como la flexibilidad para modificar los comportamientos predeterminados. Solo con CSS y HTML

Consulta el artículo de Jhey para obtener más ejemplos y opciones de API.

Regístrate en la prueba de origen para brindarles a tus usuarios información oportuna con facilidad. Danos tu opinión.

Nuevas funciones de CSS

Hay dos funciones nuevas de CSS que mejoran la interoperabilidad y, con suerte, te facilitan la vida.

Hay una nueva unidad de longitud en la ciudad: ic se une a la fiesta. ic es similar a ch. Sin embargo, ic se usa específicamente para el texto escrito en idiomas que usan ideogramas. Básicamente, mide la longitud en función del ancho o la altura de este carácter [señalar a algún lugar] que significa agua.

Es una unidad diseñada para ajustar el tamaño del texto, lo que te permite limitar el ancho para mejorar la legibilidad y proporciona un control predecible independientemente del tamaño del texto.

Por ejemplo, si configuras el max-width de un contenedor, digamos en 10ic, sabes que ese contenedor contendrá como máximo 10 glifos de ancho completo, independientemente del tamaño de la fuente. Compruébalo en el siguiente ejemplo:

La compatibilidad de CSS Grid con la interpolación para grid-template-columns y grid-template-rows está por llegar. Estaba prevista para la versión 106, pero se retrasó y se lanzará en Chrome 107. Puedes probarla en Chrome beta. A continuación, se muestra un ejemplo del código de Bramus:

.

Y mucho más.

Por supuesto, hay mucho más.

  • Comenzamos la fase cinco del plan de reducción de usuario-agente.
  • La compatibilidad con HTTP2 Push y el tipo de cuota persistente dejarán de estar disponibles.
  • Además, la propiedad CSS hyphenate-character ahora está disponible sin prefijo.

Lecturas adicionales

Esto solo abarca algunos aspectos clave. Consulta los vínculos que aparecen a continuación para ver los cambios adicionales en Chrome 106.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Adriana Jara y, en cuanto se lance Chrome 107, estaré aquí para contarte las novedades.