Stylesheets für andere Ausgabegeräte hinzufügen

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 • ‎русский

Mithilfe von CSS-Stylesheets ist es möglich, abhängig vom Gerät, das zum Durchsuchen der Webseiten genutzt, bestimmte Anweisungen (Stile) zu nutzen.

Media-Typen

Zulässige Media-Typen sind:

  • all - Wird auf alle Geräte angewandt.
  • aural - Für Sprachsynthesizer.
  • braille - Vorgesehen für Braille-Tastsensoren.
  • embossed - Vorgesehen für seitengestützte Blindenschriftdrucker.
  • handheld - Vorgesehen für Handheld-Geräte.
  • print - Wird zum Formatieren gedruckter Seiten verwendet.
  • projection - Vorgesehen für projizierte Präsentationen, z. B. Projektoren, oder zum Drucken auf Transparentfolien.
  • screen - Hauptsächlich vorgesehen für farbige Computerbildschirme.
  • tty - Vorgesehen für Geräte, die ein Zeichengitter mit festem Zeichenabstand verwenden, z. B. Fernschreiber, Terminals oder tragbare Geräte mit eingeschränkter Anzeigefunktion. Autoren sollten mit dem Medientyp "tty" keine Pixeleinheiten verwenden.
  • tv - Vorgesehen für Fernsehgeräte (niedrige Auflösung, Farbe, Bildschirme mit eingeschränkter Bildlauffunktion, Ton verfügbar).

Beispiele

Ein Media-Typ kann durch folgende Syntax einer CSS-Deklaration zugewiesen werden

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

Um mehr als einen Deklarationsstil mehr als einem Media-Typ zuzuordnen:

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

Die Anweisungen lassen sich in der CSS-Hauptdatei oder in einem separaten Stylesheet für einen bestimmten Media-Typ verwenden. Es muss eine Anweisung zum Einbinden der CSS-Datei im<head>-Abschnitt des Templates geben (folgender stammt aus dem Joomla! Beez-Template):

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

Um ein Stylesheet einzubinden, wird folgender Weg empfohlen:

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

Auf diese Weise kann sichergestellt werden, dass das Stylesheet zum Dokument hinzugefügt wird und auch Plugins darauf zugreifen können (z. B. zum Kombinieren und Komprimieren von Stylesheets).