Una Kravets
Mason Freed
Die Positionierung von CSS-Ankern wurde in Chrome 125 eingeführt. Diese erste öffentlich verfügbare Version des APIs löste weitere Diskussionen über die Syntax aus . Infolge dieser Diskussion hat es seit der Einführung der Funktion einige geringfügige Änderungen gegeben. Wenn Sie die CSS-Ankerpositionierung bereits ausprobiert haben, werden in diesem Beitrag die Änderungen erläutert, die Sie an Ihrem Code oder an Inhalten zur Ankerpositionierung vornehmen müssen.
Es gibt zwei Umbenennungen primärer Properties, die Sie beachten sollten:
inset-areawurde inposition-areaumbenannt. Diese Umbenennung wurde von der CSS-Arbeitsgruppe bevorzugt, da Sie sich anhand der Formulierungposition-daran erinnern können, dass diese Eigenschaft auf das positionierte Element und nicht auf das Ankerelement angewendet wird. Diese Änderung beginnt in Chrome 129 undinset-areawird bis Chrome 131 unterstützt, damit Sie genügend Zeit haben, Ihre Demos oder Artikel zu aktualisieren.position-try-optionswurde inposition-try-fallbacksumbenannt. Durch diese Umbenennung erinnern Sie sich daran, dass es sich dabei nur um Fallbacks auf die primäre Position handelt, die durch die Basisstile bestimmt wird. Diese Änderung wurde mit Chrome 128 undposition-try-optionsbereitgestellt. Ab Version 128 funktioniert diese Änderung nicht mehr. Wir empfehlen die Verwendung der Kurzschreibweise (ändern Sie sie zuposition-try), die von Chrome 125 aus funktioniert und sich nicht geändert hat.
Außerdem gibt es eine weitere Verhaltensänderung:
- Die funktionale Syntax
inset-area()wird ausposition-tryentfernt. Verwende daherposition-try-fallbacks: topanstelle vonposition-try-fallbacks: inset-area(top). Diese Änderung tritt auch in Chrome 129 in Kraft.
Weitere Informationen zur Verwendung der Ankerpositionierung finden Sie hier: