Hace unas semanas Google lanzó una nueva versión de su navegador: Chrome 105, que introduce mejoras y novedades para desarrolladores web, por lo que si eres uno de ellos, probablemente te interesa para tu página web profesional. Las nuevas consultas de contenedor y la nueva API Sanitizer, que hace un procesador más fuerte para cadenas arbitrarias y que ayudará a reducir vulnerabilidades, son las novedades más destacadas.
Consulta de contenedores y :has () propiedad CSS
Las consultas de contenedores llegan a Chome 105 para permitir a los desarrolladores obtener información de tamaño y estilo en un selector principal. De este modo, un elemento secundario será independiente de su lógica de estilo receptivo y dará igual dónde se encuentre en una página.
Son similares a una consulta de medios, pero en lugar del tamaño de la ventana gráfica, evalúan el tamaño del contenedor.
Para usar consultas de contenedores, deberemos indicar qué contiene el elemento principal. Por ejemplo, vamos a crear una tarjeta, con su correspondiente imagen, y un texto que la acompañe.
Configuraremos container-type en el contenedor de la tarjeta para crear su consulta. Seleccionamos container-type para inline-size y consultar el inline-direction.
.card-container {
container-type: inline-size;
}
Usando @container podremos aplicar estilos a cualquiera de sus elementos secundarios.
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 420px) {
.card {
grid-template-columns: 1fr;
}
}
En el ejemplo, si el contenedor es de menos de 420 px, se mostrará en solo una columna.
:has () propiedad CSS
Con la pseudo clase :has() podremos saber si un elemento principal dispone de elementos secundarios con parámetros específicos.
Por ejemplo, p:has(span) muestra un selector de párrafo con un lapso dentro. Esto nos permite diseñar el párrafo principal en sí mismo, o cualquier cosa dentro de él.
Para aplicar estilo a un elemento de figura que contiene un título, podemos utilizar también figure:has(figcaption).
p:has(span) {
/* magic styles */
}
figure:has(figcaption) {
/* this figure has a figcaption */
}
Podemos ver algunas demostraciones en su artículo «two powerful new responsive APIs landing in Chromium 105».
API Sanitizer
Muchas aplicaciones web tienen cadenas que no son de confianza, por lo que, si no disponemos de una buena seguridad, las vulnerabilidades de secuencias de comandos entre sitios podrían ser más frecuentes de lo que cabe imaginar.
Existen bibliotecas como DomPurify que pueden ayudar en esta labor, pero hay que mantenerlas. Por esa razón, la inclusión de la API de HTML Sanitizer en Chrome 105 es perfecta para reducir las vulnerabilidades de secuencias de comandos entre sitios y, además, desinfectar la plataforma.
Para utilizar esto debemos crear una nueva instancia de Sanitizer y después, llamar setHTML() al elemento en el que deseamos incluir el contenido desinfectado.
const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });
Por defecto, esta API está creada para ser segura y personalizable, permitiendo parametrizar diferentes opciones dentro de su configuración.
const config = {
allowElements: [],
blockElements: [],
dropElements: [],
allowAttributes: {},
dropAttributes: {},
allowCustomElements: true,
allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);
Mas información sobre la API de Sanitizer en su artículo Safe DOM manipulation with the Sanitizer API.
Otras novedades
Otras novedades de Chrome 105:
- Ya podemos actualizar el nombre de una PWA (aplicación web progresiva), tanto si está en el escritorio como en el móvil, actualizando el manifiesto de la aplicación web.
- Podemos obtener etiquetas precisas de nombre de pantalla con la API de ubicación de ventanas multipantalla.
- Con la API de superposición de controles de ventana, las PWA podrán cambiar la barra de título por una pequeña superposición y así incluir contenido personalizado en el área de la barra de título.
Descargar Google Chrome
Es posible descargar Google Chrome en cualquier plataforma donde esté disponible. Los usuarios iOS o de Android, tan solo tienen que ir a sus respectivas tiendas (App Store o Google Play) y comprobar si tienen una nueva actualización, descargando la última disponible.
Para las plataformas de escritorio podemos descargarla desde su página oficial, o si ya la tenemos instalada, desde los ajustes podremos forzar la versión más reciente de Chrome.