Was ist der Zweck des '@' Symbols in CSS?

Question

Ich stolperte über this question und ich bemerkte, der Benutzer eine Notation verwendet ich noch nie zuvor gesehen haben:

@font-face { 
    /* CSS HERE */ 
} 

Das ist also @ Symbol etwas Neues in CSS3, oder etwas alt, dass ich irgendwie übersehen habe? Ist das etwa so, wo mit einer ID # verwendet wird, und mit einer Klasse .? Google hat mir keine guten Artikel dazu gegeben. Was ist der Zweck des Symbols @ in CSS?

Answer 1

@ gibt es schon seit den Tagen von @import in CSS1, obwohl es wohl ist in der jüngsten @media (CSS2, CSS3) und @font-face (CSS3) Konstrukte immer häufiger werden. Die @ Syntax selbst, obwohl, wie ich bereits erwähnt habe, ist nicht neu.

Diese sind alle in CSS bekannt als at-Regeln. Sie sind spezielle Anweisungen für den Browser, die nicht direkt mit dem Stil von (X) HTML/XML-Elementen in Webdokumenten unter Verwendung von Regeln und Eigenschaften zusammenhängen, obwohl sie eine wichtige Rolle bei der Steuerung der Verwendung von Stilen spielen.

Einige Codebeispiele:

/* Import another stylesheet from within a stylesheet */ 
@import url(style2.css); 

/* Apply this style only for printing */ 
@media print { 
    body { 
     color: #000; 
     background: #fff; 
    } 
} 

/* Embed a custom web font */ 
@font-face { 
    font-family: 'DejaVu Sans'; 
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf); 
} 

• @font-face rules definieren benutzerdefinierte Schriftarten für die Verwendung in Ihren Entwürfen, die auf allen Computern, die nicht immer zur Verfügung stehen, so dass ein Browser eine Schriftart vom Server herunterlädt und setzt Text in Diese benutzerdefinierte Schriftart, als ob der Computer des Benutzers die Schriftart hatte.

• @media rules in Verbindung mit media queries (früher nur media types), sind Kontrolle, die Stile angewendet und die auf nicht basieren, welche Medien die Seite in angezeigt wird. In meinem Code Beispiel nur, wenn alle Drucken eines Dokuments sollte Text wird in Schwarz gegen einen weißen Hintergrund (den Papierhintergrund) gesetzt. Sie können Medienabfragen verwenden, um Druckmedien, mobile Geräte usw. herauszufiltern und Seiten anders zu formatieren.

At-Regeln haben keine Beziehung zu selectors was auch immer. Aufgrund ihres unterschiedlichen Charakters werden unterschiedliche At-Rules auf verschiedene Arten in zahlreichen verschiedenen Modulen definiert. Weitere Beispiele sind:

• Conditional rules
• Keyframe animations
• Paged media

(diese Liste ist bei weitem nicht erschöpfend)

Sie einen anderen nicht-erschöpfende Liste an MDN finden.

Answer 2

@ wird verwendet, um eine Regel zu definieren.

@import
@page
@media
@ font-face
@charset
@namespace

Die oben at-rule s genannt werden.

Answer 3

@ wird als Regelspezifikation verwendet. Wie @font-face

Answer 4

Ein Beispiel für @media die nützlich sein könnten, es erläutern weiter:

@media screen and (max-width: 1440px) 
{ 
    span.sizedImage 
    { 
     height:135px; 
     width: 174px; 
    } 
}  

@media screen and (min-width: 1441px) 
{ 
    span.sizedImage 
    { 
     height:150px; 
     width: 200px; 
    } 
} 

Dies wird die Größe des Bildes bedingt auf die Größe des Bildschirms variieren, indem ein kleineres Bild auf einem kleineren Bildschirm. Der erste Block würde Bildschirme bis zu einer Breite von 1440 Pixeln adressieren; die zweite würde Bildschirme mit mehr als 1440 Pixeln adressieren.

Dies ist nützlich mit Dingen wie Tabs, Float Drop oder Scrollen auf kleineren Bildschirmen; Sie können die Schriftgröße der Registerkartenbeschriftungen häufig auf kleineren Bildschirmen um eine Punktgröße verringern und sie alle passen lassen.

Answer 5

Der ProBoards CSS-Stil verwendet diese auch als Variablen.

Hier ist eine kleine snipptt aus einem ihrer CSS Seiten:

@wrapper_width: 980px; 
@link_color: #c06806; 
@link_font: 100% @default_forum_text_font_family; 
@link_decoration: none; 

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; } 
table { table-layout: fixed; } 
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; } 

HINWEIS: nicht nativ, ersten Kommentar sehen.