Stylesheets für andere Ausgabegeräte hinzufügen
From Joomla! Documentation
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).