Stylesheets für andere Ausgabegeräte hinzufügen

From Joomla! Documentation

Revision as of 08:44, 4 August 2021 by Max123kl (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎português • ‎português do Brasil • ‎български • ‎русский • ‎فارسی • ‎हिन्दी • ‎অসমীয়া • ‎বাংলা • ‎中文(台灣)‎

Mit CSS-Stylesheets ist es möglich, eine Reihe von Anweisungen (Stile) zu verwenden, die von dem Gerät abhängen, mit dem die Webseiten aufgerufen werden.

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).