Una Kravets
Mason Freed
CSS 앵커 포지셔닝은 Chrome 125에서 출시되었습니다. 이 API의 첫 번째 공개 버전은 문법에 관한 추가적인 논의를 촉발했습니다 . 이 논의의 결과, 기능 출시 이후 몇 가지 사소한 변경사항이 있었습니다. CSS 앵커 위치 지정을 이미 사용해 본 경우 이 게시물에서는 코드 또는 앵커 위치 지정에 관한 콘텐츠를 변경해야 하는 사항을 설명합니다.
알아야 할 두 가지 기본 속성 이름 변경이 있습니다.
inset-area에서position-area로 이름이 변경되었습니다. CSS 작업 그룹에서는position-라는 문구가 이 속성이 앵커 요소가 아닌 위치 지정된 요소에 적용된다는 것을 기억하는 데 도움이 되므로 이 이름 변경을 선호했습니다. 이 변경사항은 Chrome 129부터 적용되며,inset-area는 Chrome 131까지 지원되므로 데모나 도움말을 업데이트할 시간을 갖을 수 있습니다.position-try-options에서position-try-fallbacks로 이름이 변경되었습니다. 이렇게 이름을 바꾸면 기본 스타일에 의해 결정되는 기본 위치에 대한 대체 값일 뿐임을 기억하는 데 도움이 됩니다. 이 변경사항은 Chrome 128과 함께 제공되었으며 버전 128부터position-try-options가 더 이상 작동하지 않습니다. Chrome 125부터 작동하며 변경되지 않은 약어 (position-try로 변경)를 사용하는 것이 좋습니다.
동작 변경사항도 하나 더 있습니다.
inset-area()함수 구문이position-try에서 삭제됩니다. 따라서position-try-fallbacks: inset-area(top)대신position-try-fallbacks: top을 사용하세요. 이 변경사항은 Chrome 129에서도 적용됩니다.
앵커 위치 지정 사용에 대해 자세히 알아보려면 다음을 참고하세요.