it-swarm.com.de

Welchen Zweck hat das '@'-Symbol in CSS?

Ich bin gerade über diese Frage gestolpert und habe bemerkt, 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 etwa so, wo Sie mit einer ID # und mit einer Klasse . verwenden? Google hat mir keine guten Artikel dazu gegeben. Welchen Zweck hat das @-Symbol in CSS?

130
Hristo

@ gibt es seit den Tagen von @import in CSS1, obwohl es in den letzten Konstruktionen von @media (CSS2, CSS3) und @font-face (CSS3) immer häufiger vorkommt. Die @-Syntax selbst ist jedoch, wie gesagt, nicht neu.

Diese sind in CSS alle als at-rules bekannt. Es handelt sich hierbei um spezielle Anweisungen für den Browser, die nicht direkt mit der Gestaltung von (X) HTML/XML-Elementen in Webdokumenten unter Verwendung von Regeln und Eigenschaften zusammenhängen, obwohl sie eine wichtige Rolle bei der Steuerung der Formatvorlagen 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 Sie benutzerdefinierte Schriftarten für Ihre Designs, die nicht 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.

  • @media regeln steuern Sie in Verbindung mit media - Abfragen (früher nur media types ), welche Stile angewendet werden und welche nicht davon abhängen, in welchem ​​Medium die Seite angezeigt wird Codebeispiel, nur wenn ein Dokument gedruckt wird, sollte der gesamte Text vor einem weißen Hintergrund (Papier) schwarz angezeigt werden. Sie können Medienabfragen verwenden, um Druckmedien, mobile Geräte usw. herauszufiltern und Seiten anders zu gestalten.

Regeln haben keine Beziehung zu Selektoren was auch immer. Aufgrund ihrer unterschiedlichen Eigenschaften werden verschiedene Regeln in zahlreichen verschiedenen Modulen unterschiedlich definiert. Weitere Beispiele sind:

(Diese Liste ist noch lange nicht erschöpfend)

Eine weitere nicht erschöpfende Liste finden Sie unter MDN .

157
BoltClock

@ wird verwendet, um eine Regel zu definieren.

@einführen
@Seite
@media
@Schriftart
@ Zeichensatz
@namespace

Die oben genannten werden als at-rule s bezeichnet.

22
Frankie

Ein Beispiel für @media, das zur weiteren Veranschaulichung hilfreich sein kann:

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

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

Dadurch wird die Größe des Bildes von der Größe des Bildschirms abhängig gemacht, wobei ein kleineres Bild auf einem kleineren Bildschirm verwendet wird. Der erste Block würde Bildschirme mit einer Breite von bis zu 1440 Pixeln ansprechen. der zweite würde Bildschirme größer als 1440px ansprechen. 

Dies ist praktisch bei Registern, die auf kleineren Bildschirmen schweben oder scrollen. Sie können die Schriftgröße der Registerkartenbeschriftungen auf kleineren Bildschirmen häufig auf eine Punktgröße reduzieren und alle anpassen.

7
BobRodes

@ wird als Regelangabe verwendet. Wie @font-face

1
r3st0r3

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 erster Kommentar.

0
Tcll