At-Regeln
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Die Empfehlung des W3C für den CSS2-Standard definiert diesen neuen Typ von CSS-Regeln. Sie werden At-Regeln genannt, da alle Regeln dieses Typs mit dem »At«-Zeichen @ beginnen. Ihr eigentlicher Sinn liegt in ihrer Erweiterbarkeit: Das W3C, die Browserentwickler oder einfach jeder, der mit CSS arbeiten möchte, kann mit einem @ eigene Gruppen neuer CSS-Regeln definieren.
Bisher existieren vier Gruppen von At-Regeln:
Mit der @media-Regel definieren Sie die Optionen für die Ausgabe in verschiedenen Medien. Die Unterstützung durch die Browser dafür ist leider noch nicht konsistent, mit neuen Updates nehmen die Unterschiede in der Darstellung aber immer weiter ab. Die @media-Regel lässt sich für die meisten modernen Browser anwenden (die wichtigste Ausnahme ist der Internet Explorer 5.2 für Macintosh).
Die folgenden Medientypen definiert das W3C für die Verwendung mit der @media-Regel. Die Liste hat dabei keineswegs Anspruch auf Vollständigkeit: Mit dem Erscheinen neuer Technologien und Ausgabemöglichkeiten werden in der Zukunft sicherlich noch weitere Medientypen hinzukommen.
- all (alle)
- aural (Sprachausgabe)
- braille (Braille-Zeile)
- embossed (Braille-Drucker)
- handheld (PDAs u. Ä.)
- print (Druckausgabe)
- projection (Projektor/Beamer)
- screen (Bildschirm)
- TTY (Textbrowser)
- TV (Fernsehen)
Der Zweck dieser Direktiven ist weitgehend selbsterklärend, mit Ausnahme der Direktive embossed, mit der die Ausgabe für einen Braille-Drucker definiert wird. Mit dem folgenden HTML-Beispiel erzeugen Sie zwei sich voneinander deutlich unterscheidende Darstellungsweisen auf Ihrem Computerbildschirm und im Ausdruck. Das Beispiel demonstriert die Syntax und Anwendung der @media-Regel.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anwendung der @media-Regel</title>
<style type="text/css">
@media print {
body {
font-size: 12pt;
font-family: Courier;
}
}
@media screen {
body {
font-size: 36px;
font-family: Arial;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
</style>
</head>
<body>Probieren Sie aus, ob dieses Beispiel funktioniert und in welchen Browsern es klappt. Ich habe eine @media-Regel für den Ausdruck in Courier in 12 Punkt definiert, eine andere @media-Regel legt die Anzeige auf dem Bildschirm in Arial mit der Höhe von 36 Pixel fest. Auf beiden Geräten wird die Ausgabe mit einem Zeilenabstand von 120 % des Standardwerts erfolgen.</body>
</html>Sie können auch eine einzige @media-Regel für mehrere Medien definieren. Die Bezeichnungen der Medientypen müssen nur mit einem Komma getrennt werden. Es gibt noch zwei weitere Methoden, einen Medientyp in einem Stylesheet oder mit einer Regel festzulegen. Erstens mit der @import-Regel und der Angabe der Medienbezeichnung als Parameter:
@import url(bossvoice.css) aural;Mit dieser Regel weisen Sie den Browser an, das Stylesheet namens bossvoice.css zu importieren und es auf alle auditiven Ausgabemedien anzuwenden.
Der zweite Weg, das Medium für ein Ausgabeformat festzulegen, ist das media-Attribut des <style>-Tags:
<style type="text/css2" media="projection">
body {
color: blue;
background-color: white;
}
</style>Wenn Sie für einen Medientyp ein Stylesheet definieren, das den Begriff einer Druckseite versteht, können Sie auch die At-Regel @page benutzen, um Ausdehnungen, Rahmen, Seitenumbrüche und das Vorhandensein von Schnittmarken festzulegen. (Anmerkung: Ein umfassender Einsatz der @page-Regel kann recht komplex werden. Weitere Informationen dazu finden Sie auf der offiziellen Seite des W3C mit der Definition der Regel.)
Möchten Sie z. B. eine Seite mit den Maßen 8,5 x 11 Zentimeter und mit einem 0,5 Zentimeter breiten Rand erzeugen, sollte Ihre @page-Regel wie folgt aussehen:
@page {
size: 8.5cm 11cm;
margin: 0.5cm;
}Die size-Eigenschaft können Sie, wie im Beispiel, mit expliziten Werten definieren oder auch mit einem der drei folgenden konstanten Werte:
- auto: weist den Browser an, seine Standardseitengröße zu verwenden
- landscape: Seite im Querformat
- portrait: Seite im Hochformat
Die margin-Eigenschaft fasst die folgenden vier Eigenschaften zusammen. Diese können Sie für präzisere Ergebnisse auch ebenso gut einzeln bestimmen:
Mit den Pseudoklassen :first, :left und :right definieren Sie eigene Maße und Seitenränder für ein Deckblatt sowie für die linke und rechte Seite Ihres Dokuments. Im Beispiel finden Sie einen @page-Regelsatz, der das Layout für ein zweiseitiges Dokument definiert und abweichende Einstellungen für das Deckblatt festlegt:
@page {
margin: 2cm; /* Alle Seitenränder 2cm */
}
@page:first {
margin-top: 10cm; /* Oberer Rand auf der Titelseite 10cm */
}
/* 1cm breitere Seitenränder hin zum Einband */
@page:left {
margin-left: 3cm;
margin-right: 4cm;
}
@page:right
margin-left: 4cm;
margin-right: 3cm;
}Mit der CSS2-Empfehlung können Sie sogar Seitenumbrüche festlegen. Die Kontrolle über Druckseiten aber ist ein komplexes Thema. Es sprengt nicht nur unseren Rahmen, es liegt auch nicht im Fokus der meisten Designer für das Web. Wir wollen das Thema daher an dieser Stelle nicht vertiefen. Sollten Sie jedoch je eine Webseite auch für eine gedruckte Ausgabe entwerfen, können Sie getrost auf CSS zurückgreifen. Die detaillierte Beschreibung der notwendigen Eigenschaften finden Sie unter Referenz der CSS-Eigenschaften.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg