Qual é o propósito do símbolo ‘@’ no CSS?

Eu apenas deparei com essa questão e notei que o usuário está usando alguma notação que eu nunca vi antes:

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

Então este símbolo @ é algo novo em CSS3, ou algo antigo que de alguma forma eu esqueci? É algo parecido com onde você usa um ID # e com uma class que você usa . ? O Google não me deu bons artigos relacionados a isso. Qual é o propósito do símbolo @ em CSS?

@ existe desde os dias de @import em CSS1, embora esteja se tornando cada vez mais comum nos recentes @import (CSS2, CSS3) e @font-face (CSS3). A própria syntax @ , no entanto, como mencionei, não é nova.

Estes são todos conhecidos no CSS como at-rules . São instruções especiais para o navegador, não relacionadas diretamente ao estilo de elementos (X) HTML / XML em documentos da Web usando regras e propriedades, embora desempenhem papéis importantes no controle de como os estilos são aplicados.

Alguns exemplos 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 regras @font-face definem fonts personalizadas para uso em seus projetos que nem sempre estão disponíveis em todos os computadores, portanto, um navegador faz download de uma fonte do servidor e define o texto nessa fonte como se o computador do usuário tivesse a fonte.

  • @media rules , em conjunto com consultas de mídia (anteriormente apenas tipos de mídia ), controlam quais estilos são aplicados e quais não são baseados em qual mídia a página está sendo exibida. No meu exemplo de código, somente ao imprimir um documento deve todo texto ser colocado em preto contra um fundo branco (o papel). Você pode usar consultas de mídia para filtrar mídia impressa, dispositivos móveis e assim por diante, e estilizar páginas de maneira diferente para elas.

As regras não têm relação com os seletores . Por causa de sua natureza variada, regras diferentes são definidas de maneiras diferentes em vários módulos diferentes. Mais exemplos incluem:

  • Regras condicionais
  • Animações de quadro-chave
  • Mídia Paginada

(esta lista está longe de ser exaustiva)

Você pode encontrar outra lista não exaustiva no MDN .

@ é usado para definir uma regra.

@importar
@página
@meios de comunicação
@Tipo de letra
@charset
@namespace

Os acima são chamados at-rule s.

Um exemplo de @media que pode ser útil para ilustrar mais:

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

Isso variará o tamanho da imagem condicionalmente no tamanho da canvas, usando uma imagem menor em uma canvas menor. O primeiro bloco endereçaria canvass de até 1440 pixels de largura; o segundo endereçaria canvass maiores que 1440px.

Isso é útil com coisas como guias que flutuam soltas ou rolam em canvass menores; muitas vezes, você pode diminuir o tamanho da fonte dos labels das guias em um tamanho de ponto em canvass menores e ajustá-los.

@ é usado como uma especificação de regra. Como @font-face

O estilo CSS do ProBoards também usa isso como variables.

Aqui está um pequeno snipptt de uma das suas 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: não nativo, veja o primeiro comentário.