En Chrome 74, agregamos compatibilidad para lo siguiente:
- Ahora, la creación de campos de clase privada en JavaScript es mucho más sencilla.
- Puedes detectar cuándo el usuario solicitó una experiencia de experiencia de movimiento reducido.
- Eventos de transición de CSS
- Agrega nuevas APIs de política de funciones para verificar si las funciones están habilitadas o no.
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.
- Novedades de las Herramientas para desarrolladores de Chrome (74)
- Bajas y eliminaciones de Chrome 74
- Actualizaciones de ChromeStatus.com para Chrome 74
- Novedades de JavaScript en Chrome 74
- Lista de cambios del repositorio de código fuente de Chromium
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.