Novedades de Chrome 62

Además, hay mucho más.

Soy Pete LePage. Veamos 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 red

La API de Network Information está disponible en Chrome durante un tiempo, pero solo proporciona velocidades de red teóricas según la conexión del usuario. Imagina que estás en Wi-Fi, pero conectado a un hotspot móvil que solo tiene velocidades 2G. La API informaría la conexión Wi-Fi.

console.log(navigator.connection.type);
> wifi

En Chrome 62, se amplió la API para proporcionar métricas de rendimiento de red reales del cliente. Con estos indicadores de calidad de la red, puedes adaptar el contenido a la red. Por ejemplo, en conexiones muy lentas, podrías mejorar el rendimiento de carga de la página si entregas una versión reducida.

Para simplificar la lógica de la aplicación, la API muestra el rendimiento medido de la red en términos de cómo se compararía con una conexión móvil. Por ejemplo, si se conecta a una conexión de fibra óptica ultrarrá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 Client Hints. Revisa el ejemplo y revisa las spec para obtener información más detallada.

Fuentes variables de OpenType

Tradicionalmente, una fuente contenía solo una instancia de una familia de fuentes, por ejemplo, un grosor o un estiramiento. Si deseas regular, negrita y cursiva, debes incluir tres fuentes separadas, lo que aumentará el grosor de tu página.

Una fuente variable OpenType es el equivalente a varias fuentes individuales que se pueden empaquetar de forma compacta en un solo archivo de fuente. Cuando se ajusta la propiedad CSS font-variation-settings, el estiramiento, el estilo, el peso y mucho más se pueden ajustar con facilidad, 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 OpenType nos proporcionan una herramienta nueva y potente para crear una tipografía responsiva y reducir el peso de nuestra página. Consulta Introducing OpenType Variable Fonts, de John Hudson, para obtener más detalles.

Captura de contenido multimedia desde elementos del DOM

Ahora puedes capturar en vivo contenido en un MediaStream directamente desde HTMLMediaElements, como audio y video, con la API de Media Capture de DOM Elements.

Después de invocar a captureStream() en un elemento multimedia HTML, el contenido transmitido se puede manipular, procesar, enviar de forma remota o grabar. Imagina que usas audio web para crear tu propio ecualizador o vocoder. También puedes transmitir el contenido a un sitio remoto mediante 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 mucho más.

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 apenas se lance Chrome 63, estaré aquí para contarte las novedades de Chrome.