Di Sebalik Tabir: Seretan, Sentuhan, dan Kaskad CSS

Membina panel UI yang boleh diubah saiznya adalah lebih sukar daripada yang disangka. Anda perlu menguruskan susun atur, acara sentuhan, dan peraturan CSS secara serentak.

Berikut adalah tiga pengajaran teknikal daripada reka bentuk semula UI visual-diff saya baru-baru ini.

  1. Berhenti menggunakan lebar tetingkap untuk susun atur

Jangan gunakan window.innerWidth untuk menentukan sama ada susun atur anda menegak atau mendatar. Jika pengguna mengubah saiz tetingkap, logik anda akan terganggu.

Sebaliknya, gunakan keadaan CSS yang sebenar. Gunakan getComputedStyle untuk menyemak flex-direction. Ini membaca nilai sebenar selepas semua media queries diaplikasikan. Ia memastikan logik seretan anda sepadan dengan apa yang dilihat oleh pengguna.

  1. Kendalikan acara sentuhan dan tetikus bersama-sama

Untuk memastikan fungsi seretan berfungsi pada desktop dan mudah alih, anda memerlukan pendekatan yang bersatu.

  • Gunakan optional chaining untuk mengekstrak koordinat. Ini membolehkan satu fungsi mengendalikan acara tetikus dan sentuhan.
  • Gunakan { passive: false } untuk touchmove. Pelayar web menetapkan acara sentuhan sebagai pasif secara lalai untuk membantu skrol. Jika anda tidak menetapkannya kepada false, anda tidak boleh memanggil e.preventDefault(). Tanpa panggilan tersebut, halaman akan diskrol semasa anda cuba menyeret.
  • Pasangkan pendengar (listeners) move dan end pada dokumen. Jika pengguna menggerakkan jari terlalu laju, mereka mungkin terlepas daripada pembahagi. Memasangkannya pada dokumen memastikan seretan berterusan walaupun penunjuk tergelincir.
  1. Elakkan bertelagah dengan sistem keterlihatan anda

Saya menghadapi pepijat spesifisiti CSS. Saya mempunyai satu kelas untuk menyembunyikan panel dan satu lagi untuk menetapkan arah susun atur.

Masalahnya:

  • .view-panel { display: none; }
  • .diff-layout { display: flex; }

Oleh kerana kedua-duanya mempunyai spesifisiti yang sama, kelas terakhir dalam fail tersebut yang menang. Ini bermakna panel saya kekal kelihatan walaupun sepatutnya ia disembunyikan.

Penyelesaiannya: Jangan sesekali biarkan kelas pembantu susun atur menetapkan sifat display. Biarkan kelas keterlihatan yang menguruskannya.

Daripada: .diff-layout { display: flex; flex-direction: column; }

Gunakan: .view-panel.diff-layout { flex-direction: column; }

Ini meningkatkan spesifisiti dan memastikan kelas susun atur hanya mengubah arah, bukan keterlihatan.

Sumber: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66