Bisakah API Web asli menggantikan komponen khusus pada tahun 2025? – Beragampengetahuan
12 mins read

Bisakah API Web asli menggantikan komponen khusus pada tahun 2025? – Beragampengetahuan

Maximal0Tagged , , , , , , , , ,

Jaringan tumbuh pada tingkat yang luar biasa. Saya telah menulis tentang pengembangan web selama lebih dari satu dekade (dan membangun situs web yang lebih panjang), tetapi untuk pertama kalinya, mengikuti tantangan. Meskipun kita mungkin tidak pernah melihat “html6” atau “css4”, standar baru terus muncul dan adopsi browser lebih cepat dari sebelumnya. Seperti <dialog>,,,,, <details>sekarang API pop-up banyak digunakan.

Dengan kode aksesibilitas, deklaratif (html-firt) dan fitur CSS fleksibel cutting-edge, muncul pertanyaan-apakah kita masih memerlukan komponen khusus?

Ini bukan debat “lokal vs kerangka kerja”. Kerangka kerja dapat dan memang menggunakan API ini, tetapi karena browser menyediakan API asli yang hanya berfungsi, salah satu titik penjualan inti dari “hanya pekerjaan” akan terasa tidak penting. Fitur -fitur ini mudah diimplementasikan, dilakukan, dan umumnya dapat diakses. Secara pribadi, mereka membawa lebih banyak kegembiraan bagi saya daripada pengembangan web yang telah mereka bawa selama bertahun -tahun.

Dalam artikel ini, kita akan melihat API web asli modern dan cara menggunakannya untuk membangun fitur yang kuat tanpa ketergantungan tambahan atau overhead kinerja.

Contents

Apa sebenarnya API Web asli?

Secara umum, ketika saya mengatakan fitur Web asli, maksud saya HTML modern, CSS, dan fitur JavaScript yang menangani tugas kerangka kerja atau rekayasa kompleks yang pernah kami butuhkan. Lebih khusus lagi, “API” di sini mengacu pada serangkaian fungsi web pada HTML, CSS, dan JavaScript, yang dirancang untuk bekerja bersama untuk membentuk komponen yang berfungsi penuh, seperti modalitas. Ini tidak selalu hanya komponen tetesan di luar kotak, tetapi mereka menyediakan blok bangunan untuk merakitnya dengan cepat dan efisien.

Manfaat API Jaringan Lokal Modern

Desain API Web asli memiliki beberapa kualitas yang konsisten:

  • Dinyatakan secara default – Banyak API dapat diimplementasikan menggunakan HTML normal. Ketika mereka mengekspos metode dan peristiwa JavaScript, mereka jarang membutuhkan JavaScript untuk bekerja. Ini menghindari merender skrip dan mengurangi overhead kinerja, karena fitur ini dibangun langsung ke mesin browser
  • Gaya komprehensif dan besar – Komponen -komponen ini biasanya mengandung banyak bagian, seperti latar belakang <dialog> Atau area konten yang dapat diaktifkan <details>. Yang terpenting, mereka tidak terkunci. CSS memberi kita elemen semu, level semu dan atribut untuk gaya dan menyesuaikan sesuai kebutuhan
  • Aksesibilitas memanggang – Sebagian besar API memiliki masalah aksesibilitas terbaik di kelasnya. Meskipun Anda mungkin masih perlu beradaptasi dengan konteks tertentu, dibandingkan dengan menggulir komponen khusus Anda sendiri

Dengan manfaat ini dalam pikiran, mari kita lihat beberapa contoh yang sedang beraksi.

dialog

ini <dialog> Elemen dikirim pada tahun 2013, dan itu adalah awal dari transisi ini menuju lebih banyak fitur web lokal.

Kotak dialog adalah pop-up yang dapat berupa modal atau non-modal:

  • Dialog Modal – Dokumen utama (<body>) Lembam Menggunakan properti malas, tangkap fokus dalam dialog sampai ditutup. Sisa halaman ini dapat disesuaikan ::backdrop Pseudo-Elements (diluncurkan pada tahun 2022)
  • Dialog non -mode – Dokumen utama masih dapat diakses saat kotak dialog dibuka

Kotak dialog dibuka menggunakan JavaScript:

  • showModal() Untuk dialog modal
  • show() Untuk dialog non-mode

Anda dapat menutup dialog dengan beberapa cara berbeda:

Tidak diragukan lagi (JavaScript):

  • close() – tidak mungkin diluncurkan close peristiwa
  • requestClose() – Batal, luncurkan cancel peristiwa

Pernyataan (html):

  • <dialog><form><button formmethod="dialog">…</button></form></dialog>
  • <dialog><form><input type="submit" formmethod="dialog"></form></dialog>
  • <dialog><form><input type="image" formmethod="dialog"></form></dialog>
  • <dialog><form method="dialog"><!-- <button|input> here --></form></dialog>

membatasi <dialog>

  • Satu -satunya cara untuk menembak cancel Acara adalah melalui JavaScript requestClose() Metode; Tidak ada yang setara dengan deklaratif
  • Penting juga untuk tidak memotong API resmi (misalnya, dengan beralih open Atribut langsung). Melakukan hal itu merusak perilaku bawaan, mis. Esc Kunci, css hook (:open,,,,, :modal,,,,, ::backdrop) dan fitur aksesibilitas, yang semuanya adalah titik utama penggunaan <dialog> Pertama
  • Dialog tidak sepenuhnya deklaratif dibandingkan dengan API yang lebih baru, karena mereka dikembangkan sebelum filosofi desain ini berakar. Jika bukan karena kemampuan modal mereka, mereka hampir dianggap warisan saat ini

Sebelum melanjutkan, berikut adalah contoh lengkap dari dialog kontrol tombol (lihat MDN untuk detail lebih lanjut):

<button id="show-non-modal-dialog">Show non-modal dialog</button>
<button id="show-modal-dialog">Show modal dialog</button>

<dialog id="non-modal-dialog">
  <div>Dialog content</div>

  <!-- Close-dialog button -->
  <form method="dialog">
    <button>Close dialog</button>
  </form>
</dialog>

<dialog id="modal-dialog">
  <!-- An actual form -->
  <form method="post">
    <div>Form content</div>

    <!-- Submit-form button -->
    <input type="submit" value="Submit form">

    <!-- Close-dialog button -->
    <button formmethod="dialog">Close dialog</button>
  </form>
</dialog>

dialog 
  &:open 
    /* Styles for dialogs that are open */
  

  &:modal 
    /* Styles for modal dialogs that are open */
  

  &:not(:modal) 
    /* Styles for non-modal dialogs that are open */
  

  &::backdrop 
    /* Styles for backdrops */
  


body 
  &:has(dialog:open)  
    /* Styles for  if a dialog is open */
  

  &:has(dialog:modal)  
    /* Styles for  if a modal dialog is open */
  

  &:has(dialog:not(:modal))  
    /* Styles for  if a non-modal dialog is open */
  

  &[inert]  
    /* Styles for  if is inert for *any* reason */
  


const showNonModalDialogButton = document.querySelector("#show-non-modal-dialog");
const showModalDialogButton = document.querySelector("#show-modal-dialog");

const nonModalDialog = document.querySelector("#non-modal-dialog");
const modalDialog = document.querySelector("#modal-dialog");

/* Show dialog non-modally */
showNonModalDialogButton.addEventListener("click", () => nonModalDialog.show());

/* Show dialog modally */
showModalDialogButton.addEventListener("click", () => modalDialog.showModal());

/* Close dialog (we can do this declaratively) */
// closeDialogButton.addEventListener("click", () => dialog.close());

/* Close dialog (cancellable, can't be done declaratively) */
// closeDialogButton.addEventListener("click", () => dialog.requestClose());

Pengungkapan informasi terperinci

Dukungan Browser <details> Pengungkapan tiba pada tahun 2020. Pada saat itu, komponen HTML baru dirancang untuk sepenuhnya deklaratif, meskipun mereka tidak akan sepenuhnya ditata atau dianimasikan sampai nanti. satu <details> Elemen Mengaktifkan konten drop-down yang dapat dilipat. Di dalamnya, Anda harus memasukkan a <summary> elemen, bertindak sebagai tombol sakelar. Saat diklik, itu mengungkapkan konten yang terkait. Secara default, aksesibilitas sebagian besar ditangani, meskipun masih layak meninjau dokumen untuk menghindari kesalahan. Berbeda <dialog>JavaScript API di sini opsional dan tidak penting untuk fungsionalitas.

Beberapa detail utama:

  • Konten berikut <summary> Secara otomatis dibungkus ::details-content Elemen Pseudo. Sejak 2024, dapat ditetapkan sebagai CSS. Itu menggunakan content-visibility: hidden,Pertunjukan display: none Tetapi Anda masih dapat mencari melalui “Halaman Temukan” browser
  • ini <summary>Anda dapat membentuk atau menggantinya dengan menemukan panah defaultnya ::marker Elemen Pseudo
<details>
  <summary>Summary</summary>
  Content (wrapped in ::details-content)
</details>

