Mungkin muncul di browser: near() Anda – Beragampengetahuan

Tepat sebelum tahun 2025 berakhir, saya melihat proposal ini :near()kelas semu yang akan cocok jika penunjuknya dekat dengan elemen. Berapa banyak? Yah, itu tergantung pada nilainya. <length> Argumen disediakan. Diposting oleh Thomas Walichiewicz :near()menunjukkan bahwa ini berfungsi sebagai berikut:

button:near(3rem) {
  /* Pointer is within 3rem of the button */
}

Bagi yang bertanya-tanya, ya, kita bisa menggunakan teorema Pythagoras untuk mengukur jarak garis lurus antara dua elemen menggunakan JavaScript (“Jarak Euclidean” adalah istilah matematikanya), jadi menurut saya itulah yang digunakan di balik layar di sini. Saya memiliki beberapa kasus penggunaan untuk dibagikan kepada Anda tetapi demo hanyalah simulasi :near() Karena ternyata tidak didukung oleh web browser mana pun. Apakah kita akan menggali lebih dalam?

efek visual

Tidak ada keraguan bahwa :near() Dapat digunakan untuk jumlah efek visual yang hampir tak terbatas (maaf):

div {
  /* Div is wow */

  &:near(3rem) {
    /* Div be wowzer */
  }

  &:near(1rem) {
    /* Div be woahhhh */
  }
}

Redupkan elemen hingga :near()

Untuk mengurangi kekacauan visual, Anda mungkin ingin meredupkan komponen tertentu hingga pengguna berada lebih dekat dengannya. :near() mungkin lebih baik dari :hover Dalam hal ini, karena pengguna mungkin mengalami kesulitan berinteraksi dengan komponen jika visibilitasnya terbatas, kemampuan untuk memicunya “lebih awal” dapat membantu mengatasi hal ini. Namun, kami harus memastikan kontras warna dapat diakses, jadi saya tidak yakin seberapa bermanfaatnya :near() bisa berada dalam situasi ini.

button:not(:near(3rem)) {
  opacity: 70%; /* Or...something */
}

bersembunyi elemen sampai :near()

Selain meredupkan komponen, kita juga bisa menyembunyikan komponen (asalkan tidak penting). Saya pikir ini adalah kasus penggunaan yang lebih baik :near()karena kita tidak perlu mengkhawatirkan kontras warna, meskipun hal ini menghadirkan tantangan aksesibilitas yang berbeda.

Jadi, tahukah Anda bahwa tombol bagikan muncul saat Anda mengarahkan mouse ke suatu gambar? Masuk akal, bukan? Karena kami tidak ingin gambarnya dikaburkan, kami menyembunyikannya terlebih dahulu. Ini bukan yang terbaik dalam hal pengalaman pengguna, tetapi polanya masih familiar, misalnya di Pinterest.

Caranya adalah sebagai berikut :near() Itu bisa ditingkatkan. Orang-orang tahu atau curiga kalau tombolnya ada, kan? Seharusnya di pojok kanan bawah, kan? Mereka tahu kira-kira di mana harus mengklik, tapi tidak tepat dimana, karena tidak mengetahui ukuran atau offset tombolnya. Nah, ketika tombolnya ditampilkan :near() Artinya, mereka tidak perlu mengarahkan kursor secara akurat agar tombol tersebut muncul. Situasi ini sangat mirip dengan situasi di atas, namun alasan berkurangnya visibilitas mungkin berbeda.

Namun, kita memerlukan tombol ini agar dapat diakses (hoverable, focusable, dan paginable). Untuk ini kita tidak dapat menggunakan:

• display: hidden (Tidak dapat diarahkan, dapat difokuskan, atau ditemukan di halaman)
• visibility: hidden (Tidak dapat mengarahkan kursor, memfokuskan, atau menemukan di dalam halaman)
• opacity: 0 (Tidak dapat ditampilkan setelah ditemukan melalui halaman cari-in)

Hal ini menyisakan kita dengan content-visibility: hiddentapi masalahnya ada pada penggunaan konten tersembunyi content-visibility: hidden (atau elemen dengan display: none) adalah bahwa mereka benar-benar menghilang dan Anda tidak dapat mendekati sesuatu yang tidak ada sama sekali. Ini berarti kita perlu menyediakan ruang untuk itu, meskipun kita tidak mengetahuinya Berapa banyak ruang angkasa.

Sekarang, :near() Ini tidak didukung oleh browser web apa pun, jadi dalam demo di bawah ini saya membungkus tombol dalam sebuah wadah 3rem dari paddingsaat wadah sedang berada :hovered untuk menampilkan tombol. Ini meningkatkan ukuran area yang dapat di-hover (saya membuatnya menjadi merah sehingga Anda dapat melihatnya) daripada ukuran tombol sebenarnya. Ini pada dasarnya adalah simulasi button:near(3rem).

Tapi bagaimana kita menyembunyikan sesuatu sambil menghemat ruang?

