CSS @-Rules, an Overview

Post from September 11, 2017, filed under Web Development.

Did you know that @media and @import are the two most popular at-rules? (An educated guess, please correct me if you have data showing 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, as a distant cousin of the much larger HTML elements and CSS properties indexes, and 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);
  }

}

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

@viewport {
  width: 320px auto;
}

Missing here, and not, is @font-feature-values and related at-rules. It’s being worked on in the Fonts Module but, per one of the authors, at risk. I’ll extend this post once anything makes it to official standard (recommendation) 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 the Author

Jens Oliver Meiert is a developer (O’Reilly, W3C, ex-Google) and philosopher. He experiments with art and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Amazon. If you have any questions or concerns (or recommendations) about what he writes, leave a comment 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

Comments (Open)

What’s your point of view? Comment.

Leave a Comment