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

Quick Tip: Gebruik maken van het HTML5 “download” Attribuut

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

Dutch (Nederlands) translation by Sibrand Hoekstra (you can also view the original English article)

Het maken van een download link in HTML is simpel; plaats een anchor tag en laat het verwijzen naar het te downloaden bestand in het download attribuut. Sommige bestandstypen (zoals afbeeldingen, .pdf, .txt en .doc bijvoorbeeld) worden niet gedownload door de browser. Deze bestanden worden direct in de browser getoond.

Als je toegang hebt tot de webserver, kun je deze wel configureren om dergelijke bestanden te downloaden, bijvoorbeeld door het .htaccess bestand aan te passen. Als je je website host bij een van de gratis diensten als Wordpress.com, Blogspot of Github pages, kun je dat echter niet doen. Overweeg in zo'n geval om gebruik te maken van het download attribuut.

Het "Download" Attribuut gebruiken

Het download attribuut is onderdeel van de HTML5 spec en markeert een link als download link in plaats van een navigatie link.

Met het download attribuut kun je ook de uiteindelijk (gedownloade) bestandsnaam aanpassen. Het kan zijn dat het bestand op de server een automatisch gegenereerde naam heeft gekregen met nummers en koppeltekens, bijvoorbeeld acme-doc-2.0.1.txt. Het zou mooier zijn voor de gebruiker om een bestand met een wat leesbaarder naam te downloaden, bijvoorbeeld Acme Documentation (ver. 2.0.1).txt (de extensie niet vergeten uiteraard).

In de praktijk

Bekijk het voorbeeld op de demopagina, en je zult zien dat het bestand gedownload wordt met de naam zoals die aangegeven is in het download attribuut.

Een aantal aandachtspunten

  • Firefox staat het downloaden van bestanden op deze manier alleen toe als deze van hetzelfde domein als de webpagina komen, in verband met een security issue. Het bestand moet van je eigen server of domeinnaam komen, anders zal de browser het bestand zelf (proberen te) openen.
  • Opera en Chrome (Chromium en Blink) staan je toe om cross-origin files te downloaden, maar zullen de waarde van het attribute negeren. Met andere woorden, de bestandsnaam blijft ongewijzigd.

Een Fallback aanbieden

Ten tijde van schrijven van dit artikel is het download attribuut nog niet geïmplementeerd in Safari en (zoals verwacht) in Internet Explorer. Dat gezegd hebbende, staat deze feature op dit moment bovenaan de lijst van de modern IE status pagina en is bezig een aanzienlijke hoeveelheid stemmen voor implementatie te ontvangen.

In de tussentijd kunnen we een prima fallback aanbieden, zoals het geven van extra instructies onder de download link voor de browsers die dit nog niet ondersteunen. Om dat te doen moeten we Modernizr met de download feature test downloaden.

Modernizr configureren

Daarna voegen we het volgende script toe.

Het script test of de browser het download attribuut ondersteunt; zo niet dan wordt er een div met een class voor styling en instructie-tekst aan de pagina toegevoegd, en achter iedere link met een download attribuut gezet.

De tekst instructie zoals die in Safari verschijnt.

Concluderend

Het download attribuut maakt het maken van download links handig en gemakkelijk voor wie geen toegang heeft tot de configuratie van zijn of haar server. Nice! Hopelijk implementeren Safari en Internet Explorer het download attribuut snel!

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.