Wijzigingen in de syntaxis van ankerpositionering

Una Kravets
Metselaar vrijgelaten
Mason Freed
X GitHub

CSS-ankerpositionering is uitgebracht in Chrome 125 . Deze eerste publiekelijk beschikbare versie van de API leidde tot extra discussies over de syntaxis. Als resultaat van die discussie zijn er enkele kleine veranderingen geweest sinds de lancering van de functie. Als je CSS-ankerpositionering al hebt uitgeprobeerd, legt dit bericht de wijzigingen uit die je moet aanbrengen in je code of in de inhoud over ankerpositionering.

Er zijn twee belangrijke hernoemingen van eigenschappen waar u rekening mee moet houden:

  1. inset-area wordt hernoemd naar position-area . Deze hernoeming had de voorkeur van de CSS-werkgroep omdat de position- u helpt herinneren dat deze eigenschap wordt toegepast op het gepositioneerde element en niet op het ankerelement. Deze wijziging gaat in Chrome 129 in en inset-area wordt ondersteund tot Chrome 131 , zodat u de tijd heeft om uw demo's of artikelen bij te werken.
  2. position-try-options is hernoemd naar position-try-fallbacks . Deze hernoeming helpt je te onthouden dat dit slechts een terugval is naar de primaire positie, die wordt bepaald door de basisstijlen. Deze wijziging is meegeleverd met Chrome 128 en position-try-options werken niet meer vanaf versie 128 . We raden u aan de afkorting te gebruiken (verander deze in position-try ), die werkt vanuit Chrome 125 en niet is gewijzigd.

Er is ook nog een gedragsverandering:

  • De functionele syntaxis inset-area() wordt verwijderd uit position-try . Gebruik daarom position-try-fallbacks: top in plaats van position-try-fallbacks: inset-area(top) . Deze wijziging begint ook in Chrome 129 .

Lees hier meer over het gebruik van ankerpositionering: