Novedades de Chrome 133

Rachel Andrew

Tenga en cuenta lo siguiente:

Función avanzada attr() de CSS

Esta función se agrega a la función attr() existente, que incluye las funciones especificadas en CSS nivel 5. Esto permite que se usen tipos distintos de <string> y en todas las propiedades de CSS (además de la compatibilidad existente con el contenido del seudoelemento).

En el siguiente ejemplo, el valor de la propiedad color para div usa el valor del atributo data-color. El valor de este atributo se analiza en un <color> con attr() y type(). El valor de resguardo se establece en red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Obtén más información en CSS attr() recibe una actualización.

Consultas de contenedores de estado de desplazamiento de CSS

Usa consultas de contenedor para aplicar estilo a los elementos descendientes de los contenedores según su estado de desplazamiento.

El contenedor de la consulta es un contenedor de desplazamiento o un elemento afectado por la posición de desplazamiento de un contenedor de desplazamiento. Se pueden consultar los siguientes estados:

  • stuck: Un contenedor con posición fija se adhiere a uno de los bordes del cuadro de desplazamiento.
  • snapped: Un contenedor alineado con el ajuste de desplazamiento está ajustado horizontal o verticalmente.
  • scrollable: Indica si un contenedor de desplazamiento se puede desplazar en una dirección consultada.

Se agregó un nuevo tipo de contenedor: scroll-state, que permite consultar contenedores. Por ejemplo:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Obtén más información y mira algunas demostraciones en Consultas de estado de desplazamiento de CSS.

CSS text-box, text-box-trim y text-box-edge

La propiedad text-box-trim especifica los lados que se deben recortar, arriba o abajo, y la propiedad text-box-edge especifica cómo se debe recortar el borde.

Estas propiedades te permiten controlar el espaciado vertical con precisión a través de las métricas de fuentes.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Descubre cómo usar estas nuevas propiedades en CSS text-box-trim.

Y mucho más

Por supuesto, hay mucho más.

  • Animation.overallProgresste brinda una representación conveniente y coherente de qué tan avanzada está una animación en sus iteraciones y sin importar la naturaleza de su línea de tiempo.
  • Node.prototype.moveBefore te permite mover elementos en un árbol del DOM sin restablecer el estado del elemento.
  • La interfaz FileSystemObserver notifica a los sitios web los cambios en el sistema de archivos.
  • El método PublicKeyCredential getClientCapabilities() te permite determinar qué funciones de WebAuthn admite el cliente del usuario.

Consulta las notas de la versión de Chrome 133 completas para obtener detalles sobre estas y muchas otras funciones nuevas de Chrome.

Lecturas adicionales

Esto solo abarca algunos aspectos destacados clave. Consulta los siguientes vínculos para ver otros cambios en Chrome 133.

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.

En cuanto se lance Chrome 133, te contaremos las novedades de Chrome.