Adicionar folhas de estilo para outros dispositivos de saída

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 • ‎български • ‎русский • ‎فارسی • ‎हिन्दी • ‎অসমীয়া • ‎বাংলা • ‎中文（台灣）‎

Utilizar folhas de estilo CSS, é possível utilizar um conjunto de diretivas (estilos) dependendo do dispositivo utilizado para navegar nas páginas da Web.

Tipos de Multimédia

Os tipos de multimédia reconhecidos são:

all - Adequados para todos os dispositivos.
aural - Para sintetizadores de voz.
braille - Para dispositivos com retorno tátil em braille.
embosses - Para impressoras em braille.
handheld - Para dispositivos portáteis.
print - Utilizado para formatar páginas impressas.
projection - Para projeção de apresentações, por exemplo: projectores ou impressão em material transparente-
screen - Principalmente para monitores de computador.
tty - Para mídia que utiliza uma grelha de caracteres com tamanho fixo, como telétipos, terminais ou dispositivos portáteis com capacidade de exibição limitadas. Não devem ser utilizadas unidades de pixeis no formato mídia "tty".
tv - Para dispositivos do tipo televisão (baixa resolução, ecrãs com rolagem limitada, com som disponível).

Exemplos

Pode atribuir um tipo de multimédia a uma declaração CSS através da seguinte sintaxe

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

Para atribuir mais do que uma declaração de estilo a 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 ser aplicadas no ficheiro CSS principal ou num ficheiro à parte para cada tipo de mídia. O ficheiro CSS deve ser incluído na secção <head> do modelo (o seguinte exemplo foi retirado do modelo Joomla! Beez):

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

Recomenda-se que se inclua a folha de estilos da seguinte forma:

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

Desta forma, assegura-se que a folha de estilos será adicionada ao documento e fique acessivel aos plugins (i.e. para combinar e comprimir folhas de estilo).

Adicionar folhas de estilo para outros dispositivos de saída

From Joomla! Documentation

Tipos de Multimédia

Exemplos