Cara berbeda (dan modern) untuk berpindah konten – Beragampengetahuan

Jika yang kamu punya hanyalah palu, semuanya tampak seperti paku.

Abraham Maslow

Sangat mudah untuk menetapkan apa yang Anda ketahui secara default. Dalam hal peralihan konten, hal itu mungkin untuk dijangkau display: none atau opacity: 0 Namun web saat ini lebih “modern”, jadi mungkin sekarang adalah waktu yang tepat untuk melihat sekilas berbagai cara untuk mengubah berbagai hal – API asli mana yang saat ini didukung, kelebihan dan kekurangannya, dan beberapa hal yang mungkin Anda bisa lakukan. tidak tahu tentang hal-hal tersebut (seperti elemen semu dan hal-hal lain yang tidak jelas).

Jadi, mari luangkan waktu untuk melihat pengungkapannya (<details> Dan <summary>), API kotak dialog, API kotak pop-up, dll. Kami akan mempertimbangkan waktu yang tepat untuk menggunakan setiap item berdasarkan kebutuhan Anda. Modal atau non-modal? JavaScript atau HTML/CSS murni? tidak yakin? Jangan khawatir, kami akan membicarakan semuanya secara detail.

Penyingkapan(<details> Dan <summary>)

Kasus penggunaan: Ringkas konten dengan mudah sambil membuat detail konten dapat diubah secara mandiri atau sebagai akordeon.

Dalam urutan publikasi, pengungkapan – unsur-unsurnya disebut <details> Dan <summary> — menandai pertama kalinya kami dapat beralih konten tanpa JavaScript atau peretasan kotak centang yang aneh. Namun kurangnya dukungan browser web tampaknya menghambat pengembangan fitur baru ini, terutama karena fitur tersebut tidak memiliki aksesibilitas keyboard. Jadi jika Anda belum pernah menggunakan Chrome 12 sejak diluncurkan pada tahun 2011, saya mengerti. Di luar pandangan, di luar pikiran, bukan?

Inilah poin-poin rendahnya:

• Ini berjalan tanpa JavaScript (tidak ada kompromi).
• Ini sepenuhnya dapat dirancang dan tidak memerlukan appearance: none atau serupa.
• Anda dapat menyembunyikan tag tanpa pemilih semu non-standar.
• Anda dapat menghubungkan beberapa pengungkapan untuk membuat akordeon.
• Ahhh…dan pada tahun 2024, film ini akan sepenuhnya dianimasikan.

Pengungkapan bendera

Yang Anda cari adalah ini:

<details>
  <summary>Content summary (always visible)</summary>
  Content (visibility is toggled when summary is clicked on)
</details>

Di balik layar, kontennya dibungkus dengan elemen semu, dan mulai tahun 2024 bisa kita gunakan ::details-content. Untuk menambah ini, ada a ::marker Elemen semu yang menunjukkan apakah pengungkapannya terbuka atau tertutup, dapat kita sesuaikan.

Dengan mengingat hal ini, pengungkapannya sebenarnya terlihat seperti ini:

<details>
  <summary><::marker></::marker>Content summary (always visible)</summary>
  <::details-content>
      Content (visibility is toggled when summary is clicked on)
  </::details-content>
</details>

Untuk mengaktifkan pengungkapan secara default, berikan <details> ini open Properti, inilah yang terjadi di balik layar ketika menyangkut pengungkapan publik.

<details open> ... </details>

pengungkapan gaya

Jujur saja: Anda mungkin hanya ingin menghilangkan tanda yang mengganggu itu. Nah, Anda bisa melakukannya dengan mengatur display milik <summary> Selain dari list-item:

summary {
  display: block; /* Or anything else that isn't list-item */
}

Alternatifnya, Anda dapat mengubah markup. Sebenarnya contoh di bawah ini menggunakan Font Awesome untuk menggantinya dengan icon lain, tapi ingat ::marker Banyak atribut yang tidak didukung. Solusi paling fleksibel adalah dengan membungkus konten <summary> dalam sebuah elemen dan pilih di CSS.

<details>
  <summary><span>Content summary</span></summary>
  Content
