CSS/@-Regeln

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Allgemeines

Neben den im vorherigen Kapitel erklären Regelsätzen, die das Zuordnen von Eigenschaften zu Elementen ermöglichen, gibt es in CSS noch eine weitere Sorte von Regeln. Diese Regeln beginnen mit dem At-Zeichen (@), daher nennt man sie @-Regeln.

@-Regeln besitzen teilweise sehr unterschiedliche Anforderungen, da sie verschiedene Zwecke erfüllen müssen. Die wichtigsten @-Regeln werden nachfolgend erklärt. Weitere @-Regeln, die mit anderen Funktionen in CSS zusammenarbeiten, werden in den entsprechenden Abschnitten erklärt.

[Bearbeiten] @charset - Angabe der Zeichenkodierung

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Mit der @charset-Regel kann angegeben werden, in welcher Zeichenkodierung ein Stylesheet verfasst wurde.

Diese Regel wird nur dann beachtet, wenn die Zeichenkodierung nicht durch eine der folgenden Alternativen festgelegt wurde: Durch einen HTTP-Header, durch eine Byte-Order-Mark oder durch das Dokument, in dem sich das Stylesheet befindet (d.h. @charset ist in einem HTML style-Element wirkungslos).

Da die Kodierung eines Dokuments bzw. eines Stylesheets eine sehr grundlegende Information ist, gelten strenge Regeln bei der Verarbeitung dieser @-Regel. Die Angabe der Zeichenkodierung ist jedoch optional, wenn das Stylesheet in UTF-8 kodiert wurde, da es sich dabei um die Standardkodierung handelt.

Die Regel muss im Stylesheet an allererster Stelle stehen, d.h. kein einziges Zeichen darf vor dem @-Zeichen notiert werden. Im Gegensatz zu anderen Bestandteilen von CSS darf @charset nur in Kleinbuchstaben geschrieben werden.

Nach @charset folgt genau ein Leerzeichen gefolgt von einem doppelten Anführungszeichen. Direkt darauf folgt der Name der verwendeten Zeichenkodierung. Bei diesem Namen spielt es keine Rolle, ob er in Groß- oder Kleinbuchstaben verfasst wurde. Direkt nach dem Kodierungsnamen folgt wieder ein doppeltes Anführungszeichen sowie ein abschließender Strichpunkt.

Die @charset-Regel darf nur einmal in einem Dokument vorkommen.

Beispiel
@charset "utf-8"; /* Korrekt. */
@charset "ISO-8859-1"; /* Korrekt. */
@charset 'utf-8'; /* Falsch (nur doppelte Anführungszeichen sind erlaubt). */

[Bearbeiten] @viewport - Anpassungen für unterschiedliche Ausgabegeräte

  • Leer
  • Leer
  • IE 10
  • Leer
  • Leer

Details: caniuse.com


Die @viewport-Regel erlaubt Festlegungen für die Darstellung auf unterschiedlichen visuellen Ausgabemedien.

Folgende Angaben sind möglich:

  • width als zusammenfassende Eigenschaft von
    • min-width und max-width
  • height als zusammenfassende Eigenschaft von
    • min-height und max-height
  • zoom
  • min-zoom
  • max-zoom
  • user-zoom
  • orientation
  • resolution

Achtung!

Diese @-Regel ist derzeit (Stand: Januar 2015) nur in den Internetexplorer ab Version 10 (mit Vendorpräfix -ms-) integriert. Verwenden Sie stattdessen <meta name="viewport" content="width=device-width, initial-scale=1.0">


[Bearbeiten] @import - Einbinden externer Stylesheets

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Die @import-Regel erlaubt es einem Stylesheet, ein anderes Stylesheet einzubinden („zu importieren“). Sie ist also das CSS-Gegenstück zu den zahlreichen Varianten, Stylesheets in HTML- oder XML-Dokumente einzubinden.

Eine @import-Regel muss am Beginn eines Stylesheets (nach @charset, aber vor allen anderen Regelsätzen) notiert werden. Nach @import folgt die Angabe der Adresse des einzubindenden Stylesheets. CSS erlaubt dazu sowohl Zeichenketten als auch Dateireferenzierung.

Ein Dokument darf auch mehrere @import-Regeln enthalten.

Beispiel
@import "stylesheet1.css";
@import url('http://www.example.org/stylesheet2.css');

