Novedades de Chrome 106

Pete LePage
Adriana Jara

Tenga en cuenta lo siguiente:

Me llamo Pete LePage y soy Adriana Jara. Veamos las novedades para desarrolladores en Chrome 106.

Nuevas APIs internacionales

Las APIs internacionales ayudan a mostrar contenido en un formato localizado.

Al igual que otras APIs internacionales, esto traslada la carga al sistema, de modo que no tienes que enviar ni mantener un código de localización complejo para cada usuario.

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

Chrome 106 incorpora una gran variedad de funciones nuevas para el formato de número.

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 intervalo de precios? formatRange tiene lo que necesitas.

Crea un objeto numberFormat nuevo, proporciona la style, 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 el minimumFractionDigits y el 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%

Para obtener más información, consulta los documentos de formato de número internacional en MDN.

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

El atributo popup lleva automáticamente el elemento a la capa superior del sitio y proporciona controles sencillos para activar o desactivar la visibilidad. Ya no tendrás que preocuparte por la posición, el apilamiento 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 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, pero también la flexibilidad para modificar los comportamientos predeterminados. Usar solo 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 a los usuarios información oportuna de forma sencilla. Danos tu opinión.

Nuevas funciones de CSS

Hay dos nuevas funciones de CSS que mejoran la interoperabilidad y esperamos que te faciliten un poco la vida.

Hay una nueva unidad de longitud en la ciudad: ic se unirá a la fiesta. ic es similar a ch. Sin embargo, ic se usa específicamente para texto escrito en idiomas que usan ideogramas. En pocas palabras, mide la longitud según el ancho o la altura de este carácter [apuntar en alguna parte], lo 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 sin importar el tamaño del texto.

Por ejemplo, si configuras el max-width de un contenedor, supongamos que en 10ic, sabes que el contenedor contendrá como máximo 10 glifos de ancho completo, sin importar el tamaño de la fuente. Consúltala en el siguiente ejemplo:

Pronto se admitirá la interpolación de grid-template-columns y grid-template-rows en la cuadrícula de CSS. Estaba prevista para la versión 106, pero se retrasó y se lanzará en Chrome 107. Aún puedes probarla en Chrome Beta. Este es el código de Bramus como ejemplo:

Y mucho más.

Por supuesto que hay mucho más.

  • Comenzamos la fase cinco del plan de reducción de usuarios-agentes.
  • La compatibilidad con el envío de HTTP2 y el tipo de cuota persistente dejarán de estar disponibles.
  • Y la propiedad hyphenate-character de CSS ahora está disponible sin prefijo.

Lecturas adicionales

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

Suscribirse

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

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