CSS @ rules

An at-rule is a CSS statement beginning 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.

@charset — Defines the character set used by the style sheet.

@charset "utf-8";

@import — Tells the CSS engine to include an external style sheet.

@namespace — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
a {}

/* This matches all SVG <a> elements */
svg|a {}

/* This matches both XHTML and SVG <a> elements */
*|a {}

@page — Describes the aspect of layout changes that will be applied when printing the document.

@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

@font-face — Describes the aspect of an external font to be downloaded.

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

@keyframes — Describes the aspect of intermediate steps in a CSS animation sequence.

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@viewport — Describes the aspects of the viewport for small screen devices.

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”

@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}

@viewport {
  orientation: landscape;
}

Genereally, we tend to add this line of code to our html source.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

It should be noted that, browsers on mobile devices usually set the default viewport width to 800px, 980px, or 1024px, which is larger than the real device width. Because of that, it would leads to a scroll bar on our devices, which is not a case we want to see.

Here is a website on which there are various kinds of devices’ ideal viewport. viewportsizes

On top of that, there are two articles deeply discussed about it, viewports, viewports2.

Conditional group rules

These statements share a common syntax and each of them can include nested statements—either rulesets or nested at-rules. Furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either true or false. If the condition evaluates to true, then all of the statements within the group will be applied.

@media:

The @media CSS at-rule can be used to apply styles based on the result of one or more media queries, which test a device’s type, specific characteristics, and environment.

/* Media query */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested media query */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

@supports:

The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    float: right;
  }
}

NOTE: In JavaScript, @supports can be accessed via the CSS object model interface CSSSupportsRule.

@document:

The @document CSS at-rule restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.

NOTE: This is an experimental technology. It is said that this rule is deferred to Level 4 of CSS Spec.

@document url("https://www.example.com/") {
  h1 {
    color: green;
  }
}

reference:

At-rule