¿Cuál es el propósito del símbolo '@' en CSS?

148

Me topé con esta pregunta y noté que el usuario está usando alguna notación que nunca había visto antes:

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

Entonces, ¿es este @símbolo algo nuevo en CSS3, o algo viejo que de alguna manera he pasado por alto? ¿Es algo así como dónde con una identificación que usa #y con una clase que usa .? Google no me dio buenos artículos relacionados con esto. ¿Cuál es el propósito del @símbolo en CSS?

css syntax symbols

— Hristo
fuente

177

@ha existido desde los días de @importCSS1, aunque podría decirse que se está volviendo cada vez más común en las construcciones recientes @media(CSS2, CSS3) y @font-face(CSS3). Sin @embargo, la sintaxis en sí, como mencioné, no es nueva.

Todos estos se conocen en CSS como at-rules . Son instrucciones especiales para el navegador, que no están directamente relacionadas con el estilo de elementos (X) HTML / XML en documentos web que utilizan reglas y propiedades, aunque desempeñan funciones importantes para controlar cómo se aplican los estilos.

Algunos ejemplos de código:

/* 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-facelas reglas definen fuentes personalizadas para usar en sus diseños que no siempre están disponibles en todas las computadoras, por lo que un navegador descarga una fuente del servidor y establece el texto en esa fuente personalizada como si la computadora del usuario tuviera la fuente.
@medialas reglas , junto con las consultas de medios (anteriormente solo tipos de medios ), controlan qué estilos se aplican y cuáles no se basan en los medios en los que se muestra la página. En mi ejemplo de código, solo cuando se imprime un documento se debe configurar todo el texto en negro sobre un fondo blanco (el papel). Puede usar consultas de medios para filtrar medios impresos, dispositivos móviles, etc., y diseñar páginas de manera diferente para ellos.

Las reglas at no tienen relación alguna con los selectores . Debido a su naturaleza variable, las diferentes reglas at se definen de diferentes maneras en numerosos módulos diferentes. Más ejemplos incluyen:

(esta lista está lejos de ser exhaustiva)

Puede encontrar otra lista no exhaustiva en MDN .

— BoltClock
fuente

2

@media print {/ * ¿Estás intentando imprimir un archivo de video o audio? * /}

— kurdtpage

26

@ se usa para definir una regla.

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

Los anteriores se llaman at-rules.

— Frankie
fuente

2

¿Qué quieres decir con "definir una regla"?

— Hristo

1

At-rules encapsula un montón de reglas CSS y las aplica a algo específico. ( htmldog.com/guides/cssadvanced/atrules )

— Frankie

7

Un ejemplo de @media que podría ser útil para ilustrarlo más a fondo:

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

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

Esto variará el tamaño de la imagen condicionalmente en el tamaño de la pantalla, usando una imagen más pequeña en una pantalla más pequeña. El primer bloque abordaría pantallas de hasta 1440 px de ancho; el segundo abordaría pantallas de más de 1440 px.

Esto es útil con cosas como pestañas que flotan o se desplazan en pantallas más pequeñas; a menudo puede soltar el tamaño de fuente de las etiquetas de pestaña en un tamaño de punto en pantallas más pequeñas y hacer que todas encajen.

— BobRodes
fuente

1

@ se usa como una especificación de regla. Me gusta@font-face

— r3st0r3
fuente

1

El estilo CSS de ProBoards también los utiliza como variables.

Aquí hay un pequeño fragmento de una de sus páginas CSS:

@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; }

NOTA: no nativo, ver primer comentario.

— Tcll
fuente