details 
  /* Toggle button */
  summary 
    /* Up/down arrow */
    &::marker  
  

  /* Content to be toggled */
  &::details-content  

  /* details when open */
  &:open 
    summary 
      &::marker 
        /* Replace default arrow */
        content: "Down arrow, or something";
      
    
    &::details-content  
  

  /* details when not open */
  &:not(:open) 
    summary 
      &::marker  
    
    &::details-content

2024 juga memberi kita kemampuan untuk mendapatkan akordeon eksklusif, dengan hanya satu <details> Di set yang ditentukan, itu bisa open sekali. Untuk membuat definisi ini, berikan mereka name Properti dengan nilai yang cocok, sama seperti Anda menentukan set input radio eksklusif:

Sekali lagi, ada beberapa detail kecil yang perlu diperhatikan (pun tidak dimaksudkan), tetapi detail ini, tetapi <details> Kami telah menyediakan banyak fitur dengan imbalan HTML dan CSS yang sangat sedikit.

muncul

API Popover digunakan untuk overlay konten. Dalam hal aksesibilitas, ini menggambarkan konten dan perilaku elemen yang menampilkan konten, bukan sifat komponen, karena popup dapat berupa banyak hal (tips alat, daftar drop-down, atau bahkan dialog non-modal).

Sejauh menyangkut sintaks, cukup berikan komponen (kami hanya menggunakan umum <div> Sekarang) popover Atribut dengan atau tanpa nilai:

  • auto – Bisa disadap untuk menutup tanpa benteng auto muncul
  • hint – Anda bisa mengetuk dan menutup saja hint muncul
  • manual – Bisa tanpa disadap dan tidak akan menutup jenis pop-up lainnya
  • Berharga – Default auto

Selain itu, <button> Pemicu kasus pop-up harus dikutip id menggunakan popovertargetProperti, Anda juga dapat memasukkan popovertargetaction Dengan siapa pun hide,,,,, showatau toggle Jika Anda ingin membatasi gugatan tertentu, itu berharga (toggle adalah nilai default).

contoh:

<button popovertarget="popover" popovertargetaction="show">Show popover</button>

<button popovertarget="popover" popovertargetaction="toggle">Toggle popover</button>

<div id="popover" popover="auto">
  <div>Popover content</div>
  <button popovertarget="popover" popovertargetaction="hide">Hide popover</button>
</div>

Jika pop-up berisi konten navigasi, yang terbaik adalah menggunakan elemen semantik yang serupa <nav> Tidak universal <div>. API Popover dapat menangani dialog non -modal – mirip dengan perilaku, tetapi semantik masih penting: aksesibilitas:

  • <nav> Karakter aria dengan aria tersembunyi navigation
  • <dialog> Memiliki peran implisit dialog (Dapat diubah menjadi alertdialog)

Memilih elemen yang tepat memastikan bahwa prompt aksesibilitas yang benar dipanggang. Jika tidak sesuai dengan elemen semantik, Anda bisa ketinggalan <div> Dengan jernih role milik.

Dalam hal gaya, :popover-open Level semu memungkinkan Anda menargetkan kasus pop-up terbuka secara langsung di CSS (atau penggunaan :not(:popover-open) Untuk keadaan tertutup):

[popover]:popover-open 
  /* Styles for popovers that are open */

Dan, tentu saja, kita harus membutuhkan JavaScript API. Untuk mempelajari lebih lanjut tentang kasus pop-up, saya sarankan Anda membaca dokumentasi API Popover MDN.

Pemecatan <dialog>S

Tiga jenis pop-up (auto,,,,, hint,,,,, manual) Sekarang ada percakapan paralel, terima kasih closedby milik. Ini membuatnya lebih mudah menggunakan semantik <dialog> Elemen, bukan pop-up role="dialog"dan juga memberikan kontrol yang lebih baik atas penolakan dialog:

  • <dialog closedby="none"> – Pengguna tidak dapat menutup kotak dialog
  • <dialog closedby="closerequest"> – Pengguna dapat menggunakan tombol atau esc kunci
  • <dialog closedby="any"> – Pengguna dapat menggunakan tombol untuk menutup kotak dialog. esc kunci, atau klik kotak dialog

Hubungi jendela pop-up

Saat target HTML (mis. <button>) Hubungi popup (mis., Kotak dialog atau suara sembulan), yang perannya diselesaikan secara implisit atau eksplisit menu,,,,, listbox,,,,, tree,,,,, gridatau dialogAnda harus memasukkan aria-haspopup Atribut dengan nilai yang sama. Untuk dialog, ini karena tidak ada atribut yang menyiratkan apa yang sedang terjadi. Meskipun kasus pop-up memang memiliki atribut seperti itu (mis. popovertargetaction), mereka tidak menggambarkan jenis sembulan apa yang akan muncul, itulah yang persis seperti apa aria-haspopup Melakukan.

