Definición y Uso
La media atributo especifica qué dispositivo / medio el documento vinculado está optimizado para.
Este atributo se utiliza para especificar que la dirección URL de destino está diseñado para dispositivos especiales (como el iPhone), el habla o los medios impresos.
Este atributo puede aceptar varios valores.
Se aplica a
La media atributo se puede usar en los siguientes elementos:
| Elementos | Atributo |
|---|---|
| <a> | media |
| <area> | media |
| <link> | media |
| <source> | media |
| <style> | media |
Ejemplos
A Ejemplo
Un enlace con una media de atributos:
<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>
Inténtalo tú mismo " Area Ejemplo
Una imagen-mapa, con un área seleccionable:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm" media="screen and (min-color-index:256)">
</map>
Inténtalo tú mismo " Link Ejemplo
Dos hojas de estilo diferentes para dos tipos de medios diferentes (pantalla y la impresión):
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Inténtalo tú mismo " Source Ejemplo
Utilice de la media de atributos:
<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Inténtalo tú mismo " Style Ejemplo
Especificar el estilo a utilizar para la impresión:
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style> Inténtalo tú mismo " Soporte para el navegador
La media de atributos tiene el siguiente soporte de los navegadores para cada elemento:
| Elemento | |||||
|---|---|---|---|---|---|
| a | Sí | Sí | Sí | Sí | Sí |
| area | Sí | Sí | Sí | Sí | Sí |
| link | Sí | Sí | Sí | Sí | Sí |
| source | No soportado | No soportado | No soportado | No soportado | No soportado |
| style | Sí | Sí | Sí | Sí | Sí |