Anzeige
Tutorialbeschreibung

Erweiterte Features von HTML und CSS Teil3 - @-Regeln in CSS

Erweiterte Features von HTML und CSS Teil3 - @-Regeln in CSS

Einige Aspekte von HTML und CSS wurden in Kapitel 4 bewusst nicht behandelt, weil es sich um problembehaftete oder speziellere Features handelt. In diesem Kapitel gehen wir gesondert darauf ein.
 


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education.


3 @-Regeln in CSS


Zur spezielleren Syntax von CSS zählen die »at-Regeln«. Folgende Regeln gehören dazu:
- die @import-Regel zum Einbinden anderer, in einer externen CSS-Datei notierten Formatdefinitionen,
- die @media-Regel zum Unterscheiden ausgabetypspezifischer Formatdefinitionen,
- die @page-Regel für druckorientierte Stylesheet-Definitionen,
- die @charset-Regel für CSS-eigene Zeichensatzdefinitionen.

Eine Regel kann eine einzelne Verarbeitungsanweisung sein, die mit einem abschließenden Semikolon endet. Es gibt jedoch auch Regeln, an die sich ein kompletter Block anschließt, begonnen und beendet durch geschweifte Klammern – genau so wie Formatdefinitionen zu einem Selektor.

3.1 Die @import-Regel

In den bisherigen Beispielen haben wir externe CSS-Dateien stets über <link rel= "stylesheet" ...> eingebunden. CSS bietet mit der @import-Regel jedoch auch eine eigene Möglichkeit zum Einbinden externer Stylesheets an.

Ein Beispiel:

<style type="text/css">
@import url(styles.css) screen;
@import url(../special/styles-print.css) print;
#example {
background-color:yellow;
}
</style>

Die @import-Regel wird innerhalb eines zentralen style-Bereichs im Kopf einer HTMLDatei notiert. Wichtig ist zunächst zu wissen, dass die @import-Regel vor allen anderen Definitionen im Stylesheet notiert werden muss.
Die Quelle der externen CSS-Datei wird über url(...) angegeben. Erwartet wird eine URI-Angabe. Die Datei kann also entweder lokal oder in Form einer absoluten Internetadresse referenziert werden.
Hinter der URL-Angabe kann sofort das abschließende Semikolon stehen. Es kann jedoch auch noch ein so genannter Medientyp angegeben werden. In diesem Fall wird angewiesen, dass die CSS-Definitionen aus der eingebundenen Datei nur für das angegebene Ausgabemedium gelten. Welche Ausgabemedien hier angegeben werden können, beschreiben wir weiter unten in Zusammenhang mit der @media-Regel.

3.2 Die @media-Regel

CSS erlaubt es, bei Formatdefinitionen nach Ausgabemedien zu unterscheiden, so beispielsweise die Unterscheidung nach Bildschirm- und Druckerausgabe. Ein Browser kann dann beim Anwenderwunsch, eine Seite auszudrucken, die Formate des print-Stylesheets verwenden, während für die Bildschirmanzeige die screen-Definitionen berücksichtigt werden. Gerade in Verbindung mit positionierten Elementen und mehreren Spalten kann es sinnvoll sein, für Ausdrucke ein eigenes Stylesheet zu entwickeln, welches die Elemente papierfreundlicher verteilt.

Daneben gibt es aber auch speziellere Medientypen, um der Vielfalt internetfähiger Geräte und auch Spezialausgabegeräten für Anwender mit Seh- oder anderen Schwächen gerecht zu werden. Die nachfolgende Tabelle listet die in der CSS-Spezifikation 2.1 vorgesehenen Medientypen auf. Spätere CSS-Versionen können weitere oder geänderte Medientypen enthalten. Maßgeblich dafür sind nicht zuletzt Entwicklungen auf dem Hardwaremarkt.

Medientyp Bedeutung
all Alle Medientypen (Default)
braille Taktile Ausgabemedien mit Braille-Zeile
embossed Seitenorientierte Braille-Drucker
handheld Kleingeräte mit Display (Pocket-Computer, Handys, Tablet-PCs)
print Drucker
projection Beamer, Projektoren
screen Übliche moderne farbige Computerbildschirme
speech Sprach-Synthesizer (anstelle von speech ist auch aural möglich)

Bilder


Die @media-Regel wird als Block um die jeweils zugehörigen Formatdefinitionsblöcke gesetzt.

Ein Beispiel:

Bilder


So wie im Beispiel notiert, könnte das Konstrukt in einer separaten CSS-Datei oder in einem style-Bereich innerhalb der HTML-Dateikopfdaten stehen.
Das Beispiel zeigt einige typische Formatdefinitionen, bei denen eine Unterscheidung zwischen Bildschirm (@media print) und Drucker (@media print) sinnvoll ist. Wenn bei der Bildschirmpräsentation helle Schriften auf dunklem Hintergrund verwendet werden, so ist es gut, für Druckausgaben dunkle Schriften auf weißem Grund anzugeben. Zwar verhindern die Browser zum Teil eigenmächtig, dass eine rabenschwarze Seite beim Ausdrucken eine halbe Tonerkartusche verbraucht, doch eine explizite Anweisung in CSS sorgt für Sicherheit. Auch Schriftarten und Schriftgrößen sind oft für die Bildschirmpräsentation optimiert. So ist die beliebte Microsoft- Schriftart Verdana vorwiegend für die Verwendung auf Websites entwickelt worden, weniger für Druckdokumente. Und Schriftgrößenangaben in Pixel sind ebenfalls bildschirmorientiert. Eine Unterscheidung nach Medientyp erlaubt es, für die Druckausgabe Punktangaben zur Schriftgröße zu notieren, was für die Bildschirmausgabe wiederum nicht empfehlenswert ist.

Beachten Sie bei der Syntax die verschachtelten Blöcke. Die @media-Regel schließt alles ein, was zwischen der öffnenden geschweiften Klammer hinter der Medientypangabe und ihrem Gegenstück, der schließenden geschweiften Klammer steht. Dazwischen befinden tty Textmodus- Ausgaben (Teletext, manche Handys, Textbrowser) tv Fernseher (eingeschränktes Scrollen, dafür soundfähig) sich typische Selektoren mit Formatdefinitionen, die ebenfalls wie üblich in geschweiften Klammern stehen, also eigene Blöcke darstellen.

Es ist auch erlaubt, mehrere Medientypen anzugeben, also z.B.:

@media screen, projection, tv { ... }

In diesem Fall gelten die zugeordneten Formatdefinitionen für alle genannten Gerätetypen.

3.3 Die @page-Regel

Das CSS-Boxmodell geht von einem Viewport aus. Bei der Ausgabe einer Webseite im Browser ist dies das aktuelle Anzeigefenster im Browser. Bei Ausgabe auf einen Drucker ist es – einen seitenorientierten Drucker, also keinen Endlosdrucker vorausgesetzt – eine Seite. Eine Seite kann jedoch unterschiedlich groß sein. So weichen beispielsweise das amerikanische US-Letter-Format und das vergleichbare deutsche A4-Format in ihren Längen- und Breitenverhältnissen voneinander ab. Ferner wird bei Druckseiten, die später gebunden werden sollen, in der Regel zwischen rechten und linken Seiten unterschieden. Für solche druckspezifischen Bedürfnisse steht die @page-Regel zur Verfügung.
Die Unterstützung der @page-Regel durch die Browser ist jedoch noch sehr dürftig. Die beste Unterstützung leistet derzeit der Opera-Browser.

Das nachfolgende Beispiel stellt einen möglichen Einsatz der @page-Regel vor:

@page {
size:21.0cm 14.85cm;
margin-top:2.2cm;
margin-bottom:2.0cm;
}
@page :left {
margin-left:1.7cm;
margin-right:2cm
}
@page :right {
margin-left:2cm;
margin-right:1.7cm
}

Eine speziell für die @page-Regel geschaffene CSS-Eigenschaft ist size. Damit lässt sich innerhalb des Blocks einer @page-Regel die gewünschte Seitengröße definieren. Als Wert werden entweder zwei numerische Angaben erwartet, von denen die erste als Breite und die zweite als Höhe der Seite interpretiert wird. Oder Sie geben nur das allgemeine Seitenformat vor, nämlich portrait (Hochformat) oder landscape (Querformat). Bei numerischen Angaben sind printorientierte Einheiten wie cm, mm oder inch dringend zu empfehlen.

Über die Adressierung @page:left und @page:right können Sie zwischen linken und rechten Seiten beim Druck unterscheiden. Im obigen Beispiel werden die linken und rechten Ränder entgegengesetzt definiert, was beim Ausdruck der Berücksichtigung eines Binderands (im Beispiel 0.3 Zentimeter) entspricht.

Weitere druckspezifische CSS-Formatierungen
Die folgenden CSS-Eigenschaften gehören nicht zur @page-Regel, sind jedoch in Zusammenhang mit printorientierter Ausgabe von Bedeutung. Vor allem innerhalb von Formatdefinitionen für den Medientyp print können solche Angaben sinnvoll sein. Die Eigenschaften können innerhalb aller üblichen Selektoren notiert werden.

Drei Eigenschaften namens page-break-before, page-break-after und page-break-inside erzwingen und verhindern Seitenumbrüche.

Ein Beispiel:

@media print {
h1 {
font-family:Tahoma,sans-serif;
font-size:15pt;
page-break-before:always;
}
p, li, blockquote {
font-family:inherit;
font-size:10pt;
page-break-inside:avoid;
}
}

Die Eigenschaften page-break-before (Seitenumbruch vor diesem Element) und pagebreak- after (Seitenumbruch nach diesem Element) erlauben neben den Standard-Wertzuweisungen auto und inherit (Voreinstellung und »wie Elternelement«) die Angaben always (Seitenumbruch in jedem Fall erzwingen), left (Seitenumbruch erzwingen, und zwar so, dass die nächste Seite eine linke Seite ist), right (Seitenumbruch erzwingen, und zwar so, dass die nächste Seite eine rechte Seite ist) sowie avoid (Seitenumbruch verhindern). Bei left und right kann es vorkommen, dass zwei Seitenvorschübe eingefügt werden und eine Leerseite entsteht. Bei page-break-inside (Seitenumbruch innerhalb dieses Elements) ist neben den Standardzuweisungen nur avoid (Seitenumbruch innerhalb dieses Elements verhindern) erlaubt. Der Elementinhalt wird dann komplett auf die nächste Seite gedruckt. Auf der Seite davor bleibt unten je nach Umfang ein gewisser Leerraum.

Ebenfalls für seitenorientierte Ausgabemedien gedacht sind die beiden Eigenschaften orphans (alleinstehende Zeilen am Seitenende) und widows (alleinstehende Zeilen am Seitenanfang).

Ein Beispiel:

@media print {
p, li, blockquote {
font-family:inherit;
font-size:10pt;
orphans:2;
widows:2;
}
}

In diesem Beispiel wird festgelegt, dass Fließtext der HTML-Elemente p, li und blockquote, falls innerhalb davon beim Ausdruck ein Seitenwechsel vorkommt, so umgebrochen werden sollte, dass wenigstens zwei Textzeilen am Ende der Seite und zwei Zeilen auf der neuen Seite stehen. Ist der Text kürzer, wird er komplett auf die neue Seite gedruckt. Der Wert für beide Eigenschaften ist also eine einfache Zahl, welche für die Anzahl Textzeilen steht.

3.4 Die @charset-Regel

Die @charset-Regel hat nichts mit dem HTML-Zeichensatz zu tun. Innerhalb von HTMLDokumenten sollte die Angabe zum Zeichensatz deshalb stets wie üblich über die dafür vorgesehene Meta-Angabe erfolgen.
Die @charset-Regel ist nur für externe CSS-Dateien gedacht, damit ein auslesender Browser weiß, nach welchem Zeichensatz er die CSS-Datei dekodieren muss. Die @charset- Regel muss ganz zu Beginn der CSS-Datei notiert werden, z.B.:

@charset "UTF-8";

Innerhalb der Anführungszeichen muss ein Zeichenvorratsname aus dem IANA-Repertoire angegeben werden, also entweder eine Zeichenkodierungsform wie UTF-8 oder ein Zeichensatz wie beispielsweise ISO-8859-1. Die CSS-Datei muss im entsprechenden Kodierungsformat bzw. Zeichensatz abgespeichert sein.

4 CSS und die Browser

In Kapitel 5 haben Sie gelernt, wie moderne Webseitenlayouts ausschließlich über CSS erstellt werden. Nun gibt es ältere Browser, die vereinzelt noch zum Einsatz kommen, welche aber modernes CSS nicht so interpretieren wie spezifiziert oder nur einen Teil davon. Gemeint sind vor allem Netscape-Browser der 4er-Generation, Internet Explorer der 4er-Generation, teilweise auch noch der 5er-Generation, und Opera-Browser unter Version 6. Manchmal ist es sinnvoll, diese Browser mithilfe kleiner Tricks auszuschließen oder explizit anzusprechen. Diese Technik der so genannten Browser-Weichen versucht, Code bedingt ausführbar oder interpretierbar zu machen. Allein innerhalb von CSS gibt es einige Möglichkeiten dafür. In diesem Abschnitt werden wir einige wichtige davon vorstellen.

Schuld an der Misere sind übrigens nicht nur die (bösen, kommerziellen) Browser-Anbieter, wie von Hardlinern gerne behauptet wird. Auch die CSS-Spezifikation des W3-Konsortiums ist ein historisch gewachsenes Gebilde und war in früheren Jahren bei weitem nicht so präzise, wie sie es mittlerweile ist. Beschreibungen wie etwa das Boxmodell fehlten zunächst einfach. Der Interpretationsspielraum, den die Spezifikation ließ, führte bei den Browsern zu unterschiedlichen Implementierungen.

4.1 Netscape 4.x ausschließen

Wenn Sie überhaupt noch Wert darauf legen, auf Netscape-4-Browser Rücksicht zu nehmen, dann sollten Sie, falls Sie CSS massiv und vor allem als Layoutbasis einsetzen, diesen Browser völlig ausschließen und dafür sorgen, dass er nur nacktes HTML anzeigt, ebenso wie ein textbasierter Browser.
Dies geht recht einfach mithilfe der @import-Regel. Notieren Sie alle CSS-Formatdefinitionen in einer externen CSS-Datei. Binden Sie diese Datei in HTML nicht über das <link>- Tag ein (diese Syntax versteht Netscape 4 nämlich), sondern CSS-spezifisch (das ignoriert Netscape 4).

Beispiel:

<style type="text/css">
@import url(styles.css);
</style>

Diese Lösung ist in jedem Fall sauberer, als Netscape mit CSS-Definitionen zu konfrontieren, die er völlig fehlerhaft und teilweise mit grotesken Bugs darstellt. Vorausgesetzt, Ihre HTML-Dokumente enthalten ordentlich strukturiertes Markup, steht einer akzeptablen Präsentation in Netscape nichts im Wege.

Netscape-4-Browser mit eigenen Formaten bedienen
Wenn Sie sich die Mühe machen wollen, können Sie Netscape 4 doch noch mit etwas für ihn verdaulichem CSS versorgen. Binden Sie dazu zusätzlich zur Referenz via @import- Regel über das <link>-Tag eine andere CSS-Datei ein, die nur jene Formate enthält, die auch für Netscape unkritisch sind.

Beispiel:

<link rel="stylesheet" type="text/css" href="simple.css">
<style type="text/css">
@import url("advanced.css");
</style>

Mit diesem Code werden zwei CSS-Dateien eingebunden. Die Datei simple.css wird von allen Browsern interpretiert, die Datei advanced.css jedoch nicht von Netscape-4-Browsern. In der simple.css könnten beispielsweise Angaben zur Schriftformatierung stehen, die Netscape 4 noch leidlich umsetzt. Formatdefinitionen, die eine ordentliche Umsetzung des CSS-Boxmodells erfordern, wie Rahmen, Hintergrundgestaltung, Positionierung, Breiten, Höhen usw., sollten Netscape 4 dagegen unzugänglich bleiben und könnten in der advanced.css stehen.

4.2 Internet Explorer ausschließen und explizit ansprechen

Zurzeit der Drucklegung dieses Buchs ist der Internet Explorer der in der Szene am meisten verpönte Browser, leider aber auch noch der mit der größten Verbreitung. Verpönt ist er nicht nur wegen seiner engen Betriebssystemeinbindung, die ihn zu einem großen Sicherheitsrisiko für PCs werden ließ, sondern auch, weil er bei der Umsetzung der aktuellen HTML- und CSS-Standards des W3-Konsortiums noch einige ärgerliche Lücken und Fehler aufweist.

Wichtig ist auf jeden Fall, im HTML-Dokument eine gültige und vollständige Dokumenttyp- Deklaration zu notieren (inklusive DTD-URL-Angabe). Nur dadurch wird der Internet Explorer 6 dazu bewegt, vom so genannten Quirks Mode in den so genannten Compliant Mode umzuschalten. Im Quirks Mode benutzt der Internet Explorer ein älteres, microsoft-eigenes CSS-Boxmodell, das gewisse Abweichungen im Vergleich zu der CSS-Spezifikation aufweist. Die Ausdehnungssummen von Elementinhalt, Innenabstand, Rahmen und Außenabstand werden in diesem Modell anders berechnet und können daher bei Seitenlayouts zu unangenehmen Überraschungen führen. Der Compliant Mode ist dagegen der Schalter für eine standardkonforme Interpretation. Gesetzt wird der Schalter wie erwähnt, indem in HTML eine vollständige Angabe zum Dokumenttyp notiert wird.

Internet Explorer ausschließen
Einige neuere syntaktische Features bei Selektoren versteht der Internet Explorer bis einschließlich Version 6.0 nicht. Formatdefinitionen innerhalb von Selektoren mit solchen syntaktischen Elementen ignoriert er vollständig. Wenn Sie also Formate definieren möchten, die der Internet Explorer nicht interpretieren soll, dann müssen Sie einfach den Selektor so formulieren, dass dieser Browser ihn ignoriert.