[Bearbeiten] Medienspezifisches Einbinden von Stylesheets

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Das Einbinden von Stylesheets kann auch bei der @import-Regel ein bestimmte Ausgabemedien gebunden werden. Dazu wird nach Angabe der einzubindenden Datei eine Medienabfrage formuliert. Es handelt sich dabei aber nicht um eine Zeichenkette, daher wird auf Anführungszeichen verzichtet.

Beispiel
@import "druck-stylesheet.css" print, embossed;
@import 'viel-platz.css' screen and (min-width: 600px);
Beachten Sie: Internet Explorer bis Version 7 unterstützen das medienspezifische Einbinden von Stylesheets nicht. Internet Explorer 8 unterstützt diese Funktion zwar, ignoriert aber Stylesheets die für das Medium print eingebunden werden.

Sie können für jede Internetseite beliebig viele Stylesheets einbinden. Beachten Sie dabei jedoch sowohl die Regeln zur Reihenfolge der Abarbeitung von CSS-Deklarationen als auch die Hinweise zur Performanceoptimierung.

[Bearbeiten] Spezifische Abschnitte

Wenn Regeln für unterschiedliche Medien, Browser oder Dokumente fesgelegt werden sollen, ist es nicht erforderlich, diese in unterschiedliche Dateien auszulagern. Mithilfe verschiedener @-Regeln lassen sich beispielsweise Regelsätze zusammenfassen, die nur für ein bestimmtes Ausgabemedium oder Seiten einer bestimmten Domain gelten sollen.

[Bearbeiten] @media - Medienspezifische Abschnitte

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Mit der @media-Regel können CSS-Deklarationen zusammengefasst werden, die nur für ein bestimmtes Medium gültig sind. Innerhalb eines Stylesheets können mehrere medienspezifische Abschnitte definiert werden.

Die Regel besteht aus dem einleitenden @media, einer Medienabfrage sowie einem durch geschweifte Klammern begrenzten Abschnitt. Innerhalb dieses Abschnitts werden die für das Medium geltenden Regelsätze notiert.

Beispiel
@media screen 
{
   p {font-size: 1.5em;}
}
 
@media print 
{
   p {font-size: 13pt;}
}
Dieses Beispiel zeigt die Eigenschaft font-size, der je nach Ausgabemedium ein anderer Wert zugewiesen wird: Für Bildschirmausgaben die relative Einheit Em, für Ausdrucke die absolute Einheit Punkt.

Siehe auch: Formular zum ausfüllen und dann ausdrucken

[Bearbeiten] @document - Herkunftspezifische Abschnitte

  • CSS 3.0
  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer

Mit der @document-Regel lassen sich Abschnitte von CSS-Deklarationen speziell für Dokumente einer bestimmten Herkunft erstellen. Besonders ist dies für User-Stylesheets interessant. Innerhalb eines Stylesheets können mehrere herkunftspezifische Abschnitte definiert werden.

Die Regel besteht aus dem einleitenden @document, einer Herkunftsabfrage sowie einem durch geschweifte Klammern begrenzten Abschnitt. Innerhalb dieses Abschnitts werden die für das Medium geltenden Regelsätze notiert.

Beispiel
@document url('http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/@-Regeln')
{
   li {font-size: 1.5em;} /* # 1 # */
}
 
@document url-prefix('http://wiki-test2.selfhtml.org') 
{
   html, body {background-color: red;} /* # 2 # */
}
 
