Vị trí neo CSS được phát hành trong Chrome 125. Phiên bản API đầu tiên được phát hành công khai này đã kích hoạt các cuộc thảo luận khác về cú pháp . Sau cuộc thảo luận đó, chúng tôi đã có một số thay đổi nhỏ kể từ khi ra mắt tính năng này. Nếu bạn đã thử sử dụng tính năng định vị neo CSS, bài đăng này sẽ giải thích những thay đổi bạn cần thực hiện đối với mã hoặc nội dung về định vị neo.
Bạn cần lưu ý hai trường hợp đổi tên thuộc tính chính:
inset-area
đổi tên thànhposition-area
. Nhóm làm việc CSS ưu tiên việc đổi tên này vì cụm từposition-
giúp bạn nhớ rằng thuộc tính này được áp dụng cho phần tử được định vị, chứ không phải phần tử neo. Thay đổi này sẽ bắt đầu trong Chrome 129 vàinset-area
sẽ được hỗ trợ cho đến Chrome 131 để bạn có thời gian cập nhật mọi bản minh hoạ hoặc bài viết mà bạn có.position-try-options
đổi tên thànhposition-try-fallbacks
. Việc đổi tên này giúp bạn nhớ rằng đây chỉ là các vị trí dự phòng cho vị trí chính, được xác định bằng các kiểu cơ sở. Thay đổi này được cung cấp cùng với Chrome 128 vàposition-try-options
không còn hoạt động kể từ phiên bản 128. Bạn nên sử dụng viết tắt (thay đổi thànhposition-try
). Mã này hoạt động từ Chrome 125 và không thay đổi.
Ngoài ra, còn có một thay đổi về hành vi khác:
- Cú pháp hàm
inset-area()
sẽ bị xoá khỏiposition-try
. Do đó, hãy sử dụngposition-try-fallbacks: top
thay vìposition-try-fallbacks: inset-area(top)
. Thay đổi này cũng sẽ bắt đầu trong Chrome 129.
Tìm hiểu thêm về cách sử dụng tính năng định vị neo tại đây: