Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a HTML 5 que contiene a Nuevos atributos para enlaces en HTML5: donwload, media, ping

Datos de búsqueda

Nuevos atributos para enlaces en HTML5: donwload, media, ping

Parece que últimamente se han decidido a añadir algunos atributos al elemento A: download, media, ping. Rellenan algunas carencias que tenía hasta ahora el elemento de enlace.

Atributo download

El atributo download complementa al atributo href en dos aspectos:

  • Le indica al navegador que es una descarga, por lo que éste no lo mostrará como enlace visitado.
  • El nombre del archivo descargado no es el que se proporciona en el href, sino el proporcionado en download.

En el siguiente ejemplo el archivo no se descargaría como 78e65784668.pdf, sino como Informe Marzo 2014.pdf:

<a href="archivos/78e65784668.pdf"
   download="Informe Marzo 2014.pdf">Informe Marzo 2014</a>

De este modo aunque el enlace nos de un nombre sin significado, al descargar si se obtiene con un nombre más descriptivo.

También puede utilizarse con binarios embebidos:

<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCA..."
   download="prueba_de_imagen.png">Prueba de imagen</a>

Ejemplo: Prueba de imagen.

Compatibilidad

Soportado, salvo Internet Explorer y Safari.

Atributo media

Su uso en el elemento de enlace es similar al que se venía haciendo en el elemento LINK. Podría resultar útil para descargas en las que haya que diferenciar tamaños de pantalla.

<ul>
  <li>
    <a href="download/320" media="min-width: 320px">
      <img src="files/imagen_320.jpg" alt="Texto alternativo">
    </a>
  </li>
  <li>
    <a href="download/1382" media="min-width: 1280px">
      <img src="files/imagen_1280.jpg" alt="Texto alternativo">
    </a>
  </li>
</ul>

Compatibilidad

Sin soporte.

Atributo ping

Sirve para recuperar información de las acciones realizadas sobre el enlace por parte del usuario. En el futuro puede evitar o minimizar la necesidad de Javascript para la recogida de estadísticas de uso de los sitios

<ul>
  <li>
    <a href="/ruta/enlace/1" ping="/track/ruta/enlace/1">Enlace 1</a>
  </li>
  <li>
    <a href="/ruta/enlace/2" ping="/track/ruta/enlace/2">Enlace 2</a>
  </li>
</ul>

Compatibilidad

En este momento sólo lo soportan Safari, Chrome y Firefox (desactivado por defecto).

Saber más

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio