Um mich (vorerst) langsam wieder von den Javascript Frameworks zu entfernen, möchte ich in nächster Zeit einige praktische HTML5 Attribute durchgehen – entsprechend mit Code- und Anwendungsbeispielen, versteht sich! Heute geht es um das kleine aber feine „download“ Attribut…

Was tut das download Attribut?

Das „download“ Attribut kann uns helfen, sämtliche Dateien für den Benutzer einfach „herunterladbar“ zu machen anstatt es (auf gut Glück) dem Browser zu überlassen oder es per PHP Header zu forcieren. Die Syntax ist denkbar einfach:

<a href="pfad/zur/datei.zip" download>Download</a>

Hier definieren wir also den Link zur Datei „datei.zip“ als Download-Link. Theoretisch kann somit für jede verlinkte Datei ein Download erzwungen werden! Aber natürlich funktioniert das nur, wenn der Browser dies unterstützt… Doch dazu später mehr 😉

Weiterhin können wir mit Hilfe des Attributes einen Namen für die Datei vorgeben:

<a href="pfad/zur/datei.zip" download="ZIP Archiv">Download</a>

Hier brauchen wir keinerlei Dateiendung angeben, das wird vom Browser abgehandelt.
Diese Funktion kann sehr hilfreich sein, wenn wir beispielsweise ein Content Management Systemen (CMS) benutzen – diese arbeiten nämlich gerne mit internen (teils kryptischen) Dateinamen, IDs oder sonstwas.

Thema „Styling“?

Seit CSS2 können wir nach Attributen selektieren, was natürlich auch bedeutet, das wir „Download“-Links nun auch (automatisch) als solche Kennzeichnen können! Das ganze schaut in etwa so aus:

a[download] {
   color: #000;
}

Dadurch können wir z.B. für jeden Download-Link eine kleine Grafik hinterlegen:

a[download]:before {
   content: url(download.gif);
}

Und schon würde vor jedem Download-Link die „download.gif“ Grafik dargestellt werden.

Und eine Kompatibilitätsprüfung für alte Browser?

Wir können relativ einfach mit Hilfe von Javascript überprüfen ob der aktuelle Browser das „download“ Attribut unterstützt:

var a = document.createElement('a');

if (typeof a.download != "undefined")
{
   // download wird unterstützt
}
else
{
   // download wird nicht unterstützt
}

(Original-Quelltext gefunden auf webdesignerdepot.com)

So… Und ehrlich gesagt wars das schon für diese Woche! Ich hoffe ihr seid auch nächste Woche wieder dabei um mehr über HTML5 zu lernen… Bis dahin wünsche ich allen Lesern und Leserinnen eine angenehme Woche und natürlich Happy Coding!