As "Media Types" foram criadas para o CSS com o objetivo de
aumentar a acessibilidade do site por diversos meios, sejam eles: celulares,
tablets, computadores e até mesmo telas de televisores.
Entretanto, as páginas muitas
vezes não são necessárias apenas para visualização, como também para impressão,
nesse caso utilizamos os "media types" para facilitar
ao navegador a identificação de qual dispositivo está acessando aquele site no
momento.
Tipos de medias que podem ser
aplicadas:
all: Com a definição do media, esse é o tipo
padrão;
aural: Para sintetizadores de som;
braille: Para dispositivos táteis;
embossed: Para impressoras em braille;
handheld: Estilos para celulares de baixos
recursos visuais;
print: Para impressão;
projection: Para projeções de slides, por exemplo.
Screen: Para qualquer dispositivo de telas
coloridas;
tv: Para televisores.
Os dois "media types" mais utilizados são:
Screen: Para telas de dispositivos, sejam eles
móveis ou não;
Print: Para impressoras, geralmente para dar uma
boa qualidade para a página que pode ser impressa.
Exemplo
de sintaxe do screen:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
type="text/css" a href="estilo.css" media="screen">
<title>Exemplo de utilização do screen</title>
</head>
<body>
<section>
Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim
leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy
diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt
lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla
elementum dui ut augue. Aliquam vehicula mi at mauris.
</section>
</body>
</html>
Exemplo
de sintaxe voltado aos dispositivos de impressão:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
type="text/css" a href="estilo.css" media="print">
<title>Exemplo
de utilização do screen</title>
</head>
<body>
<section>
Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim
leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy
diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt
lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla
elementum dui ut augue. Aliquam vehicula mi at mauris.
</section>
</body>
</html>
Segundo o InfoWester, seguem umas dicas para páginas de impressão:
* Definir todas as cores em tons de cinza;
* Sublinhar os links, e de preferência imprimir seus
endereços;
* Escolher uma fonte serifada para os textos, que é mais
fácil de ser lida no papel, já que foi criada para isso;
* Definir as unidades de texto em pontos, e não em
pixels;
* Remover elementos não essenciais, como menus, barras
laterais e, dependendo do caso, anúncios publicitários;
* Quando aplicável, destacar o endereço do site e o
autor do texto.
0 comentários:
Postar um comentário