@document domain('selfhtml.org')
{
   * {color: #780000;} /* # 3 # */
}
Dieses Beispiel
  • gibt für Listenelemente dieser (und nur dieser) Seite eine Schriftgröße vor (# 1 #)
  • setzt für alle html- und body-Elemente des Test-Wikis einen roten Hintergrund (# 2 #)
  • legt für alle Seiten der Domain „selfhtml.org“, einschließlich Subdomains eine rotbraune Schriftfarbe fest (# 3 #)

Achtung!

Die @-Regel @document ist noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Regeln verwenden.

Für Firefox

  • @-moz-document

für Safari und Chrome

  • @-webkit-document

[Bearbeiten] @supports - Browserspezifische Abschnitte

Mithilfe der @supports-Regel lassen sich Regelsätze zusammenfassen, die nur gelten, wenn ein Browser ein bestimmtes Feature unterstützt.

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Die Regel besteht aus einem einleitenden @supports gefolgt von beliebig vielen in runden Klammern durch boolsche Operatoren verknüpfte syntaktisch korrekte CSS-Deklarationen. Anschließend folgen in geschweiften Klammern die entsprechenden Deklarationen.

Beispiel
h1{color: black;}
@supports (text-shadow)
{
  h1{text-shadow: 2px 2px 2px black;
     color: white;}
}
Für Browser, die die Deklaration text-shadow unterstützen, wird ein schwarzer Textschatten unter den weißen Text der Überschrift gelegt. Browser, die text-shadow nicht kennen, verändern die Überschrift nicht.
Beachten Sie: In Browsern, welche die Eigenschaft text-shadow nicht unterstützen, führt das bloße Ignorieren unbekannter CSS-Eigenschaften ggf. zu nicht sichtbaren Überschriften.

[Bearbeiten] Kombination verschiedener @-Regeln

[Bearbeiten] @page - Außenabstände in aufgeteilten Medien

  • CSS 2.1
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Wenn ein Medium die Inhalte eines Dokuments nicht kontinuierlich wiedergeben kann (z.B. durch Scrollen oder Vorlesen), wird der Inhalt in mehrere Seiten aufgeteilt. Die Regel @page erlaubt es, diese Seiten anzusprechen, so dass ein Außenabstand definiert werden kann. Als Außenabstand wird zum Beispiel die Entfernung zwischen den Rändern eines Blatt Papiers und dem aufgedruckten Inhalt bezeichnet.

Auf @page folgt ein durch geschweifte Klammern getrennter Abschnitt, in dem der Außenabstand definiert wird. Dies erfolgt über die margin-Eigenschaften.

Außenabstände, die durch @page festgelegt werden, müssen nicht zwingend eingehalten werden. Ein Browser kann und wird dem Benutzer die Möglichkeit geben, Außenabstände selbst zu bestimmten. Dies gilt vor allem für Printmedien.

Beispiel
@page {margin: .5in;}
@page {margin-top: 1.5cm; margin-left: 2.5cm;}

[Bearbeiten] Erste, linke und rechte Seiten

Mit Hilfe von @page können auch Regeln definiert werden, die nur für die erste Seite, nur für linke oder nur für rechte Seiten gelten sollen.

Die erste Seite ist eine linke Seite, wenn die Schreibrichtung (siehe die direction-Eigenschaft) des Wurzelelements von links nach rechts verläuft und eine rechte Seite, wenn die Schreibrichtung des Wurzelelements von rechts nach links verläuft.

Durch das Einfügen eines Seitenumbruches (page-break-*-Eigenschaften) vor dem ersten auszugebenden Inhalt kann die erste Seite von einer linken in eine rechte Seite (und umgekehrt) verwandelt werden.

Um eine bestimmte Art von Seiten anzusprechen wird nach @page, getrennt durch ein Leerzeichen, eine der Pseudoklassen :first (die erste Seite), :left (linke Seiten) bzw. :right (rechte Seiten) angegeben. Diese Pseudoklassen exisitieren allein für die Verwendung mit @page.

Beispiel
@page :first {margin-top: 5cm;}
@page :left {margin-right: 3.5cm;}
@page :right {margin-left: 3.5cm;}
@page {margin: 2.5cm;}
In diesem Beispiel erhält die erste Seite einen großen Abstand an der Oberseite des Blatts. Die linken und rechten Seiten erhalten jeweils zusätzlichen Abstand am Bundsteg. Zuletzt werden die übrigen Abstände allgemein definiert. Dies ist möglich, da @page-Regeln mit Pseudoklasse höher gewichtet werden als solche ohne.

[Bearbeiten] Seitengrößen bei Druckausgabe

Die Eigenschaft size legt bei paged-Medien die Außenmaße fest. Absolute Seiten haben feste Maße, während relative Seiten den Inhalt an den Medientyp anpassen.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • auto: (Standardwert) relative Seitenverhältnisse
  • 1 oder 2 Längenangaben: absolute Seitengröße, wird nur 1 Wert angegeben, wird ein Quadrat erzeugt, zwei Werte ermöglichen ein Rechteck
  • portrait: Hochformat, relative Seitengröße
  • landscape: Querformat, relative Seitengröße
  • inherit
Beachten Sie: Wenn die Seitengröße mit einer width, height, device-width, device-height, aspect-ratio, device-aspect-ratio oder orientation Media Query festgelegt wurde, muss die Größenangabe in size ignoriert werden.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML