Descubre algunas de las interesantes funciones que se incorporaron a los navegadores web estables y beta durante agosto de 2022.
Versiones del navegador estable
En agosto, Firefox 104, Chrome 104 y Chrome 105 se volvieron estables.
Transformaciones individuales
Chrome 104 incluye propiedades individuales para las transformaciones CSS. Las propiedades son scale, rotate y translate, que puedes usar para definir de forma individual esas partes de una transformación.
De esta manera, Chrome se une a Firefox y Safari, que ya admiten estas propiedades.
Nueva sintaxis de consulta de medios
Chrome 104 también incluye la sintaxis del rango de consultas de medios. Firefox ya envió esta información y ayuda a optimizar las consultas de medios. Por ejemplo, la siguiente consulta de medios:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Se puede escribir con un operador de comparación:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Consultas de contenedores
Chrome 105 es una versión emocionante que incorpora la tan esperada de las consultas de contenedores a la plataforma web. Mientras que las consultas de medios ofrecen una forma de consultar el tamaño del viewport, las consultas de contenedor proporcionan un método para consultar el tamaño de un contenedor.
Para usar consultas de contenedores, activa la contención usando la propiedad container-type.
.card-container {
container-type: inline-size;
}
Cuando se establece container-type como inline-size, se consulta el tamaño de la dirección intercalada del elemento superior. En idiomas latinos como el inglés, este sería el ancho de la tarjeta, ya que el texto fluye en línea de izquierda a derecha.
Ahora, podemos usar ese contenedor para aplicar estilos 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;
}
}
Puedes obtener más información sobre las consultas de contenedores en la entrada @container y :has(): dos nuevas APIs responsivas y potentes que llegan a Chromium 105.
La seudoclase superior :has()
La publicación mencionada anteriormente también menciona :has(). Esta nueva seudoclase La pseudoclase de CSS :has() te permite orientar al elemento principal y los elementos del mismo nivel en función de las condiciones. Obtén más información en :has() the family selector.
API de Sanitizer
También en Chrome 105 se encuentra la API de Sanitizer. Esta API compila la limpieza en la plataforma para ayudar a quitar las vulnerabilidades de secuencias de comandos entre sitios.
También en Chrome 105 es la seudoclase de CSS :modal. Esto coincide con un elemento que se encuentra en un estado en el que excluye toda la interacción con elementos fuera de él. Por ejemplo, un <dialog> que se abrió con la API de showModal().
Los métodos findLast() y findLastIndex()
Firefox 104 agrega compatibilidad detrás de una marca para los métodos Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() y TypedArray.prototype.findLastIndex(). Estos se usan para encontrar el valor y el índice (respectivamente) del último elemento en un array o un TypedArray.
Versiones del navegador Beta
Las versiones de navegador beta te ofrecen una vista previa de los elementos que estarán disponibles en la próxima versión estable del navegador. Es un buen momento para probar nuevas funciones, o eliminaciones, que podrían afectar a tu sitio antes de que el mundo la implemente.
Debido a las fechas de lanzamiento fuera del mes, la única versión beta nueva en agosto fue Firefox 105, que actualmente tiene pocos detalles.
La versión beta de Safari 16 que se mencionó en junio también está en curso.
Parte de la serie de novedades en la Web