Nieuw in Chrome 133

Rachel Andreas

Dit is wat u moet weten:

CSS geavanceerde attr() -functie

Deze functie is een aanvulling op de bestaande functie attr() , functies die zijn gespecificeerd in CSS-niveau 5. Hierdoor zijn typen naast <string> en gebruik in alle CSS-eigenschappen mogelijk (naast de bestaande ondersteuning voor de inhoud van pseudo-elementen).

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

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

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

Meer informatie in CSS attr() krijgt een upgrade .

CSS-scrollstatuscontainerquery's

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

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

  • stuck : een vastgeplakte container zit vast aan een van de randen van het schuifvak.
  • snapped : een uitgelijnde container met scroll-snaps wordt momenteel horizontaal of verticaal vastgeklikt.
  • scrollable : Of een scrollcontainer in een opgevraagde richting kan worden gescrolld.

Een nieuw containertype: scroll-state kunnen containers worden opgevraagd. 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 in CSS-scrollstatusquery's .

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

De eigenschap text-box-trim specificeert de zijkanten 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 bepalen door gebruik te maken van de lettertypemetrieken.

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 u deze nieuwe eigenschappen kunt gebruiken in CSS text-box-trim .

En meer!

Natuurlijk is er nog veel meer.

  • Animation.overallProgress geeft u een handige en consistente weergave van hoe ver een animatie is gevorderd in zijn iteraties en ongeacht de aard van de tijdlijn.
  • Node.prototype.moveBefore kunt u elementen door een DOM-boom verplaatsen, zonder de status van het element opnieuw in te stellen.
  • De FileSystemObserver interface informeert websites over wijzigingen in het bestandssysteem.
  • Met de PublicKeyCredential getClientCapabilities() methode kunt u bepalen welke WebAuthn-functies worden ondersteund door de client van de gebruiker.

Bekijk de volledige releaseopmerkingen van Chrome 133 voor details over deze en vele andere functies die nieuw zijn in Chrome!

Verder lezen

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

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.

Zodra Chrome 133 wordt uitgebracht, zijn we hier om u te vertellen wat er nieuw is in Chrome!