앵커 위치 지정 문법 변경사항

Una Kravets
Mason Freed
Mason Freed
X GitHub

CSS 앵커 위치 지정이 Chrome 125에서 출시되었습니다. 공개적으로 사용 가능한 이 첫 번째 버전의 API는 구문에 대한 추가 논의를 유발했습니다 . 이러한 논의의 결과, 기능 출시 이후 약간의 변화가 있었습니다. CSS 앵커 포지셔닝을 이미 사용해 본 적이 있다면 이 게시물에서 코드에 적용해야 하는 변경사항 또는 앵커 포지셔닝에 관한 내용을 살펴보세요.

알고 있어야 하는 두 가지 기본 속성 이름 변경은 다음과 같습니다.

  1. inset-area에서 position-area로 이름이 변경되었습니다. CSS Working Group에서는 이 이름을 선호했습니다. position- 문구를 사용하면 이 속성이 앵커 요소가 아닌 위치가 지정된 요소에 적용된다는 사실을 기억하는 데 도움이 되기 때문입니다. 이 변경사항은 Chrome 129부터 적용되며 Chrome 131까지는 현재 보유하고 있는 데모나 도움말을 업데이트할 시간을 제공하기 위해 inset-area가 지원됩니다.
  2. position-try-options에서 position-try-fallbacks로 이름이 변경되었습니다. 이름을 변경하면 기본 스타일에 따라 결정되는 기본 위치로 대체될 뿐이라는 것을 기억하는 데 도움이 됩니다. 이 변경사항은 Chrome 128에서 제공되며 position-try-options 버전 128부터 더 이상 작동하지 않습니다. Chrome 125부터 작동하며 변경되지 않은 약칭 (position-try로 변경)을 사용하는 것이 좋습니다.

또한 동작 한 가지는 추가로 변경되었습니다.

  • inset-area() 함수 문법이 position-try에서 삭제됩니다. 따라서 position-try-fallbacks: inset-area(top) 대신 position-try-fallbacks: top를 사용합니다. 이 변경사항은 Chrome 129에서도 적용됩니다.

앵커 포지셔닝 사용에 대해 자세히 알아보기: