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 antérieures de Chrome, lorsque vous sélectionnez du texte mis en avant, sa couleur ne devenait pas bleue, malgré la définition de 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 mis en surbrillance en bleu

D'autres modifications y sont associées. N'oubliez pas de consulter la section Modifications héritées pour le style de sélection CSS, rédigée par Stephen Chenney d'Igalia, qui a travaillé sur cette fonctionnalité.

Améliorations apportées aux styles 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 d'ajouter 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 zones de marge

La prise en charge des zones de marges lors de l'impression d'un document Web ou de son exportation au format PDF a été ajoutée.

Les zones de marge de la page vous permettent de définir le contenu dans les marges 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 compatibles 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 intitulé Ajouter du contenu aux marges des pages Web lors de l'impression avec CSS .

Et bien plus !

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

  • Prise en charge des ressources SVG externes pour "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.