Novedades de Chrome 74

En Chrome 74, agregamos compatibilidad para lo siguiente:

Además, hay mucho más.

Soy Pete LePage. ¡Profundicemos y veamos las novedades para los desarrolladores en Chrome 74!

Registro de cambios

Esto solo abarca algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para conocer cambios adicionales en Chrome 74.

Campos de clase privada

Los campos de clase simplifican la sintaxis de clase, ya que evitan la necesidad de funciones de constructor solo para definir las propiedades de la instancia. En Chrome 72, agregamos compatibilidad con los campos de clase pública.

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

Y dije que los campos de clases privadas estaban en proceso. Me complace decir que los campos de clase privada llegaron a Chrome 74. La nueva sintaxis de los campos privados es similar a la de los campos públicos, excepto que marcas el campo como privado con un # (signo numeral). Piensa en # como parte del nombre del campo.

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

Recuerda que los campos private son solo privados. Se puede acceder a ellas dentro de la clase, pero no está disponible fuera de su cuerpo.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

Para leer más sobre las clases públicas y privadas, consulta la publicación de Mathias sobre los campos de clase.

prefers-reduced-motion

Algunos usuarios informaron que se marea por el movimiento cuando miran el desplazamiento con paralaje, el zoom y otros efectos de movimiento. Para solucionar este problema, muchos sistemas operativos ofrecen una opción de reducir el movimiento siempre que sea posible.

Chrome ahora proporciona una consulta de medios, prefers-reduced-motion, que forma parte de la especificación de consultas de medios de nivel 5, que te permite detectar cuándo está activada esta opción.


@media (prefers-reduced-motion: reduce)

Imagina que tengo un botón de registro que llama la atención hacia sí mismo con un leve movimiento. La nueva consulta me permite desactivar el movimiento solo para el botón.

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

Consulta el artículo de Tom: Move Ya! O tal vez no lo hagas, si el usuario prefiere el ajuste de movimiento. para obtener más información.

Eventos transition del CSS

La especificación de transiciones de CSS requiere que los eventos de transición se envíen cuando una transición se pone en cola, se inicia, finaliza o se cancela. Estos eventos se admiten en otros navegadores desde hace tiempo...

Sin embargo, hasta ahora, no eran compatibles con Chrome. En Chrome 74, ahora se puede escuchar:

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

Cuando se escuchan estos eventos, es posible hacer un seguimiento o cambiar el comportamiento cuando se ejecuta una transición.

Actualizaciones de la API de política de funciones

Las políticas de funciones te permiten habilitar, inhabilitar y modificar selectivamente el comportamiento de las APIs y otras funciones web. Para ello, se puede utilizar el encabezado "Política de funciones" o el atributo "permitir" en un iframe.

Feature-Policy: geolocation 'self'
<iframe ... allow="geolocation self">
</iframe>

Chrome 74 presenta un nuevo conjunto de APIs para verificar qué funciones están habilitadas:

  • Puedes obtener una lista de las funciones permitidas con document.featurePolicy.allowedFeatures().
  • Puedes verificar si se permite un atributo específico con document.featurePolicy.allowsFeature(...).
  • Además, puedes obtener una lista de los dominios que se usan en la página actual y que permiten una función específica con document.featurePolicy.getAllowlistForFeature().

Consulta la entrada de Introducción a la política de funciones para obtener más detalles.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 74 para desarrolladores y, por supuesto, hay muchos más. En mi opinión, me entusiasma mucho KV Storage, un servicio de almacenamiento de clave-valor superrápido, asíncrono, disponible como prueba de origen.

¡Google I/O llegará pronto!

Recuerda que faltan solo algunas semanas para Google I/O (del 7 al 9 de mayo) y tendremos muchas novedades geniales para ti. Si no puedes asistir, todas las sesiones se transmitirán en vivo y, posteriormente, estarán disponibles en nuestro canal de YouTube para Chrome Developers.

Suscribirse

Si quieres mantenerte al día con nuestros videos, 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 Pete LePage, y en cuanto se lance Chrome 75, estaré aquí para contarles las novedades de Chrome.