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

Info rapide : Utiliser l'attribut HTML5 "download"

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

French (Français) translation by Thomas Triboult (you can also view the original English article)

Créer un lien de téléchargement en HTML est assez simple ; ajoutez une balise a et donnez le chemin d'accès au fichier dans l'attribut href. Cependant, certains types de fichiers (comme les images, les .pdf, .txt et .doc par exemple) ne seront pas téléchargés. Il seront ouvert par le navigateur.

Si vous avez accès au serveur de votre site il y a quelques astuces, comme configurer un .htaccess, vous permettant de télécharger directement ces fichiers. Si votre site est hébergé sur un service gratuit comme WordPress.com, Blogspot ou Github pages, qui ne vous permettent pas d'utiliser ces contournements, regardez du coté de l'attribut download.

Utiliser l'attribut "download"

L'attribut download fait partie de la spécification HTML5 et force un lien à être un lien de téléchargement plutot que de navigation.

L'attribut download vous permet aussi de renommer le fichier avant le téléchargement. Quand le fichier est sur le serveur, surtout s'il est généré automatiquement, il peut être nommé avec des nombres et des tirets, par exemple acme-doc-2.0.1.txt. Il serait mieux de fournir à l'utilisateur le fichier avec un nom plus explicite lors du téléchargement, comme Documentation Acme (ver. 2.0.1).txt (n'oubliez pas l'extension).

Voici à quoi cela ressemble :

Testez le sur la page de démonstration, et vous devriez télécharger le fichier avec le nom spécifié dans l'attribut download.

Quelques notes :

  • Firefox n'autorise que le téléchargement de fichier provenant du même serveur pour des raisons de sécurité. Le fichier doit provenir du même serveur ou nom de domaine, sinon il sera ouvert dans le navigateur.
  • Alors que Chrome et la dernière version d'Opera (avec Chromium/Blink) autorise le téléchargement des fichiers provenant de sources différentes, ils ignoreront la valeur de l'attribut. En d'autre mots, le nom de fichier sera inchangé.

Donner une alternative

Au moment où cet article a été écrit l'attribut download n'a pas été implémenté dans Safari et (comme on peut le penser) Internet Explorer. Ceci dit, selon le statut de la plateforme IE, c'est actuellement sur le haut de la pile de développement et comporte un grand nombre de votes.

Dans le même temps, il est possible d'ajouter une alternative, comme fournir des instructions supplémentaires sous le lien de téléchargement pour les navigateurs ne supportant pas cet attribut. Four ce faire, il faut télécharger Modernizr avec la fonctionnalité download incluse.

Configurer Modernizr.

Ensuite il faut ajouter le script suivant.

Ce script testera si le navigateur supporte l'attribut download ; sinon il ajoute une balise <div> contenant les instructions et une classe permettant de personnaliser l'affichage, et l'ajoute en dessous du lien utilisant l'attribut download.

Le texte apparait sur Safari.

Conclusion

L'attribut download rend les téléchargements plus accessibles aux personnes n'ayant pas accès à la configuration du serveur. J'ai hâte qu'Internet Explorer et Safari implementent l'attribut

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.