HTML5 è venuto con tutte le nuove API, nuovi tipi di input e attributi per i moduli. Come spesso accade, quelle aggiunte importanti spesso oscurano gli aggiornamenti minori e penso che ciò sia particolarmente vero per l'attributo download.
Come sai, ci sono alcuni file che il browser non scarica automaticamente; immagini, altre pagine Web e in base alle impostazioni del browser, a volte anche ai PDF. L'attributo download fornisce al browser un modo nativo per scaricare questi file automaticamente, senza dover ricorrere a JavaScript. Questo è davvero utile per qualsiasi app che si occupa del download di immagini, come i siti di caricamento delle immagini.
Poiché l'attributo download non usa script di alcun tipo, è semplice come aggiungere l'attributo al tuo link:
var a = document.createElement('a');if(typeof a.download != "undefined"){// download attribute is supported}else{// download attribute is not supported}Prendendo in considerazione tutto ciò che è stato aggiunto a HTML5, l'attributo download è una parte molto piccola, ma a mio parere è un attributo che era in ritardo da tempo e sicuramente ha il suo utilizzo nelle app di oggi sia per l'usabilità che per la semplificazione.
Hai implementato l'attributo download? Quali sono i tuoi eroi non celebrati di HTML5? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, scarica l'immagine via Shutterstock.
![]( myFolder / myImage.png "download> Scarica immagine </a></pre></div><p> La cosa fantastica di questo attributo è che puoi persino impostare un nome per il file scaricabile, anche quando non è il nome sul tuo server. Questo è ottimo per siti con nomi di file complessi o anche immagini create dinamicamente, che desiderano fornire un nome di file semplice e intuitivo. Per fornire un nome, basta aggiungere un segno di uguale, seguito dal nome che si desidera utilizzare racchiuso tra virgolette, in questo modo: </p><div class=pre-wrap><pre><code class=){kind=link}
![var a = document.createElement('a');if(typeof a.download != "undefined"){// download attribute is supported}else{// download attribute is not supported}]( myFolder / reallyUnnecessarilyLongAndComplicatedFileName.png "download =" myImage "> Scarica immagine</a></pre></div><p> Si noti che il browser aggiungerà automaticamente l'estensione corretta del file al file scaricato, quindi non è necessario includerlo all'interno del valore dell'attributo. </p><p class=clearrow></p><h2> Supporto per il browser </h2><p> Al momento, solo Chrome 14+ e Firefox 20+ supportano l'attributo download, quindi potresti dover ricorrere a qualche semplice JavaScript per rilevare se l'attributo è supportato. Puoi farlo in questo modo: </p><div class=pre-wrap><pre><code class=){kind=link}