Qual é o objetivo do símbolo '@' em CSS?

148

Eu me deparei com essa pergunta e notei que o usuário está usando uma notação que nunca tinha visto antes:

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

Então, esse @símbolo é algo novo no CSS3, ou algo antigo que de alguma forma esqueci? É algo como onde, com um ID que você usa #e com uma classe que você usa .? O Google não me deu bons artigos relacionados a isso. Qual é o objetivo do @símbolo em CSS?

css syntax symbols

— Hristo
fonte

177

@existe desde os dias do @importCSS1, embora seja cada vez mais comum nas construções recentes @media(CSS2, CSS3) e @font-face(CSS3). A @sintaxe em si, como mencionei, não é nova.

Tudo isso é conhecido no CSS como regras . São instruções especiais para o navegador, não diretamente relacionadas ao estilo de (X) elementos 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-faceAs regras definem fontes personalizadas para uso em seus designs que nem sempre estão disponíveis em todos os computadores; portanto, um navegador baixa uma fonte do servidor e define o texto nessa fonte personalizada como se o computador do usuário tivesse a fonte.
@mediaAs regras , em conjunto com as consultas de mídia (anteriormente apenas os 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, todo o texto deve ser definido em preto contra um fundo branco (o papel). Você pode usar consultas de mídia para filtrar a mídia de impressão, dispositivos móveis, etc., e estilizar as páginas de maneira diferente para elas.

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

(esta lista está longe de ser exaustiva)

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

— BoltClock
fonte

2

@media print {/ * Você está tentando imprimir um arquivo de vídeo ou áudio? * /}

— kurdtpage 18/03/2015

26

@ é usado para definir uma regra.

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

Os itens acima são chamados at-rules.

— Frankie
fonte

2

O que você quer dizer com "definir uma regra"?

— Hristo

1

O At-rules encapsula várias regras de CSS e as aplica a algo específico. ( Htmldog.com/guides/cssadvanced/atrules )

— Frankie

7

Um exemplo de @media que pode ser útil para ilustrar ainda 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 varia o tamanho da imagem condicionalmente no tamanho da tela, usando uma imagem menor em uma tela menor. O primeiro bloco abordaria telas de até 1440px de largura; o segundo abordaria telas maiores que 1440px.

Isso é útil em coisas como guias que flutuam soltas ou roladas em telas menores; frequentemente, você pode soltar o tamanho da fonte dos rótulos das guias em um tamanho menor em telas menores e ajustá-las.

— BobRodes
fonte

1

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

— r3st0r3
fonte

1

O estilo CSS do ProBoards também os usa como variáveis.

Aqui está um pequeno trecho de uma de 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.

— Tcll
fonte