Ini tidak berlaku untuk <details> Pengungkapan adalah karena <summary> Tombol bersarang dalam komponen yang dinyatakan dan semantik.

Saat ini, satu-satunya pengecualian untuk aturan ini adalah API Investigasi Bunga yang akan datang (yang akan digunakan dengan kasus pop-up untuk membuat kasus pop-up yang dipicu melayang), yang mencakup peran ARIA “terendah” tooltip.

Namun demikian, komponen HTML-First ini mengurangi jumlah pekerjaan aksesibilitas yang kita butuhkan.

Hubungi perintah

API Perintah Panggilan dapat digunakan untuk metode JavaScript menggunakan API web asli lainnya yang hanya HTML. Misalnya, ini memungkinkan kami untuk menggunakan HTML sebagai ganti show() atau showModal() Metode JavaScript pada dasarnya menempatkan API dialog dengan API Web asli yang lebih baru pada par, yang dapat dinyatakan sejak hari pertama. Dirilis tahun ini saja (2025), ini menunjukkan bahwa jaringan akan menjadi kemajuan pertama.

Untuk menggunakan API perintah panggilan, mulailah dengan mengidentifikasi target (misalnya, <dialog id="modal-dialog">). Setelah itu, buat <button> Ini akan memanggil target (terutama harus tombol). Akhirnya, tambahkan command Properti menentukan perintah yang akan dipanggil dan commandfor Referensi atribut id Nilai (misalnya, <button command="show-modal" commandfor="modal-dialog">Show modal</button>).

contoh:

<!-- Equivalent to showModal() -->
<button command="show-modal" commandfor="modal-dialog">Show modal</button>

<dialog id="modal-dialog">
  <div>Dialog content</div>

  <!-- Equivalent to close() -->
  <button command="close" commandfor="modal-dialog">Close dialog</button>
</dialog>

Dokumentasi resmi mengatakan bahwa API Perintah Panggilan dapat digunakan untuk menampilkan/menutup mode dan menampilkan/menyembunyikan/mengubah Popovers, tetapi membuka menyatakan menyatakan bahwa API pada akhirnya akan berisi perintah lain. Yang sedang berkata, ketika saya menimpa API pada November 2024, banyak perintah (mis. open/close/toggle untuk <details> Elemen telah diimplementasikan secara diam -diam. Berikut adalah daftar kandidat untuk didukung di masa depan (meskipun lebih banyak kandidat ini telah diimplementasikan secara diam -diam sekarang), dan di bawah ini, dukungan formal adalah:

  • Dukungan formal
    • show-modal (Ditelepon showModal())
    • close (Ditelepon close())
    • request-close (Ditelepon requestClose())
    • show-popover (Ditelepon showPopover())
    • hide-popover (Ditelepon hidePopover())
    • toggle-popover (Ditelepon togglePopover())
  • Tidak didukung (aneh)

Aksesibilitas tergantung pada metode yang Anda panggil, tetapi sebagian besar dipanggang, dan jika Anda membutuhkan JavaScript API (yang dapat Anda gunakan untuk mengimplementasikan perintah khusus), akan ada dukungan Anda.

sebagai kesimpulan

Kami akan tinggal di sini hari ini, tetapi jelas bahwa API Web asli telah berjalan jauh. Meskipun masih ada celah dalam dukungan browser, lintasan ini menjanjikan. Segera kita dapat melihat adopsi yang lebih luas dari perintah panggilan lainnya, Investigator Bunga API (diaktifkan melayang dipicu pop-up), dan saran untuk kombinasi asli, menu, dan banyak lagi.

Bahkan ada saran <input type="checkbox"> Masukkan sakelar/sakelar, mirip dengan upgrade <select> Elemen dikirim awal tahun ini. Peningkatan ini akan memungkinkan pengembang untuk menargetkan komponen komponen secara langsung dengan CSS, menghilangkan kebutuhan untuk mengumpulkan versi khusus dari awal.

Semua ini menunjuk ke ekosistem web yang lebih sehat: lebih sedikit kesalahan build dan ketergantungan, kesalahan khusus, aksesibilitas yang lebih baik, kode yang lebih bersih, dan lebih sedikit ketergantungan pada JavaScript. Hasilnya adalah pengalaman pengembang yang lebih cepat, lebih andal, dan lebih bahagia.

Jika Anda melakukan ini, Anda sekarang tahu API Web asli mana yang akan mulai mencoba dan perkembangan menarik apa yang akan datang.

Terima kasih telah membaca hingga lain kali!

rencana pengembangan website



metode pengembangan website

jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website

#Bisakah #API #Web #asli #menggantikan #komponen #khusus #pada #tahun

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Website https://beragampengetahuan.com

Related Posts