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 internacionales, esto traslada la carga al sistema, por lo que no es necesario enviar ni mantener código de localización complejo a cada usuario.

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.

Solo con el siguiente fragmento, la API se encarga de renderizar el elemento sobre todo el resto del contenido, y controla las entradas del usuario y la administración del 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 ver más ejemplos y opciones de API.

Regístrate en la prueba de origen para brindar información oportuna a los usuarios de manera sencilla. 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. Pero ic se usa específicamente para texto escrito en idiomas que usan ideogramas. Básicamente, mide la longitud en función del ancho o la altura de este carácter [apunta en 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. Revísalo en el siguiente ejemplo:

Se lanzará la compatibilidad de CSS Grid con la interpolación para grid-template-columns y grid-template-rows. 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 el código de Bramus como ejemplo:

.

Y mucho más.

Por supuesto, hay mucho más.

  • Iniciamos la fase cinco del plan de reducción de usuarios-agentes.
  • La compatibilidad con el envío HTTP2 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.