Kemudahan CSS's new @position-try

Kedudukan sauh CSS telah dikeluarkan suatu ketika dahulu. Jika anda, seperti saya, tidak suka menulis CSS, API baharu ini pasti akan menambah baik keadaan.

Kedudukan Sauh

API Penentududukan Jangkar CSS membolehkan pembangun meletakkan elemen dengan mudah berbanding yang lain (dikenali sebagai penambat), tanpa memerlukan perpustakaan tambahan atau JavaScript yang kompleks. Ciri ini sesuai untuk mencipta menu, petua alat, dialog dan antara muka berlapis lain.

Dengan API ini, anda boleh memastikan saiz/kedudukan elemen menyesuaikan berdasarkan penambatnya. Ini menghapuskan keperluan untuk pelarasan manual dan menyediakan pengalaman yang lebih lancar dan responsif apabila membina reka letak yang dinamik dan interaktif.

Apakah kedudukan-cuba?

Anchor CSS juga keluar dengan CSS at-rule baharu yang dipanggil position-try. Ia membolehkan anda menentukan kedudukan sandaran untuk elemen berlabuh apabila ia tidak muat dalam skrin atau bekas. Jika elemen melimpah, penyemak imbas secara automatik memilih kedudukan alternatif seterusnya, memastikan ia kekal kelihatan dan berfungsi sepenuhnya. Sifat position-try-fallbacks boleh digunakan untuk menentukan berbilang kedudukan sandaran untuk penyemak imbas cuba. Terdahulu ini akan dicapai dengan menjalankan pendengar yang menyemak selepas setiap perubahan port pandangan jika keadaan berjalan.

Ini boleh mengelakkan banyak sakit kepala semasa bekerja dengan menu lungsur, petua alat dll. kerana sekarang kita tidak perlu menulis logik tersuai untuk menyemak keadaan limpahan.

Satu demo

Berikut ialah demo pantas kod yang saya tulis menggunakan sifat CSS di atas:

Submenu dalam bar navigasi saya yang kelihatan mengerikan menukar kedudukannya berdasarkan lebar port paparan.

Kod ditulis dalam React. Sebelum ini saya terpaksa menggunakan kesan untuk melakukan ini. Dalam kesan saya, saya akan menyemak sama ada elemen submenu melintasi sempadan viewport. Jika ya, saya akan mencetuskan satu lagi pemaparan semula untuk mengemas kini gaya submenu. Memandangkan useEffect dijalankan selepas cat, dan kami tidak mahu pengguna melihat submenu di lokasi yang salah, saya terpaksa menggunakan useLayoutEffect untuk ini.

Sekarang saya hanya perlu menulis CSS seperti ini:

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

@position-try --bottom {
  position-area: bottom;
}

.menu-list {
  position-anchor: --anchorButton;
  border: 1px solid #000;
  font-family: sans-serif;
  width: 60px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 8px;
  position: fixed;
  position-area: right span-y-end;
  position-try-fallbacks: --bottom;
}

@position-try - mencipta peraturan yang dipanggil --bottom.
anchor-name - menetapkan butang sebagai elemen penambat.
position-anchor - benarkan menu-list menggunakan --anchorButton sebagai elemen anchor.
position-try-fallbacks - membantu menyenaraikan berbilang sandaran untuk dicuba. Ini bermakna terdapat lebih banyak jawatan walaupun --bawah gagal.

Ringkasan

Anchor CSS telah datang dan menyelesaikan beberapa kes penggunaan yang sangat menarik untuk pembangun. Sebagai tambahan kepada perkara di atas, kedudukan tertambat menjadi sangat mudah. Semuanya adalah semata-mata pada CSS, jadi prestasi juga hebat. Pada masa ini sokongan penyemak imbas tidak bagus, tetapi saya harap ia melihat lebih banyak penggunaan tidak lama lagi.

Atas ialah kandungan terperinci Kemudahan CSS's new @position-try. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!