Nuevo usuario de la plataforma web en agosto

Descubre algunas de las funciones interesantes que se lanzaron en los navegadores web estables y beta durante agosto de 2022.

Rachel Andrew

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 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.

Navegadores compatibles

• 104
• 104
• 72
• 14.1

Origen

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.
}

Navegadores compatibles

• 104
• 104
• 102
• 16.4

Origen

Consultas de contenedores

Chrome 105 es una emocionante versión que lleva la tan esperada función de las consultas de contenedores a la plataforma web. Mientras que las consultas de medios te 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.

Navegadores compatibles

• 105
• 105
• 110
• 16

Origen

Para usar consultas de contenedores, activa la contención 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 y potentes APIs responsivas que llegan a Chromium 105.

La seudoclase superior :has()

La publicación mencionada anteriormente también menciona :has(). Esta nueva seudoclase La pseudoclase CSS :has() te brinda una manera de orientar el elemento principal y los elementos del mismo nivel según las condiciones. Obtén más información en :has() el selector de familia.

Navegadores compatibles

• 105
• 105
• 121
• 15.4

Origen

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 encuentra la pseudoclase :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().

Navegadores compatibles

• 105
• 105
• 103
• 15.6

Origen

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 TypedArray.

Navegadores compatibles

• 97
• 97
• 104
• 15.4

Origen

Versiones beta del navegador

Las versiones beta de los navegadores 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 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 mencionada en junio también sigue en curso.

Parte de la serie de artículos para principiantes en la Web