</details>

details {
  
  /* The marker */
  summary::marker {
    content: "\f150";
    font-family: "Font Awesome 6 Free";
  }

  /* The marker when <details> is open */
  &[open] summary::marker {
    content: "\f151";
  }
  
  /* Because ::marker doesn’t support many properties */
  summary span {
    margin-left: 1ch;
    display: inline-block;
  }
  
}

Buat akordeon dengan banyak pengungkapan

Untuk membuat akordeon, beri nama beberapa pengungkapan dengan nama berikut (bahkan tidak harus saudara kandung) name properti dan nilai yang cocok (mirip dengan cara Anda menerapkan <input type="radio">):

<details name="starWars" open>
  <summary>Prequels</summary>
  <ul>
    <li>Episode I: The Phantom Menace</li>
    <li>Episode II: Attack of the Clones</li>
    <li>Episode III: Revenge of the Sith</li>
  </ul>
</details>

<details name="starWars">
  <summary>Originals</summary>
  <ul>
    <li>Episode IV: A New Hope</li>
    <li>Episode V: The Empire Strikes Back</li>
    <li>Episode VI: Return of the Jedi</li>
  </ul>
</details>

<details name="starWars">
  <summary>Sequels</summary>
  <ul>
    <li>Episode VII: The Force Awakens</li>
    <li>Episode VIII: The Last Jedi</li>
    <li>Episode IX: The Rise of Skywalker</li>
  </ul>
</details>

Dengan menggunakan wrapper kita bahkan dapat mengubahnya menjadi tab horizontal:

<div> <!-- Flex wrapper -->
  <details name="starWars" open> ... </details>
  <details name="starWars"> ... </details>
  <details name="starWars"> ... </details>
</div>

div {
  gap: 1ch;
  display: flex;
  position: relative;

  details {
    min-height: 106px; /* Prevents content shift */
      
    &[open] summary,
    &[open]::details-content {
      background: #eee;
    }

    &[open]::details-content {
      left: 0;
      position: absolute;
    } 
  }
}

…atau, menggunakan Anchor Positioning API tahun 2024, vertikal Tab (HTML yang sama):

div {
  
  display: inline-grid;
  anchor-name: --wrapper;

  details[open] {
      
    summary,
    &::details-content {
      background: #eee;
    }

    &::details-content {
      position: absolute;
      position-anchor: --wrapper;
      top: anchor(top);
      left: anchor(right);
    } 
  }
}

Jika Anda mencari beberapa ide gila tentang apa yang bisa kita lakukan dengan Popover API di CSS, lihat artikel John Rhea di mana dia membuat game interaktif sepenuhnya berdasarkan Disclosure!

Tambahkan fungsionalitas JavaScript

Ingin menambahkan beberapa fungsi JavaScript?

// Optional: select and loop multiple disclosures
document.querySelectorAll("details").forEach(details => {
  details.addEventListener("toggle", () => {
    // The disclosure was toggled
    if (details.open) {
      // The disclosure was opened
    } else {
      // The disclosure was closed
    }
  });    
});

Ciptakan pengungkapan yang dapat diakses

Pengungkapan dimungkinkan selama Anda mengikuti beberapa aturan. Misalnya, <summary> pada dasarnya a <label>artinya pembaca layar akan membaca kontennya saat sudah fokus. jika tidak <summary> atau <summary> Bukan keturunan langsung dari <details> Agen pengguna kemudian akan membuatkan label untuk Anda, biasanya menampilkan “Detail” baik secara visual maupun dalam teknologi bantu. Browser web lama mungkin bersikeras demikian Pertama Jadi lebih baik lakukan itu, Nak.

Untuk menambah ini, <summary> memiliki role dari buttonjadi konten apa pun yang tidak valid di a <button> Juga tidak valid dalam a <summary>. Ini termasuk header sehingga Anda bisa gaya satu <summary> sebagai judul, namun Anda sebenarnya tidak bisa memasukkan judul ke dalamnya <summary>.

elemen dialog (<dialog>)

Kasus penggunaan: kotak modal

