CSS: Das können die @-Regeln

CSS schreiben mit at-rules (Bildquelle: Diana Vogt)

Neben den CSS-Angaben, mit denen man einem Element eine Eigenschaft zuordnet, gibt es die @-Regeln (oder auch englisch at-rules). Mit diesen kann man im Stylesheet speziellere Angaben machen. Die Schreibweise ist ein @, gefolgt von einem Bezeichner. Hier folgt ein Überblick über die wichtigsten @-Regeln

Mit @charset die Zeichenkodierung angeben

mit @charset gibt an, welchen Zeichensatz der Browser verwenden soll. Das ist nützlich, wenn das Stylesheet Zeichen enthält, die nicht dem ASCII-Zeichensatz entsprechen. Durch einen HTTP-Header wird diese Angabe allerdings überschrieben.

Da diese Angabe wichtig ist, gelten strenge Regeln bei der Schreibweise: @charset muss zusammen und klein geschrieben werden. Danach folgt ein Leerzeichen und dann die verwendete Zeichenkodierung in doppelten Anführungszeichen (einfache sind nicht erlaubt). Abgeschlossen wird die Angabe mit einem Strichpunkt. @charset muss als allererstes im Stylesheet angegeben werden und darf nicht zweimal vorkommen.

@charset "utf-8"; 
@charset "ISO-8859-1";

Stylesheets einbinden mit @import

Diese Angabe muss auch am Beginn des Stylesheets gemacht werden (gleich nach @charset). Es dürfen auch mehrere @import-Regeln nacheinander folgen. Genau dort wird dann der Inhalt des/der externen Stylesheets eingebunden. Das kann sowohl ein Dateiname als auch eine URL sein:

@import 'extern.css';
@import url('http://www.example.com/style.css');

Dokumenten eigene Abschnitte zuordnen mit @document

Hiermit kann man Styleangaben machen für bestimmte Bereiche einer Website oder Domain. Es handelt es sich um eine verschachtelte @-Regel. Sie beginnt mit @document. Nach einem Leerzeichen kommt die Angabe der URL oder Datei, für die die Deklarationen gelten sollen. In geschweiften Klammern werden diese nun notiert.

Styles nur für genau diese eine Seite:

@document url('http://www.divo-webdesign.de/blog/html-links-verbessern-so-setzt-man-rel-attribute-richtig-ein/')
{
   html,body {color: gray;}
}

Styles für alle Seiten die beginnen mit:

@document url-prefix('http://www.divo-webdesign.de/blog/category/html/') 
{
   html,body {color: red;} 
}

Styles für alle Seiten auf der Domain:

@document domain('divo-webdesign.de')
{
   html,body {color: green;} 
}

Styles für gesicherte Seiten:

@document regexp("https:.*")
{
   html,body {color: blue;} 
}

Browsersupport

Bisher (Juni 2015) sieht es hier leider mager aus: Nur Firefox unterstützt die Regel, wenn man sie mit einem Präfix erweitert: @-moz-document.

Schriften mit @font-face einbinden

Mit dieser Angabe kann man Schriftarten auf der Website einbetten, die die Besucher nicht auf ihrem Computer installiert haben. Zunächst gibt man die Schriftfamilie an. Danach folgt die Quellenangabe (src:), hier kann man nacheinander mehrere Formate angeben, um alle Browser anzusprechen.

@font-face {
    font-family: 'webfont';
    src: url('fonts/webfont.woff2') format('woff2'),
         url('fonts/webfont.woff') format('woff'),
         url('fonts/webfont.ttf') format('truetype');
        }

Browsersupport

Alle modernen Browser unterstützen o. g. Code. Möchte man den Internet Explorer 8 noch bedienen, muss man die Schrift im .eot-Format hinzufügen.

Auflösung und Medien gezielt ansprechen mit @media

mit dieser Angabe hinterlegt man eigene Stylesheets für ein bestimmtes Medium oder eine bestimmte Auflösung. Der einfachste Fall ist, extra Stylesheets für den Druck zu definieren:

@media print 
{
   p {color: black;}
}

Spannender wird es seit CSS3 mit Media Queries. Hier werden anhand der Auflösung verschiedene Endgeräte angesprochen. In folgendem Beispiel gilt die Definition ab einer Bildschirmbreite von 568px:

@media only screen and (min-width: 568px) {
        
        .content {width: 100%;}
}

Browsersupport

Alle modernen Browser unterstützen Media Queries. Muss man den Internet Explorer 8 einbeziehen, braucht man ein JavaScript: z. B. respond.js von Scott Jehl.

Einzelne Seiten ansprechen mit @page

Mit @page defniniert man Regeln für einzelne, feste Seiten. Das kommt z. B. beim Druck zum Einsatz, wenn Scrollen nicht möglich ist und der Inhalt auf mehrere Seiten verteilt werden muss. Mit den Pseudoklassen :first, :left und :right kann man zudem die Abstände der ersten, linken und rechten Seite festlegen. @page-Regeln mit Pseudoklasse werden höher gewichtet als welche ohne.

@page :first { margin-top: 5cm; }
@page :left  { margin-right: 3.5cm; }
@page :right { margin-left: 3.5cm; }
@page        { margin: 2.5cm; }

Browsersupport

Alle Browser (inklusive Internet Explorer 8) unterstützen die @page-Regel.

Mit @supports Browserunterstützung prüfen

Hier kann man spezielle Stylesheets nur ausliefern, wenn der Browser diese auch unterstützt. Das prüft man mit @supports:

@supports (text-shadow)
{
    h1 { text-shadow: 2px 2px 2px black; }
}

Browsersupport

Chrome, Firefox, Opera unterstützen diese Funktion vollständig. Im Safari kann man @supports erst ab Version 9 einsetzen, auf Geräten mit iOS bisher (Juni 2015) garnicht . Im Internet Explorer Edge geht es, in den vorherigen Versionen nicht.

Fazit

Manche @-Regeln gehören bereits zum Webdesigner-Alltag, wie @charset und @import.

Mit CSS3 sind weitere Regeln dazugekommen. Die @media-Regel kommt beim Responsive Webdesign schon eifrig zum Einsatz und hilft, unterschiedliche Endgeräte gezielt anzusprechen. @supports und @document haben Potential. Hiermit kann man die Stylesheets noch gezielter an unterstützende Browser und spezielle Dokumente ausliefern. Bisher (Juni 2015) ist bei diesen beiden die Browserunterstützung leider noch ungenügend, doch es bleibt zu hoffen, das dies besser wird.

Auf caniuse.com und im Mozilla Developer Network kann man sich über den Fortschritt auf dem Laufenden halten.