Salah satu daripada mereka yang 'onboarding' UIS, dengan kedudukan sauh

menyelam ke dunia yang menarik dari kedudukan CSS Anchor! Tutorial ini meneroka ciri CSS yang inovatif ini, menggunakan "Panduan Kedudukan Anchor" yang komprehensif Juan Diego Rodriguez (tersedia di CSS-Tricks) sebagai rujukan kami.

Ini adalah perkembangan yang menarik. Ramai yang akan mengingati kesan "Panduan Layout Flexbox" CSS-Tricks "dan" Panduan Susun atur Grid "-sumber yang tidak ternilai yang saya masih gunakan secara teratur! Saya sering menyesuaikan pelbagai tab untuk memastikan sintaks yang betul dalam eksperimen codepen saya.

Sejak Panduan Juan, saya telah bereksperimen dengan kedudukan CSS Anchor, dan saya ingin berkongsi penemuan saya, belajar lebih banyak, bereksperimen lebih lanjut, dan, tentu saja,

membina perkara!

memperkenalkan kedudukan penunggang CSS

Posisi Anchor membolehkan kami menyambung -atau "Anchor" -satu elemen kepada satu atau lebih yang lain. Secara asasnya, ia mentakrifkan

bagaimana elemen "sasaran" (elemen yang dilekatkan pada sauh) diposisikan relatif kepada sauh, termasuk penurunan kedudukan melalui at-peraturan. @position-try

Cukup meletakkan, kedudukan sauh dengan ketara meningkatkan

, membantu unsur-unsur yang benar-benar berpose berkelakuan diramalkan. Kami akan meneroka ini secara terperinci. position: absolute; Pada masa ini draf spec W3C, kedudukan utama adalah agak baru. Ia ditandakan "ketersediaan terhad" dalam garis dasar, yang bermaksud ia disokong terutamanya oleh pelayar berasaskan kromium (versi 125). Walau bagaimanapun, Oddbird menyediakan polyfill yang berguna untuk keserasian penyemak imbas yang lebih luas.

Butiran sokongan penyemak imbas boleh didapati di Caniuse.com. Nombor menunjukkan versi di mana sokongan bermula.

sokongan penyemak imbas desktop

Sokongan pelayar mudah alih/tablet

Oddbird mencipta polyfills untuk banyak ciri CSS baru. Menyokong kerja mereka di GitHub atau Open Collective!

Tab Atkins-Bittner, penyumbang kepada spec W3C, menyampaikan kedudukan utama di CSS Day 2024 (video yang tersedia di YouTube). Juan menunjukkan penggunaannya dengan animasi yang didorong oleh pandangan untuk kesan nota terapung pada trik CSS. Kevin Powell mempamerkan "CSS Popover Anchor Positioning" dalam video baru-baru ini, dan Thomas Park mencipta Anchoreum (permainan Flexbox Froggy-style) untuk mengajar kedudukan sauh.

Tugasan

Sekarang kita memahami kedudukan CSS Anchor, mari kita meneroka fungsinya. Elemen Tethering menawarkan potensi yang besar, menyelesaikan banyak isu yang sebelum ini ditangani dengan kedudukan mutlak yang kompleks dan z-index pelarasan.

mari kita periksa sintaks asas. Kami memerlukan dua elemen: elemen kedudukan utama dan sasarannya.

<div>
  Anchor
</div>
<div>
  Target
</div>

Kami menetapkan elemen yang berpusat di anchor menggunakan anchor-name, nama yang unik (diawali dengan sengkang berganda, seperti CSS Custom Properties).

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

elemen sasaran memerlukan position: absolute; dan position-anchor (sepadan dengan jangkar anchor-name).

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

unsur -unsur ini kini dikaitkan. position-area mencipta grid 3x3 yang tidak kelihatan di atas elemen utama, yang membolehkan penempatan sasaran yang tepat.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

Sasaran kini berlabuh ke pusat atas elemen utama!

Anchoring pseudo-elements

