Tenga en cuenta lo siguiente:
- CSS ahora admite reglas de anidación.
- Se actualizó el algoritmo para establecer el enfoque inicial en los elementos
<dialog>
. - A partir de ahora, los controladores
fetch()
no operativos en service workers se omiten para agilizar las navegaciones. - Hay mucho más
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.
.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.
.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.
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.
- Novedades de las Herramientas para desarrolladores de Chrome (112)
- Bajas y eliminaciones de Chrome 112
- Actualizaciones de ChromeStatus.com para Chrome 112
- Lista de cambios del repositorio de código fuente de Chromium
- Calendario de lanzamientos de Chrome
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.