Phát hiện các vị trí dự phòng bằng các truy vấn vùng chứa được cố định từ Chrome 143

Una Kravets

Ngày xuất bản: 29 tháng 10 năm 2025

Từ Chrome 143, bạn có thể sử dụng các truy vấn vùng chứa được neo để xác định thời điểm một phần tử được neo đang sử dụng tính năng định vị điểm neo dự phòng. Bài đăng này giải thích vấn đề mà tính năng này giải quyết.

API định vị điểm neo CSS cung cấp một cách hiệu quả để liên kết một phần tử (chẳng hạn như cửa sổ bật lên) với một phần tử khác (điểm neo) và xác định một tập hợp các vị trí dự phòng được dùng nếu phần tử hết chỗ. Ví dụ: nếu ban đầu phần tử được cố định của bạn được tạo kiểu để nằm ở trên cùng, nhưng khi bạn cuộn và phần tử đó chạm vào cạnh màn hình, trình duyệt có thể xử lý việc "lật" để giữ phần tử đó trong khung nhìn.

Tuy nhiên, Cấp 1 của quy cách định vị phần tử liên kết vẫn còn một khoảng trống đáng kể: mặc dù CSS có thể di chuyển phần tử đến một vị trí dự phòng, nhưng không có cách nào biết được vị trí dự phòng nào được chọn. Điều này có nghĩa là bạn không thể áp dụng các kiểu khác nhau dựa trên vị trí cuối cùng đó. Nếu chú thích của bạn lật từ dưới lên trên, mũi tên của chú thích vẫn sẽ chỉ sai hướng trừ phi bạn sửa bằng JavaScript.

Truy vấn vùng chứa được cố định (được xác định trong thông số kỹ thuật CSS Anchor Position Level 2) giải quyết vấn đề này, giúp tính năng định vị phần tử cố định CSS có được nhận thức theo ngữ cảnh mà trước đây còn thiếu.

Cách hoạt động: Truy vấn đường dẫn dự phòng

Truy vấn vùng chứa được cố định cho phép bạn áp dụng kiểu dựa trên cách trình duyệt phân giải việc định vị điểm neo.

Tính năng này được thiết lập bằng 2 tính năng CSS mới:

  • container-type: anchored: Áp dụng thuộc tính này cho phần tử được định vị (ví dụ: chú thích). Thao tác này sẽ biến thành phần đó thành một vùng chứa truy vấn "nhận biết" trạng thái định vị của phần tử neo.
  • @container anchored(fallback: ...): Cú pháp quy tắc @ mới này cho phép bạn truy vấn lựa chọn position-try-fallbacks nào được dùng sau cùng.

Hãy tưởng tượng bạn có một chú thích mà bạn muốn đặt ở dưới cùng, nhưng với vị trí trên cùng làm phương án dự phòng. Đoạn mã sau:

  • Ban đầu, cố gắng đặt .tooltip ở cuối phần tử neo (--my-anchor).
  • Nếu không vừa, chế độ dự phòng sẽ di chuyển thành phần đó lên trên cùng.
  • Cụm từ tìm kiếm @container sẽ phát hiện điều này. Khi phương án dự phòng hàng đầu được áp dụng, truy vấn anchored(fallback: top) sẽ trở thành true.
  • Thao tác này cho phép bạn thay đổi nội dung của phần tử giả ::before từ mũi tên "lên" (▲) thành mũi tên "xuống" (▼) và điều chỉnh vị trí của phần tử đó.
/* The element our tooltip is anchored to */
.anchor {
  anchor-name: --my-anchor;
}

/* The positioned element (tooltip) */
.tooltip {
  /* Use anchor positioning to set fallbacks */
  position: absolute;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block; /* Reposition in the block direction */
  
  /* Make it an anchored query container */
  container-type: anchored;

  /* Add a default "up" arrow */
  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%; /* Sits on top of the tooltip, pointing up */
  }
}

/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* The 'top' fallback was used, so flip the arrow */
    content: '▼';
    bottom: auto;
    top: 100%; /* Move the arrow below the tooltip */
  }
}

Tất cả những điều này đều được thực hiện hoàn toàn bằng CSS – không có JavaScript, không có trình quan sát, không có lớp bổ sung. Lưu ý: Nếu đang sử dụng API cửa sổ bật lên, bạn sẽ không cần đặt tên rõ ràng cho các điểm neo, vì mối quan hệ neo ngầm định sẽ được tạo.

Hãy xem bản minh hoạ sau đây sử dụng thủ thuật đường viền để tạo một hình tam giác CSS và định vị lại hình tam giác bằng các truy vấn được neo:

Kết luận

Các truy vấn được cố định giúp CSS trình duyệt gốc nhận biết được vị trí hiện tại của một phần tử được định vị. Điều này có nghĩa là bạn có thể tạo ra các thành phần có khả năng phục hồi và nhận biết ngữ cảnh cao hơn nhiều. Mũi tên chú thích chỉ là một ví dụ; bạn cũng có thể:

  • Thay đổi màu nền của một trình đơn khi trình đơn đó được lật.
  • Di chuyển một kiểu đường viền đến cạnh gần với điểm neo nhất.
  • Điều chỉnh border-radius trên một cửa sổ bật lên để góc "đính kèm" có dạng vuông.
  • Tạo ảnh động cho một phần tử theo cách khác dựa trên vị trí dự phòng mà phần tử đó sẽ liên kết.

Đây là một lợi ích lớn cho tính năng định vị phần tử neo và thư viện thành phần nói chung, cho phép các phần tử giao diện người dùng mạnh mẽ và độc lập hơn với ít mã hơn.

Tài nguyên