Mendeteksi posisi penggantian dengan kueri penampung berlabuh dari Chrome 143

Una Kravets

Dipublikasikan: 29 Oktober 2025

Mulai Chrome 143, Anda dapat menggunakan kueri penampung berlabuh untuk mengidentifikasi kapan elemen berlabuh menggunakan pemosisian labuh penggantian. Postingan ini menjelaskan masalah yang dipecahkan oleh fitur ini.

CSS anchor positioning API menyediakan cara yang efektif untuk mengikat elemen (seperti popover) ke elemen lain (anchor) dan menentukan serangkaian penggantian percobaan posisi yang digunakan jika elemen kehabisan ruang. Misalnya, jika elemen yang ditambatkan awalnya diberi gaya agar berada di bagian atas, tetapi saat Anda men-scroll dan elemen tersebut mencapai tepi layar, browser dapat menangani "pembalikan" untuk mempertahankannya di area pandang.

Namun, Level 1 spesifikasi penempatan anchor menyisakan kesenjangan yang signifikan: meskipun CSS dapat memindahkan elemen ke posisi penggantian, CSS tidak dapat mengetahui penggantian mana yang dipilih. Artinya, Anda tidak dapat menerapkan gaya yang berbeda berdasarkan posisi akhir tersebut. Jika tooltip Anda dibalik dari bawah ke atas, panahnya akan tetap mengarah ke arah yang salah kecuali jika Anda memperbaikinya dengan JavaScript.

Kueri penampung berlabuh (ditetapkan dalam spesifikasi CSS Anchor Position Level 2) memecahkan masalah ini, sehingga memberikan kesadaran kontekstual yang tidak dimiliki oleh penentuan posisi anchor CSS.

Cara kerjanya: Mengirim kueri penggantian

Kueri penampung yang di-anchor memungkinkan Anda menerapkan gaya berdasarkan cara browser menyelesaikan penempatan anchor.

Ini disiapkan dengan dua fitur CSS baru:

  • container-type: anchored: Terapkan ini ke elemen yang diposisikan (misalnya, tooltip Anda). Tindakan ini akan mengubahnya menjadi penampung kueri yang "mengetahui" status penempatan anchor-nya.
  • @container anchored(fallback: ...): Sintaks aturan @ baru ini memungkinkan Anda membuat kueri opsi position-try-fallbacks mana yang akhirnya digunakan.

Bayangkan Anda memiliki tooltip yang ingin diposisikan di bagian bawah, tetapi dengan posisi atas sebagai pengganti. Kode berikut:

  • Awalnya mencoba memosisikan .tooltip di bagian bawah anchor-nya (--my-anchor).
  • Jika tidak sesuai, penggantian akan memindahkannya ke bagian atas.
  • Kueri @container mendeteksi hal ini. Saat penggantian teratas diterapkan, kueri anchored(fallback: top) akan menjadi benar.
  • Dengan begitu, Anda dapat mengubah konten elemen semu ::before dari panah "atas" (▲) menjadi panah "bawah" (▼) dan menyesuaikan posisinya.
/* 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 */
  }
}

Semua ini dilakukan sepenuhnya di CSS—tanpa JavaScript, tanpa pengamat, tanpa class tambahan. Catatan: Jika Anda menggunakan popover API, Anda tidak perlu memberi nama anchor secara eksplisit, karena hubungan anchor implisit dibuat.

Lihat demo berikut yang menggunakan trik batas untuk membuat segitiga CSS, dan memosisikan ulang segitiga dengan kueri berlabuh:

Kesimpulan

Kueri yang di-anchor memberikan awareness CSS native browser tentang posisi anchor saat ini dari elemen yang diposisikan. Artinya, Anda dapat membuat komponen yang jauh lebih tangguh dan sadar konteks. Panah tooltip hanyalah salah satu contoh; Anda juga dapat:

  • Mengubah background-color menu saat dibalik.
  • Memindahkan gaya batas ke tepi yang paling dekat dengan penahan.
  • Sesuaikan border-radius pada popover sehingga sudut "terlampir" berbentuk persegi.
  • Animasi elemen secara berbeda berdasarkan posisi penggantian yang digunakan untuk menempatkannya.

Hal ini merupakan keuntungan besar bagi penentuan posisi anchor, dan library komponen secara umum, sehingga memungkinkan elemen UI yang lebih kuat dan mandiri dengan lebih sedikit kode.

Resource