En Chrome 71, agregamos compatibilidad con lo siguiente:
- La visualización de horas relativas ahora forma parte de la API de
Intl. - Especifica en qué lado del texto debe aparecer el subrayado para el texto que fluye verticalmente.
- Requiere la activación del usuario antes de usar la API de síntesis de voz.
¡Y hay mucho más!
Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 71.
Registro de cambios
Aquí se incluyen solo algunos de los aspectos más destacados. Consulta los vínculos que se indican a continuación para ver cambios adicionales en Chrome 71.
- Lista de cambios del repositorio de código fuente de Chromium
- Actualizaciones de ChromeStatus.com para Chrome 71
- Salidas de servicio y eliminaciones de Chrome 71
Cómo mostrar tiempos relativos con Intl.RelativeTimeFormat()
Muchas apps web usan frases como "ayer", "en dos días" o "hace una hora" para indicar cuándo sucedió algo o cuándo 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 comunes de fecha y hora proporcionan funciones localizadas para controlar esto por nosotros. De hecho, en casi todas las apps web que compilo, Moment JS es una de las primeras bibliotecas que agrego, expresamente para este propósito.
Chrome 71 presenta Intl.RelativeTimeFormat(), que transfiere el trabajo al motor de JavaScript y habilita el formato localizado de las horas relativas. Esto nos brinda un pequeño aumento de rendimiento y significa que solo necesitamos esas bibliotecas como un polyfill cuando un navegador aún no admite las APIs nuevas.
const rtf = new Intl.RelativeTimeFormat('en');
rtf.format(3.14, 'second');
// → 'in 3.14 seconds'
rtf.format(-15, 'minute');
// → '15 minutes ago'
Su uso es sencillo: crea una instancia nueva y especifica la configuración regional y, luego, llama al formato con la hora relativa. Consulta la publicación de Mathias sobre Intl.RelativeTimeFormat API para obtener todos los detalles.
Especifica la ubicación del subrayado para el texto vertical
Cuando el texto chino o japonés se muestra en un flujo vertical, los navegadores no son coherentes con la ubicación del subrayado, que 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 elementos 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
A todos nos sorprendió cuando llegamos a un sitio y, de repente, comenzó 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 usando 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 que funcione. Esto se alinea con otras políticas de reproducción automática. Si intentas usarlo antes de que el usuario interactúe con la página, se mostrará 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 ir a un sitio y que te sorprenda, y que los compañeros de trabajo estén sentados a tu alrededor.
Y mucho más.
Estos son solo algunos de los cambios en Chrome 71 para desarrolladores, por supuesto, hay muchos más.
- El método
Element.requestFullscreen()ahora se puede personalizar en Android y te permite elegir entre hacer que la barra de navegación sea visible o un modo completamente envolvente en el que no se muestran controles de usuario-agente hasta que se realiza un gesto del usuario. - El modo de credenciales predeterminado para las solicitudes de secuencia de comandos de módulo cambió de
omitasame-origin. - Además, Chrome 71 ahora calcula la especificidad de las pseudoclases
:host()y:host-context(), así como de los argumentos para::slotted(), lo que permite que Chrome esté alineado con las especificaciones de Shadow DOM v1.
Videos de Chrome DevSummit
Si no pudiste asistir a la Cumbre de desarrollo de Chrome o si lo hiciste, pero no viste todas las charlas, consulta la playlist de la Cumbre de desarrollo de Chrome 2018 en nuestro canal de YouTube.
Eva y Phil analizaron algunas técnicas interesantes para usar los trabajadores de servicio en Cómo compilar apps más rápidas y resilientes con trabajadores de servicio.
Mariko y Jake hablaron sobre cómo compilan Squoosh en Aplicaciones web complejas con mucho JS, evitando la lentitud.
Katie y Houssein analizaron algunas técnicas excelentes para maximizar el rendimiento de tu sitio en Speed Essentials: Key Techniques for Fast Websites.
Jake soltó el pastel. Además, hay muchos otros videos geniales en la playlist de Chrome DevSummit 2018, así que no te los pierdas.
Suscribirse
Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Desarrolladores de Chrome y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.
Soy Pete LePage y, en cuanto se lance Chrome 72, estaré aquí para contarte las novedades.