joerghuelsermann.de CSS @ Regeln

CSS @ Regeln

Im Grunde wollte ich nur zwei (@supports und @namespace) dieser CSS @ Regeln vorstellen. Wegen der Vollständigkeit habe ich mich doch dazu entschlossen zumindest die Spezifikation zu erwähnen und eine kurze Beschreibung zu verfassen.

@charset

Die Angabe eines Zeichensatzes sollte am Anfang jeder CSS Datei stehen. Ich verwende generell Unicode. @charset "UTF-8"; Spezifikation

@document

Wenn diese Regel mit CSS4 Einzug erhält ist man in der Lage für eine bestimmte Seite, eine Domain, für bestimmte Bereiche oder auch mit Hilfe von regulären Ausdrücken diese einzugrenzen. Spezifikation

@filter

Bei dieser Regel handelt es sich um die Möglichkeit eigene Filter Definitionen zu erstellen. Spezifikation

@font-face

Aufruf eines bestimmten Zeichensatzes. Damit ist man in der Lage jeden beliebigen Zeichensatz dem Benutzer zur Verfügung zu stellen. Negativ sehe ich den zusätzlichen Datentransfer der zwangsläufig daraus resultiert. Spezifikation

@import

Ich kenne diese CSS Regel würde sie aber nicht empfehlen sondern die betreffenden Dateien gleich im HTML angeben. Mit dieser Regel wird in einer HTML oder CSS Datei eine weitere CSS Datei eingebunden.

@keyframes

CSS Animationen sind eine vernünftige Alternative zu Animationen mit Javascript oder SVG. Spezifikation

Da ich dazu neige immer gleich Beispiele in der Praxis zu zeigen folgen an dieser Stelle zwei Beispiele für die Animation einer Hintergrundgrafik.

@keyframes slide{
0%{background-position:0 0;}
100%{background-position:100% 0;}
}
#slide{animation:slide 60s infinite linear;}
@keyframes time{0%{background-position:0 0;}100%{background-position:-2530px 0;}
}
#time{animation:time 60s infinite steps(23);}
#time,#slide{background:url("http://joerghuelsermann.de/bild/aktionskarten.jpg") no-repeat 0 0;
width:110px;height:78px;}

@media

Über die CSS Regel @media werden Medientypen und Medienabfragen gesteuert. Dadurch ist man in der Lage Geräteabhängige Designs umzusetzen.

@namespace

Im Grunde ganz einfach Elemente speziell ansprechen sobald, diese zu einem bestimmten Namespace gehören. HTML5 ermöglicht die Verwendung von internem SVG Abschnitten. XHTML hat auch die Möglichkeit weitere Namensräume anzugeben. Um diese zu unterteilen kann man diese durch Angabe des Namespace trennen. Dabei setzt man die Namespace Angabe vor das entsprechene Element aus dem Namensraum. Spezifikation

@namespace x url(http://www.w3.org/1999/xhtml);
@namespace s url(http://www.w3.org/2000/svg);
x|*{margin:0;padding:0;}
s|svg{width:300px;}

@page

Gestaltung beim Druck einer Seite in einigen Punkten. Spezifikation

@supports

Spezifikation

Daraus habe ich dann eine optische Kontrolle entwickelt, rein basierend auf CSS. Es geht bei dieser Regel darum zuerst abzufragen ob ein Browser eine bestimmte Eigenschaft unterstützt und dann dementsprechend das Design einer Webseite zu gestalten.

@viewport

Entspricht den Angaben im meta Element zum Viewport für die Ausrichtung in mobilen Geräten. Spezifikation

Optische Kontrolle

Damit wären wir beim ursprünglichen Zweck dieser Seite angekommen eine optische Kontrolle zu realisieren. Für die folgenden Punkte habe ich dieses umgesetzt.

@namespace
Unterstützt der momentane Browser Namensraum Angaben im CSS.
@supports
Zum Zeitpunkt der Erstellung dieser Seite sind nur wenige Browser in der Lage dieses zu unterstützen. Dient auch dazu zu unterscheiden, ob die optische Kontrolle überhaupt greift.
border-image
Das ist zum Beispiel eine CSS Eigenschaft mit der ich gerne möglichst browserübergreifend experimentieren möchte.
var-*
Variablenangaben im CSS. Nur zu ich liebe es wenn man mir mehr Möglichkeiten gibt mit einer solchen Spezifikation.
transition
Die Eigenschaft transition sollte jeder Browser verstehen der @supports unterstützt. Also ist diese Abfrage mehr dazu gedacht zu zeigen das dieses Prinzip in der Praxis funktioniert.
@document
Dokumentspezifisches CSS halte ich für eine Möglichkeit die noch mehr Freiheiten bietet. Nur die Unterstützung ist bisher nicht besonders vorhanden.