CSS @-Rules, an Overview

Post from September 11, 2017 (↻ June 3, 2021), filed under Web Development.

Did you know that @media and @import are the two most popular at-rules? (Are they? It’s just an educated guess, please correct me otherwise.) But what are the other at-rules, how many are there? I felt motivated to rummage through a few specs and confirm what’s there. A brief overview, a distant cousin of the much larger HTML elements and CSS properties indexes, one I’ll likewise keep up-to-date.

@charset 'utf-8';

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: ' ';
}

@font-face {
  font-family: Headline;
  src: local(Futura-Medium), url(fonts.svg#MyGeometricModern) format('svg');
}

@import url('fineprint.css') print;

@keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  to {
    left: 100px;
    top: 100px;
  }

}

@media screen and (color), projection and (color) {
  /* … */
}

@namespace svg 'http://www.w3.org/2000/svg';

@page {

  color: red;

  @top-center {
    content: 'Page ' counter(page);
  }

}

@property --my-color {
  syntax: '‘;
  inherits: false;
  initial-value: #1d9053;
}

@scope div {

  span {
    color: blue;
  }

}

@scope section {

  span {
    color: orange;
  }

}

@supports ( display: flex ) {
  /* … */
}

@viewport {
  width: 320px auto;
}

Missing here, for now, are @font-feature-values and related at-rules. They’re being worked on in the Level 4 Fonts Module. I’ll extend this post once anything makes it to a more official status. @document was also at one point considered, then, but got dropped.

^* @page has 16 sub-rules, from @bottom-center to @top-right-corner. I decided against listing them in the table because that seemed to reduce, not increase comprehension—after all, they’re all related to @page, and all that differs is directionality. If you feel that these sub-rules are important to call out, or if you have suggestions around the matter, please email me.

About Me

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

• In Defense of Bad Luck
• The Cost of Frameworks, Illustrated

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Google Play Books, and Leanpub.

Looking for a way to comment? Comments have been disabled, unfortunately.