Novedades de Chrome 112

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Analicémoslas y veamos las novedades para desarrolladores en Chrome 112.

Compatibilidad con CSS para la anidación.

Una de nuestras funciones favoritas del preprocesador de CSS ahora está integrada en el lenguaje: anidar reglas de estilo.

Antes de anidar, cada selector debía declararse de forma explícita, independientemente entre sí. Esto genera repetición, acciones masivas de hojas de estilo y una experiencia de creación dispersa.

Antes
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Después de anidar los selectores, se pueden continuar y se pueden agrupar las reglas de estilo relacionadas.

Después
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

La anidación ayuda a los desarrolladores, ya que reduce la necesidad de repetir selectores, a la vez que coubica las reglas de estilo para los elementos relacionados. También puede ayudar a que los estilos coincidan con el HTML al que se segmentan.

Si el componente .nesting del ejemplo se quitó del proyecto, podrías borrar todo el grupo en lugar de buscar en los archivos las instancias del selector relacionadas.

El período de prueba puede ayudar con lo siguiente:

  • Organización.
  • Reduce el tamaño del archivo.
  • Refactorización.

Consulta este artículo para obtener sugerencias que te permitirán aprovechar al máximo el anidamiento de CSS. Aquí encontrarás la compatibilidad con la anidación en Herramientas para desarrolladores.

Actualización del algoritmo para el enfoque inicial de <dialog>.

El elemento HTML <dialog> es la forma estandarizada de representar un cuadro de diálogo o algún otro componente interactivo, como una alerta descartable o una ventana secundaria, que debe mostrarse sobre todo el contenido de una página web.

Se recomienda usar este elemento HTML para crear este tipo de contenido, ya que sus funciones se crearon para proporcionar usabilidad y accesibilidad mejores y coherentes.

Una de esas funciones es controlar qué elemento se enfoca cuando se abre el diálogo. En esta versión, se actualizó el algoritmo que selecciona ese elemento.

A partir de ahora:

Los pasos de enfoque del diálogo miran los elementos enfocables del teclado en lugar de cualquier elemento enfocable. El elemento <dialog> obtiene el foco si tiene configurado el atributo de enfoque automático.

El elemento <dialog> en sí recibe el foco como un resguardo en lugar de que el enfoque se "restablezca" en el elemento <body>.

Consulta la documentación para obtener más detalles sobre el elemento <dialog>.

Se omiten los controladores de recuperación no-op del service worker.

A partir de Chrome 112, se omitirán el inicio del service worker y el despacho del objeto de escucha desde la ruta crítica de navegación si un usuario-agente identifica que todos los objetos de escucha de la recuperación del service worker son no-ops.

Esta función agiliza la navegación por esas páginas.

Tener el controlador de recuperación fue uno de los requisitos de AWP para que una aplicación web fuera instalable. Sospechamos que esa podría ser la razón por la que algunos sitios tienen esencialmente un controlador de recuperación vacío. Sin embargo, iniciar un service worker y ejecutar un objeto de escucha no-op solo genera sobrecarga, sin traer consigo ninguno de los beneficios que se podrían implementar con el service worker correcto, como el almacenamiento en caché o las capacidades sin conexión. Por lo tanto, Chrome ahora las omite para mejorar la navegación.

Como parte de este cambio, Chrome mostrará advertencias de la consola si todos los objetos de escucha de la recuperación del service worker son no-ops y alentará a los desarrolladores a quitar esos objetos de escucha de la recuperación.

Advertencias en Herramientas para desarrolladores sobre controladores de recuperación de service workers vacíos.

Y mucho más.

Por supuesto que hay mucho más.

  • El método set para document.domain dejó de estar disponible.
  • Hay una prueba de origen para la baja de X-Requested-With header en WebView
  • La grabadora de Herramientas para desarrolladores ahora puede grabar con selectores de pasos.

Lecturas adicionales

Esto abarca solo algunos aspectos destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 112.

Suscribirse

Para mantenerte al día, 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 Adriana Jara, y apenas se lance Chrome 113, estaré aquí para contarte las novedades de Chrome.