pseudo-elements boleh berlabuh seperti elemen biasa:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;

  &::before {
    content: "Target";
    position: absolute;
    position-anchor: --anchor;
    left: anchor(center);
    bottom: anchor(center);
  }
}

Ini berguna untuk menambah peningkatan visual atau penunjuk.

bergerak sauh

sauh boleh diposisikan semula menggunakan fungsi anchor() dan bukannya position-area.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor-one;
  top: anchor(bottom);
  left: anchor(left);
}

Fungsi

anchor() Gunakan nilai yang dikira elemen anchor. Di sini, sasaran top sepadan dengan jangkar bottom. Memandangkan perubahan position-anchor dan peralihan yang lancar mungkin.

Eksperimen Lanjutan

Pasukan Chrome mengeluarkan pseudo-selektor baru untuk <details></details> dan <summary></summary> unsur-unsur (:details-content). Ini juga boleh berlabuh. Ini adalah eksperimen tetapi menunjukkan potensi.

Aplikasi Praktikal

mari kita meneroka kegunaan praktikal kedudukan CSS Anchor (kini Chrome-Only).

ToolTips

Tooltips adalah semulajadi. Melayang di atas ikon memaparkan label berdekatan. Artikel Zell Liew mengenai Amalan Terbaik Tooltip menyediakan bimbingan semantik.

<button id="inbox-tool" class="tool" aria-labelledby="inbox-label">
  <svg></svg>
</button>
<div id="inbox-label" role="tooltip">Inbox</div>

Tooltip adalah adik beradik elemen anchor (aria-labelledby menghubungkan mereka). CSS mengendalikan kedudukan dan penglihatan.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15binbox-tool {
  anchor-name: --inbox-tool;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15binbox-label {
  position: absolute;
  position-anchor: --inbox-tool;
  position-area: end center;
  visibility: hidden;
}

.tool:hover + [role="tooltip"],
.tool:focus-visible + [role="tooltip"] {
  visibility: visible;
}

A Tooltip Tooltip yang Dikenali CSS! Pertimbangkan toggletips untuk peranti sentuh.

pendedahan terapung

pendedahan (seperti

/<summary></summary>

) mendapat manfaat daripada kedudukan utama, terutamanya untuk unsur -unsur terapung. API Popover menyediakan penyelesaian bukan modal, lapisan atas dengan ciri-ciri seperti pemecatan cahaya. Zell Liew menawarkan maklumat lanjut mengenai popovers, dialog, dan modaliti.

Contoh menu dropdown:

<div>
  Anchor
</div>
<div>
  Target
</div>

CSS mengendalikan kedudukan berlabuh dan sandaran:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

Komponen keranjang belanja

Menggabungkan teknik sebelumnya, kita boleh membuat komponen keranjang belanja:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

CSS menambat tooltip, dialog keranjang belanja, dan lencana:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

tiga elemen berlabuh ke anchor tunggal!

menggabungkan teknik

Bahagian ini mempamerkan penggunaan gabungan alat, pendedahan, dan lencana gabungan, menunjukkan kuasa kedudukan sauh.

Projek Akhir: Alat onboarding

Sebagai projek akhir, saya membina alat onboarding CSS Anchor-kedudukan (codepen tersedia). Ini mengelakkan kerumitan percubaan berasaskan JavaScript saya sebelum ini ("Handholdjs").

Elemen Custom <hand-hold></hand-hold> menggunakan atribut data-tour-stop untuk menentukan langkah -langkah lawatan. JavaScript secara dinamik mengemas kini kedudukan utama, dan peralihan paparan memastikan peralihan yang lancar. Projek ini adalah eksperimen dan tidak siap pengeluaran kerana sokongan penyemak imbas terhad.

Kesimpulan

Posisi CSS Anchor mempunyai potensi untuk merevolusikan pembangunan CSS, sama seperti Flexbox dan Grid. Aplikasinya luas, dan saya teruja untuk melihat inovasi masa depan dari masyarakat.

Atas ialah kandungan terperinci Salah satu daripada mereka yang 'onboarding' UIS, dengan kedudukan sauh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!