Nouveautés de Chrome 131

Mariko Kosaka
X

Voici les informations à retenir :

Je m'appelle Marik Kosaka. Voyons ce que Chrome 131 a de nouveau à offrir aux développeurs.

Héritage de la mise en surbrillance CSS

L'héritage de la mise en surbrillance CSS change pour les pseudo-classes ::selection et ::target-text. Cela crée un modèle d'héritage de style plus intuitif et s'aligne sur les pseudo-classes ::highlight, ::spelling-error et ::grammar-error récemment ajoutées.

Réfléchissez à cet extrait de code avec du texte en gras.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

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

Dans les versions précédentes de Chrome, lorsque vous sélectionniez du texte mis en avant, sa couleur ne passait pas au bleu, même si vous définissiez la pseudo-classe ::selection sur l'élément de paragraphe parent.

Texte en surbrillance en rose

En effet, il a été implémenté à l'aide du modèle d'héritage de l'élément d'origine. Dans ce cas, la pseudo-classe ::selection ne correspond qu'aux éléments de la classe bleue, ce qui n'est pas le cas de l'élément de ce paragraphe.

Avec le changement d'héritage du surlignage, lorsque le même texte est sélectionné dans Chrome 131, sa couleur devient bleue.

Texte en surbrillance en bleu

D'autres modifications sont liées à ce point. N'hésitez donc pas à consulter Modifications de l'héritage pour le style de sélection CSS, écrit par Stephen Chenney d'Igalia, qui a travaillé sur cette fonctionnalité.

Améliorations apportées au style de <details> et <summary>

Vous disposez désormais de plus d'options pour styliser la structure des éléments <details> et <summary> afin de créer des widgets de divulgation ou d'accordéon.

Les modifications apportées dans cette version permettent d'utiliser la propriété display et ajoutent un pseudo-élément ::details-content pour styliser la partie qui se développe et se réduit.

Auparavant, il était impossible de modifier le type d'affichage de l'élément details. Cette restriction a été assouplie, ce qui vous permet d'utiliser des mises en page telles que la grille ou la mise en page flex.

Dans cet exemple d'accordéon exclusif, composé de plusieurs éléments details, lorsque l'un des éléments details est développé, son contenu est placé à côté de summary.

Widget Accordion avec mise en page Flex

Pour ce faire, utilisez une mise en page flex sur l'élément details. Vous pouvez également essayer d'autres modèles de mise en page avec d'autres valeurs d'affichage, telles que grid.

Pour en savoir plus, consultez l'article Plus d'options de style pour <details> de Bramus.

@page cadres de marge

Les marges de page sont désormais prises en charge lorsque vous imprimez un document Web ou l'exportez au format PDF.

Les zones de marge de page vous permettent de définir le contenu de la zone de marge d'une page. Vous pouvez donc fournir des en-têtes et des pieds de page personnalisés plutôt que d'utiliser les en-têtes et pieds de page intégrés générés par le navigateur.

La marge de la page est définie à l'aide de la règle @page en CSS.

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

L'apparence et le contenu d'une marge sont spécifiés à l'aide de propriétés CSS dans les règles at représentant les 16 marges à l'aide de contenu généré.

Pour la numérotation des pages, les compteurs sont également acceptés avec page pour le numéro de page actuel et pages pour le nombre total de pages.

Pour en savoir plus, consultez l'article de Rachel Ajouter du contenu dans les marges des pages Web lors de l'impression à l'aide de CSS .

Et bien plus !

Et bien sûr, il y a bien d'autres choses.

  • Compatibilité des ressources SVG externes avec les propriétés "clip-path", "fill", "stroke" et "marker".
  • WebHID est activé dans les contextes de worker dédiés.
  • Contrôlez le comportement des emoji avec la propriété CSS font-variant-emoji.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour en savoir plus sur les modifications apportées à Chrome 131.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Mariko Kosaka. Dès que Chrome 132 sera disponible, nous vous présenterons les nouveautés de Chrome.