Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Tip Cepat: Menggunakan Atribut “download” HTML5

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Don’t Forget the “optgroup” Element
All You Need to Know About the HTML5 Data Attribute

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Membuat link download dalam HTML sangat mudah; tambahkan tag anchor dan arahkan ke file dalam atribut href. Beberapa jenis file, bagaimanapun, (seperti gambar, .pdf, .txt, dan .doc misalnya) tidak akan didownload. Mereka malah akan dibuka di browser.

Jika Anda memiliki akses server-side ke situs web Anda, ada beberapa solusi yang dapat Anda gunakan, seperti mengonfigurasi file .htaccess, untuk mendownload file-file ini secara langsung. Jika situs Anda di-host dengan layanan gratis seperti WordPress.com, Blogspot, atau mungkin halaman Github yang tidak mengizinkan Anda melakukannya, pertimbangkan untuk menggunakan atribut download.

Menggunakan Atribut “Download”

Atribut download adalah bagian dari spesifikasi HTML5 dan mengungkapkan link sebagai link download daripada link navigasi.

Atribut download juga memungkinkan Anda mengganti nama dari file saat mendownload. Saat file berada di server, terutama jika dibuat secara otomatis, mungkin dapat dinamakan secara sistematis dengan angka dan tanda hubung, misalnya acme-doc-2.0.1.txt. Sebaiknya pengguna menerima file dengan nama yang lebih masuk akal saat diunduh, mungkin seperti: Acme Documentation (ver. 2.0.1).txt (tidak melupakan ekstensi file).

Inilah cara yang akan terlihat dalam penerapannya:

Cobalah di halaman demo, dan Anda harus mencari file yang diunduh dengan nama yang ditentukan dalam atribut download.

Beberapa Catatan:

  • Firefox hanya memungkinkan pengguna menngunduh file dengan asal yang sama karena masalah keamanan. File harus berasal dari server atau nama domain Anda sendiri, jika tidak maka akan dibuka di browser.
  • Saat mengunduh, file cross-origin diperbolehkan di Chrome dan Opera terbaru (dengan Chromium/Blink), keduanya akan mengabaikan nilai atribut. Dengan kata lain, nama file akan tetap tidak berubah.

Memberikan Fallback

Pada saat penulisan, atribut download belum diimplementasikan di Safari dan (seperti yang Anda duga) Internet Explorer. Mengatakan bahwa, menurut status IE modern, saat ini berada di puncak daftar pengembangan dan menerima banyak suara.

Sementara itu, kita bisa menambahkan fallback yang layak, seperti memberikan petunjuk tambahan di bawah link download untuk browser yang tidak mendukung. Untuk melakukannya, kita perlu mendownload Modernizr dengan fitur uji download yang disertakan.

Konfigurasi build Modernizr.

Lalu kita bisa menambahkan skrip berikut.

Skrip akan menguji apakah browser mendukung atribut download; jika tidak, itu akan menambahkan <div> baru dengan kelas untuk tujuan styling serta teks instruksi, dan masukkan segera di bawah link yang telah dilengkapi dengan atribut download.

Instruksi teks muncul di Safari.

Merangkum

Atribut download membuat penanganan link download sangat mudah bagi siapa saja yang tidak memiliki akses ke konfigurasi sisi server. Saya menantikan Internet Explorer dan Safari yang menerapkan atribut download segera!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.