Novedades de Chrome 112

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Analicémoslo 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: las reglas de estilo de anidamiento.

Antes de anidar, cada selector debía declararse explícitamente, independientemente del entre sí. Esto conduce a la repetición, la creación masiva de hojas de estilo y la creación dispersa. una experiencia fluida a los desarrolladores.

Antes
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Después de anidar, los selectores se pueden y las reglas de estilo relacionadas con él pueden agruparse.

Después
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

El Nesting ayuda a los desarrolladores, ya que reduce la necesidad de repetir selectores, a la vez que ubica en conjunto las reglas de estilo para los elementos relacionados. También puede ayudar a que los estilos coincidan con el código HTML al que se orientan.

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

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

  • Organización.
  • Reduciendo 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 el resto del contenido de una página web.

Este elemento HTML es la forma recomendada de crear este tipo de contenido porque sus funciones se crearon para proporcionar una usabilidad y accesibilidad mejores y coherentes.

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

A partir de ahora:

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

El elemento <dialog> recibe el enfoque como resguardo en lugar de que se "restablezca" el enfoque. al elemento <body>.

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

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

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

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

Tener el controlador de recuperación era uno de los requisitos de la AWP para poder instalar una aplicación web. Sospechamos que esa podría ser la razón por la que algunos sitios tienen básicamente 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 ofrecer ninguno de los beneficios que podrían implementarse con el service worker adecuado, como el almacenamiento en caché o las capacidades sin conexión. Así que Chrome ahora los omite para mejorar la navegación.

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

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

Y mucho más.

Por supuesto, 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 perímetro.

Lecturas adicionales

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

Suscribirse

Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers, y 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.