Nieuw in Chrome 133

Rachel Andrew

Dit is wat je moet weten:

De geavanceerde CSS-functie attr()

Deze functie voegt aan de bestaande attr() -functie functionaliteit toe die is gespecificeerd in CSS Level 5. Hierdoor kunnen naast <string> `-typen ook andere typen worden gebruikt in alle CSS-eigenschappen (naast de bestaande ondersteuning voor het pseudo-element `content`).

In het volgende voorbeeld gebruikt de eigenschap ` color voor div de waarde uit het data-color attribuut. Deze attribuutwaarde wordt omgezet in een <color> met behulp van attr() en type() . De terugvalwaarde is ingesteld op red .

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Lees meer in CSS attr() krijgt een upgrade .

CSS-scrollstatuscontainerquery's

Gebruik containerquery's om de afstammelingen van containers te stylen op basis van hun scrollstatus.

De querycontainer is ofwel een scrollcontainer, ofwel een element dat wordt beïnvloed door de scrollpositie van een scrollcontainer. De volgende statussen kunnen worden opgevraagd:

  • stuck : Een vastgeplakte container is aan een van de randen van het scrollvak vastgeplakt.
  • snapped : Een container die is uitgelijnd met scroll snap is momenteel horizontaal of verticaal vastgeklikt.
  • scrollable : Geeft aan of een scrollcontainer in de gevraagde richting kan worden gescrollt.

Een nieuw containertype: scroll-state maakt het mogelijk om containers op te vragen. Bijvoorbeeld:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Leer meer en bekijk enkele demo's over CSS-scrollstatusquery's .

CSS text-box , text-box-trim en text-box-edge

De eigenschap text-box-trim specificeert de zijden die moeten worden bijgesneden, boven of onder, en de eigenschap text-box-edge specificeert hoe de rand moet worden bijgesneden.

Met deze eigenschappen kunt u de verticale afstand nauwkeurig regelen door gebruik te maken van de lettertype-eigenschappen.

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

Ontdek hoe je deze nieuwe eigenschappen in CSS text-box-trim kunt gebruiken.

En nog veel meer!

Natuurlijk is er nog veel meer.

  • Animation.overallProgress biedt een handige en consistente weergave van de voortgang van een animatie over de verschillende iteraties heen, ongeacht de aard van de tijdlijn.
  • Node.prototype.moveBefore kun je elementen in een DOM-structuur verplaatsen zonder de status van het element te resetten.
  • De FileSystemObserver interface informeert websites over wijzigingen in het bestandssysteem.
  • Met de methode PublicKeyCredential getClientCapabilities() kunt u bepalen welke WebAuthn-functies door de client van de gebruiker worden ondersteund.

Bekijk de volledige release-opmerkingen van Chrome 133 voor details over deze en vele andere nieuwe functies in Chrome!

Verder lezen

Dit is slechts een greep uit de belangrijkste wijzigingen. Raadpleeg de volgende links voor meer informatie over de wijzigingen in Chrome 133.

Abonneren

Om op de hoogte te blijven, abonneer je op het YouTube-kanaal van Chrome Developers . Je ontvangt dan een e-mailmelding zodra we een nieuwe video publiceren.

Zodra Chrome 133 is uitgebracht, laten we je hier meteen weten wat er nieuw is in Chrome!