Zmiany składni pozycjonowania zakotwiczonych

Una Kravets
Mason Freed
Mason Freed
X GitHub

Pozycjonowanie kotwicy w kodzie CSS zostało wprowadzone w wersji 125 przeglądarki Chrome. Ta pierwsza publicznie dostępna wersja interfejsu API wywołała dodatkowe dyskusje na temat składni . W wyniku tej dyskusji wprowadziliśmy od czasu wprowadzenia tej funkcji kilka drobnych zmian. Jeśli już próbowałeś(-aś) użyć pozycjonowania kotwicy w CSS, w tym poście znajdziesz informacje o tym, jakie zmiany musisz wprowadzić w kodzie, lub treści dotyczące pozycjonowania kotwicy.

Istnieją 2 główne powody zmiany nazwy obiektu, o których warto pamiętać:

  1. Nazwa inset-area została zmieniona na position-area. Grupa robocza CSS preferowała tę zmianę nazwy, ponieważ sformułowanie position- pomaga pamiętać, że ta właściwość jest stosowana do elementu pozycjonowanego, a nie do elementu kotwicy. Ta zmiana zacznie obowiązywać w Chrome 129, a inset-area będzie obsługiwana do Chrome 131, aby dać Ci czas na zaktualizowanie demo lub artykułów.
  2. Nazwa position-try-options została zmieniona na position-try-fallbacks. Ta zmiana nazwy pomaga pamiętać, że są to tylko substytuty pozycji podstawowej, która jest określana przez style podstawowe. Ta zmiana została wprowadzona w wersji Chrome 128, a w wersji 128 funkcja position-try-options przestała działać. Zalecamy używanie skrótu (zmienionego na position-try), który działa od wersji Chrome 125 i nie uległ zmianie.

Jest też jedna dodatkowa zmiana zachowania:

  • Składnia funkcjonalna inset-area() zostanie usunięta z funkcji position-try. Dlatego zamiast position-try-fallbacks: inset-area(top) używaj position-try-fallbacks: top. Ta zmiana zostanie wprowadzona również w Chrome 129.

Więcej informacji o używaniu pozycji kotwicy: