CSS - @ Rules

In CSS, at-rules are special instructions or statements that begin with the "@" symbol. They are used to control or modify the behavior of the stylesheet and are typically used for tasks such as defining media queries, importing external stylesheets, or specifying font faces.

At-rules are a way to extend and enhance the capabilities of CSS beyond basic selectors and property-value pairs.

An at-rule begins with at (@) sign, followed by an identifier and further includes everything upto the next semicolon (;) or next CSS block.

Syntax

/* General structure */
@identifier (RULE);

Types of @ Rules

Regular

CSS provides different regular at-rules, based on the identifier and each has a different syntax.

@charset: Specifies the character encoding of an external stylesheet.
@import: Used to import an external CSS file into the current stylesheet.
@namespace: Used to declare and define XML namespaces within a CSS stylesheet.

Nested

A subset of nested statements that serve as both standalone style sheet statements and components within conditional group rules.

@media: Content of conditional group rule gets applied, if the device meets the criteria of the condition defined using media query.
@supports: Content of conditional group rule gets applied, if the given condition is met by the browser.
@page: Defines the layout of printed pages.
@font-face: Defines custom fonts to be used in a web page.
@keyframes: Defines the aspect of intermediate steps in a CSS animation sequence.
@counter-style: Defines the different custom counter styles that are not predefined.
@font-feature-values: Defines the common names in font-variant-alternates for feature activated in OpenType. It deals with the usage of alternate glyphs and these glyphs are defined in @font-feature-values
@property: Defines the usage of custom properties and variables.
@layer: Defines a layer and sets the order of precedence, when there are multiple cascade layers.

CSS @ Rules - @page Example

Here is an example of usage of @page:

<html>
<head>
<style>
   @page :first {
      margin-left: 80%;
      margin-top: 80%;
}

p {
   page-break-after: always;
}
</style>
</head>
<body>
   <p>Page One.</p>
   <p>Page Two.</p>
   <button>Print</button>

   <script>
      document.querySelector("button").addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS @ Rules - @keyframes Example

Here is an example of usage of @keyframes:

<html>
<head>
<style>
   p {
      animation-duration: 3s;
      animation-name: slidein;
   }

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

      to {
         margin-left: 0%;
         width: 100%;
      }
   }
</style>
</head>
<body>
   <p>
      The text appears from right to left
      </p>
</body>
</html>

CSS @ Rules - @property Example

Here is an example of usage of @property:

<html>
<head>
<style>
   @property --item-size {
      syntax: "<percentage>";
      inherits: true;
      initial-value: 40%;
   }

   .container {
      display: flex;
      height: 100px;
      border: 3px dotted black;

   /* set custom property values on parent */
      --item-size: 50%;
      --item-color: tomato;
      --item-border: 5px solid green;
   }

   /* use custom properties to set item size and background color */
   .item {
      width: var(--item-size);
      height: var(--item-size);
      border: var(--item-border);
      background-color: var(--item-color);
   }

   /* set custom property values on element itself */
   .second {
      --item-size: initial;
      --item-color: inherit;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="first item">First Item</div>
      <div class="second item">Second Item</div>      
   </div>

   <script>
      window.CSS.registerProperty({
      name: "--item-color",
      syntax: "<color>",
      inherits: false,
      initialValue: "peachpuff",
   });
   </script>
</body>
</html>

CSS @ Rules - Rule List

The table given below lists all the CSS @ Rules:

@Rule	Example
@charset	@charset "UTF-8";
@container	@container (width > 400px) { h1 {font-size: 2em;} }
@counter-style	@counter-style sample {}
@font-face	@font-face { font-family: "CustomFont"; src: url("customfont.woff2") format("woff2"); }
@font-feature-value	@font-feature-values "CustomFont" {@swash { fancy: 2; }}
@font-palette-values	@font-palette-values One { font-family: "Bungee Spice";}
@import	@import ur();
@keyframes	@keyframes sample-slide { from { transform: translateY(100%) } }
@layer	@layer sample-layer{ .margin-lg { margin: 5px; } }
@media	@media screen and (max-width: 600px) {}
@namespace	@namespace svg url();
@page	@page { size: 5in 6in; margin-left: 4in }
@property	@property sample-property { rules }
@supports	@supports (transform-origin: 10% 10%) {}

Print Page