Novedades de Chrome 105

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage. Vamos a profundizar y conoce las novedades para desarrolladores de Chrome 105.

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

Container Query, una de las funciones más solicitadas Chrome 105. Permiten que los desarrolladores consulten un selector superior por su tamaño y información de estilo, lo que permite que un elemento secundario posea su propiedad lógica de diseño adaptable, sin importar en qué parte de la página se encuentre.

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

Comparación entre la consulta de contenedor y la consulta de medios

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

Tarjeta única de dos columnas.

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

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

Ahora, podemos usar ese contenedor para aplicar estilos a cualquiera de sus elementos secundarios usando @container

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

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

En este caso, cuando el contenedor tiene menos de 400 px, cambia a un de una sola columna.

Pseudoclase :has() de CSS

Podemos llevar esto un paso más allá con la seudoclase CSS :has(). Integra te permite comprobar si un elemento superior contiene elementos secundarios con parámetros.

Por ejemplo, p:has(span) indica un selector de párrafo con un intervalo dentro. de sus aspectos más emocionantes. Puedes usar esto para darle estilo al párrafo superior o cualquier otro elemento dentro de él. También puedes usar figure:has(figcaption) para aplicar diseño a un elemento de figura. que contiene una leyenda.

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

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

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

API de Sanitizer

La mayoría de las aplicaciones web con frecuencia tratan con cadenas que no son de confianza, pero renderizan eso de forma segura el contenido puede ser complicado. Sin el cuidado suficiente, es fácil accidentalmente crear oportunidades para vulnerabilidades de secuencia de comandos entre sitios.

Hay bibliotecas como DomPurify que ayudan, pero agrega una pequeña carga de mantenimiento. La API de HTML Sanitizer ayuda a reducir la cantidad de vulnerabilidades de secuencias de comandos entre sitios incorporando un servicio de limpieza en la plataforma.

Para usarla, crea una instancia nueva de Sanitizer. Luego, llama a setHTML() en la en el que quieras 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 de forma predeterminada y personalizable, lo que te permite especificar diferentes opciones de configuración, por ejemplo, descartar ciertos elementos, o permitiendo otros.

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

Consulta Manipulación segura del DOM con la API de Sanitizer para obtener más información.

Baja de Web SQL para contextos no seguros

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

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

Y mucho más.

Por supuesto, hay mucho más.

  • Ahora puedes actualizar el nombre de una AWP instalada en computadoras y dispositivos móviles actualizando el manifiesto de la app web.
  • La API de ubicación de ventana multipantalla obtiene etiquetas de nombres de pantalla precisas.
  • La API de superposición de controles de ventana ya está disponible. Permite que las AWP proporcionen un más similar a una app cambiando la barra de título de ancho completo existente por pequeña superposición. Esto te permite 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 cambios adicionales en Chrome 105.

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 Pete LePage, y apenas esté disponible Chrome 106, estaremos aquí para contarte las novedades de Chrome.