Nieuw in Chrome 131

Mariko Kosaka
X

Dit is wat u moet weten:

Ik ben Marik Kosaka. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 131.

CSS benadrukt overerving

Overerving van CSS-accenten verandert voor de ::selection en ::target-text pseudo-klassen. Dit creëert een meer intuïtief model voor stijlovererving en komt overeen met de recent toegevoegde pseudo-klassen ::highlight , ::spelling-error en ::grammar-error .

Denk eens aan dit codefragment met benadrukte tekst.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

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

Wanneer u in eerdere versies van Chrome benadrukte tekst selecteert, verandert de kleur van de tekst niet in blauw, ondanks de instelling ::selection pseudo-class op het bovenliggende alinea-element.

Gemarkeerde tekst in roze

Dit komt omdat het is geïmplementeerd met behulp van het oorspronkelijke elementoverervingsmodel. Dus ::selection pseudo-class komt in dit geval alleen overeen met elementen met de blauwe klasse, die het element in deze paragraaf niet heeft.

Als dezelfde tekst wordt geselecteerd in Chrome 131, verandert de kleur van de tekst in blauw wanneer dezelfde tekst wordt overgenomen.

Gemarkeerde tekst in blauw

Er zijn nog een paar wijzigingen die hiermee verband houden, dus bekijk zeker de Overervingswijzigingen voor CSS-selectiestijl, geschreven door Stephen Chenney van Igalia, die aan deze functie heeft gewerkt.

Stijlverbeteringen aan <details> en <summary>

U heeft nu meer opties om de structuur van de <details> en <summary> -elementen vorm te geven, zodat u openbaarmakings- of accordeonwidgets kunt bouwen.

De wijzigingen die in deze release zijn geïntroduceerd, maken het gebruik van de eigenschap display mogelijk en voegen een ::details-content pseudo-element toe om het deel dat uit- en samenvouwt vorm te geven.

Historisch gezien was het onmogelijk om het weergavetype van het details te wijzigen. Deze beperking is nu versoepeld, waardoor u zaken als raster- of flex-indelingen kunt gebruiken.

In dit exclusieve accordeonvoorbeeld, gemaakt van verschillende details , wordt, wanneer een van de details wordt uitgevouwen, de inhoud ervan naast de summary geplaatst.

Accordeonwidget met Flex-indeling

Dit wordt bereikt door gebruik te maken van een flexibele lay-out op het details . U kunt ook meer lay-outpatronen proberen met andere weergavewaarden, zoals grid .

Bekijk het artikel van Bramus Meer stylingopties <details> voor een uitgebreidere uitleg.

Margevakken @page

Ondersteuning voor paginamargevakken bij het afdrukken van een webdocument of het exporteren als PDF is toegevoegd.

Met paginamargevakken kunt u de inhoud in het margegebied van een pagina definiëren. U kunt dus aangepaste kop- en voetteksten opgeven in plaats van de ingebouwde kop- en voetteksten te gebruiken die door de browser worden gegenereerd.

De paginamarge wordt gedefinieerd met behulp van de @page -regel in CSS.

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

Het uiterlijk en de inhoud van een margevak worden gespecificeerd met CSS-eigenschappen binnen de at-regels die de 16 margevakken vertegenwoordigen met behulp van gegenereerde inhoud.

Voor paginanummering worden ook tellers ondersteund met page voor het huidige paginanummer en pages voor het totale aantal pagina's.

Bekijk het artikel van Rachel Voeg inhoud toe aan de marges van webpagina's wanneer deze worden afgedrukt met CSS voor een meer diepgaande uitleg.

En meer!

En er is natuurlijk nog veel meer.

  • Ondersteuning voor externe SVG-bronnen voor 'clip-path', 'fill', 'stroke' en 'marker'.
  • WebHID is ingeschakeld binnen specifieke werkcontexten.
  • Beheer het gedrag van Emoji met de CSS-eigenschap font-variant-emoji .

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de volgende links voor aanvullende wijzigingen in Chrome 131.

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Mariko Kosaka, en zodra Chrome 132 uitkomt, zijn we hier om je te vertellen wat er nieuw is in Chrome!