Descubre algunas de las funciones interesantes que se lanzaron en los navegadores web estables y beta durante agosto de 2022.
Versiones estables del navegador
En agosto, Firefox 104, Chrome 104 y Chrome 105 se volvieron estables.
Transformaciones individuales
Chrome 104 incluye propiedades individuales para las transformaciones de 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 contenido multimedia
Chrome 104 también incluye la sintaxis de rango de consulta de contenido multimedia. Firefox ya lo envió y ayuda a optimizar las consultas de contenido multimedia. 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 trae la función esperada de consultas de contenedor a la plataforma web. Si bien las consultas de medios te brindan una forma de consultar el tamaño de la vista del puerto, las consultas de contenedor proporcionan un método para consultar el tamaño de un contenedor.
Para usar consultas de contenedores, activa el aislamiento con la propiedad container-type
.
.card-container {
container-type: inline-size;
}
Si estableces container-type
en 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 intercalado 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 potentes que se lanzarán en Chromium 105.
La seudoclase superior :has()
La publicación mencionada anteriormente también menciona :has()
. Esta nueva seudoclase, la CSS :has(), te brinda una forma de segmentar el elemento superior y los hermanos según las condiciones. Obtén más información en :has() el selector de familia.
API de Sanitizer
También en Chrome 105, se incluye la API de Sanitizer. Esta API incorpora la limpieza en la plataforma para ayudar a quitar las vulnerabilidades de secuencias de comandos entre sitios.
También en Chrome 105, se agregó la seudoclase :modal de CSS. Coincide con un elemento que está en un estado en el que excluye toda interacción con elementos fuera de él. Por ejemplo, un <dialog>
abierto con la API de showModal()
.
Los métodos findLast() y findLastIndex()
Firefox 104 agrega compatibilidad con 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 de un Array o TypedArray que coincide con una función de prueba proporcionada.
Versiones beta del navegador
Las versiones beta del navegador te brindan una vista previa de lo que estará disponible en la próxima versión estable del navegador. Es un buen momento para probar funciones nuevas o eliminaciones que podrían afectar a tu sitio antes de que el resto del mundo obtenga esa versión.
Debido a que las fechas de lanzamiento no se encuentran dentro del mes, la única versión beta nueva de agosto fue Firefox 105, que actualmente no tiene muchos detalles.
La versión beta de Safari 16 que mencionamos en junio también está en curso.
Parte de la serie de artículos para principiantes en la Web