Was ist der Zweck des @ -Symbols in CSS?

148

Ich bin gerade über diese Frage gestolpert und habe festgestellt, dass der Benutzer eine Notation verwendet, die ich noch nie gesehen habe:

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

Ist dieses @Symbol etwas Neues in CSS3 oder etwas Altes, das ich irgendwie übersehen habe? Ist das so etwas wie wo mit einer ID, die Sie verwenden #, und mit einer Klasse, die Sie verwenden .? Google hat mir keine guten Artikel dazu gegeben. Was ist der Zweck des @Symbols in CSS?

css syntax symbols

— Hristo
quelle

177

@gibt es seit den Tagen von @importin CSS1, obwohl es in den jüngsten Konstrukten @media(CSS2, CSS3) und @font-face(CSS3) wohl immer häufiger vorkommt . Die @Syntax selbst ist jedoch, wie bereits erwähnt, nicht neu.

Diese werden in CSS alle als at-rules bezeichnet . Dies sind spezielle Anweisungen für den Browser, die nicht direkt mit der Gestaltung von (X) HTML / XML-Elementen in Webdokumenten mithilfe von Regeln und Eigenschaften zusammenhängen, obwohl sie eine wichtige Rolle bei der Steuerung der Anwendung 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-faceRegeln definieren benutzerdefinierte Schriftarten zur Verwendung in Ihren Designs, die nicht immer auf allen Computern verfügbar sind. Daher lädt ein Browser eine Schriftart vom Server herunter und legt Text in dieser benutzerdefinierten Schriftart fest, als ob der Computer des Benutzers die Schriftart hätte.
@mediaRegeln steuern in Verbindung mit Medienabfragen (früher nur Medientypen ), welche Stile angewendet werden und welche nicht auf den Medien basieren, auf denen die Seite angezeigt wird. In meinem Codebeispiel sollte nur beim Drucken eines Dokuments der gesamte Text festgelegt werden in schwarz vor einem weißen (Papier) Hintergrund. Sie können Medienabfragen verwenden, um Druckmedien, mobile Geräte usw. herauszufiltern und Seiten für diese unterschiedlich zu gestalten.

At-Rules haben keinerlei Beziehung zu Selektoren . Aufgrund ihrer unterschiedlichen Natur werden unterschiedliche Regeln in zahlreichen verschiedenen Modulen auf unterschiedliche Weise definiert. Weitere Beispiele sind:

(Diese Liste ist alles andere als vollständig)

Eine weitere nicht vollständige Liste finden Sie bei MDN .

— BoltClock
quelle

2

@media print {/ * Versuchen Sie, eine Video- oder Audiodatei zu drucken? * /}

— kurdtpage

26

@ wird verwendet, um eine Regel zu definieren.

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

Die oben genannten heißen at-rules.

— Frankie
quelle

2

Was meinst du mit "eine Regel definieren"?

— Hristo

1

At-Rules kapseln eine Reihe von CSS-Regeln und wenden sie auf etwas Bestimmtes an. ( htmldog.com/guides/cssadvanced/atrules )

— Frankie

7

Ein Beispiel für @media, das nützlich sein könnte, um es weiter zu veranschaulichen:

@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 variiert die Größe des Bildes abhängig von der Größe des Bildschirms, wobei ein kleineres Bild auf einem kleineren Bildschirm verwendet wird. Der erste Block würde Bildschirme bis zu einer Breite von 1440 Pixel adressieren; Die zweite würde Bildschirme adressieren, die größer als 1440px sind.

Dies ist praktisch bei Dingen wie Registerkarten, die auf kleineren Bildschirmen abgelegt oder gescrollt werden. Auf kleineren Bildschirmen können Sie die Schriftgröße der Registerkartenbeschriftungen häufig um eine Punktgröße verringern und alle anpassen.

— BobRodes
quelle

1

@ wird als Regelspezifikation verwendet. Mögen@font-face

— r3st0r3
quelle

1

Der ProBoards CSS-Stil verwendet diese auch als Variablen.

Hier ist ein kleiner Ausschnitt von einer 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, siehe ersten Kommentar.

— Tcll
quelle