Die CSS-Ankern-Positionierung wurde in Chrome 125 eingeführt. Diese erste öffentlich verfügbare Version der API hat weitere Diskussionen über die Syntax ausgelöst . Aufgrund dieser Diskussion haben wir seit der Einführung der Funktion einige kleine Änderungen vorgenommen. Wenn Sie die CSS-Anchor-Positionierung bereits ausprobiert haben, wird in diesem Beitrag erläutert, welche Änderungen Sie an Ihrem Code vornehmen müssen.
Es gibt zwei wichtige Umbenennungen von Properties, die Sie kennen sollten:
inset-area
wird inposition-area
umbenannt. Die CSS-Arbeitsgruppe hat sich für diese Umbenennung entschieden, da die Formulierungposition-
daran erinnert, dass diese Property auf das positionierte Element und nicht auf das Ankerelement angewendet wird. Diese Änderung wird in Chrome 129 eingeführt.inset-area
wird bis Chrome 131 unterstützt, damit Sie Zeit haben, Ihre Demos oder Artikel zu aktualisieren.position-try-options
wird inposition-try-fallbacks
umbenannt. Diese Umbenennung soll Ihnen in Erinnerung rufen, dass es sich dabei nur um Fallbacks für die primäre Position handelt, die durch die Basisstile bestimmt wird. Diese Änderung wurde mit Chrome 128 eingeführt.position-try-options
funktioniert ab Version 128 nicht mehr. Wir empfehlen, die Kurzform zu verwenden (position-try
). Diese funktioniert seit Chrome 125 und hat sich nicht geändert.
Außerdem gibt es eine weitere Verhaltensänderung:
- Die funktionale Syntax von
inset-area()
wird ausposition-try
entfernt. Verwenden Sie daherposition-try-fallbacks: top
anstelle vonposition-try-fallbacks: inset-area(top)
. Diese Änderung wird auch in Chrome 129 eingeführt.
Weitere Informationen zur Verwendung der Ankerpositionierung: