Novedades de Chrome 133

Rachel Andrew

Tenga en cuenta lo siguiente:

Función attr() avanzada de CSS

Esta función se suma a la función attr() existente, que se especifica en el nivel 5 de CSS. Esto permite tipos además de <string> y se puede usar en todas las propiedades CSS (además de la compatibilidad existente con el contenido de pseudoelementos).

En el siguiente ejemplo, el valor de la propiedad color para div usa el valor del atributo data-color. Este valor de 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 diseño a los elementos secundarios de los contenedores según su estado de desplazamiento.

El contenedor de 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 pega a uno de los bordes del cuadro de desplazamiento.
  • snapped: Un contenedor alineado con el ajuste del desplazamiento está ajustado horizontal o verticalmente.
  • scrollable: Indica si se puede desplazar un contenedor de desplazamiento 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 recortarán, 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 mediante las métricas de fuente.

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

Obtén información para usar estas propiedades nuevas en CSS text-box-trim.

Y mucho más.

Por supuesto, hay mucho más.

  • Animation.overallProgress te brinda una representación conveniente y coherente de qué tan avanzada está una animación en sus iteraciones, independientemente de la naturaleza de su línea de tiempo.
  • Node.prototype.moveBefore te permite mover elementos alrededor de un árbol 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 getClientCapabilities() de PublicKeyCredential te permite determinar qué funciones de WebAuthn son compatibles con el cliente del usuario.

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

Lecturas adicionales

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

Suscribirse

Para mantenerte al tanto, 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, estaremos aquí para contarte las novedades de Chrome.