Sekarang kita memiliki API Popover untuk overlay non-modal, menurut saya yang terbaik adalah kita mulai memperlakukan dialog sebagai modal, meskipun show() Metode memang mengizinkan kotak dialog modeless. Keuntungannya adalah popover Properti telah melampaui <dialog> Salah satu keuntungan dari elemen ini adalah Anda dapat menggunakannya untuk membuat overlay non-modal tanpa JavaScript, jadi menurut saya dialog modeless tidak ada manfaatnya lagi karena memerlukan JavaScript. Untuk lebih jelasnya, modal adalah overlay yang membuat dokumen utama menjadi inert, sedangkan dengan overlay non-modal, dokumen utama tetap interaktif. Dialog modal juga memiliki beberapa fitur yang siap pakai, termasuk:

• latar belakang bergaya,
• Secara otomatis fokus pada elemen pertama yang dapat difokuskan <dialog> (Atau, sebagai cadangan, <dialog> itu sendiri – termasuk a aria-label dalam hal ini),
• jebakan fokus (karena inersia dokumen utama),
• ini esc kunci untuk menutup kotak dialog, dan
• Baik kotak dialog maupun latar belakangnya dapat dianimasikan. Tandai dan aktifkan kotak dialog

dari <dialog> elemen:

<dialog> ... </dialog>

Itu disembunyikan secara default, mirip dengan <details>kita bisa memilikinya open Saat halaman dimuat, meskipun dalam hal ini bukan modal karena tidak berisi konten interaktif karena tidak digunakan showModal().

<dialog open> ... </dialog>

Saya tidak bisa mengatakan saya membutuhkan fitur ini. Sebaliknya, Anda mungkin ingin menampilkan dialog pada beberapa interaksi (seperti mengklik tombol) – jadi ini dia untuk tombolnya:

<button data-dialog="dialogA">Open dialogA</button>

Tunggu, kenapa kita menggunakan atribut data? Karena kita mungkin ingin memberikan pengenal untuk memberi tahu JavaScript dialog mana yang harus dibuka, memungkinkan kita menambahkan fungsionalitas dialog ke semua dialog dalam sebuah fragmen, seperti ini:

// Select and loop all elements with that data attribute
document.querySelectorAll("[data-dialog]").forEach(button => {
  // Listen for interaction (click)
  button.addEventListener("click", () => {
    // Select the corresponding dialog
    const dialog = document.querySelector(`#${ button.dataset.dialog }`);
    // Open dialog
    dialog.showModal();      
    // Close dialog
    dialog.querySelector(".closeDialog").addEventListener("click", () => dialog.close());
  });
});

Jangan lupa untuk menambahkan kecocokan id tiba <dialog> jadi ini ada hubungannya dengan <button> Ini menunjukkan:

<dialog id="dialogA"> <!-- id and data-dialog = dialogA --> ... </dialog>

Terakhir, sertakan tombol “Tutup”:

<dialog id="dialogA">
  <button class="closeDialog">Close dialogA</button>
</dialog>

catatan: <form method="dialog"> (Ada sebuah <button>) atau <button formmethod="dialog"> (dibungkus dalam a <form>) juga akan menutup kotak dialog.

Bagaimana mencegah pengguliran saat kotak dialog dibuka

Gunakan sebaris CSS untuk mencegah pengguliran saat modal terbuka:

body:has(dialog:modal) { overflow: hidden; }

Atur gaya latar belakang kotak dialog

Terakhir, kami memiliki latar belakang untuk mengurangi gangguan dari konten di bawah lapisan atas (ini hanya berlaku untuk modals). Gayanya dapat diganti sebagai berikut:

::backdrop {
  background: hsl(0 0 0 / 90%);
  backdrop-filter: blur(3px); /* A fun property just for backdrops! */
}

Pada titik ini, <dialog> Itu sendiri memiliki bordersatu backgrounddan beberapa paddingAnda mungkin ingin mengatur ulang. Faktanya, popup berperilaku sama.

Menangani kotak dialog modeless

Untuk mengimplementasikan kotak dialog modeless, gunakan:

• show() alih-alih showModal()
• dialog[open] (untuk keduanya) sebagai gantinya dialog:modal

Meskipun seperti yang saya katakan sebelumnya, Popover API tidak memerlukan JavaScript, jadi untuk non-modal overlay menurut saya lebih baik menggunakannya.

API kotak pop-up (<element popover>)

Kasus penggunaan: hamparan non-modal

Pada dasarnya pop-up. Kasus penggunaan yang sesuai mencakup keterangan alat (atau tip beralih – penting untuk mengetahui perbedaannya), panduan memulai, pemberitahuan, navigasi yang dapat diubah, dan penggantian non-modal lainnya di mana Anda tidak ingin kehilangan akses ke dokumen utama. Tentu saja kasus penggunaan ini berbeda dengan dialog, namun popup tetap saja cukup keren. Secara fungsional, mereka seperti kotak dialog, tetapi bukan modal dan tidak memerlukan JavaScript.

Tandai munculan

Pertama, jendela popup membutuhkan a id maupun popover Properti dan manual value (yang berarti mengklik di luar popup tidak akan menutupnya), auto nilai (klik di luar popup Melakukan mematikannya), atau tidak memiliki nilai (yang artinya sama saja). Untuk semantik, popupnya bisa <dialog>.

<dialog id="tooltipA" popover> ... </dialog>

Selanjutnya, tambahkan popovertarget dikaitkan dengan <button> atau <input type="button"> Kami ingin mengubah visibilitas popup dengan nilai yang cocok dengan visibilitas popup id properti (ini opsional karena mengklik di luar jendela popup akan tetap menutupnya kecuali popover diatur ke manual):

<dialog id="tooltipA" popover>
  <button popovertarget="tooltipA">Hide tooltipA</button>
</dialog>

Tempatkan tombol lainnya di dokumen utama sehingga popup dapat ditampilkan. itu benar, popovertarget sebenarnya adalah sebuah tombol (kecuali jika Anda menggunakan popovertargetaction Properti yang diterima show, hideatau toggle sebagai nilainya – lebih lanjut tentang itu nanti).

munculan gaya

Secara default, popup dipusatkan di tingkat atas (seperti kotak dialog), namun Anda mungkin tidak ingin popup tersebut berada di sana karena memang bukan kotak modal.

<main>
  <button popovertarget="tooltipA">Show tooltipA</button>
</main>

<dialog id="tooltipA" popover>
  <button popovertarget="tooltipA">Hide tooltipA</button>
</dialog>

Anda dapat dengan mudah menariknya ke sudut menggunakan posisi tetap, tetapi untuk popover gaya tooltip, Anda ingin popover tersebut relatif terhadap pemicu yang membukanya. Penempatan jangkar CSS membuat ini menjadi sangat mudah:

main [popovertarget] {
  anchor-name: --trigger;
}

[popover] {
  margin: 0;
  position-anchor: --trigger;
  top: calc(anchor(bottom) + 10px);
  justify-self: anchor-center;
}

/* This also works but isn’t needed
unless you’re using the display property
[popover]:popover-open {
    ...
}
*/

Namun masalahnya adalah Anda harus memberi nama pada semua jangkar tersebut, yang mana hal ini baik untuk komponen bertab, namun berlebihan untuk situs dengan banyak tooltip. Untungnya, kami bisa mencocokkan id Properti pada tombol anchor atribut popovertidak didukung dengan baik pada November 2024, namun cukup baik untuk demo ini:

<main>
  <!-- The id should match the anchor attribute -->
  <button id="anchorA" popovertarget="tooltipA">Show tooltipA</button>
  <button id="anchorB" popovertarget="tooltipB">Show tooltipB</button>
</main>

<dialog anchor="anchorA" id="tooltipA" popover>
  <button popovertarget="tooltipA">Hide tooltipA</button>
</dialog>

<dialog anchor="anchorB" id="tooltipB" popover>
  <button popovertarget="tooltipB">Hide tooltipB</button>
</dialog>

main [popovertarget] { anchor-name: --anchorA; } /* No longer needed */

