Saya sangat yakin bahwa Anchor Positioning akan menjadi salah satu tambahan terbesar pada CSS. Ini mungkin bukan game changer seperti Flexbox atau Grid, tetapi ini mengisi kesenjangan positioning yang telah hilang selama beberapa dekade. Sehebat apa pun yang saya pikirkan, CSS Anchor Positioning memiliki banyak fitur, beberapa di antaranya karena kebaruannya dan beberapa karena cara kerjanya yang unik. Hari ini, saya ingin memperkenalkan Anda pada fitur lain mengenai mode jangkar yang telah mengganggu saya sejak pertama kali saya melihatnya.
awal mula
Semuanya dimulai sebulan yang lalu ketika saya membaca tentang apa yang telah dilakukan orang lain dengan Anchor Positioning, khususnya postingan dari Temani Afif tentang “Anchor Positioning & Scroll-Driven Animations”. Saya sangat menyarankan Anda membacanya dan melihat apa yang menarik perhatian saya di sana. Dengan menggabungkan mode jangkar dan animasi berbasis gulir, ini menciptakan penggeser rentang yang berubah warna seiring kemajuannya.
-Advertisement-.
Luar biasa, tapi yang menarik adalah ia menggunakan dua item target dengan nama jangkar yang sama, masing-masing terhubung ke jangkar yang sesuai, seperti sihir. Jika ini kedengarannya tidak semenarik kedengarannya, kita harus merangkum secara singkat cara kerja penempatan jangkar.
Tentukan posisi jangkar CSS anchor-scope kepemilikan
Lihat panduan lengkap penentuan posisi jangkar CSS kami untuk gambaran menyeluruh dan komprehensif.
Anchor Positioning membawa dua konsep baru ke CSS: <>jangkar elemen dan <>sasaran komponen. Jangkar adalah suatu benda yang digunakan sebagai acuan untuk menentukan posisi benda lain, oleh karena itu dinamakan jangkar. Sedangkan target adalah suatu elemen dengan posisi absolut yang posisinya relatif terhadap satu atau lebih titik jangkar.
Jangkar dan target dapat berupa hampir semua elemen, jadi Anda dapat menganggapnya hanya sebagai dua elemen div Duduk bersebelahan:
<div class="anchor">anchor</div>
<div class="target">target</div>Untuk memulai, pertama-tama kita perlu mendaftarkan elemen jangkar di CSS menggunakan file tersebut anchor-name kepemilikan:
.anchor {
anchor-name: --my-anchor;
}Dan position-anchor Properti pada elemen dengan posisi absolut menghubungkannya ke jangkar dengan nama yang sama. Namun, untuk memindahkan target di sekitar jangkar kita perlu melakukannya position-area kepemilikan.
.target {
position: absolute;
position-anchor: --my-anchor;
position-area: top right;
}Ini berfungsi dengan baik, tetapi segalanya menjadi rumit jika kita mengubah markup untuk menyertakan lebih banyak jangkar dan target:
<ul>
<li>
<div class="anchor">anchor 1</div>
<div class="target">target 1</div>
</li>
<li>
<div class="anchor">anchor 2</div>
<div class="target">target 2</div>
</li>
<li>
<div class="anchor">anchor 3</div>
<div class="target">target 3</div>
</li>
</ul>Alih-alih mengasosiasikan setiap target dengan jangkar terdekatnya, semuanya terakumulasi pada jangkar terakhir yang tercatat di DOM.
itu anchor-scope Fitur tersebut diperkenalkan di Chrome 131 sebagai jawaban atas masalah ini. Ini membatasi cakupan jangkar ke subpohon sehingga setiap target terhubung dengan benar. Namun saya tidak ingin fokus pada fitur ini, karena itulah yang awalnya menarik perhatian saya Timani tidak menggunakannya. Untuk beberapa alasan, semuanya terhubung dengan benar, sekali lagi, seperti sihir.
Apa yang terjadi?
Target biasanya dikaitkan dengan jangkar terakhir di DOM dan bukan jangkar terdekat, namun dalam contoh pertama, kita melihat dua jangkar dengan titik yang sama anchor-name Tujuan terkait terlampir. Semua ini tanpa anchor-scope kepemilikan. Apa yang terjadi?
Dua kata: Berisi satu blok.
Apa yang perlu diketahui tentang penempatan jangkar adalah bahwa hal itu sangat bergantung pada bagaimana blok yang berisi item tersebut dibuat. Ini bukanlah sesuatu yang secara inheren berasal dari posisi jangkar tetapi dari posisi absolut. Elemen absolut ditempatkan relatif terhadap blok yang dikandungnya, seperti pada properti internal, misalnya top: 0px, left: 30px atau inset: 1rem Kami hanya memindahkan elemen di sekitar batas blok yang dikandungnya, menciptakan apa yang disebut Sebuah blok yang berisi modifikasi internal.
Tujuan yang terkait dengan jangkar tidak berbeda, dan apa adanya position-area Fitur yang Anda lakukan di dalam tabel adalah mengubah blok yang berisi modifikasi internal target agar berada tepat di sebelah jangkar.
Blok yang berisi elemen dengan posisi absolut biasanya merupakan keseluruhan viewport, namun dapat diubah oleh pendahulunya dengan posisi selain itu static (biasanya relative). Temani memanfaatkan fakta ini dan membuat blok yang berisi setiap penggeser, sehingga hanya dapat ditautkan ke jangkar yang sesuai. Jika Anda mengintip kodenya, Anda dapat menemukannya di awal:
label {
position: relative;
/* No, It's not useless so don't remove it (or remove it and see what happens) */
}Jika kita menggunakan taktik ini pada contoh sebelumnya, tiba-tiba semuanya terhubung dengan benar!
Keanehan lainnya
Kami tidak perlu menggunakannya anchor-scope properti untuk mengaitkan setiap jangkar dengan targetnya, tetapi malah memanfaatkan cara blok yang berisi elemen absolut dihitung. Namun, ada cara lain yang tidak memerlukan potongan kode tambahan.
Hal ini terjadi pada saya ketika saya juga bereksperimen dengan animasi berbasis gulir, penentuan posisi jangkar, dan mencoba melampirkan catatan kaki pada gelembung teks di sisi postingan, seperti ini:
Logikanya, setiap catatan kaki akan menjadi target, namun memilih titik jangkar sedikit lebih sulit. Awalnya saya berpikir bahwa setiap tulang belakang akan bertindak sebagai jangkar, tapi itu berarti memiliki lebih dari satu jangkar dengan cara yang sama anchor-name. Hasil: Semua gol akan diakumulasikan pada jangkar terakhir:
Masalah ini dapat diselesaikan dengan menggunakan pendekatan kami sebelumnya yaitu membuat blok penampung baru untuk setiap catatan. Namun ada jalan lain yang bisa kita ambil, yang saya sebut metode reduksionis. Masalah muncul ketika ada lebih dari satu jangkar dengan hal yang sama anchor-namejadi kita akan mengurangi jumlah titik jangkar menjadi satu, menggunakan elemen yang dapat bertindak sebagai jangkar umum untuk semua target.
Dalam hal ini, kita hanya ingin menempatkan setiap target di kedua sisi kolom sehingga kita dapat menggunakan seluruh badan kolom sebagai jangkar, dan karena setiap target secara alami sejajar pada sumbu vertikal, yang perlu dilakukan hanyalah memindahkannya. sepanjang sumbu horizontal:
Anda dapat memeriksa cara melakukannya dengan lebih baik di postingan asli!
kesimpulan
itu anchor-scope Ini mungkin merupakan properti CSS terbaru yang dikirimkan ke browser (sejauh ini, hanya di Chrome 131+), jadi kami tidak dapat mengharapkan dukungannya menjadi sesuatu yang luar biasa. Meskipun saya suka menggunakannya sesekali, ini akan tetap terikat pada demo singkat untuk sementara waktu. Ini bukan alasan untuk membatasi penggunaan fitur Anchor Positioning lainnya, yang didukung di Chrome 125 dan yang lebih baru (dan semoga saja di browser lain dalam waktu dekat), jadi saya harap kebiasaan kecil ini akan membantu Anda terus menggunakan Anchor Positioning. Tanpa rasa takut.
Fitur pemosisian jangkar lainnya pertama kali diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
-Advertisement-.