Pertama, kami mendeklarasikan contain-intrinsic-size: auto none pada target tersembunyi. Hal ini memastikan bahwa ia mempertahankan ukuran tertentu meskipun berubah (dalam hal ini, meskipun kontennya disembunyikan). Anda dapat menentukan a <length> untuk nilai mana pun, tetapi dalam kasus ini auto Artinya berapa pun ukuran rendernya. noneyang merupakan nilai cadangan yang diperlukan atau bisa <length>tapi kita tidak membutuhkannya sama sekali, jadi”none“.

Masalahnya, ukuran yang dirender adalah “tidak ada” karena tombolnya ada content-visibility: hiddenIngat? Artinya kita hanya perlu merender selama satu milidetik, seperti yang dilakukan animasi ini:

<div id="image">
  <div id="simulate-near">
    <button hidden="until-found">Share</button>
  </div>
</div>

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}

button {
  /* Hide it by default */
  &:not([hidden="until-found"]) {
    content-visibility: hidden;
  }

  /* But make it visible for 1ms */
  animation: 1ms show-content;

  /* Save the size while visible */
  contain-intrinsic-size: auto none;
}

Perhatikan bahwa jika tombolnya memiliki hidden=until-found nilai atribut, yang membuatnya dapat difokuskan dan ditemukan di halaman, content-visibility: hidden Tidak ada pernyataan karena hidden=until-found Lakukan ini secara otomatis. Bagaimanapun, pernyataan animasi content-visibility: visible untuk 1ms meskipun contain-intrinsic-size: auto none Menangkap ukurannya dan menjaga ruang memungkinkan kita mengarahkannya meskipun tidak terlihat.

Sekarang setelah Anda memahami cara kerjanya, berikut kode lengkapnya (sekali lagi, ini disimulasikan karena :near() Belum didukung):

<div id="image">
  <div id="simulate-near">
    <button hidden="until-found">Share</button>
  </div>
</div>

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}

#simulate-near {
  /* Instead of :near(3rem) */
  padding: 3rem;

  button {
    /* Unset any styles */
    border: unset;
    background: unset;

    /* But include size-related styles */
    padding: 1rem;

    /* Hide it by default */
    &:not([hidden="until-found"]) {
      content-visibility: hidden;
    }

    /* But make it visible for 1ms */
    animation: 1ms show-content;

    /* Save the size while visible */
    contain-intrinsic-size: auto none;
  }

  &:where(:hover, :has(:focus-visible)) button {
    color: white;
    background: black;
    content-visibility: visible;
  }
}

Jika Anda bertanya-tanya mengapa kami membatalkan penyetelan border Dan backgroundhal ini dikarenakan content-visibility: hidden Hanya kontennya saja yang disembunyikan, bukan elemennya sendiri, namun sudah kami sertakan padding Di sini, karena ini akan mempengaruhi ukuran yang kita coba render, ingatlah hal itu. Kemudian kita hanya perlu menerapkan gaya-gaya ini content-visibility: visible untuk tombol ketika pembungkus dibuka :hovermengedit atau :has(:focus-visible).

Ini adalah hal yang sama tetapi tidak didukung :near():

<div id="image">
  <button hidden="until-found">Share</button>
</div>

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}

button {
  /* Unset any styles */
  border: unset;
  background: unset;

  /* But include size-related styles */
  padding: 1rem;

  /* Hide it by default */
  &:not([hidden="until-found"]) {
    content-visibility: hidden;
  }

  /* But make it visible for 1ms */
  animation: 1ms show-content;

  /* Save the size while visible */
  contain-intrinsic-size: auto none;

  &:where(:near(3rem), :hover, :focus-visible) {
    color: white;
    background: black;
    content-visibility: visible;
  }
}

pendeknya, :near() Memungkinkan kita melakukan apa yang dilakukan teknologi tiruan, namun tanpa markup ekstra dan penyeleksi kreatif, jika ada kebutuhan aksesibilitas yang kita miliki animation/contain-intrinsic-size menipu.

Ambil terlebih dahulu/prarender saat sudah dekat

Saya tidak menyarankan bahwa ada cara untuk menggunakannya :near() Bahkan :near() Ini harus diperluas, tetapi mungkin API aturan dapat memanfaatkan fungsionalitas dasarnya. Aturan spekulasi API digunakan mousedown, touchstartarah dan kecepatan penunjuk, keberadaan area pandang, dan jeda gulir sebagai sinyal untuk mulai melakukan prefetching/prerendering sumber daya tertaut, jadi mengapa tidak ada di sini?

Sebenarnya menurut saya konsep “kedekatan” bisa digunakan banyak lebih dari :near()Dan sebaiknya Mempertimbangkan untuk menggunakan pengujian hit khusus pointermove Memiliki biaya kinerja dan kompleksitas implementasi yang lebih tinggi (seperti yang ditunjukkan Thomas). Mari kita lihat contoh lainnya.

