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

Question

yo sólo encontré con this question y me di cuenta de que el usuario está utilizando una notación que nunca he visto antes:

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

Así es este @ símbolo de algo nuevo en CSS3, o algo viejo que de alguna manera he pasado por alto? ¿Es esto algo así como con un ID 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?

Answer 1

@ ha existido desde los días de @import en CSS1, aunque Podría decirse que es cada vez más común en la reciente @media (CSS2, CSS3) y @font-face construcciones (CSS3). Sin embargo, la sintaxis @ en sí misma, como mencioné, no es nueva.

Todos estos son conocidos en CSS como at-rules. Son instrucciones especiales para el navegador, que no están directamente relacionadas con el estilo de (X) elementos HTML/XML en documentos web que usan reglas y propiedades, aunque juegan un papel importante en el control de 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-face rules definir fuentes personalizadas para su uso en sus diseños que no siempre están disponibles en todos los equipos, por lo que un navegador descarga una fuente en el servidor y establece en el texto esa fuente personalizada como si la computadora del usuario tuviera la fuente.

• @media rules, conjuntamente con media queries (anteriormente sólo media types), control de los estilos que se aplican y que no se basan en el medio desde la página se muestra en. En mi ejemplo de código, sólo cuando se imprime un documento debe todo el texto se establece 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 esos.

At-rules no tienen relación con selectors cualquiera. Debido a su naturaleza variable, las diferentes reglas at se definen de diferentes maneras en numerosos módulos diferentes. Más ejemplos incluyen:

• Conditional rules
• Keyframe animations
• Paged media

(esta lista no es exhaustiva)

puede encontrar otra lista no exhaustiva en MDN.

Answer 2

@ se utiliza para definir una regla.

@import
@ Page
@media
@ font-cara
@charset
@namespace

Lo anterior son llamados at-rule s.

Answer 3

@ se utiliza como una especificación de norma. Como @font-face

Answer 4

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

@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, utilizando una imagen más pequeña en una más pequeña pantalla. El primer bloque abordaría pantallas de hasta 1440 píxeles de ancho; el segundo se dirigiría 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 letra de las etiquetas de las pestañas en un tamaño de punto en pantallas más pequeñas y hacer que todas quepan.

Answer 5

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

He aquí una pequeña snipptt 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 es nativo, ver primer comentario.