Adicionando folhas de estilo para aparelhos diferentes

This page is a translated version of the page Adding stylesheets for other output devices and the translation is 100% complete.

Other languages:

Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎português • ‎português do Brasil • ‎български • ‎русский • ‎فارسی • ‎हिन्दी • ‎অসমীয়া • ‎বাংলা • ‎中文（台灣）‎

Usando as folhas de estilo CSS é possível criar um grupo de diretivas (estilos) compatível com o aparelho usado para visualizar a página.

Tipo de Mídia

Os Tipos de Mídia reconhecidos são:

all - Bom para qualquer aparelho.
aural - Para sintetizadores de voz.
braille - Para aparelhos com retorno tátil em Braille.
embossed - Ideal para impressoras em Braille.
handheld - Ideal para aparelhos de mão.
print - Usado para formatar páginas para impressão.
projection - Ideal para apresentações, seja um projetor ou impressão de transparências.
screen - Ideal para telas de computadores.
tty - Voltado para mídias que usam mídias com largura fixa controlada, como teletipos, terminais ou aparelhos portáteis com capacidades de exibição limitadas. Autores não devem usar pixels como unidade com esse tipo de mídia.
tv - Votado para aparelhos tipo televisão (baixa resolução, a cores, tela de rolagem limitada com som disponível).

Exemplos

Pode-se atribuir um tipo de mídia a uma declaração CSS com a seguinte sintaxe

@media print {
  body { 
    font-size: 12pt;
    font-color: #000000; 
  }
}

Para atribuir mais de uma declaração de estilo para mais de um tipo de mídia:

@media print, handheld{
  body { 
    font-size: 12pt;
    font-color: #000000;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

As diretivas podem estar no arquivo CSS principal ou em uma folha de estilos separada para cada um dos tipos de mídia. No cabeçalho <head> deve-se incluir a referência para o arquivo CSS (a seguir temos um exemplo tirado do tema Joomla! Beez):

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />

A forma recomendada de incluir uma folha de estilos é:

<?php
$document = JFactory::getDocument();
 $tpath = $this->baseurl . '/templates/' . $this->template;
$document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media
?>

Dessa forma, você garante que a folha de estilos será adicionada ao documento e acessível aos plugins (por exemplo, para combinar e compactar folhas de estilo).

Adicionando folhas de estilo para aparelhos diferentes

From Joomla! Documentation

Tipo de Mídia

Exemplos