[popover] {
  margin: 0;
  position-anchor: --anchorA; /* No longer needed */
  top: calc(anchor(bottom) + 10px);
  justify-self: anchor-center;
}

Masalah berikutnya adalah kita ingin tooltip ditampilkan saat mengarahkan kursor, tetapi ini tidak berhasil, yang berarti kita perlu menggunakan JavaScript. Meskipun ini mungkin tampak rumit, pertimbangkan bahwa kita dapat membuat tooltips dengan lebih mudah ::before/::after/content:popup mengizinkan konten HTML (dalam hal ini, tooltip kami sebenarnya adalah ujung pengalih), sementara content: Hanya teks yang diterima.

Tambahkan fungsionalitas JavaScript

Hal ini membawa kita ke…

Oke, mari kita lihat apa yang terjadi di sini. Pertama, kami menggunakan anchor Properti untuk menghindari penulisan blok CSS untuk setiap elemen jangkar. Popup sangat berfokus pada HTML, jadi mari kita gunakan penentuan posisi jangkar dengan cara yang sama. Kedua, kami menggunakan JavaScript untuk menampilkan popup (showPopover()) ada mouseover. Terakhir, kami menggunakan JavaScript untuk menyembunyikan popup (hidePopover()) ada mouseouttetapi tidak jika berisi tautan, karena jelas kami ingin tautan tersebut dapat diklik (dalam hal ini kami juga TIDAK Sembunyikan tombol yang menyembunyikan popup).

<main>
  <button id="anchorLink" popovertarget="tooltipLink">Open tooltipLink</button>
  <button id="anchorNoLink" popovertarget="tooltipNoLink">Open tooltipNoLink</button>
</main>

<dialog anchor="anchorLink" id="tooltipLink" popover>Has <a href="#">a link</a>, so we can’t hide it on mouseout
  <button popovertarget="tooltipLink">Hide tooltipLink manually</button>
</dialog>

<dialog anchor="anchorNoLink" id="tooltipNoLink" popover>Doesn’t have a link, so it’s fine to hide it on mouseout automatically
  <button popovertarget="tooltipNoLink">Hide tooltipNoLink</button>
</dialog>

[popover] {
  
  margin: 0;
  top: calc(anchor(bottom) + 10px);
  justify-self: anchor-center;

  /* No link? No button needed */
  &:not(:has(a)) [popovertarget] {
    display: none;
  }
}

/* Select and loop all popover triggers */
document.querySelectorAll("main [popovertarget]").forEach((popovertarget) => {
  
  /* Select the corresponding popover */
  const popover = document.querySelector(`#${popovertarget.getAttribute("popovertarget")}`);
  
  /* Show popover on trigger mouseover */
  popovertarget.addEventListener("mouseover", () => {
    popover.showPopover();
  });

  /* Hide popover on trigger mouseout, but not if it has a link */
  if (popover.matches(":not(:has(a))")) {
    popovertarget.addEventListener("mouseout", () => {
      popover.hidePopover();
    });
  }
});

Menerapkan latar belakang berjangka waktu (dan popup berurutan)

Pada awalnya, saya yakin bahwa popup dengan latar belakang adalah sebuah kekhilafan, dengan alasan bahwa popup tersebut tidak boleh mengaburkan dokumen utama yang dapat difokuskan. Tapi mungkin selama kita bisa melanjutkan apa yang kita lakukan tanpa terpaksa mematikan apapun selama beberapa detik? Setidaknya, menurut saya ini berfungsi cukup baik untuk serangkaian tip memulai:

<!-- Re-showing ‘A’ rolls the onboarding back to that step -->
<button popovertarget="onboardingTipA" popovertargetaction="show">Restart onboarding</button>
<!-- Hiding ‘A’ also hides subsequent tips as long as the popover attribute equates to auto -->
<button popovertarget="onboardingTipA" popovertargetaction="hide">Cancel onboarding</button>

<ul>
  <li id="toolA">Tool A</li>
  <li id="toolB">Tool B</li>
  <li id="toolC">Another tool, “C”</li>
  <li id="toolD">Another tool — let’s call this one “D”</li>
</ul>

<!-- onboardingTipA’s button triggers onboardingTipB -->
<dialog anchor="toolA" id="onboardingTipA" popover>
  onboardingTipA <button popovertarget="onboardingTipB" popovertargetaction="show">Next tip</button>
</dialog>

<!-- onboardingTipB’s button triggers onboardingTipC -->
<dialog anchor="toolB" id="onboardingTipB" popover>
  onboardingTipB <button popovertarget="onboardingTipC" popovertargetaction="show">Next tip</button>
</dialog>

<!-- onboardingTipC’s button triggers onboardingTipD -->
<dialog anchor="toolC" id="onboardingTipC" popover>
  onboardingTipC <button popovertarget="onboardingTipD" popovertargetaction="show">Next tip</button>
</dialog>

<!-- onboardingTipD’s button hides onboardingTipA, which in-turn hides all tips -->
<dialog anchor="toolD" id="onboardingTipD" popover>
  onboardingTipD <button popovertarget="onboardingTipA" popovertargetaction="hide">Finish onboarding</button>
</dialog>

::backdrop {
  animation: 2s fadeInOut;
}

[popover] {
  margin: 0;
  align-self: anchor-center;
  left: calc(anchor(right) + 10px);
}

/*
After users have had a couple of
seconds to breathe, start the onboarding
*/
setTimeout(() => {
  document.querySelector("#onboardingTipA").showPopover();
}, 2000);

Sekali lagi, mari kita buka kemasannya. Pertama, setTimeout() Perintah memulai pertama muncul setelah dua detik. Kedua, animasi latar belakang pudar sederhana dijalankan pada latar belakang dan semua latar belakang berikutnya. Dokumen utama tidak menjadi lembam dan latar belakang tidak bertahan, sehingga perhatian beralih ke perintah memulai tanpa merasa mengganggu.

Ketiga, setiap popup memiliki tombol yang memicu perintah orientasi berikutnya, yang memicu perintah lain, dan seterusnya, menghubungkan keduanya untuk membuat alur orientasi HTML sepenuhnya. Biasanya menampilkan popup akan menutup popup lainnya, namun hal ini tampaknya tidak terjadi jika dipicu dari dalam popup lain. Selain itu, menampilkan kembali pop-up yang terlihat akan mengembalikan login ke langkah tersebut, dan menyembunyikan pop-up akan menyembunyikannya dan semua pop-up berikutnya – meskipun demikian Itu Hanya berfungsi jika ada popover setara auto. Saya tidak sepenuhnya memahaminya, tetapi ini memungkinkan saya membuat tombol “Mulai Ulang Onboarding” dan “Batalkan Onboarding”.

Hanya HTML. Anda dapat menelusuri petunjuknya menggunakan esc Dan return.

Buat popup modal

Dengarkan aku. Jika Anda menyukai gaya HTML popover Tapi nilai semantiknya <dialog>pernyataan JavaScript ini membuat dokumen utama menjadi inert dan dengan demikian menjadi modal popup Anda:

document.querySelectorAll("dialog[popover]").forEach(dialog => dialog.addEventListener("toggle", () => document.body.toggleAttribute("inert")));

Namun, popupnya harus datang kembali dokumen utama; jika tidak, mereka akan melakukannya kembali Menjadi lembam. Secara pribadi, inilah yang saya lakukan dengan modals karena modals bukan bagian dari konten halaman.

<body>
  <!-- All of this will become inert -->
</body>

<!-- Therefore, the modals must come after -->
<dialog popover> ... </dialog>

Ahhh……bernapas

Ya, itu banyak. Tetapi…Saya pikir sekarang semua API ini mulai matang, penting untuk melihat semuanya bersama-sama untuk benar-benar memahami apa yang bisa, tidak bisa, harus dan tidak boleh digunakan. Sebagai hadiah perpisahan, saya akan meninggalkan Anda dengan versi setiap API yang mampu menerjemahkan:

---

Cara berbeda (dan modern) untuk beralih konten awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.

Dari Trik CSS https://ift.tt/yNH5YBq
Hasilkan $200 seminggu
dengan membaca lebih banyak