Agregar hojas de estilo para otros dispositivos de salida

From Joomla! Documentation

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 • ‎español • ‎فارسی • ‎français • ‎हिन्दी • ‎Nederlands • ‎português • ‎português do Brasil • ‎русский

El uso de hojas de estilo CSS, posiblilta utilizar un conjunto de directivas (estilos) dependiendo del dispositivo que se utiliza para navegar por las páginas web.

Tipos de Medios

Los tipos de medios reconocidos son:

  • all - Adecuado para todos los dispositivos.
  • aural - Para sintetizadores de voz.
  • braille - diseñado para dispositivos braille.
  • embossed - Diseñado para páginas de impresoras braille.
  • handheld - Diseñado para dispositivos portátiles.
  • print - Utilizado para dar formato a las páginas impresas.
  • projection - Diseñado para las presentaciones proyectadas, por ejemplo, proyectores o impresión de transparencias.
  • screen - Diseñado principalmente para las pantallas a color de computadoras.
  • tty - Diseñado para los medios de comunicación que utilizan una cuadrícula de caracteres de paso fijo, como teletipos, terminales o dispositivos portátiles con capacidades de visualización limitados. Los autores no deben utilizar unidades de píxel con el tipo de medio "tty".
  • tv - Diseñado tipo de dispositivos de televisión (de baja resolución, color, posibilidades limitadas de desplazamiento de las pantallas, sonido disponible).

Ejemplos

Puedes asignar un tipo de medio a una declaración CSS con la siguiente sintaxis

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

Para asignar más de una declaración de estilo para más de un tipo de medios:

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

Las directivas pueden ser utilizados en los archivos CSS principales o en una hoja de estilos aparte para un determinado tipo de medio. No se debe incluir el archivo CSS en la sección <head> de las plantillas (el siguiente, ejemplo, es tomado de la Plantilla Beez de Joomla!):

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

La forma recomendada para incluir una hoja de estilo es:

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

De esta forma, te aseguras que la hoja de estilo será añadida al documento y estará accesible para los plugins (ej. para combinar y comprimir hojas de estilo).