Memperkenalkan CSS Positioning API

CSS Anchor Positioning API merupakan terobosan dalam pengembangan web karena memungkinkan Anda memosisikan elemen secara native relatif terhadap elemen lain, yang dikenal sebagai anchor. API ini menyederhanakan persyaratan tata letak yang kompleks untuk banyak fitur antarmuka seperti menu dan submenu, tooltip, pilihan, label, kartu, dialog setelan, dan banyak lagi. Dengan pemosisian anchor yang terintegrasi ke dalam browser, Anda dapat membuat antarmuka pengguna berlapis tanpa mengandalkan library pihak ketiga, sehingga membuka banyak peluang kreatif.

Pemosisian anchor tersedia mulai Chrome 125.

Konsep Inti: Anchor dan elemen yang diposisikan

Inti dari API ini terletak pada hubungan antara anchor dan elemen yang diposisikan. Anchor adalah elemen yang ditetapkan sebagai titik referensi menggunakan properti anchor-name. Elemen yang diposisikan adalah elemen yang ditempatkan relatif terhadap anchor menggunakan properti position-anchor atau secara eksplisit menggunakan anchor-name dalam logika pemosisiannya.

Menyiapkan anchor

Membuat anchor sangat mudah. Terapkan properti nama anchor ke elemen yang dipilih, dan tetapkan ID unik. ID unik ini harus diawali dengan tanda pisah ganda, seperti variabel CSS.

.anchor-button {
    anchor-name: --anchor-el;
}

Setelah nama anchor ditetapkan, .anchor-button akan berfungsi sebagai anchor, yang siap memandu penempatan elemen lain. Anda dapat menghubungkan anchor ini ke elemen lain dengan salah satu dari dua cara berikut:

Anchor implisit

Cara pertama untuk menghubungkan anchor ke elemen lain adalah dengan anchor implisit seperti dalam contoh kode berikut. Properti position-anchor ditambahkan ke elemen yang ingin Anda hubungkan ke anchor, dan memiliki nama anchor (dalam hal ini --anchor-el) sebagai nilai.

.positioned-notice {
    position-anchor: --anchor-el;
}

Dengan hubungan anchor implisit, Anda dapat memosisikan elemen menggunakan fungsi anchor() tanpa secara eksplisit menentukan nama anchor pada argumen pertamanya.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Anchor eksplisit

Atau, Anda dapat menggunakan nama anchor langsung di fungsi anchor (misalnya, top: anchor(--anchor-el bottom). Ini disebut anchor eksplisit, dan berguna jika Anda ingin menambatkan ke beberapa elemen (baca terus untuk contoh).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Menempatkan elemen-elemen relatif terhadap anchor

Pemosisian anchor dibuat berdasarkan positioning absolut CSS. Untuk menggunakan nilai pemosisian, Anda harus menambahkan position: absolute ke elemen yang diposisikan. Kemudian, gunakan fungsi anchor() untuk menerapkan nilai pemosisian. Misalnya, untuk memosisikan elemen anchor di kiri atas elemen anchor, gunakan posisi berikut:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

Sekarang Anda memiliki satu elemen yang dikaitkan ke elemen lain, seperti ini:

Untuk menggunakan pemosisian logis untuk nilai ini, padanannya adalah sebagai berikut:

• top = inset-block-start
• left= inset-inline-start
• bottom = inset-block-end
• right= inset-inline-end

Tempatkan elemen yang diposisikan di tengah dengan anchor-center

Untuk memudahkan Anda menempatkan elemen yang diposisikan anchor di tengah relatif terhadap anchor-nya, ada nilai baru yang disebut anchor-center yang dapat digunakan dengan properti justify-self, align-self, justify-items, dan align-items.

Contoh ini memodifikasi elemen sebelumnya dengan menggunakan justify-self: anchor-center untuk memusatkan elemen yang diposisikan di atas anchor-nya.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

Beberapa anchor

Elemen dapat di-tether ke lebih dari satu anchor. Artinya, Anda mungkin perlu menetapkan nilai posisi yang diposisikan secara relatif terhadap lebih dari satu anchor. Lakukan hal ini dengan menggunakan fungsi anchor() dan secara eksplisit menyatakan anchor mana yang Anda rujuk di argumen pertama. Dalam contoh berikut, bagian kiri atas elemen yang diposisikan ditambatkan ke kanan bawah satu anchor, dan bagian kanan bawah elemen yang diposisikan ditambatkan ke kiri atas anchor kedua:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

Posisi dengan inset-area

Selain pemosisian arah default dari pemosisian mutlak, ada mekanisme tata letak baru yang disertakan dalam API anchor yang disebut area inset.

Area inset memudahkan untuk menempatkan elemen yang diposisikan anchor relatif terhadap anchor masing-masing, dan berfungsi pada grid 9 sel dengan elemen anchor di tengah.

Berbagai kemungkinan opsi pemosisian area inset, yang ditampilkan pada petak 9 sel

Untuk menggunakan area inset, bukan posisi absolut, gunakan properti inset-area, dengan nilai fisik atau logis. Contoh:

• Tengah atas: inset-area: top atau inset-area: block-start
• Kiri-tengah: inset-area: left atau inset-area: inline-start
• Tengah bawah: inset-area: bottom atau inset-area: block-end
• Tengah kanan: inset-area: right atau inset-area: inline-end

Untuk mengeksplorasi posisi ini lebih lanjut, lihat alat berikut:

Elemen ukuran dengan anchor-size()

Fungsi anchor-size(), yang juga merupakan bagian dari API positioning anchor, dapat digunakan untuk mengukur atau memosisikan elemen yang diposisikan anchor berdasarkan ukuran anchor-nya (lebar, tinggi, atau ukuran inline dan blok).

CSS berikut menunjukkan contoh penggunaan atribut ini untuk tinggi,menggunakan anchor-size(height) dalam fungsi calc() untuk menyetel tinggi maksimum tooltip menjadi dua kali tinggi anchor.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

Gunakan anchor dengan elemen lapisan atas seperti popover dan dialog

Pemosisian anchor berfungsi sangat baik dengan elemen lapisan atas seperti popover. dan <dialog>. Meskipun elemen-elemen ini ditempatkan di lapisan terpisah dari subhierarki DOM lainnya, penempatan anchor memungkinkan Anda melakukan tethering kembali ke elemen tersebut, dan scroll bersama elemen yang tidak berada di lapisan atas. Ini adalah keuntungan besar untuk antarmuka berlapis.

Dalam contoh berikut, serangkaian popover tooltip dipicu saat terbuka menggunakan sebuah tombol. Tombol adalah anchor dan tooltip adalah elemen yang diposisikan. Anda bisa menata gaya elemen yang diposisikan seperti elemen anchor lainnya. Untuk contoh spesifik ini, anchor-name dan position-anchor adalah gaya inline pada tombol dan tooltip. Karena setiap anchor memerlukan nama anchor yang unik saat membuat konten dinamis, membuat inline adalah cara termudah untuk melakukannya.

Sesuaikan posisi anchor dengan @position-try

Setelah mendapatkan posisi anchor awal, sebaiknya sesuaikan posisinya jika anchor mencapai tepi blok penampungnya. Untuk membuat posisi anchor alternatif, Anda dapat menggunakan perintah @position-try bersama dengan properti position-try-options.

Pada contoh berikut, submenu muncul di sebelah kanan menu. Menu dan submenu adalah penggunaan API penempatan anchor yang baik bersama dengan atribut pop-over, karena menu ini cenderung menambatkan tombol pemicu.

Untuk submenu ini, jika tidak ada cukup ruang secara horizontal, Anda dapat memindahkannya ke bawah menu. Untuk melakukannya, siapkan posisi awal terlebih dahulu:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

Kemudian, siapkan posisi anchor penggantian menggunakan @position-try:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Terakhir, hubungkan keduanya dengan position-try-options. Jika digabungkan, tampilannya akan seperti ini:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Kata kunci balik otomatis posisi anchor

Jika Anda memiliki penyesuaian dasar, seperti membalik dari atas ke bawah atau dari kiri ke kanan (atau keduanya), Anda bahkan dapat melewati langkah membuat deklarasi @position-try kustom dan menggunakan kata kunci balik yang didukung browser seperti flip-block dan flip-inline. Elemen ini berfungsi sebagai pengganti untuk deklarasi @position-try kustom, dan dapat digunakan bersama satu sama lain:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Kata kunci terbalik dapat menyederhanakan kode anchor secara signifikan. Hanya dengan beberapa baris, Anda dapat membuat anchor yang berfungsi penuh dengan posisi alternatif:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

position-visibility untuk anchor di subscroller

Ada beberapa kasus yang membuat Anda mungkin ingin menambatkan elemen dalam subscroller halaman. Dalam hal ini, Anda dapat mengontrol visibilitas anchor menggunakan position-visibility. Kapan anchor tetap terlihat? Kapan data tersebut akan hilang? Anda memiliki kontrol atas opsi ini dengan fitur ini. Anda menggunakan position-visibility: anchors-visible saat ingin elemen yang diposisikan tetap terlihat sampai anchor tidak terlihat:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

Atau, Anda menggunakan position-visibility: no-overflow untuk mencegah anchor melebihi container-nya.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

Deteksi fitur dan polyfill

Karena dukungan browser saat ini terbatas, Anda mungkin perlu menggunakan API ini dengan beberapa tindakan pencegahan. Pertama, Anda dapat memeriksa dukungan langsung di CSS dengan menggunakan kueri fitur @supports. Caranya adalah dengan menggabungkan gaya anchor Anda dengan cara berikut:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Selain itu, Anda dapat mem-polyfill fitur pemosisian anchor dengan polyfill posisi anchor CSS dari Oddbird yang berfungsi dari Firefox 54, Chrome 51, Edge 79, dan Safari 10. Polyfill ini mendukung sebagian besar fitur posisi anchor dasar, meskipun implementasi saat ini tidak lengkap dan berisi beberapa sintaksis yang sudah usang. Anda dapat menggunakan link unpkg atau mengimpornya langsung di pengelola paket.

Catatan tentang aksesibilitas

Meskipun API positioning anchor memungkinkan elemen untuk diposisikan relatif terhadap elemen lainnya, API ini tidak secara inheren menciptakan hubungan semantik yang bermakna di antara elemen tersebut. Jika sebenarnya ada hubungan semantik antara elemen anchor dan elemen yang diposisikan (misalnya, elemen yang diposisikan adalah komentar sidebar tentang teks anchor), salah satu cara untuk melakukannya adalah dengan menggunakan aria-details untuk menunjuk dari elemen anchor ke elemen yang diposisikan. Software pembaca layar masih mempelajari cara menangani detail aria, tetapi dukungannya terus meningkat.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Jika Anda menggunakan pemosisian anchor dengan atribut popover atau dengan elemen <dialog>, browser akan menangani koreksi navigasi fokus untuk aksesibilitas yang tepat, sehingga Anda tidak perlu menempatkan popover atau dialog dalam urutan DOM. Baca selengkapnya tentang catatan tentang aksesibilitas di spesifikasi.

Kesimpulan

Ini adalah fitur baru dan kami senang melihat apa yang Anda bangun dengan fitur ini. Sejauh ini, kami telah melihat beberapa kasus penggunaan yang sangat rapi dari komunitas seperti label dinamis dalam diagram, garis konektor, catatan kaki, dan referensi silang visual. Selagi Anda bereksperimen dengan positioning anchor, kami ingin mendengar masukan Anda dan jika Anda menemukan bug, beri tahu kami.

Bacaan lebih lanjut

• Menggambar Garis untuk Menghubungkan Elemen dengan Pemosisian Anchor CSS
• CSS Masa Depan: Penempatan anchor oleh Roman Komarov
• Demo Codepen Collection of Anchor Una
• Alat pemosisian anchor