Operadores de CSS com @ – html html5 css3

Como havia perguntado sobre o operador @media, fiquei curioso, pois vi outros operadores que iniciavam com @ e gostaria de entender para que serve operadores assim, e quais existem.

Os operadores @ são utilizados para estabelecer algumas regras no CSS. Os mais comumente utilizados, além do @media que já foi descrito em sua última pergunta, são:

@import: utilizado para importar uma folha de estilo na folha atual. Isso colabora para modularizar o código, mas é importante citar que cada import gera uma requisição HTTP nova, o que pode diminuir a performance da aplicação caso hajam muitos imports. Alguns frameworks como o Angular 4 resolvem esse problema, entretanto, utilizando suas proprias diretrizes de import.

<style type="text/css">
   @import "mystyle.css";
   @import url("mystyle.css");
</style>

@Keyframes: Basicamente, possibilita estabelecer intervalos de animação, com as modificações de estilo ou posicionamento que irão ocorrer em cada intervalo. Um exemplo da animação (e seu código) pode ser encontrado aqui.

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

@charset: identifica qual será a codificação de caracteres utilizada, sendo as mais comuns UTF-8 e ISO-8859-1. Entretanto, a codificação de caracteres é normalmente declarada em uma meta-tag no próprio HTML.

<style type="text/css">
   @charset "UTF-8"
</style>

OU, no HTML5:

<meta charset="UTF-8">

@font-face: Utilizado para descrever de forma mais detalhada uma fonte utilizada no documento.´

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

Conforme a documentação isso se chama at-rule (provavelmente regra-arroba em português)

Existem vários at-rules, designados por seus identificadores, cada um com uma sintaxe diferente:

• @charset — Define o charset usado pelo css
• @import — Adiciona um CSS externo
• @namespace — O estilo é aplicado a elementos que tem prefixos de namespace XML, conforme a regra.

At-rules aninhadas

É um subconjunto de declarações aninhadas, que podem ser usadas como uma declaração de uma folha de estilo, bem como dentro de regras de grupo condicional:

• @media — Uma regra de grupo condicional que aplicará seu conteúdo se o dispositivo atender aos critérios da condição definida usando uma consulta de mídia.

• @supports — Uma regra de grupo condicional que aplicará seu conteúdo se o navegador atender aos critérios da condição dada.

• @document ^{(Experimental)} — Uma regra de grupo condicional que irá aplicar o seu conteúdo se o documento no qual a folha de estilos é aplicada atende aos critérios da condição dada.
  (Level 4 da especificação CSS)

• @page — Descreve o aspecto das alterações de layout que serão aplicadas na impressão do documento.

• @font-face — Descreve o aspecto de uma fonte externa a ser baixada.

• @keyframes — Descreve o aspecto de etapas intermediárias em uma seqüência de animação CSS.

• @viewport ^{(Experimental)} — Descreve os aspectos da viewport para dispositivos de tela pequena.

• @counter-style — Define estilos de contador específicos que não fazem parte do conjunto de estilos predefinido.

• @font-feature-values (adiciona @swash, @ornaments, @annotation, @stylistic, @styleset e @character-variant) — Defina nomes comuns em variantes de fonte-variante para recurso ativado de forma diferente em OpenType (somente implementado no Gecko – Firefox)

Condições de regras de grupos

Assim como os valores das propriedades, cada regra tem uma sintaxe diferente. No entanto, vários deles podem ser agrupados em uma categoria especial denominada regras de grupo condicional.

Essas declarações compartilham uma sintaxe comum e cada uma delas pode incluir declarações aninhadas (ou conjuntos de regras ou regras aninhadas, além disso, todos transmitem um significado semântico comum) todos eles ligam algum tipo de condição que, a qualquer momento, é avaliada seja verdadeira ou falso.

Se a condição for avaliada como verdadeira, todas as declarações dentro do grupo serão aplicadas.

As condições de regras de grupos são definidas em CSS Conditionals Level 3, são elas:

• @media

• @supports

• @document (Level 4 do CSS)

A @import: importar outra folha de estilo na folha de estilo atual

A @charset: indica qual a codificação a folha de estilo irá usar

A @font-face: Usada para descrever o tipo de fonte que será utilizado

A !important: Indica que uma regra definida pelo usuário deve ter precedência sobre as folhas de estilo do autor.

Exemplos:

@import:

<style tyle="text/css">
   <!--
   @import "mystyle.css";
   or
   @import url("mystyle.css");
   .......other CSS rules .....
   -->
</style>

@charset:

<style tyle="text/css">
   <!--
   @charset "iso-8859-1"
   .......other CSS rules .....
   -->
</style>

@font-face

<style tyle="text/css">
   <!--
   @font-face {
      font-family: "Scarborough Light";
      src: url("http://www.font.site/s/scarbo-lt");
   }
   @font-face {
      font-family: Santiago;
      src: local ("Santiago"),
      url("http://www.font.site/s/santiago.tt")
      format("truetype");
      unicode-range: U+??,U+100-220;
      font-size: all;
      font-family: sans-serif;
   }
   -->
</style>

!important:

<html>
   <head>

      <style tyle="text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>

   </head>
   <body>
      <p>Tutorialspoint.com</>
   </body>
</html> 

Para exemplos e mais informações:

https://www.tutorialspoint.com/css/css_at_rules.htm