Novedades de Chrome 131

Mariko Kosaka
X

Tenga en cuenta lo siguiente:

Soy Marik Kosaka. Analicemos las novedades para desarrolladores en Chrome 131.

Herencia de elementos destacados de CSS

La herencia de CSS Highlight cambiará para las seudoclases ::selection y ::target-text. Esto crea un modelo más intuitivo para la herencia de estilos y se alinea con las pseudoclases ::highlight, ::spelling-error y ::grammar-error que se agregaron recientemente.

Piensa en este fragmento de código con texto destacado.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

En versiones anteriores de Chrome, cuando seleccionabas texto enfatizado, el color del texto no cambiaba a azul a pesar de establecer la pseudoclase ::selection en el elemento de párrafo superior.

Texto destacado en rosa

Esto se debe a que se implementó con el modelo de herencia del elemento de origen. Por lo tanto, la pseudoclase ::selection en este caso solo coincide con elementos con la clase azul, que no tiene el elemento dentro de este párrafo.

Con el cambio de herencia de los elementos destacados, cuando se selecciona el mismo texto en Chrome 131, el texto cambiará a color azul.

Texto destacado en azul

Hay algunos cambios más relacionados con esto, así que asegúrate de consultar Cambios de herencia para el diseño de selección de CSS, escrito por Stephen Chenney de Igalia, quien trabajó en esta función.

Mejoras en el diseño de <details> y <summary>

Ahora tienes más opciones para aplicar diseño a la estructura de los elementos <details> y <summary> para compilar widgets de divulgación o acordeón.

Los cambios introducidos en esta versión permiten el uso de la propiedad display y agregan un seudoelemento ::details-content para aplicar diseño a la parte que se expande y se contrae.

Históricamente, era imposible cambiar el tipo de visualización del elemento details. Esta restricción se relajó, lo que te permite usar elementos como diseños de cuadrícula o flexibles.

En este ejemplo exclusivo de acordeón, compuesto por varios elementos details, cuando se expande uno de los elementos details, su contenido se coloca junto al summary.

Widget de acordeón con diseño Flex

Esto se logra con un diseño flexible en el elemento details. También puedes probar más patrones de diseño con otros valores de visualización, como grid.

Consulta el artículo de Bramus Más opciones para aplicar diseño a <details> para obtener una explicación más detallada.

@page cuadros de margen

Se agregó compatibilidad con los cuadros de margen de página cuando se imprime un documento web o se exporta como PDF.

Los cuadros de margen de página te permiten definir el contenido en el área de margen de una página. Por lo tanto, puedes proporcionar encabezados y pies de página personalizados en lugar de usar los encabezados y pies de página integrados que genera el navegador.

El margen de la página se define con la regla @page en CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

El aspecto y el contenido de un cuadro de margen se especifican con propiedades CSS dentro de las reglas de anidación que representan los 16 cuadros de margen con contenido generado.

Para el paginado, los contadores también son compatibles con page para el número de página actual y pages para la cantidad total de páginas.

Consulta el artículo de Rachel Cómo agregar contenido a los márgenes de las páginas web cuando se imprimen con CSS para obtener una explicación más detallada.

Y mucho más.

Y, por supuesto, hay mucho más.

  • Compatibilidad con recursos SVG externos para "clip-path", "fill", "stroke" y "marker".
  • WebHID está habilitado en contextos de trabajadores dedicados.
  • Controla el comportamiento de los emojis con la propiedad CSS font-variant-emoji.

Lecturas adicionales

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

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.

Soy Mariko Kosaka y, en cuanto se lance Chrome 132, estaremos aquí para contarte las novedades.