Tingkatkan interaksi penelepon yang menarik

Saat berinteraksi dengan hamparan yang dipicu oleh gerakan melayang, ada risiko penunjuk menjauh dari pemicu atau target secara tidak sengaja. API Interest Invoker memfasilitasi interaksi yang dipicu oleh hover interest-show-delay Dan interest-hide-delay Properti CSS masing-masing mencegah aktivasi dan penonaktifan yang tidak disengaja, tetapi apa pun yang melibatkan latensi dan sensitivitas waktu tidak menyenangkan dari sudut pandang pengalaman pengguna.

Untuk memberikan beberapa contoh:

• Penunjuk berada di celah antara pemicu yang diinginkan (seperti tautan atau tombol) dan target yang diinginkan (seperti jendela pop-up)
• Penunjuk melampaui batas target yang diinginkan ketika mencoba berinteraksi dengan elemen di dekat tepi target yang diinginkan.

Oleh karena itu, alih-alih (atau sebagai tambahan) penundaan tampilkan dan sembunyikan, API pemanggil minat dapat memanfaatkan konsep “terdekat” untuk memastikan bahwa hamparan tidak hilang karena interaksi yang salah. Ini dapat dikonfigurasi melalui properti CSS (misalnya, near-radius: 3rem atau hanya near: 3rem), yang terkait dengan :near() akan memanggil fungsi (interest Dan loseinterest Peristiwa JavaScript, dalam hal ini).

Kasus penggunaan lain yang diusulkan Thomas dalam proposalnya: menampilkan perintah “seret untuk menyusun ulang” ketika berada di dekat elemen yang dapat diseret. Ini adalah kasus penggunaan yang bagus karena menampilkan tooltip beberapa milidetik lebih awal dapat mengurangi waktu tugas.

Sayangnya Anda akan kesulitan (menurut saya?) untuk menirunya dengan HTML yang valid, terutama karena <a>pasir <button>s hanya dapat berisi elemen tertentu.

kekurangan :near()

Salah satu potensi kerugiannya adalah :near() Dalam situasi di mana desain UI yang lebih baik adalah pilihan yang tepat, hal ini dapat menyebabkan peningkatan signifikan pada pengembang yang malas menyembunyikan konten untuk mengurangi kekacauan visual, atau Meningkatkan Kekacauan visual (misalnya, dengan ikon yang tidak perlu) Karena Itu bisa disembunyikan secara kondisional.

Potensi pelanggaran lainnya mencakup pemetaan panas, sidik jari, dan model periklanan agresif. Cara penggunaannya juga dapat berdampak negatif pada kinerja. Usulan Thomas berhasil menunjukkan pelanggaran-pelanggaran ini dan cara memperbaikinya. :near() dapat diterapkan untuk menghentikannya.

:near() Masalah aksesibilitas

:near() tidak seharusnya menyiratkan :hover atau :focus/:focus-visible. Saya pikir itu sudah jelas ketika Anda benar-benar memikirkannya, tetapi saya masih bisa melihat garis-garis yang dilintasi. Pertanyaan yang bagus untuk ditanyakan sebelum menggunakan :near() Ya: “Apakah kita menyerang lebih dulu atau menyerang lebih dulu?” Serangan pencegahan mungkin bagus, tapi Dugaan Selalu buruk karena kami tidak ingin pengguna berpikir bahwa mereka sedang mengarahkan atau fokus pada elemen interaktif padahal sebenarnya tidak (atau belum). Hal ini disebutkan di berbagai bagian Pedoman Aksesibilitas Konten Web, namun yang paling menonjol adalah Kriteria Keberhasilan 2.4.7: Fokus Terlihat (Level AA).

Demikian pula, Kriteria Keberhasilan 2.5.8: Ukuran Target (Level AA) menyatakan bahwa elemen interaktif lebih kecil dari 24ｘ24px Harus ada jarak ekstra di sekelilingnya, dihitung sebagai berikut 24px - target width/24px - target heighttetapi terlepas dari apakah nilainya :near() Agak ambigu untuk mempertimbangkan hal ini.

Singkatnya

Ada banyak hal yang perlu dipertimbangkan di sini, tapi pada akhirnya saya ingin melihatnya diterapkan sesuai usulan Thomas. Karena itu, Pedoman WCAG harus Bersikap solid sebelum penerapan apa pun dimulai, terutama mengingat apa yang sudah dapat kami capai :near() akan berhasil (walaupun dengan lebih banyak markup dan mungkin beberapa trik CSS).

Sekali lagi, saya pikir kita harus memikirkan “kedekatan” sebagai sebuah konsep di mana fungsi yang mendasarinya dapat diwakili oleh API aturan spekulatif dan API panggilan minat (yang terakhir dengan properti CSS misalnya. near-radius).

Tolong sampaikan pendapat Anda!

Mungkin muncul di browser: near() Anda awalnya memposting di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.