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

css[]

Question

Me encontré con esta pregunta y noté que el usuario está utilizando una notación que nunca antes había visto:

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

Entonces, ¿este símbolo @ algo nuevo en CSS3, o algo viejo que de alguna manera pasé 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

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

Answer 2

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

Aquí hay un pequeño 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 el primer comentario.

Answer 3

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 de forma condicional en el tamaño de la pantalla, utilizando una imagen más pequeña en una pantalla más pequeña. 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 4

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

Todos estos son conocidos en CSS como reglas at . 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 define 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.

• @media rules , junto con consultas de medios (anteriormente solo tipos de medios ), controla qué estilos se aplican y cuáles no se basan en en qué medio se muestra la página. En mi ejemplo de código, solo cuando se imprime un documento debe aparecer todo el texto establecerse 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 ninguna relación con selectors ningún tipo. Debido a su naturaleza variable, las diferentes reglas at se definen de diferentes maneras en numerosos módulos diferentes. Más ejemplos incluyen:

• Reglas condicionales
• Animaciones de fotogramas clave
• Medios paginados

(Esta lista está lejos de ser exhaustiva)

Puede encontrar otra lista no exhaustiva en MDN .

Answer 5

@ se usa para definir una regla.

@import
@página
@media
@Perfil delantero
@charset
@namespace

Lo anterior se llama at-rule s.