Ein Beispiel:

Selektor für alle Browser:
#kopf {
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
}
Selektor nicht für Internet Explorer:
body > #kopf {
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
}

Die #-Syntax, um via Selektor ein Element mit einem bestimmten id-Namen auszuwählen, kennt der Internet Explorer. Die Syntax, um mithilfe des >-Zeichens eine genaue Angabe zur Verschachtelungsregel zu notieren, kennt er hingegen nicht und er ignoriert sämtliche zugehörigen Formatdefinitionen. Befindet sich das Element mit dem id-Namen #kopf in der Elementhierarchie direkt unterhalb des body-Elements, also <body> ... <element> </ element> ... </body>, so ist die zweitgenannte Selektor-»Formulierung« bedeutungsgleich mit der ersten. Im Gegensatz zur ersten wird sie jedoch vom Internet Explorer ignoriert, was sinnvoll ist, da dieser position:fixed nicht kennt.
Auch Selektoren mit attributbedingten Angaben wie div[id] schließen den Internet Explorer aus.

Eine weitere Möglichkeit, Internet Explorer mit einer Versionsnummer kleiner als 5 auszuschließen, besteht darin, alle zu verbergenden Formatdefinitionen in einen @media-Block zu packen.

Ein Beispiel:

@media all {
p:first-letter { font-size:250%; }
}

Da der Internet Explorer die @-Regeln bis Version 4 noch nicht kennt, ignoriert er sie. Die Angabe @media all (also »alle Medien«) hat für andere Browser jedoch den gleichen Effekt, wie wenn der @media-Block gar nicht da wäre. Mit den beschriebenen Maßnahmen wird gleichzeitig auch Netscape 4.x ausgeschlossen.

Internet Explorer explizit ansprechen
Die zweifellos eleganteste Methode, Regelungen speziell für den Internet Explorer zu treffen, sind die genannten Conditional Comments. Dies sind HTML-Kommentare, deren Inhalt vom Internet Explorer auf Grund einer speziellen Syntax jedoch nicht ignoriert, sondern interpretiert wird. HTML-Kommentare beginnen normalerweise mit <!-- und enden mit -->. Mit <!--[if ...]> und dem Gegenstück <![endif]--> können Sie jedoch HTML-Code speziell für den Internet Explorer oder sogar für spezielle Versionen davon notieren. Andere Browser behandeln den Inhalt dagegen als normalen HTML-Kommentar und ignorieren ihn. Die Syntax zur Formulierung der if-Bedingung erlaubt Ausprägungen wie [if IE] (wenn es irgendein Internet Explorer ist), [if IE 6] (wenn es ein Internet Explorer 6.0 ist), [if gte IE 5] (wenn es ein Internet Explorer Version größer gleich 5.0 ist) oder [if lte IE 6] (wenn es ein Internet Explorer mit einer Version unter 6.0 ist).

In Zusammenhang mit CSS erlauben es solche Kommentare, <link>-Tags zum Einbinden spezieller CSS-Dateien oder spezifische style-Bereiche zu notieren.

Ein Beispiel:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie-lte-6.css">
<style type="text/css">
div.kasten {
width:60%;
height:100px;
background-color:yellow;
}
</style>
<![endif]-->

In diesem Beispiel wird sowohl eine CSS-Datei eingebunden als auch ein Style-Bereich definiert. Der Code steht jedoch innerhalb der Zeichenfolgen <!-- --> und wird deshalb eigentlich von allen Browsern ignoriert. Die spezielle Anschlusssyntax signalisiert dem Internet Explorer jedoch, dass er den HTML-Code interpretieren soll, wenn es sich um eine Produktversion kleiner als 6.0 handelt.


Links zum Thema Browser-Weichen mit CSS:
Browser-Weichen und -Filter per CSS:
http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html
Workshop Browser-Weiche:
http://www.css4you.de/wsbw/


Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 16:59

Gute Tutorial leicht erklärt.

Portrait von Flip_p
  • 23.06.2009 - 12:53

ja, ich bin einsteiger, und es ist gut erklärt! danke!

Portrait von dejavu
  • 24.04.2008 - 11:25

sehr interessant, beschäftige mich privat mit Webseitengestaltung. Das Buch mach aufjedenfall einen guten Eindruck. Danke für Tipp und natürlich für das Tut

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.04.2008 - 10:21

Man lernt nicht aus! Sehr verständlichen Download

Portrait von Lioness
  • 24.04.2008 - 08:17

sonnigen Dank für einen weiteren verständlichen Download zum Thema CSS - genau das, was ich grad brauch

x
×
×