Novedades de Chrome 74

Pete LePage

En Chrome 74, agregamos compatibilidad con lo siguiente:

¡Y hay mucho más!

Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 74.

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 74.

Campos de clase privada

Los campos de clase simplifican la sintaxis de la clase, ya que evitan la necesidad de funciones de constructor solo para definir propiedades de instancias. En Chrome 72, agregamos la 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 clase privados estaban en proceso. Me complace informar que los campos de clase privados llegaron a Chrome 74. La nueva sintaxis de campos privados es similar a la de los campos públicos, excepto que marcas el campo como privado con un # (signo numeral). Considera que # forma 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 eso, privados. Se puede acceder a ellas dentro de la clase, pero no están disponibles fuera de su cuerpo.

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

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

prefers-reduced-motion

Algunos usuarios informaron que sienten mareos cuando ven el desplazamiento de paralaje, el zoom y otros efectos de movimiento. Para abordar este problema, muchos sistemas operativos proporcionan una opción para reducir el movimiento siempre que sea posible.

Chrome ahora proporciona una consulta de contenido multimedia, prefers-reduced-motion, que forma parte de la especificación de nivel 5 de las consultas de contenido multimedia, que te permite detectar cuándo se activa 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 movimiento leve. 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 quizás no, si el usuario prefiere reducir el movimiento. para obtener más detalles.

Eventos transition de CSS

La especificación de transiciones de CSS requiere que se envíen eventos de transición cuando se pone en cola, se inicia, finaliza o se cancela una transición. Hace tiempo que otros navegadores admitían estos eventos...

Sin embargo, hasta ahora, no se admitían en Chrome. En Chrome 74, ahora puedes detectar lo siguiente:

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

Cuando se detectan estos eventos, es posible hacer un seguimiento del comportamiento o cambiarlo cuando se ejecuta una transición.

Actualizaciones de la API de la política de atributos

Las políticas de funciones te permiten habilitar, inhabilitar y modificar de forma selectiva el comportamiento de las APIs y otras funciones web. Esto se hace a través del encabezado Feature-Policy o del atributo allow 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 componente 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 especificada 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, por supuesto, hay muchos más. En lo personal, estoy bastante entusiasmado con KV Storage, un servicio de almacenamiento clave-valor súper rápido y asíncrono, que está disponible como una prueba de origen.

Google I/O se acerca.

Recuerda que solo faltan unas 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 estarán disponibles posteriormente en nuestro canal de YouTube de Chrome Developers.

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete a nuestro canal de YouTube para desarrolladores de Chrome 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 75, estaré aquí para decirte: ¡Novedades de Chrome!