Novedades de Chrome 105

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage. Veamos las novedades para desarrolladores en Chrome 105.

Consultas de contenedores y la propiedad :has() de CSS

Las consultas de contenedores, una de las funciones más solicitadas, llegan a Chrome 105. Permiten que los desarrolladores consulten un selector superior para obtener información sobre el tamaño y el estilo, lo que permite que un elemento secundario posea su lógica de diseño responsivo, sin importar dónde se encuentre en la página.

Son similares a una consulta @media, excepto que se evalúan según el tamaño de un contenedor en lugar del tamaño del viewport.

Consulta de contenedor frente a consulta de medios.

Para usar consultas de contenedores, debes establecer la contención en un elemento superior. Por ejemplo, podrías tener una tarjeta con una imagen y algo de texto.

Tarjeta única de dos columnas.

Para crear una consulta de contenedor, configura container-type en el contenedor de tarjetas. Si configuras container-type como inline-size, se consulta el tamaño inline-direction del elemento superior.

.card-container {
  container-type: inline-size;
}

Ahora, podemos usar ese contenedor para aplicar diseños a cualquiera de sus elementos secundarios con @container.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

En este caso, cuando el contenedor sea inferior a 400 px, cambiará a un diseño de una sola columna.

Pseudoclase :has() de CSS

Podemos llevar esto un paso más allá con la seudoclase :has() de CSS. Te permite verificar si un elemento superior contiene elementos secundarios con parámetros específicos.

Por ejemplo, p:has(span) indica un selector de párrafo con un intervalo dentro de él. Puedes usar esto para definir el diseño del párrafo superior o cualquier elemento dentro de él. También puedes usar figure:has(figcaption) para aplicar diseño a un elemento de una figura que contenga una leyenda.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Consulta el artículo de Una: @container and :has(): dos potentes APIs responsivas para obtener una explicación más detallada y algunas demostraciones divertidas.

API de Sanitizer

La mayoría de las apps web suelen tratar con cadenas que no son de confianza, pero renderizar ese contenido de manera segura puede ser complicado. Si no se tiene suficiente cuidado, es fácil crear, por accidente, oportunidades de vulnerabilidades de secuencias de comandos entre sitios.

Existen bibliotecas como DomPurify que ayudan, pero agregan una pequeña carga de mantenimiento. La API de HTML Sanitizer ayuda a reducir la cantidad de vulnerabilidades de secuencias de comandos entre sitios mediante la compilación de limpieza en la plataforma.

Para usarlo, crea una instancia nueva de Sanitizer. Luego, llama a setHTML() en el elemento en el que deseas insertar el contenido depurado.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

La API de Sanitizer está diseñada para ser segura de forma predeterminada y personalizable, lo que te permite especificar diferentes opciones de configuración, por ejemplo, descartar ciertos elementos o permitir otros.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Para obtener más información, consulta Manipulación segura del DOM con la API de Sanitizer.

Web SQL da de baja para contextos no seguros

Hace algún tiempo, anunciamos nuestros planes de dar de baja Web SQL. A partir de Chrome 105, Web SQL dejará de estar disponible en contextos no seguros.

Si usas Web SQL en contextos no seguros, debes migrar a IndexDB o a otro contenedor de almacenamiento local lo antes posible.

Y mucho más.

Por supuesto que hay mucho más.

  • Ahora puedes actualizar el manifiesto de la app web para actualizar el nombre de una AWP instalada en computadoras y dispositivos móviles.
  • La API de posición de ventana multipantalla obtiene etiquetas de nombres de pantalla precisas.
  • Ya está disponible la API de superposición de controles de ventana. Permite que las AWP brinden una apariencia más similar a la de la app, ya que cambian la barra de título de ancho completo existente por una superposición pequeña. De esta manera, puedes colocar contenido personalizado en el área de la barra de título.

Lecturas adicionales

Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 105.

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 Pete LePage, y en cuanto se lance Chrome 106, estaremos aquí para contarte las novedades de Chrome.