CSS At-Rules

CSS at-rules are a set of rules that provides CSS with instructions on how to apply rules to something specific. Each at-rule statement begins with an at sign (@), followed by an identifier and includes everything up to the next semi-colon (;), or the next CSS block, whichever comes first.
Below you will find a complete list of current CSS at-rules.

@charset

The @charset CSS at-rule is used to set the encoding of an external CSS stylesheet. This at-rule is useful when using non-ASCII characters in some CSS properties, like content. For an external style sheet, the browser sequentially looks at the following items to determine the encoding of the style sheet: 1. The encoding that the server gives; 2. @charset rule; 3. the charset attribute of the element (this attribute is deprecated, do not use it). The above list has a clearly defined hierarchy - the higher the item is, the higher its priority. If none of the items are found, the UTF-8 encoding will be assumed.

@counter-style

CSS initially defines a set of useful counter styles. However, while more styles have been added to this set of predefined styles over time, this system has proven to be too restrictive. The rule @counter-style addresses this shortcoming in an open way by allowing authors to define their own spinner styles when the predefined styles don't suit their needs.

@document

The @document CSS at-rule sets rules based on the address of the document. For example, if the addresses of the mobile and the main version of the site are different, then we can set our own style of elements for each version.

@font-face

The @font-face CSS at-rule allows you to define and use your own custom fonts, thus allowing you to extend the limited set of standard system fonts that are installed by default on a computer, and that browsers can access and use.

@font-feature-values

The rule @font-feature-values allows the use of a common name in a property font-variant-alternates for functions that are activated differently in OpenType. This can help simplify your CSS when using multiple fonts. The rule @font-feature-values can be used at the top level of your CSS or inside any conditional CSS rule.

@import

The @import CSS at-rule allows you to import the contents of a CSS file into the current style sheet. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

@keyframes

The @keyframes CSS at- rule sets keyframes when animating an element. The key frame is the properties of the element (transparency, color, position, etc.), which should be applied to the element at a given point in time. Thus, the animation is a smooth transition of style properties from one key frame to another. The browser takes over the calculation of intermediate values ​​between such frames.

@media

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

@namespace

The @namespace CSS at-rule declares a namespace prefix and associates it with a given namespace name. It can also be used to declare a (non-prefixed) default namespace.

@page

The @page CSS at-rule allows you to set the value of fields when printing a document or for pages whose media type is set to print. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

@supports

The @supports CSS at-rule allows you to check whether a browser supports this or that feature, and based on this create a set of style rules. It is permissible to create complex conditions using the logical operators not, and, or.

@viewport

The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).