Jens Oliver Meiert

CSS @-Rules, an Overview

Post from September 11, 2017 (↻ September 17, 2020), filed under .

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.

Name Description Status Example
@charset […] artifact of the algorithm used to determine the fallback encoding for the stylesheet.” REC
@charset 'utf-8';
@counter-style […] allows authors to define a custom counter style.” CR
@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: ' ';
}
@font-face […] allows for linking to fonts that are automatically fetched and activated when needed.” REC
@font-face {
  font-family: Headline;
  src: local(Futura-Medium), url(fonts.svg#MyGeometricModern) format('svg');
}
@import […] allows users to import style rules from other style sheets.” REC
@import url('fineprint.css') print;
@keyframes […] specify the values for the animating properties at various points during the animation. The keyframes specify the behavior of one cycle of the animation; the animation may iterate one or more times.” WD
@keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

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

}
@media […] declare that sections apply to certain media types.” REC
@media screen and (color), projection and (color) {
  /* … */
}
@namespace […] declares a namespace prefix and associates it with a given namespace name.” REC
@namespace svg 'http://www.w3.org/2000/svg';
@page and sub-rules * […] specify various aspects of a page box, such as its dimensions, orientation, and margins.” WD
@page {

  color: red;

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

}
@property […] a custom property registration directly in a stylesheet without having to run any [JavaScript].” WD
@property --my-color {
  syntax: '‘;
  inherits: false;
  initial-value: #1d9053;
}
@scope “The @scope at-rule allows authors to create scoped style rules using CSS syntax.” WD
@scope div {

  span {
    color: blue;
  }

}

@scope section {

  span {
    color: orange;
  }

}
@supports [Test] whether the user agent supports CSS property:value pairs.“ CR
@supports ( display: flex ) {
  /* … */
}
@viewport […] a feature of a user agent for continuous media and used to establish the initial containing block for continuous media.” WD
@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.

Was this interesting? Feel free to tweet this, or to invite me for a coffee! Thank you!

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m a web developer (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:

Cover: CSS Optimization Basics.

Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. Available at Amazon, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

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

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2017 → CSS @-Rules, an Overview

Last update: September 17, 2020

“Work is love made visible.”