- Chrome 62 hace que la API de información de red sea más útil, ya que proporciona métricas de rendimiento reales en lugar de resultados teóricos.
- Se agregó compatibilidad con las fuentes variables de OpenType.
- Puedes capturar transmisiones de contenido multimedia de elementos multimedia HTML.
- Tengo un recordatorio especial sobre un cambio importante que se realizará en Chrome 62.
¡Y hay mucho más!
Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 62.
¿Quieres ver la lista completa de cambios? Consulta la lista de cambios del repositorio de código fuente de Chromium.
Indicador de calidad de la red
La API de Network Information está disponible en Chrome desde hace un tiempo, pero solo proporciona velocidades de red teóricas según la conexión del usuario. Imagina que estás conectado a una red Wi-Fi, pero a un hotspot celular que solo tiene velocidades 2G. La API informará sobre la conexión Wi-Fi.
console.log(navigator.connection.type);
> wifi
En Chrome 62, se expandió la API para proporcionar métricas reales del rendimiento de la red desde el cliente. Con estos indicadores de calidad de la red, puedes adaptar el contenido a la red. Por ejemplo, en conexiones muy lentas, puedes mejorar el rendimiento de carga de la página si publicas una versión reducida.
Para simplificar la lógica de tu aplicación, la API muestra el rendimiento medido de la red en términos de cómo se compararía con una conexión celular. Por ejemplo, si se conecta a una conexión de fibra superrápida, la API informará 4G.
console.log(navigator.connection.effectiveType);
> 4G
Estos indicadores también estarán disponibles como encabezados de solicitud HTTP y se habilitarán a través de las sugerencias del cliente. Consulta la muestra y la especificación para obtener más información.
Fuentes variables OpenType
Tradicionalmente, una fuente solo contenía una instancia de una familia de fuentes, por ejemplo, un grosor o un estiramiento. Si quieres usar fuentes normales, en negrita y en cursiva, deberás incluir tres fuentes separadas, lo que aumentará el peso de la página.
Una fuente variable OpenType es el equivalente de varias fuentes individuales que se pueden empaquetar de forma compacta en un solo archivo de fuente. Si se ajusta la propiedad de CSS font-variation-settings, la estiramiento, el estilo, el peso y mucho más se pueden ajustar fácilmente, lo que proporciona una cantidad infinita de variaciones estilísticas. Esas tres fuentes ahora se pueden combinar en un solo archivo compacto.
.heading {
font-family: "Avenir Next Variable";
font-size: 48px;
font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
font-family: "Avenir Next Variable";
font-size: 24px;
font-variation-settings: 'wght' 400;
}
Las fuentes variables de OpenType nos brindan una nueva herramienta potente para crear tipografía responsiva y reducir el peso de la página. Consulta Presentamos las fuentes variables OpenType de John Hudson para obtener más detalles.
Captura de contenido multimedia de elementos DOM
Ahora puedes capturar contenido en vivo en un MediaStream directamente desde HTMLMediaElements, como audio y video, con la API de Media Capture from DOM Elements.
Después de invocar captureStream() en un elemento multimedia HTML, el contenido transmitido se puede manipular, procesar, enviar de forma remota o grabar. Imagina usar audio web para crear tu propio ecualizador o vocoder. O bien, transmite el contenido a un sitio remoto con WebRTC. Las posibilidades son casi infinitas.
Etiquetas no seguras para algunas páginas HTTP
Como anunciamos anteriormente, a partir de Chrome 62, cuando un usuario ingrese datos en una página HTTP, Chrome marcará la página como "No segura" con una etiqueta en la barra de direcciones. Esta etiqueta también se mostrará en el modo Incógnito para todas las páginas HTTP.
Y mucho más.
Estos son solo algunos de los cambios en Chrome 62 para desarrolladores, por supuesto, hay muchos más.
- La API de Payment Request ahora está disponible en Chrome para iOS.
- Puedes comenzar a crear experiencias de VR enriquecidas experimentales con la prueba de origen de WebVR.
Luego, suscríbete a nuestro canal de YouTube 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 63, estaré aquí para contarte las novedades.