tutoriais mais recente desenvolvimento web
 

HTML media Attribute


Definição e Uso

A media atributo especifica o que a mídia / dispositivo o documento vinculado é otimizado para.

Este atributo é usado para especificar que o URL de destino é projetado para dispositivos especiais (como o iPhone), fala ou mídia impressa.

Este atributo pode aceitar vários valores.


Aplica-se a

A media atributo pode ser usado nos seguintes elementos:

elementos Atributo
<a> media
<area> media
<link> media
<source> media
<style> media

Exemplos

A Exemplo

Um link com uma media atributo:

<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>
Tente você mesmo "

Area Exemplo

Uma imagem-mapa, com uma área clicável:

<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>
Tente você mesmo "

Link Exemplo

Duas folhas de estilo diferentes para dois diferentes tipos de mídia (tela e impressão):

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Tente você mesmo "

Source Exemplo

Use da media atributo:

<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Tente você mesmo "

Style Exemplo

Especificar o estilo a ser usado para impressão:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}

</style>
Tente você mesmo "

Suporte a navegadores

A media atributo tem o seguinte suporte ao navegador para cada elemento:

Elemento
a sim sim sim sim sim
area sim sim sim sim sim
link sim sim sim sim sim
source Não suportado Não suportado Não suportado Não suportado Não suportado
style sim sim sim sim sim