Novedades de Chrome 71

En Chrome 71, agregamos compatibilidad con lo siguiente:

Además, hay mucho más.

Soy Pete LePage. Veamos las novedades para desarrolladores de Chrome 71.

Registro de cambios

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

Muestra horarios relativos con Intl.RelativeTimeFormat()

Twitter muestra el tiempo relativo de la última publicación

Muchas apps web usan frases como "ayer", "en dos días" o "hace una hora" para indicar cuándo ocurrió algo, o va a suceder, en lugar de mostrar la fecha y la hora completas.

Mostrar horas relativas se volvió tan común que la mayoría de las bibliotecas de fecha y hora comunes proporcionan funciones localizadas para manejar esto. De hecho, Moment JS, casi todas las apps web que creo, es una de las primeras bibliotecas que agrego, expresamente para este propósito.

Chrome 71 presenta Intl.RelativeTimeFormat(), que traslada el trabajo al motor de JavaScript y habilita el formato localizado de tiempos relativos. Esto nos da un pequeño aumento en el rendimiento y significa que solo necesitamos esas bibliotecas como polyfills cuando un navegador no admite las APIs nuevas aún.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Es sencillo, crea una instancia nueva y especifica la configuración regional; luego, solo debes llamar al formato con la hora relativa. Consulta la publicación The Intl.RelativeTimeFormat API de Mathias para obtener todos los detalles.

Cómo especificar la ubicación para el subrayado del texto vertical

Texto vertical con subrayados incoherentes

Cuando se muestra texto en chino o japonés en un flujo vertical, los navegadores no son coherentes con el lugar donde se coloca el subrayado; puede estar a la izquierda o a la derecha.

En Chrome 71, la propiedad text-underline-position ahora acepta left o right como parte de la especificación de decoración de texto CSS3. La especificación de decoración de texto CSS3 agrega varias propiedades nuevas que permiten especificar aspectos como el tipo de línea que se usará, el estilo, el color y la posición.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

La síntesis de voz requiere la activación del usuario

Todos nos sorprendimos cuando llegamos a un sitio y de repente comienza a hablarnos. Las políticas de reproducción automática impiden que los sitios reproduzcan automáticamente archivos de audio o video con audio. Algunos sitios intentaron evitar esto con la API de síntesis de voz.

A partir de Chrome 71, la API de síntesis de voz ahora requiere algún tipo de activación del usuario en la página para funcionar. Esto lo alinea con otras políticas de reproducción automática. Si intentas usarla antes de que el usuario haya interactuado con la página, se activará un error.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

No hay nada peor que visitar un sitio y hacer que te sorprenda, así como a tus compañeros de trabajo sentados a tu alrededor.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 71 para desarrolladores; por supuesto, hay mucho más.

Videos de Chrome Dev Summit

Si no asististe a la Chrome Dev Summit de 2018, o tal vez sí lo hiciste, pero no viste todas las charlas, consulta la lista de reproducción de Chrome Dev Summit 2018 en nuestro canal de YouTube.

Eva y Phil entraron en algunas técnicas interesantes para usar service workers en Cómo compilar apps más rápidas y resistentes con Service Workers.

Mariko y Jake hablaron sobre cómo diseñan Squoosh en Compplex JS Web Apps, evitando la lentitud.

Katie y Houssein cubrieron algunas técnicas excelentes para maximizar el rendimiento de tu sitio en Aspectos básicos de la velocidad: Técnicas clave para sitios web rápidos.

Jake dejó de lado el pastel. Además, hay muchos otros videos geniales en la lista de reproducción de Chrome Dev Summit 2018, así que revísalos.

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete a nuestro canal de YouTube para desarrolladores de Chrome. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y apenas se lance Chrome 72, estaré aquí para contarte las novedades de Chrome.